show installed mods

src/ui/components/mods/ModList.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { getInstalledMods, getMods, ModData } from '../../../utils/gamebanana'
+import { getInstalledMods, getMods, ModData, PartialModData } from '../../../utils/gamebanana'
 import { LoadingCircle } from './LoadingCircle'
 
 import './ModList.css'
@@ -15,7 +15,7 @@ interface IState {
   installedList:
     | {
         path: string
-        info: unknown
+        info: ModData | PartialModData
       }[]
     | null
 }
@@ -34,9 +34,23 @@ export class ModList extends React.Component<IProps, IState> {
 
   async componentDidMount() {
     if (this.props.mode === 'installed') {
-      const installedMods = await getInstalledMods()
+      const installedMods = (await getInstalledMods()).map((mod) => {
+        // Check if it's a partial mod, and if so, fill in some pseudo-data
+        if (!('id' in mod.info)) {
+          const newInfo = mod.info as PartialModData
 
-      console.log(installedMods)
+          newInfo.images = []
+          newInfo.submitter = { name: 'Unknown' }
+          newInfo.likes = 0
+          newInfo.views = 0
+
+          mod.info = newInfo
+
+          return mod
+        }
+
+        return mod
+      })
 
       this.setState({
         installedList: installedMods,
@@ -63,7 +77,9 @@ export class ModList extends React.Component<IProps, IState> {
         (this.state.installedList && this.props.mode === 'installed') ? (
           <div className="ModListInner">
             {this.props.mode === 'installed'
-              ? this.state.installedList?.map((mod) => <></>)
+              ? this.state.installedList?.map((mod) => (
+                  <ModTile path={mod.path} mod={mod.info} key={mod.info.name} onClick={this.downloadMod} />
+                ))
               : this.state.modList?.map((mod: ModData) => (
                   <ModTile mod={mod} key={mod.id} onClick={this.downloadMod} />
                 ))}