Preserve search state (#58)

Implements #56
DREDGE-Mods · Jul 12, 2024 · b16ff94 · b16ff94
2 parents 4dad2f5 + 3dc3bdb
commit b16ff94
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 27 deletions.
diff --git a/src/components/content.tsx b/src/components/content.tsx
@@ -1,18 +1,24 @@
-import React, {useContext} from 'react'
+import React, {useContext, useState} from 'react'
 
 import '../scss/content.scss'
 
 import { Mods } from './mods/Mods'
 import {default as Settings} from './settings/settings'
 import {AppContext} from "./appcontext";
+import {SortDirection, SortField, SortType} from "./mods/SortField";
 
 export const Content = () => {
 
     const {state} = useContext(AppContext)
 
+    const [searchQuery, setSearchQuery] = useState("")
+    const [sortField, setSortField] = useState<SortType>(SortType.DEFAULT);
+    const [sortDirection, setSortDirection] = useState<SortDirection>(SortDirection.ASCENDING);
+
     const content_options = new Map(
         [
-            ["Mods", <Mods selected="Installed"/>],
+            ["Mods", <Mods selected="Installed" searchQuery={searchQuery} setSearchQuery={setSearchQuery} 
+                sortField={sortField} setSortField={setSortField} sortDirection={sortDirection} setSortDirection={setSortDirection}/>],
             ["Settings", <Settings path_correct ={state.pathCorrect}/>]
         ]
     )

diff --git a/src/components/mods/ModList.tsx b/src/components/mods/ModList.tsx
@@ -8,13 +8,11 @@ import {ModsNotFound} from "./ModsNotFound";
 import {Search} from "./SearchField";
 import {SortDirection, SortField, SortType} from "./SortField";
 
-export const ModList = (props: {selected: string}) => {
+export const ModList = (props: {selected: string, searchQuery: string, setSearchQuery: (selected: string) => void,
+    sortField : SortType, setSortField: (selected : SortType) => void, 
+    sortDirection : SortDirection, setSortDirection: (selected : SortDirection) => void
+}) => {
     const context = useContext(AppContext)
-
-    const [searchQuery, setSearchQuery] = useState("");
-    const [sortField, setSortField] = useState<SortType>(SortType.DEFAULT);
-    const [sortDirection, setSortDirection] = useState<SortDirection>(SortDirection.ASCENDING);
-
     const defaultSortField = SortType.MOD_NAME;
 
     // https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
@@ -26,16 +24,6 @@ export const ModList = (props: {selected: string}) => {
         debouncedForceUpdate()
     }, [])
 
-    useEffect(() => {
-        setSearchQuery("");
-        setSortField(SortType.DEFAULT);
-        setSortDirection(SortDirection.DESCENDING);
-    }, [props.selected]);
-
-    useEffect(() => {
-        console.log(sortField, sortDirection)
-    }, [sortField, sortDirection]);
-
     const uninstallMod = (path: string) => {
         context!.uninstallMod(path)
         debouncedForceUpdate()
@@ -68,7 +56,7 @@ export const ModList = (props: {selected: string}) => {
 
         query = query.toLowerCase();
 
-        if (searchQuery === "" || searchQuery === undefined) {
+        if (props.searchQuery === "" || props.searchQuery === undefined) {
             return mods;
         }
 
@@ -180,7 +168,7 @@ export const ModList = (props: {selected: string}) => {
         if (props.selected === "Installed") {
             // not keen on cyclic dependency of IEnabledStruct, but also want to avoid usage of 'any' in sortMod
             // so casting to exact same definition as IEnabledStruct to use
-            const filteredMods = filterSortMods(modList, searchQuery, sortField, sortDirection);
+            const filteredMods = filterSortMods(modList, props.searchQuery, props.sortField, props.sortDirection);
             installedList = filteredMods.map((mod) => {
                 return <InstalledMod
                     key={mod.ModGUID}
@@ -194,7 +182,7 @@ export const ModList = (props: {selected: string}) => {
         }
 
         if (props.selected === "Available") {
-            const filteredMods = filterSortMods(database!, searchQuery, sortField, sortDirection);
+            const filteredMods = filterSortMods(database!, props.searchQuery, props.sortField, props.sortDirection);
             availableList = filteredMods.map((mod) => {
                 if (!info!.has(mod.ModGUID)) {
                     return <AvailableMod
@@ -223,16 +211,16 @@ export const ModList = (props: {selected: string}) => {
             <ModsNotFound key={"mods-not-found"}
                           reload={debouncedForceUpdate}
                           installed={props.selected === "Installed"}
-                          query={searchQuery}
+                          query={props.searchQuery}
             />
         ]
     }
 
     return <>
         <div className={"mods-filter"}>
-            <Search defaultValue={searchQuery} updateValue={setSearchQuery} />
-            <SortField sortField={sortField} setSortField={setSortField}
-                       sortDirection={sortDirection} setSortDirection={setSortDirection} />
+            <Search defaultValue={props.searchQuery} updateValue={props.setSearchQuery} />
+            <SortField sortField={props.sortField} setSortField={props.setSortField}
+                       sortDirection={props.sortDirection} setSortDirection={props.setSortDirection} />
         </div>
         <div className="mods-list">
             {shownList}

diff --git a/src/components/mods/Mods.tsx b/src/components/mods/Mods.tsx
@@ -5,8 +5,13 @@ import '../../scss/mods/mods.scss'
 import { ModsTab } from "./ModsTab"
 import { ModList } from "./ModList"
 
+import {SortDirection, SortField, SortType} from "./SortField";
 
-export const Mods = (props: {selected: string}) => {
+
+export const Mods = (props: {selected: string, searchQuery: string, setSearchQuery: (selected: string) => void,
+    sortField : SortType, setSortField: (selected : SortType) => void, 
+    sortDirection : SortDirection, setSortDirection: (selected : SortDirection) => void
+}) => {
     const [selectedTab, setSelectedTab] = useState(props.selected)
 
     return <div className="mods-container">
@@ -16,7 +21,8 @@ export const Mods = (props: {selected: string}) => {
             <div className="mods-filler"/>
         </div>
         <div className="mods-list-container">
-            <ModList selected={selectedTab}/>
+            <ModList selected={selectedTab} searchQuery={props.searchQuery} setSearchQuery={props.setSearchQuery}
+                sortField={props.sortField} setSortField={props.setSortField} sortDirection={props.sortDirection} setSortDirection={props.setSortDirection}/>
         </div>
     </div>
 }
diff --git a/src/components/mods/SearchField.tsx b/src/components/mods/SearchField.tsx
@@ -26,5 +26,12 @@ export const Search = (props: ISearchProps) => {
                onChange={(e) => {
             setText(e.currentTarget.value);
         }}/>
+        { text === "" ? "" :
+        <button className={"cancel"} onClick={() => {
+            setText("");
+        }}>
+            <i className={"fa-solid fa-x fa-xs"}></i>
+        </button>
+        }
     </label>
 }