Refactoring and clean ups

Author: haad

src/App.js

@@ -4,7 +4,7 @@ import { Route, Switch } from 'react-router-dom'
 
 import { actions, loadingState, StateProvider } from './state'
 
-import Status from './components/Status'
+import Systems from './components/Systems'
 import Header from './components/Header'
 
 import DatabaseView from './views/Database'
@@ -30,21 +30,6 @@ function App () {
 
   const reducer = (state, action) => {
     switch (action.type) {
-      case actions.AUTH.OPEN_LOGIN_DIALOG:
-        return {
-          ...state,
-          loginDialogOpen: true
-        }
-      case actions.AUTH.CLOSE_LOGIN_DIALOG:
-        return {
-          ...state,
-          loginDialogOpen: false
-        }
-      case actions.AUTH.SET_USER:
-        return {
-          ...state,
-          user: action.user
-        }
       case actions.SYSTEMS.SET_ORBITDB:
         return {
           ...state,
@@ -110,7 +95,7 @@ function App () {
     <StateProvider initialState={initialState} reducer={reducer}>
       <Pane background='tint1' height='100%'>
         <Header />
-        <Status />
+        <Systems />
         <Switch>
           <Route path='/search'>
             <SearchResultsView />

src/components/AddDialog.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { 
   Dialog, 
-  Select, 
   TextInput 
 } from 'evergreen-ui'
 

src/components/Header.js

@@ -2,23 +2,14 @@ import React from 'react'
 import { useHistory } from 'react-router-dom'
 import {
   majorScale,
-  minorScale,
   Heading,
-  Icon,
   Link,
-  Menu,
   Pane,
-  Popover,
-  Position,
-  SearchInput,
-  Text
+  SearchInput
 } from 'evergreen-ui'
 
-import { actions, useStateValue } from '../state'
-
 function Header () {
   const history = useHistory()
-  const [appState, dispatch] = useStateValue()
 
   function handleKeyUp (event) {
     // TODO: Do not use "ENTER" key as the trigger, maybe onSubmit of a form

src/components/LogStoreControls.js

@@ -1,41 +1,17 @@
-import React, { useState, useEffect } from 'react'
-import { useHistory, useParams } from 'react-router-dom'
+import React from 'react'
 import {
   majorScale,
   Button,
-  Code,
   Heading,
-  Icon,
-  IconButton,
-  Link,
   Pane,
-  Paragraph,
-  Pre,
-  Spinner,
-  Strong,
-  Text,
   TextInput
 } from 'evergreen-ui'
 
-import { getDB } from '../database'
-import { useStateValue, actions, loadingState } from '../state'
-import formatDistance from 'date-fns/formatDistance'
-
-const colors = {
-   eventlog: '#47B881',
-   feed: '#14B5D0',
-   keyvalue: '#1070CA',
-   docstore: '#D9822B',
-   counter: '#735DD0',
-}
+import { useStateValue, actions } from '../state'
 
 function EventLogControls () {
-  const { programName, dbName } = useParams()
   const [appState, dispatch] = useStateValue()
-  const history = useHistory()
   const [value, setValue] = React.useState('')
-  const [entry, setEntry] = React.useState(null)
-  const [address] = React.useState(`/orbitdb/${programName}/${dbName}`)
 
   function handleValueChange (event) {
     setValue(event.target.value)

src/components/ProgramList.js

@@ -1,14 +1,12 @@
 import React from 'react'
 
 import { 
-  majorScale,
-  Button,
   IconButton,
   Table
  } from 'evergreen-ui'
 
 import { useHistory } from 'react-router-dom'
-import {formatDistanceToNow, formatRFC7231} from 'date-fns'
+import { formatDistanceToNow } from 'date-fns'
 
 const colors = {
    eventlog: '#47B881',

src/components/Status.js renamed to src/components/Systems.js

@@ -1,27 +1,18 @@
 import React from 'react'
-import { useHistory } from 'react-router-dom'
 import {
   majorScale,
   minorScale,
-  Heading,
   Icon,
   Link,
-  Menu,
   Pane,
-  Popover,
-  Position,
-  SearchInput,
-  Spinner,
   Text
 } from 'evergreen-ui'
 
 import { initIPFS, initOrbitDB, getAllDatabases } from '../database'
 import { actions, useStateValue } from '../state'
 
-function Status () {
-  const history = useHistory()
+function Systems () {
   const [appState, dispatch] = useStateValue()
-  const [loading, setLoading] = React.useState(false)
 
 
   React.useEffect(() => {
@@ -38,7 +29,7 @@ function Status () {
         dispatch({ type: actions.PROGRAMS.SET_PROGRAMS_LOADING, loading: false })
       })
     })
-  }, [])
+  }, [dispatch])
 
   const statusIconSize = 8
 
@@ -81,4 +72,4 @@ function Status () {
   )
 }
 
-export default Status
+export default Systems

src/config/index.js

@@ -1,13 +1,7 @@
 import IPFS from 'ipfs'
 import OrbitDB from 'orbit-db'
-import config from '../config'
-
-const get = async url => {
-  const response = await fetch(url)
-  const json = await response.json()
-  return json
-}
 
+// OrbitDB instance
 let orbitdb
 
 // Databases

src/database/index.js

@@ -11,11 +11,6 @@ export const StateProvider = ({ reducer, initialState, children }) => (
 export const useStateValue = () => useContext(StateContext)
 
 export const actions = {
-  AUTH: {
-    OPEN_LOGIN_DIALOG: 'OPEN_LOGIN_DIALOG',
-    CLOSE_LOGIN_DIALOG: 'CLOSE_LOGIN_DIALOG',
-    SET_USER: 'SET_USER'
-  },
   DB: {
     OPEN_CREATEDB_DIALOG: 'OPEN_CREATEDB_DIALOG',
     CLOSE_CREATEDB_DIALOG: 'CLOSE_CREATEDB_DIALOG',
@@ -30,12 +25,6 @@ export const actions = {
   PROGRAMS: {
     SET_PROGRAMS: 'SET_PROGRAMS',
     SET_PROGRAMS_LOADING: 'SET_PROGRAMS_LOADING',
-    SET_POPULAR: 'SET_POPULAR',
-    SET_POPULAR_LOADING: 'SET_POPULAR_LOADING',
-    SET_STATS: 'SET_STATS',
-    SET_STATS_LOADING: 'SET_STATS_LOADING',
-    SET_CATEGORIES: 'SET_CATEGORIES',
-    SET_CATEGORIES_LOADING: 'SET_CATEGORIES_LOADING',
     SET_PROGRAM: 'SET_PROGRAM',
     SET_PROGRAM_LOADING: 'SET_PROGRAM_LOADING'
   }

src/state/index.js

@@ -1,20 +1,13 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import {
   majorScale,
-  Button,
-  Code,
   Heading,
-  Icon,
   IconButton,
-  Link,
   Pane,
-  Paragraph,
   Pre,
   Spinner,
-  Strong,
-  Text,
-  TextInput
+  Text
 } from 'evergreen-ui'
 
 import LogStoreControls from '../components/LogStoreControls'
@@ -23,8 +16,7 @@ import DocumentStoreControls from '../components/DocumentStoreControls'
 import CounterStoreControls from '../components/CounterStoreControls'
 
 import { getDB } from '../database'
-import { useStateValue, actions, loadingState } from '../state'
-import formatDistance from 'date-fns/formatDistance'
+import { useStateValue, actions } from '../state'
 
 const colors = {
    eventlog: '#47B881',
@@ -38,15 +30,10 @@ function ProgramView () {
   const { programName, dbName } = useParams()
   const [appState, dispatch] = useStateValue()
   const history = useHistory()
-  const [value, setValue] = React.useState('')
   const [entry, setEntry] = React.useState(null)
   const [loading, setLoading] = React.useState(false)
   const [address] = React.useState(`/orbitdb/${programName}/${dbName}`)
 
-  function handleValueChange (event) {
-    setValue(event.target.value)
-  }
-
   const handleSelect = (entry) => {
     setEntry(entry)
   }
@@ -84,22 +71,7 @@ function ProgramView () {
     fetchDB(address)
     const program = appState.programs.find(p => p.payload.value.address === address)
     dispatch({ type: actions.PROGRAMS.SET_PROGRAM, program })
-  }, [dispatch, programName, dbName])
-
-  function renderDbType (db) {
-    if (db && db.type === 'eventlog') 
-      return 'EVENT LOG'
-    else if (db && db.type === 'feed') 
-      return 'FEED'
-    else if (db && db.type === 'keyvalue') 
-      return 'KEY-VALUE STORE'
-    else if (db && db.type === 'docstore') 
-      return 'DOCUMENT STORE'
-    else if (db && db.type === 'counter') 
-      return 'COUNTER'
-    else 
-      return ''
-  }
+  }, [dispatch, address, appState.programs])
 
   function renderProgram () {
     const program = appState.program ? appState.program.payload.value : null