Mod browser searching

src/ui/components/mods/ModList.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { getConfigOption } from '../../../utils/configuration'
-import { getInstalledMods, getMods, ModData, PartialModData } from '../../../utils/gamebanana'
+import { getAllMods, getInstalledMods, getMods, ModData, PartialModData } from '../../../utils/gamebanana'
 import { LoadingCircle } from './LoadingCircle'
 
 import './ModList.css'
@@ -9,6 +9,7 @@ import { ModTile } from './ModTile'
 interface IProps {
   mode: string
   page: number
+  search: string
   addDownload: (mod: ModData) => void
 }
 
@@ -16,11 +17,11 @@ interface IState {
   horny: boolean
   modList: ModData[] | null
   installedList:
-    | {
-        path: string
-        info: ModData | PartialModData
-      }[]
-    | null
+  | {
+    path: string
+    info: ModData | PartialModData
+  }[]
+  | null
 }
 
 export class ModList extends React.Component<IProps, IState> {
@@ -63,7 +64,15 @@ export class ModList extends React.Component<IProps, IState> {
       return
     }
 
-    const mods = await getMods(this.props.mode, this.props.page)
+    let mods: ModData[]
+
+    if (!(this.props.search == '')) {
+      // idk the api so just filter all mods to search
+      mods = (await getAllMods(this.props.mode)).filter(mod => mod.name.toLowerCase().includes(this.props.search.toLowerCase()))
+    } else {
+      mods = await getMods(this.props.mode, this.props.page)
+    }
+
     const horny = await getConfigOption('horny_mode')
 
     this.setState({
@@ -80,21 +89,21 @@ export class ModList extends React.Component<IProps, IState> {
     return (
       <div className="ModList">
         {(this.state.modList && this.props.mode !== 'installed') ||
-        (this.state.installedList && this.props.mode === 'installed') ? (
+          (this.state.installedList && this.props.mode === 'installed') ? (
           <div className="ModListInner">
             {this.props.mode === 'installed'
               ? this.state.installedList?.map((mod) => (
-                  <ModTile
-                    horny={this.state.horny}
-                    path={mod.path}
-                    mod={mod.info}
-                    key={mod.info.name}
-                    onClick={this.downloadMod}
-                  />
-                ))
+                <ModTile
+                  horny={this.state.horny}
+                  path={mod.path}
+                  mod={mod.info}
+                  key={mod.info.name}
+                  onClick={this.downloadMod}
+                />
+              ))
               : this.state.modList?.map((mod: ModData) => (
-                  <ModTile horny={this.state.horny} mod={mod} key={mod.id} onClick={this.downloadMod} />
-                ))}
+                <ModTile horny={this.state.horny} mod={mod} key={mod.id} onClick={this.downloadMod} />
+              ))}
           </div>
         ) : (
           <LoadingCircle />

src/ui/components/mods/ModPages.css

@@ -47,3 +47,20 @@
   font-weight: bold;
   color: #fff;
 }
+
+.ModPagesPage input {
+  text-align: center;
+  padding: 3px;
+  border-radius: 3px;
+  height: 18px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+  background: rgba(77, 77, 77, 0.6);
+}
+
+.ModPagesPage .TextInputWrapper {
+  background: rgba(77, 77, 77, 0.6);
+  z-index: -1;
+  display: inline-block;
+}