diff --git a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js index bb43a1de..01c59a9f 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js +++ b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js @@ -1,10 +1,18 @@ import React from "react"; -import { Box, Text, useColorModeValue, VisuallyHidden } from "@chakra-ui/react"; +import { + Alert, + AlertIcon, + Box, + Text, + useColorModeValue, + VisuallyHidden, +} from "@chakra-ui/react"; import Item, { ItemListContainer, ItemListSkeleton } from "./Item"; import PaginationToolbar from "../components/PaginationToolbar"; import { useSearchResults } from "./useSearchResults"; import { MajorErrorMessage } from "../util"; +import { useAltStylesForSpecies } from "../loaders/alt-styles"; export const SEARCH_PER_PAGE = 30; @@ -161,6 +169,7 @@ function SearchResults({ size="sm" /> + {items.map((item, index) => ( + + + {message} + + + ); +} + +function getSearchNCStylesMessage(query, altStyles) { + const seriesMainNames = [ + ...new Set((altStyles ?? []).map((as) => as.seriesMainName)), + ]; + const queryWords = query.value.toLowerCase().split(/\s+/); + + if (queryWords.includes("token")) { + return ( + <> + If you're looking for NC Styles, check the emotion picker below the pet + preview! + + ); + } + + // NOTE: This won't work on multi-word series names, of which there are + // currently none. + const seriesWord = seriesMainNames.find((n) => + queryWords.includes(n.toLowerCase()), + ); + if (seriesWord != null) { + return ( + <> + If you're looking for NC Styles, check the emotion picker below the pet + preview! + + ); + } +} + /** * serializeQuery stably converts a search query object to a string, for easier * JS comparison.