v0.1.2 (#59)

- Save search/sort state between tabs - Added a clear button to the search bar - Added GitHub, website, and Discord links on the settings tab - Display warning message if Winch hasn't run yet - Made "Install" buttons more visible - Load Winch settings more reliably
DREDGE-Mods · Jul 16, 2024 · 3aedefa · 3aedefa
2 parents 41f923a + 11c0d66
commit 3aedefa
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 66 deletions.
diff --git a/src/components/appcontext.tsx b/src/components/appcontext.tsx
@@ -176,11 +176,13 @@ export const AppProvider = (props: React.PropsWithChildren) => {
     }
 
     const updateWinchConfig = () => {
-        invoke("update_winch_config", {
-            "json": JSON.stringify(state.winchConfig, null, 2),
-            dredgePath: state.dredgePath})
-            .then(reloadMods)
-            .catch(genericHandleError);
+        if (state.winchConfig != null) {
+            invoke("update_winch_config", {
+                "json": JSON.stringify(state.winchConfig, null, 2),
+                dredgePath: state.dredgePath})
+                .then(reloadMods)
+                .catch(genericHandleError);
+        }
     }
 
     // fetch dredge path on mount

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/AvailableMod.tsx b/src/components/mods/AvailableMod.tsx
@@ -21,15 +21,23 @@ export const AvailableMod = (props: IModProps) => {
     const [ installed, setInstalled] = useState(false);
 
     let installText = "Install"
+    // It'll only show on the Available page as "installed" as its actively installing
     if (installed) {
-        installText = "Installed"
+        installText = "Installing..."
     }
 
     return <div className={"mods-available-box"}>
         <PrimaryContainer>
             <PrimaryDetails data={props.data}/>
             <Downloads data={props.data}/>
             <Version data={props.data}/>
+            <InteractButtons>
+                <button className="interact-button" onClick={() => {
+                    props.installMod!(props.data)
+                    setInstalled(true)
+                }}>{installText}
+                </button>
+            </InteractButtons>
             <PrimaryExpand data={props.data} swapExpand={swapExpanded} expanded={expanded}/>
         </PrimaryContainer>
         <PrimaryContainer>
@@ -38,13 +46,7 @@ export const AvailableMod = (props: IModProps) => {
 
         <SecondaryContainer expanded={expanded}>
             <SecondaryInteract>
-                <InteractButtons>
-                    <button className="interact-button" onClick={() => {
-                        props.installMod!(props.data)
-                        setInstalled(true)
-                    }}>{installText}
-                    </button>
-                </InteractButtons>
+                <div className="w-100"></div>
                 <InteractIcons data={props.data} />
             </SecondaryInteract>
         </SecondaryContainer>

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>
 }
diff --git a/src/components/settings/settings.tsx b/src/components/settings/settings.tsx
@@ -14,8 +14,17 @@ export const Settings = (props: {path_correct?: boolean}) => {
 
     const context = useContext(AppContext);
 
+    const [shouldCheckWinchConfig, setshouldCheckWinchConfig] = useState(true);
     const [path, setPath] = useState("");
 
+    // Opening the settings tab will try reloading everything: Checks if winch config has been setup by the modloader yet
+    useEffect(() => {
+        if (context.state.winchConfig == null && shouldCheckWinchConfig) {
+            context?.reloadMods()
+        }
+        setshouldCheckWinchConfig(false);
+    });
+
     // Fetch DREDGE path from context; only called once on load
     useEffect(() => {
         if (path === "") {
@@ -60,7 +69,7 @@ export const Settings = (props: {path_correct?: boolean}) => {
         context?.updateWinchConfig()
     }
 
-    const pathWarning = props.path_correct ? "" : <div className="warning">Invalid DREDGE path</div>
+    const pathWarning = props.path_correct ? "" : <div className="error">Invalid DREDGE path</div>
 
     const dredgeFolderButton = !props.path_correct ? "" : <>
         <div className="d-flex w-100 justify-content-end">
@@ -109,7 +118,6 @@ export const Settings = (props: {path_correct?: boolean}) => {
                     onChange={(e) => {
                         const value = e.target.value;
                         setPath(value);
-
                     }}
                     value={path}
                 />
@@ -118,10 +126,25 @@ export const Settings = (props: {path_correct?: boolean}) => {
             {pathWarning}
             {dredgeFolderButton}
             <br/>
-            {config ? configOptions : ""}
+            {config ? configOptions : <span>
+                <i className="fa-solid fa-triangle-exclamation warning"></i>
+                <i> Run DREDGE with the Winch modloader at least once to enable settings.</i>
+                </span>}
 
             <div className="flex-fill"></div>
 
+            <div className="settings-links">
+                <a href="https://dredgemods.com/" title="https://dredgemods.com/" target="_blank">
+                    <i className="fa-solid fa-globe"></i>
+                </a>
+                <a href="https://github.com/DREDGE-Mods/DredgeModManager" title="https://github.com/DREDGE-Mods/DredgeModManager" target="_blank">
+                    <i className="fa-brands">&#xf09b;</i>
+                </a>
+                <a href="https://discord.gg/qFqPuTUAmD" title="DREDGE Modding Discord" target="_blank">
+                    <i className="fa-brands fa-discord"></i>
+                </a>
+            </div>
+
             <div>
                 Dredge Mod Manager version {appVersion}
             </div>

diff --git a/src/scss/mods/modsAvailableInstalled.scss b/src/scss/mods/modsAvailableInstalled.scss
@@ -8,6 +8,31 @@
 
   position: relative;
 
+  .interact-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    margin-right: auto;
+  }
+
+  .interact-button {
+    color: $text-light-primary;
+    font-weight: 500;
+    border: 2px solid $bg-primary-tint;
+    border-radius: 5px;
+    width: 90px;
+    height: 32px;
+    margin-left: 2px;
+    margin-right: 2px;
+
+    transition: background-color 100ms ease,
+    border-color 100ms ease;
+
+    &:hover {
+      background-color: $bg-primary-tint;
+    }
+  }
+
   .box-primary-container {
     padding: 0 10px;
     display: flex;
@@ -193,28 +218,6 @@
       gap: 10px;
       margin: 0 10px 5px 10px;
 
-      .interact-buttons {
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-        margin-right: auto;
-      }
-
-      .interact-button {
-        color: $text-light-primary;
-        font-weight: 500;
-        border: 2px solid $bg-primary-tint;
-        border-radius: 5px;
-        width: 90px;
-
-        transition: background-color 100ms ease,
-        border-color 100ms ease;
-
-        &:hover {
-          background-color: $bg-primary-tint;
-        }
-      }
-
       .interact-icons {
         display: flex;
         flex-direction: row-reverse;

diff --git a/src/scss/settings.scss b/src/scss/settings.scss
@@ -24,6 +24,22 @@
         background: $bg-primary;
     }
 
+    .settings-links
+    {
+        font-size: 30px;
+        i {
+            width: 32px;
+        }
+        a {
+            margin-left: 4px;
+            margin-right: 4px;
+            color: $text-light-primary;
+            text-align: center;
+            &:hover {
+              color: $text-light-secondary;
+            }
+        }
+    }
 
     .setting {
         display: flex;
@@ -71,7 +87,13 @@
         .warning {
             font-weight: 600;
             font-size: 1.2em;
-            color: $interact-red;
+            color: yellow;
+        }
+
+        .error {
+            font-weight: 600;
+            font-size: 1.2em;
+            color: red;
         }
     }
 }