diff --git a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx index e3626d46cf..1d970b75e0 100644 --- a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx +++ b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useRef, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import Input from "../Input"; import { faSearch } from "@fortawesome/pro-solid-svg-icons"; import MasonryGrid from "../MasonryGrid/MasonryGrid"; @@ -9,6 +9,7 @@ import { SearchWeights } from "@storyteller/components/src/api/weights/SearchWei import debounce from "lodash.debounce"; import WeightsCards from "../Card/WeightsCards"; import LoadingSpinner from "../LoadingSpinner"; +import useSearcherStore from "hooks/useSearcherStore"; interface SearcherProps { type?: "page" | "modal"; @@ -16,6 +17,7 @@ interface SearcherProps { weightType?: string; onResultSelect?: () => void; weightTypeFilter?: any; + searcherKey: string; } export default function Searcher({ @@ -24,18 +26,27 @@ export default function Searcher({ weightType = "all", onResultSelect, weightTypeFilter, + searcherKey, }: SearcherProps) { const gridContainerRef = useRef(null); - const [searchTerm, setSearchTerm] = useState(""); + const { searchTerm, setSearchTerm } = useSearcherStore(); const [foundWeights, setFoundWeights] = useState([]); const [isSearching, setIsSearching] = useState(false); const [searchCompleted, setSearchCompleted] = useState(0); const bookmarks = useBookmarks(); const ratings = useRatings(); + useEffect(() => { + if (searchTerm[searcherKey]) { + setSearchTerm(searcherKey, searchTerm[searcherKey]); + } + doSearch(searchTerm[searcherKey]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const handleInputChange = (e: any) => { const newValue = e.target.value; - setSearchTerm(newValue); + setSearchTerm(searcherKey, newValue); debouncedDoSearch(newValue); }; @@ -79,7 +90,7 @@ export default function Searcher({ @@ -92,11 +103,7 @@ export default function Searcher({ {isSearching ? ( ) : ( - console.log("Layout complete!")} - > + {dataType === "weights" && foundWeights.map((data: any, key: number) => { let props = { diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss index ff2fdbb510..8c014b8048 100644 --- a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss +++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss @@ -17,7 +17,7 @@ white-space: nowrap; justify-content: center; align-items: center; - min-height: 3rem; + min-height: 46.5px; padding: 0.75rem; transition: 0.1s background-color ease-in-out; font-size: 14px; diff --git a/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx b/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx index 7ab3beec56..33e0430a29 100644 --- a/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx +++ b/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx @@ -1,76 +1,106 @@ -import React, { useState } from "react"; +import React, { useState, memo } from "react"; import Searcher from "../Searcher"; import Modal from "../Modal"; import NonRouteTabs from "../Tabs/NonRouteTabs"; import Input from "../Input"; import Button from "../Button"; import useToken from "hooks/useToken"; +import { faTrash } from "@fortawesome/free-solid-svg-icons"; interface SelectSearcherProps { label?: string; weightTypeFilter?: string; } -export default function SelectSearcher({ - label, - weightTypeFilter, -}: SelectSearcherProps) { - const [isModalOpen, setIsModalOpen] = useState(false); - const { weightTitle } = useToken(); +const SelectSearcher = memo( + ({ label, weightTypeFilter }: SelectSearcherProps) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const { weightTitle, setWeightTitle } = useToken(); - const openModal = () => { - setIsModalOpen(true); - }; + const openModal = () => { + setIsModalOpen(true); + }; - const closeModal = () => { - setIsModalOpen(false); - }; + const closeModal = () => { + setIsModalOpen(false); + }; - const searchTabs = [ - { - label: "All LoRA Weights", - content: ( - - ), - padding: true, - }, - { - label: "Bookmarked", - content: , - padding: true, - }, - ]; - return ( - <> -
- {label && } + const handleRemove = () => { + setWeightTitle && setWeightTitle(""); + }; -
- -
-
+ ), + padding: true, + }, + { + label: "Bookmarked", + content: ( + <> + +

+ NEEDS USER BOOKMARK ELASTIC SEARCH HERE +

+ + ), + padding: true, + }, + ]; + return ( + <> +
+ {label && } - } - showButtons={false} - padding={false} - large={true} - position="top" - mobileFullscreen={true} - /> - - ); -} +
+ +
+
+ + } + showButtons={false} + padding={false} + large={true} + position="top" + mobileFullscreen={true} + /> + + ); + } +); + +export default SelectSearcher; diff --git a/packages/fakeyou.com/src/hooks/useSearcherStore/index.ts b/packages/fakeyou.com/src/hooks/useSearcherStore/index.ts new file mode 100644 index 0000000000..f99673f757 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSearcherStore/index.ts @@ -0,0 +1 @@ +export { default } from "./useSearcherStore"; diff --git a/packages/fakeyou.com/src/hooks/useSearcherStore/useSearcherStore.tsx b/packages/fakeyou.com/src/hooks/useSearcherStore/useSearcherStore.tsx new file mode 100644 index 0000000000..af8076118d --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSearcherStore/useSearcherStore.tsx @@ -0,0 +1,21 @@ +import { create } from "zustand"; + +interface SearcherState { + searchTerm: { [searcherKey: string]: string }; +} + +interface SearcherActions { + setSearchTerm: (searcherKey: string, value: string) => void; +} + +type SearcherStore = SearcherState & SearcherActions; + +const useSearcherStore = create(set => ({ + searchTerm: {}, + setSearchTerm: (searcherKey, value) => + set((state: SearcherState) => ({ + searchTerm: { ...state.searchTerm, [searcherKey]: value }, + })), +})); + +export default useSearcherStore; diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index fc168d03dd..090b514b7f 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -431,7 +431,7 @@ styles with important tags: .form-select { border-width: 1px; border-color: $white; - padding: 11px 0.75rem; + padding: 10.25px 0.75rem; &:focus { border-color: $primary; @@ -1719,7 +1719,7 @@ textarea { } .fy-studio-frame { - border-radius: .5rem; + border-radius: 0.5rem; width: 100%; height: 500px; } diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 5800f237d7..71b7fbdc47 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -770,16 +770,16 @@ class PageContainer extends React.Component< - - + + - -
- -
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx index 151eea5f19..803b637b7a 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx @@ -116,13 +116,20 @@ export default function WeightPage({ ); case WeightCategory.VC: return ( - + <> + + + + ); case WeightCategory.ZS: