mod tiles and nsfw blurring

src/ui/components/mods/ModList.css

@@ -4,3 +4,16 @@
 
   background-color: rgba(106, 105, 106, 0.6);
 }
+
+.ModListInner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  overflow-y: auto;
+}

src/ui/components/mods/ModList.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import { getMods } from '../../../utils/gamebanana'
+import { getMods, ModData } from '../../../utils/gamebanana'
 import { LoadingCircle } from './LoadingCircle'
 
 import './ModList.css'
+import { ModTile } from './ModTile'
 
 interface IProps {
   mode: string
 }
 
 interface IState {
-  modList: string[]
+  modList: ModData[]
 }
 
 export class ModList extends React.Component<IProps, IState> {
@@ -22,13 +23,23 @@ export class ModList extends React.Component<IProps, IState> {
 
     const mods = await getMods(this.props.mode)
 
-    console.log(mods)
+    this.setState({
+      modList: mods,
+    })
   }
 
   render() {
     return (
       <div className="ModList">
-        <LoadingCircle />
+        {this.state && this.state.modList ? (
+          <div className="ModListInner">
+            {this.state.modList.map((mod: ModData) => (
+              <ModTile mod={mod} key={mod.id} />
+            ))}
+          </div>
+        ) : (
+          <LoadingCircle />
+        )}
       </div>
     )
   }

src/ui/components/mods/ModTile.css

@@ -0,0 +1,13 @@
+.ModListItem {
+  width: 20%;
+}
+
+.ModListItem img {
+  object-fit: cover;
+  width: 80%;
+  height: 100px;
+}
+
+img.nsfw {
+  filter: blur(16px);
+}

src/ui/components/mods/ModTile.tsx

@@ -1 +1,26 @@
-export {}
+import React from 'react'
+import { ModData } from '../../../utils/gamebanana'
+
+import './ModTile.css'
+
+interface IProps {
+  mod: ModData
+}
+
+export class ModTile extends React.Component<IProps, never> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    const { mod } = this.props
+
+    return (
+      <div className="ModListItem">
+        <span className="ModName">{mod.name}</span>
+        <img src={mod.images[0]} className={mod.nsfw ? 'nsfw' : ''} />
+        <div className="ModInner"></div>
+      </div>
+    )
+  }
+}

src/utils/gamebanana.ts

@@ -62,6 +62,21 @@ export interface RootCategory {
   _sIconUrl: string
 }
 
+export interface ModData {
+  id: number
+  name: string
+  images: string[]
+  dateadded: number
+  submitter: {
+    name: string
+    url: string
+  }
+  nsfw: boolean
+  likes: number
+  views: number
+  type: string
+}
+
 export async function getMods(mode: string) {
   const resp = JSON.parse(
     await invoke('list_submissions', {
@@ -75,25 +90,28 @@ export async function getMods(mode: string) {
 export async function formatGamebananaData(obj: GamebananaResponse[]) {
   if (!obj) return []
 
-  return obj.map((itm) => {
-    const img = itm?._aPreviewMedia?._aImages
+  return obj
+    .map((itm) => {
+      const img = itm?._aPreviewMedia?._aImages
 
-    return {
-      id: itm._idRow,
-      name: itm._sName,
-      images: img
-        ? img.map((i) => {
-            return i._sBaseUrl + i._sFile
-          })
-        : [],
-      dateadded: itm._tsDateAdded,
-      submitter: {
-        name: itm._aSubmitter._sName,
-        url: itm._aSubmitter._sProfileUrl,
-      },
-      nsfw: itm._bIsNsfw,
-      likes: itm?._nLikeCount || 0,
-      views: itm?._nViewCount || 0,
-    }
-  })
+      return {
+        id: itm._idRow,
+        name: itm._sName,
+        images: img
+          ? img.map((i) => {
+              return i._sBaseUrl + '/' + i._sFile220
+            })
+          : [],
+        dateadded: itm._tsDateAdded,
+        submitter: {
+          name: itm._aSubmitter._sName,
+          url: itm._aSubmitter._sProfileUrl,
+        },
+        nsfw: itm._bIsNsfw,
+        likes: itm?._nLikeCount || 0,
+        views: itm?._nViewCount || 0,
+        type: itm._sSingularTitle,
+      } as ModData
+    })
+    .filter((itm) => itm.type === 'Mod')
 }