Refactor bits of UI, fix loading db from url, clean ups

Author: haad

README.md

@@ -2,7 +2,7 @@
 
 > UI for managing [OrbitDB](https://github.com/orbitdb/orbit-db) databases.
 
-**Run the [Control Center](https://ipfs.io/ipfs/QmbUP5MPCYnFcouSmB5oRj91jNSHYGGbyqvbPUvNoxFomo) in your browser.**
+**Run the [Control Center](https://ipfs.io/ipfs/Qme9bwgUYgdLTA9ZpZnHqNHRXGfJ5QHw4BCzgrFQMB59T8) in your browser.**
 
 <img width="80%" src="https://raw.githubusercontent.com/haadcode/orbit-db-control-center/master/screenshot1.png"/>
 

screenshot1.png

@@ -51,7 +51,7 @@ function KeyValueStoreControls () {
         defaultValue={1}
         placeholder='amount'
         height={24}
-        width='5%'
+        width='10%'
       ></TextInput>
       <Button
         iconBefore='plus'

screenshot2.png

@@ -0,0 +1,102 @@
+import React from 'react'
+
+import {
+  majorScale,
+  minorScale,
+  Icon,
+  IconButton,
+  Table
+} from 'evergreen-ui'
+
+import { useHistory } from 'react-router-dom'
+import { formatDistanceToNow } from 'date-fns'
+
+const colors = {
+   eventlog: '#47B881',
+   feed: '#14B5D0',
+   keyvalue: '#1070CA',
+   docstore: '#D9822B',
+   counter: '#735DD0'
+}
+
+function ProgramList ({ programs, onRemove }) {
+  const history = useHistory()
+
+  function handleSelect (program) {
+    history.push(program.address)
+  }
+
+  return (
+    <Table>
+      <Table.Head padding='0'>
+        <Table.TextHeaderCell
+          flex='1 1 2%'
+          textAlign='center'
+          padding={minorScale(2)}
+          alignItems='baseline'
+        >
+          <Icon size={majorScale(2)} icon='eye-open'/>
+        </Table.TextHeaderCell>
+        <Table.TextHeaderCell flex='1 1 10%' paddingX={0}>Name</Table.TextHeaderCell>
+        <Table.TextHeaderCell flex='1 1 5%' paddingX={minorScale(1)}>Type</Table.TextHeaderCell>
+        <Table.TextHeaderCell flex='1 1 40%' paddingX={0}>Address</Table.TextHeaderCell>
+        <Table.TextHeaderCell flex='1 1 10%' paddingX={0}>Added</Table.TextHeaderCell>
+        <Table.TextHeaderCell
+          flex='1 1 2%'
+          textAlign='center'
+          padding={minorScale(2)}
+          alignItems='baseline'
+        >
+          <Icon size={12} icon='trash'/>
+        </Table.TextHeaderCell>
+      </Table.Head>
+      <Table.Body>
+        {programs.map(e => {
+          const program = e.payload.value
+          return (
+            <Table.Row key={`program-id-${program.address}`}>
+              <Table.Cell
+                flex='1 1 2%'
+                display='flex'
+                flexDirection='row'
+                justifyContent='center'
+                padding={minorScale(2)}
+              >
+                <IconButton
+                  appearance='minimal'
+                  icon='database'
+                  margin={0}
+                  padding={0}
+                  onClick={() => handleSelect(program)}
+                />
+              </Table.Cell>
+              <Table.TextCell flex='1 1 10%' paddingX={0}>{program.name}</Table.TextCell>
+              <Table.TextCell flex='1 1 5%' paddingX={minorScale(1)} textProps={{ color: colors[program.type]}}>
+                {program.type}
+              </Table.TextCell>
+              <Table.TextCell flex='1 1 40%' paddingX={0}>{program.address.toString() ? program.address.toString() : program.address}</Table.TextCell>
+              <Table.TextCell flex='1 1 10%' paddingX={0}>{program.added ? formatDistanceToNow(program.added) + ' ago': 'Unknown'}</Table.TextCell>
+              <Table.Cell
+                flex='1 1 2%'
+                display='flex'
+                flexDirection='row'
+                justifyContent='center'
+                padding={minorScale(2)}
+              >
+                <IconButton
+                  appearance='minimal'
+                  icon='cross'
+                  intent='danger'
+                  margin={0}
+                  padding={0}
+                  onClick={() => onRemove(e.hash, program)}
+                />
+              </Table.Cell>
+            </Table.Row>
+        )})}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default ProgramList

src/components/CounterStoreControls.js

@@ -18,13 +18,15 @@ function Header () {
 
   return (
     <Pane background='white' elevation={1}>
-      <Pane display='flex' flexDirection='row'>
+      <Pane 
+        className='row-wrap'
+        display='flex'
+        borderBottom='default'
+      >
         <Pane
+          className='align title'
           display='flex'
           flex='1 1 60%'
-          paddingLeft={majorScale(6)}
-          paddingY={majorScale(1)}
-          borderBottom='default'
         >
           <Link 
             href='#/' 
@@ -33,22 +35,24 @@ function Header () {
             flexDirection='row' 
             alignItems='center'
           >
-            <img src='Orbit_round-02.png' width={majorScale(4)}/>
-            <Heading size={800} fontFamily='Titillium Web' marginX={majorScale(2)}>CONTROL CENTER</Heading>
+            <img src='Orbit_round-02.png' width={majorScale(5)}/>
+            <Heading size={800} fontFamily='Titillium Web' marginX={majorScale(2)}>
+            CONTROL CENTER
+            </Heading>
           </Link>
         </Pane>
         <Pane
+          className='align search'
           display='flex'
-          flex='1 1 40%'
           alignItems='center'
           justifyContent='center'
-          paddingRight={majorScale(6)}
         >
-          <SearchInput 
-            placeholder='Search...' 
+          <SearchInput
+            width='100%'
+            flex='1 1 100%'
+            placeholder='Search...'
             height={24}
-            width='100%' 
-            onKeyUp={handleKeyUp} 
+            onKeyUp={handleKeyUp}
           />
         </Pane>
       </Pane>

src/components/DatabaseList.js

@@ -31,7 +31,7 @@ function Systems () {
     })
   }, [dispatch])
 
-  const statusIconSize = 8
+  const statusIconSize = 6
 
   return (
     <Pane background='white' elevation={1}>

src/components/Header.js

@@ -34,8 +34,11 @@ export const getAllDatabases = async () => {
 }
 
 export const getDB = async (address) => {
-  const db = await orbitdb.open(address)
-  await db.load()
+  let db
+  if (orbitdb) {
+    db = await orbitdb.open(address)
+    await db.load()
+  }
   return db
 }
 

src/components/ProgramList.js

@@ -15,3 +15,58 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
+
+@media screen and (max-width: 720px) {
+  .row-wrap {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .align {
+    flex: 1 1 80%;
+    margin-left: 16px;
+  }
+
+  .title {
+    padding-top: 16px;
+    padding-bottom: 8px;
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  .search {
+    padding-top: 8px;
+    padding-bottom: 16px;
+    padding-left: 32px;
+    padding-right: 32px;
+    width: 95%;
+  }
+
+  .search input {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 720px) {
+  .row-wrap {
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .align {
+    flex: 1 1 40%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    margin-left: 0px;
+  }
+
+  .title {
+    padding-left: 48px;
+    padding-right: 0px;
+  }
+
+  .search {
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+}