downloading (almost) and only show when migoto is set

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>