Feat look (#27)

* CSS/interface changes. Adding the same addon URL twice won't overwrite the existing entry anymore * version * Deleting from table properly working * React and css fixes * resolves merge conflicts to dev
WorldofAddons · Oct 30, 2018 · 783dc76 · 783dc76
1 parent 297470a
commit 783dc76
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 62 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "subdirs"
+    ]
+}
diff --git a/css/index.css b/css/index.css
@@ -1,25 +1,47 @@
-.textInput {
+.urlInput {
   width: 100%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-flex;
-  border: 1px solid white;
-  border-radius: 4px;
-  box-sizing: border-box;
-  color: white;
-  background-color: black;
+  text-align: left;
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border: none;
+  background: #f5f5f5;
+  transition: all 0.2s ease;
+  font-size: 1em;
+}
+.urlInput:focus{
+  outline: none;
+  background: #ffffff;
+  box-shadow: 0 3px 8px 0 #9e9e9e;
+  transition: all 0.3s ease;
+}
+
+::placeholder {
+  color: #707070;
+}
+
+.colAddonName {
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.addButton {
-  margin: 10px -17px;
-  display: inline-flex;
+.colVersion {
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
-  background-color: #D3D3D3;
+  background-color: #ffffff;
 }
 
 main {

diff --git a/main.js b/main.js
@@ -130,7 +130,9 @@ ipcMain.on('newURL', (e, newURL) => {
   console.log('\tSending url to be matched with host and parse addon page')
   const URLObj = checkWhichHost(newURL)
   parseAddonDetails(URLObj).then(addonObj => {
-    mainWindow.webContents.send('modAddonObj', addonObj)
+    if (!installedAddonsDict.hasOwnProperty(addonObj.name)) {
+      mainWindow.webContents.send('modAddonObj', addonObj)
+    }
   }).catch((err) => {
     mainWindow.webContents.send('error', err)
   })
@@ -185,18 +187,21 @@ ipcMain.on('error', (e, errorObj) => {
 // uninstall addon listener
 ipcMain.on('uninstallAddon', (e, addonObj) => {
   console.log(`Received request to delete ${addonObj.name}`)
-  installedAddonsDict = uninstallAddon(addonObj, configObj, installedAddonsDict)
-  saveToAddonList(configObj, installedAddonsDict)
-  console.log(addonObj.name)
-  mainWindow.webContents.send('modAddonObj', {
-    'displayName': addonObj.displayName,
-    'name': addonObj.name,
-    'version': addonObj.version,
-    'host': addonObj.host,
-    'url': addonObj.url,
-    'authors': addonObj.authors,
-    'status': 'NOT_INSTALLED'
-  })
+  if (addonObj.status === "" || addonObj.status === "NOT_INSTALLED") {
+    mainWindow.webContents.send('delAddonObj', addonObj)
+  } else {
+    mainWindow.webContents.send('modAddonObj', {
+      'displayName': addonObj.displayName,
+      'name': addonObj.name,
+      'version': addonObj.version,
+      'host': addonObj.host,
+      'url': addonObj.url,
+      'authors': addonObj.authors,
+      'status': 'NOT_INSTALLED'
+    })
+    installedAddonsDict = uninstallAddon(addonObj, configObj, installedAddonsDict)
+    saveToAddonList(configObj, installedAddonsDict)
+  }
 })
 
 // need to wait for react to finishing building Dom

diff --git a/src-react/App.jsx b/src-react/App.jsx
@@ -11,7 +11,8 @@ const store = configureStore()
 const electronChannels = [
   'addonList',
   'modAddonObj',
-  'updateAddonDL'
+  'updateAddonDL',
+  'delAddonObj'
 ]
 
 class App extends React.Component {

diff --git a/src-react/components/dashboard/AddonControlButton.jsx b/src-react/components/dashboard/AddonControlButton.jsx
@@ -7,13 +7,13 @@ import React from 'react'
 export const AddonControlButton = (addonObj, {onInstall, onInstallUpdate, onCheckUpdate}) => {
   switch (addonObj.status) {
     case 'INSTALLED': // Check update button
-      return <button className='btn-small waves-effect waves-light light-blue darken-4'
+      return <button className='waves-purple btn-flat btn-small'
                onClick={() => onCheckUpdate(addonObj)}><i className="material-icons">autorenew</i></button>
     case 'NEW_UPDATE': // Install update Button
-      return <button className='btn-small waves-effect waves-light amber darken-4'
+      return <button className='waves-purple btn-flat btn-small orange'
                onClick={() => onInstallUpdate(addonObj)}><i className="material-icons">cloud_download</i></button>
     default: // Install Button
-      return <button className='btn-small waves-effect waves-light green'
+      return <button className='waves-purple btn-flat btn-small light-green'
                onClick={() => onInstall(addonObj)}><i className="material-icons">get_app</i></button>
   }
 }
diff --git a/src-react/components/dashboard/AddonInput.jsx b/src-react/components/dashboard/AddonInput.jsx
@@ -24,39 +24,24 @@ export class AddonInput extends Component {
 
   onSubmit (e) {
     const { url } = this.state
-
     if (url !== '' && checkURL(url)) {
       this.props.onSubmit(url)
     }
   }
 
-  renderButton () {
-    return (
-      <div className="col s2">
-        <button 
-          className='btn-small waves-effect waves-light light-blue darken-4 addButton' 
-          onClick= {this.onSubmit.bind(this)}>
-          {this.props.buttonLabel}
-        </button>
-      </div>
-
-    )
-  }
-
   renderInput () {
     return (
-      <div className="col s8">
-        <input placeholder={this.props.inputLabel} id='addonInput' value={this.state.url} onChange={this.onChange.bind(this)} type='text' className='textInput'/>
+      <div className="browser-default col s10">
+        <input id='addonInput' className='browser-default urlInput' type='text' placeholder={this.props.inputLabel} value={this.state.url} onChange={this.onChange.bind(this)} onKeyPress={this.onSubmit.bind(this)}/>
       </div>
     )
   }
 
   render () {
     return (
-      <div className='row nav-wrapper grey darken-4'>
+      <div className='row nav-wrapper white z-depth-2'>
         <div className="col s10 offset-s2">
           {this.renderInput()}
-          {this.renderButton()}
         </div>
       </div>
     )

diff --git a/src-react/components/dashboard/AddonTable.jsx b/src-react/components/dashboard/AddonTable.jsx
@@ -8,10 +8,10 @@ export class AddonTable extends Component {
         <tr>
           <th width="5%"></th>
           <th width="5%"></th>
-          <th width="50%"></th>
-          <th width="15%"></th>
-          <th width="15%"></th>
+          <th width="65%"></th>
           <th width="15%"></th>
+          <th width="5%"></th>
+          <th width="5%"></th>
         </tr>
       </thead>
     )
@@ -29,14 +29,14 @@ export class AddonTable extends Component {
       <tr key={key}>
         <td>{addonObj.host}</td>
         <td>{status}</td>
-        <td>{addonObj.displayName}</td>
-        <td>{addonObj.version}</td>
+        <td className="colAddonName">{addonObj.displayName}</td>
+        <td className="colVersion">{addonObj.version}</td>
         <td>
           {AddonControlButton(addonObj, this.props)}
         </td>
         <td>
           <button 
-            className='btn-small waves-effect waves-light deep-orange darken-4' 
+            className='btn-flat btn-small' 
             onClick={() => this.props.onRemove(addonObj)}>
             <i className="material-icons">delete_forever</i>
           </button>

diff --git a/src-react/modules/dashboard/AddonInputContainer.jsx b/src-react/modules/dashboard/AddonInputContainer.jsx
@@ -9,7 +9,7 @@ class AddonInputContainer extends React.Component {
       <AddonInput
         {...this.props}
         buttonLabel='Add'
-        inputLabel='Addon URL'
+        inputLabel="Enter a new addon's URL"
       />
     )
   }
@@ -22,7 +22,9 @@ const mapStateToProps = (state) => {
 // mix of dispatch and non dispatch functions
 const mapDispatchToProps = (dispatch) => {
   return {
-    onSubmit: (url) => {dispatch(ipcSendAction('newURL', url))}
+    onSubmit: (url) => {
+      dispatch(ipcSendAction('newURL', url))
+    }
   }
 }
 

diff --git a/src-react/redux/reducers/addons.reducer.js b/src-react/redux/reducers/addons.reducer.js
@@ -13,6 +13,13 @@ const nameList = (state = initialStateNameList, action) => {
         newState.push(action.data.name)
       }
       return newState
+    case 'delAddonObj':
+      newState = [...state]
+      const idx = newState.indexOf(action.data.name)
+      if (idx !== -1) {
+        newState.splice(idx, 1)
+      }
+      return newState
     default:
       return state
   }
@@ -33,6 +40,9 @@ const dict = (state = initialStateDict, action) => {
       const {dlStatus, name} = action.data
       newState[name].dlStatus = dlStatus // TODO: name isnt being sent back?
       return newState
+    case 'delAddonObj':
+      delete newState[name]
+      return newState
     default:
       return state
   }

diff --git a/src/integrityCheck.js b/src/integrityCheck.js
@@ -11,13 +11,15 @@ export function integrityCheck (installedAddonsDict, configObj) {
         for (const [name] of Object.entries(installedAddonsDict)) { // Checks if addon is installed by making sure all subdirs are found in dirlist     
           if (installedAddonsDict[name].subdirs.every(val => dirList.includes(val)) !== true) {
             if (installedAddonsDict[name].status !== 'NOT INSTALLED') { // If addon is missing subdirs, then set status to not installed
-              installedAddonsDict[name].status = 'NOT INSTALLED'        
+              installedAddonsDict[name].status = 'NOT INSTALLED'
+              mainWindow.webContents.send('modAddonObj', installedAddonsDict[name])        
               changed = true
             }
           }else {
-            if (installedAddonsDict[name].status !== 'INSTALLED' && installedAddonsDict[name].status !== 'NEW UPDATE') { // If addon is not missing subdirs
+            if (installedAddonsDict[name].status !== 'INSTALLED' && installedAddonsDict[name].status !== 'NEW_UPDATE') { // If addon is not missing subdirs
               console.log(name, installedAddonsDict[name].status) //  and it doesn't need an update then set status to installed
               installedAddonsDict[name].status = 'INSTALLED'
+              mainWindow.webContents.send('modAddonObj', installedAddonsDict[name])
               changed = true
             }
           }
@@ -27,7 +29,7 @@ export function integrityCheck (installedAddonsDict, configObj) {
       .then(installedAddonsDict => {
         if (changed === true) {
           saveToAddonList(configObj, installedAddonsDict).then(newDict => {
-            mainWindow.webContents.send('addonList', newDict)
+            //mainWindow.webContents.send('addonList', newDict)
             return newDict
           })
         }

diff --git a/src/uninstallAddon.js b/src/uninstallAddon.js
@@ -4,7 +4,9 @@ import path from 'path'
 // This function removes the specified addonObj from the installedAddonsDict and
 // cleans the addon's subdirectories
 export function uninstallAddon(addonObj, configObj, installedAddonsDict) {
-    deleteSubdirs(addonObj.subdirs, configObj)
+    if (addonObj.hasOwnProperty('subdirs') && addonObj.subdirs.length != 0) {
+        deleteSubdirs(addonObj.subdirs, configObj)
+    }
     delete installedAddonsDict[addonObj.name]
     return installedAddonsDict
 }

diff --git a/src/updateAddon.js b/src/updateAddon.js
@@ -3,14 +3,14 @@ import { parseAddonDetails } from './parsePage'
 // Checks the addon's page for an update by comparing the parsed version
 // value to the JSON dictionary value.
 // Only runs on addons whose statuses are "INSTALLED"
-// If an update is available, then set addon status to "NEW UPDATE"
+// If an update is available, then set addon status to "NEW_UPDATE"
 export function checkUpdate (addonObj) {
   return new Promise((resolve) => {
     if (addonObj.status !== 'NOT_INSTALLED') {
       parseAddonDetails(addonObj).then(checkedObj => {
         if (addonObj.version !== checkedObj.version) {
           console.log(`\tUpdate found: ${addonObj.displayName}\t${addonObj.version}\t${checkedObj.version}`)
-          resolve('NEW UPDATE')
+          resolve('NEW_UPDATE')
         } else {
           console.log(`\tAddon ${addonObj.displayName} [${addonObj.version}] is latest version`)
           resolve('INSTALLED')