mod enabling and disabling

src/ui/Mods.tsx

@@ -36,6 +36,11 @@ const headers = [
   },
 ]
 
+/**
+ * Mods currently install into folder labelled with their GB ID
+ *
+ * @TODO Categorizaiton/sorting (by likes, views, etc)
+ */
 export class Mods extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
@@ -49,10 +54,6 @@ export class Mods extends React.Component<IProps, IState> {
     this.addDownload = this.addDownload.bind(this)
   }
 
-  async componentDidMount() {
-    return
-  }
-
   async addDownload(mod: ModData) {
     const modFolder = await getModsFolder()
     const modPath = `${modFolder}${mod.id}.zip`
@@ -101,7 +102,7 @@ export class Mods extends React.Component<IProps, IState> {
         </TopBar>
 
         <div className="TopDownloads">
-          <ProgressBar downloadManager={this.props.downloadHandler} />
+          <ProgressBar downloadManager={this.props.downloadHandler} withStats={false} />
         </div>
 
         <ModHeader onChange={this.setCategory} headers={headers} defaultHeader={'ripe'} />

src/ui/components/common/Checkbox.tsx

@@ -35,7 +35,6 @@ export default class Checkbox extends React.Component<IProps, IState> {
 
   handleChange = () => {
     this.setState({ checked: !this.state.checked })
-    console.log(this.props.onChange)
     this.props.onChange()
   }
 

src/ui/components/common/MainProgressBar.tsx

@@ -71,7 +71,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
           ></div>
         </div>
 
-        {this.props.withStats && (
+        {(this.props.withStats === undefined || this.props.withStats) && (
           <div className="MainProgressText">
             <Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed})
             <br />

src/ui/components/mods/ModTile.tsx

@@ -8,6 +8,7 @@ import Download from '../../../resources/icons/download.svg'
 import Folder from '../../../resources/icons/folder.svg'
 import { shell } from '@tauri-apps/api'
 import Checkbox from '../common/Checkbox'
+import { disableMod, enableMod, modIsEnabled } from '../../../utils/mods'
 
 interface IProps {
   mod: ModData | PartialModData
@@ -33,15 +34,51 @@ export class ModTile extends React.Component<IProps, IState> {
     this.toggleMod = this.toggleMod.bind(this)
   }
 
+  getModFolderName() {
+    if (!('id' in this.props.mod)) {
+      return this.props.mod.name.includes('DISABLED_') ? this.props.mod.name.split('DISABLED_')[1] : this.props.mod.name
+    }
+
+    return String(this.props.mod.id)
+  }
+
+  async componentDidMount() {
+    if (!('id' in this.props.mod)) {
+      // Partial mod
+      this.setState({
+        modEnabled: await modIsEnabled(this.props.mod.name),
+      })
+
+      console.log(this.props.mod.name + ' ' + this.state.modEnabled)
+
+      return
+    }
+
+    console.log(this.props.mod.name + ' ' + this.state.modEnabled)
+
+    this.setState({
+      modEnabled: await modIsEnabled(String(this.props.mod.id)),
+    })
+  }
+
   async openInExplorer() {
     if (this.props.path) shell.open(this.props.path)
   }
 
   toggleMod() {
-    console.log('Mod toggled')
+    this.setState(
-    this.setState({
+      {
-      modEnabled: !this.state.modEnabled,
+        modEnabled: !this.state.modEnabled,
-    })
+      },
+      () => {
+        if (this.state.modEnabled) {
+          enableMod(String(this.getModFolderName()))
+          return
+        }
+
+        disableMod(String(this.getModFolderName()))
+      }
+    )
   }
 
   render() {
@@ -60,7 +97,7 @@ export class ModTile extends React.Component<IProps, IState> {
           },
         })}
       >
-        <span className="ModName">{mod.name}</span>
+        <span className="ModName">{mod.name.includes('DISABLED_') ? mod.name.split('DISABLED_')[1] : mod.name}</span>
         <span className="ModAuthor">{mod.submitter.name}</span>
         <div className="ModImage">
           {this.state.hover &&

src/utils/mods.ts

@@ -1,3 +1,4 @@
+import { invoke } from '@tauri-apps/api'
 import { getConfigOption } from './configuration'
 
 export async function getModsFolder() {
@@ -11,3 +12,60 @@ export async function getModsFolder() {
 
   return pathArr.join('/') + '/Mods/'
 }
+
+export async function disableMod(modId: string) {
+  const path = (await getModsFolder()) + modId
+  const pathExists = await invoke('dir_exists', {
+    path,
+  })
+
+  if (!pathExists) return console.log("Path doesn't exist")
+
+  const modName = path.replace(/\\/g, '/').split('/').pop()
+
+  await invoke('rename', {
+    path,
+    newName: `DISABLED_${modName}`,
+  })
+}
+
+export async function enableMod(modId: string) {
+  const path = (await getModsFolder()) + `DISABLED_${modId}`
+  const modName = path.replace(/\\/g, '/').split('/').pop()
+  const pathExists = await invoke('dir_exists', {
+    path,
+  })
+
+  if (!pathExists) return console.log("Path doesn't exist")
+
+  if (!modName?.includes('DISABLED_')) return
+
+  const newName = modName.replace('DISABLED_', '')
+
+  await invoke('rename', {
+    path,
+    newName,
+  })
+}
+
+export async function getModFolderName(modId: string) {
+  const modsFolder = await getModsFolder()
+
+  if (!modsFolder) return null
+
+  const modEnabled = await invoke('dir_exists', {
+    path: modsFolder + modId,
+  })
+  const modDisabled = await invoke('dir_exists', {
+    path: modsFolder + 'DISABLED_' + modId,
+  })
+
+  if (!modEnabled && !modDisabled) return null
+
+  if (modEnabled) return modId
+  if (modDisabled) return 'DISABLED_' + modId
+}
+
+export async function modIsEnabled(modId: string) {
+  return !(await getModFolderName(modId))?.includes('DISABLED_')
+}