downloading (almost) and only show when migoto is set

src/ui/Main.tsx

@@ -35,7 +35,7 @@ interface IState {
   miniDownloadsOpen: boolean
   downloadsOpen: boolean
   gameDownloadsOpen: boolean
-  moddingOpen: boolean
+  migotoSet: boolean
 }
 
 export class Main extends React.Component<IProps, IState> {
@@ -47,7 +47,7 @@ export class Main extends React.Component<IProps, IState> {
       miniDownloadsOpen: false,
       downloadsOpen: false,
       gameDownloadsOpen: false,
-      moddingOpen: false,
+      migotoSet: false,
     }
 
     listen('lang_error', (payload) => {
@@ -94,6 +94,10 @@ export class Main extends React.Component<IProps, IState> {
   async componentDidMount() {
     const cert_generated = await getConfigOption('cert_generated')
 
+    this.setState({
+      migotoSet: !!(await getConfigOption('migoto_path')),
+    })
+
     if (!cert_generated) {
       // Generate the certificate
       await invoke('generate_ca_files', {
@@ -129,17 +133,19 @@ export class Main extends React.Component<IProps, IState> {
           >
             <img src={downBtn} alt="downloads" />
           </div>
-          <div
+          {this.state.migotoSet && (
-            id="modsBtn"
+            <div
-            onClick={() => {
+              id="modsBtn"
-              // Create and dispatch a custom "openMods" event
+              onClick={() => {
-              const event = new CustomEvent('changePage', { detail: 'modding' })
+                // Create and dispatch a custom "openMods" event
-              window.dispatchEvent(event)
+                const event = new CustomEvent('changePage', { detail: 'modding' })
-            }}
+                window.dispatchEvent(event)
-            className="TopButton"
+              }}
-          >
+              className="TopButton"
-            <img src={wrenchBtn} alt="mods" />
+            >
-          </div>
+              <img src={wrenchBtn} alt="mods" />
+            </div>
+          )}
           {/* <div id="gameBtn" className="TopButton" onClick={() => this.setState({ gameDownloadsOpen: !this.state.gameDownloadsOpen })}>
             <img src={gameBtn} alt="game" />
           </div> */}

src/ui/Mods.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import DownloadHandler from '../utils/download'
+import { ModData } from '../utils/gamebanana'
 import { ModHeader } from './components/mods/ModHeader'
 import { ModList } from './components/mods/ModList'
 import TopBar from './components/TopBar'
@@ -46,6 +47,10 @@ export class Mods extends React.Component<IProps, IState> {
     return
   }
 
+  async addDownload(mod: ModData) {
+    console.log('Downloading:', mod.name)
+  }
+
   async setCategory(value: string) {
     this.setState({
       category: value,
@@ -59,7 +64,7 @@ export class Mods extends React.Component<IProps, IState> {
 
         <ModHeader onChange={this.setCategory} headers={headers} defaultHeader={'hot'} />
 
-        <ModList mode={this.state.category} />
+        <ModList mode={this.state.category} addDownload={this.addDownload} />
       </div>
     )
   }

src/ui/components/mods/ModList.tsx

@@ -7,6 +7,7 @@ import { ModTile } from './ModTile'
 
 interface IProps {
   mode: string
+  addDownload: (mod: ModData) => void
 }
 
 interface IState {
@@ -16,6 +17,8 @@ interface IState {
 export class ModList extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
+
+    this.downloadMod = this.downloadMod.bind(this)
   }
 
   async componentDidMount() {
@@ -28,13 +31,17 @@ export class ModList extends React.Component<IProps, IState> {
     })
   }
 
+  async downloadMod(mod: ModData) {
+    this.props.addDownload(mod)
+  }
+
   render() {
     return (
       <div className="ModList">
         {this.state && this.state.modList ? (
           <div className="ModListInner">
             {this.state.modList.map((mod: ModData) => (
-              <ModTile mod={mod} key={mod.id} />
+              <ModTile mod={mod} key={mod.id} onClick={this.downloadMod} />
             ))}
           </div>
         ) : (

src/ui/components/mods/ModTile.tsx

@@ -8,6 +8,7 @@ import Download from '../../../resources/icons/download.svg'
 
 interface IProps {
   mod: ModData
+  onClick: (mod: ModData) => void
 }
 
 interface IState {
@@ -31,6 +32,7 @@ export class ModTile extends React.Component<IProps, IState> {
         className="ModListItem"
         onMouseEnter={() => this.setState({ hover: true })}
         onMouseLeave={() => this.setState({ hover: false })}
+        onClick={() => this.props.onClick(mod)}
       >
         <span className="ModName">{mod.name}</span>
         <span className="ModAuthor">{mod.submitter.name}</span>

src/utils/mods.ts

@@ -0,0 +1 @@
+export {}