Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Commit 6f7d32c

Browse files
author
haad
committed
New features, refactoring
1 parent 7f9e487 commit 6f7d32c

17 files changed

+542
-325
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ UI for managing [OrbitDB](https://github.com/orbitdb/orbit-db) databases.
44

55
<img width="80%" src="https://raw.githubusercontent.com/haadcode/orbit-db-control-center/master/screenshot.png"/>
66

7-
**Run the [Control Center](https://gateway.pinata.cloud/ipfs/QmQ1xiVTRZhxRAvW6YEwmYyFfFb6rJim3S27MdFND5C7pF/) in your browser**
7+
**Run the [Control Center](https://gateway.pinata.cloud/ipfs/QmQjGSJ3MJho7CTySsyno5qi6J8GQCaVGPLq6Dn73gDBDH) in your browser**
88

99
or
1010

‎public/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="logo.png" />
5+
<link rel="icon" href="Orbit_round-02.png" />
66
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Titillium+Web|Source+Code+Pro&display=swap" rel="stylesheet">
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="theme-color" content="#000000" />
9-
<link rel="apple-touch-icon" href="logo.png" />
9+
<link rel="apple-touch-icon" href="Orbit_round-02.png" />
1010
<!--
1111
manifest.json provides metadata used when your web app is installed on a
1212
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -20,7 +20,7 @@
2020
work correctly both with client-side routing and a non-root public URL.
2121
Learn how to configure a non-root public URL by running `npm run build`.
2222
-->
23-
<title>Network Admin</title>
23+
<title>Control Center</title>
2424
</head>
2525
<body>
2626
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "OrbitDB Control Center",
44
"icons": [
55
{
6-
"src": "logo.png",
6+
"src": "Orbit_round-02.png",
77
"type": "image/png",
88
"sizes": "100x100"
99
}

‎src/App.js

Lines changed: 16 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@ import React from 'react'
22
import { Pane } from 'evergreen-ui'
33
import { Route, Switch } from 'react-router-dom'
44

5-
import { actions, useStateValue, loadingState, StateProvider } from './state'
5+
import { actions, loadingState, StateProvider } from './state'
66

77
import Status from './components/Status'
88
import Header from './components/Header'
99

10-
import IndexView from './views/Index'
11-
import ProgramView from './views/Program'
12-
import MyProgramsView from './views/MyPrograms'
10+
import DatabaseView from './views/Database'
11+
import DatabasesView from './views/Databases'
1312
import SearchResultsView from './views/SearchResults'
1413

1514
function App () {
1615
const initialState = {
1716
user: null,
1817
loginDialogOpen: false,
1918
createDBDialogOpen: false,
19+
addDBDialogOpen: false,
2020
programs: [],
2121
program: false,
2222
db: null,
@@ -86,41 +86,21 @@ function App () {
8686
...state,
8787
createDBDialogOpen: false
8888
}
89+
case actions.DB.OPEN_ADDDB_DIALOG:
90+
return {
91+
...state,
92+
addDBDialogOpen: true
93+
}
94+
case actions.DB.CLOSE_ADDDB_DIALOG:
95+
return {
96+
...state,
97+
addDBDialogOpen: false
98+
}
8999
case actions.PROGRAMS.SET_PROGRAMS_LOADING:
90100
return {
91101
...state,
92102
loading: { ...state.loading, programs: action.loading }
93103
}
94-
// case actions.PROGRAMS.SET_POPULAR:
95-
// return {
96-
// ...state,
97-
// popularPrograms: action.popularPrograms
98-
// }
99-
// case actions.PROGRAMS.SET_POPULAR_LOADING:
100-
// return {
101-
// ...state,
102-
// popularPrograms: loadingState
103-
// }
104-
// case actions.PROGRAMS.SET_CATEGORIES:
105-
// return {
106-
// ...state,
107-
// categories: action.categories
108-
// }
109-
// case actions.PROGRAMS.SET_CATEGORIES_LOADING:
110-
// return {
111-
// ...state,
112-
// categories: loadingState
113-
// }
114-
// case actions.PROGRAMS.SET_STATS:
115-
// return {
116-
// ...state,
117-
// stats: action.stats
118-
// }
119-
// case actions.PROGRAMS.SET_STATS_LOADING:
120-
// return {
121-
// ...state,
122-
// stats: loadingState
123-
// }
124104
default:
125105
return state
126106
}
@@ -136,13 +116,10 @@ function App () {
136116
<SearchResultsView />
137117
</Route>
138118
<Route path='/orbitdb/:programName/:dbName'>
139-
<ProgramView />
140-
</Route>
141-
<Route path='/my-programs'>
142-
<IndexView />
119+
<DatabaseView />
143120
</Route>
144121
<Route path='/'>
145-
<MyProgramsView />
122+
<DatabasesView />
146123
</Route>
147124
</Switch>
148125
</Pane>

‎src/components/AddDialog.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react'
2+
import {
3+
Dialog,
4+
Select,
5+
TextInput
6+
} from 'evergreen-ui'
7+
8+
import { useStateValue, actions } from '../state'
9+
10+
function AddDialog ({ onAdd }) {
11+
const [appState, dispatch] = useStateValue()
12+
const [address, setAddress] = React.useState('')
13+
14+
function handleSubmit (event) {
15+
if (event) event.preventDefault()
16+
if (address.length === 0) return
17+
console.log("Add:", address)
18+
onAdd({ address })
19+
dispatch({ type: actions.DB.CLOSE_ADDDB_DIALOG })
20+
}
21+
22+
function handleAddressChange (event) {
23+
setAddress(event.target.value)
24+
}
25+
26+
return (
27+
<Dialog
28+
isShown={appState.addDBDialogOpen}
29+
title='Add Database'
30+
onCloseComplete={() => dispatch({ type: actions.DB.CLOSE_ADDDB_DIALOG })}
31+
cancelLabel='Cancel'
32+
confirmLabel='Add'
33+
onConfirm={close => handleSubmit(null, close)}
34+
>
35+
<form onSubmit={handleSubmit}>
36+
<TextInput
37+
onChange={handleAddressChange}
38+
name='address'
39+
placeholder='Address'
40+
width='100%'
41+
></TextInput>
42+
</form>
43+
</Dialog>
44+
)
45+
}
46+
47+
export default AddDialog

‎src/components/CounterStoreControls.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { useState } from 'react'
2+
import {
3+
majorScale,
4+
Button,
5+
Heading,
6+
Pane,
7+
TextInput
8+
} from 'evergreen-ui'
9+
10+
import { useStateValue, actions } from '../state'
11+
12+
function KeyValueStoreControls () {
13+
const [appState, dispatch] = useStateValue()
14+
const [value, setValue] = useState(1)
15+
16+
function handleValueChange (event) {
17+
setValue(event.target.value)
18+
}
19+
20+
function handleAdd (event) {
21+
if (event) event.preventDefault()
22+
if (value.length === 0) return
23+
addToDB()
24+
}
25+
26+
const addToDB = async () => {
27+
const db = appState.db
28+
29+
if (db.type !== 'counter') {
30+
throw new Error('This component can only handle Counter databases')
31+
}
32+
33+
const val = parseInt(value) || 0
34+
35+
if (val > 0) {
36+
await db.inc(val)
37+
}
38+
39+
const entries = [{ payload: { value: db.value } }]
40+
dispatch({ type: actions.DB.SET_DB, db, entries })
41+
}
42+
43+
return (
44+
<Pane
45+
flex='1'
46+
>
47+
<Heading marginBottom={majorScale(1)}>Increment the value of the counter database</Heading>
48+
<TextInput
49+
onChange={handleValueChange}
50+
name='value'
51+
defaultValue={1}
52+
placeholder='amount'
53+
height={24}
54+
width='5%'
55+
></TextInput>
56+
<Button
57+
iconBefore='plus'
58+
appearance='default'
59+
height={24}
60+
marginLeft={majorScale(1)}
61+
onClick={handleAdd}
62+
>
63+
Increment
64+
</Button>
65+
</Pane>
66+
)
67+
}
68+
69+
export default KeyValueStoreControls

‎src/components/CreateDialog.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function CreateDialog ({ onCreate }) {
3333
isShown={appState.createDBDialogOpen}
3434
title='Create Database'
3535
onCloseComplete={() => dispatch({ type: actions.DB.CLOSE_CREATEDB_DIALOG })}
36-
cancelLabel='Close'
36+
cancelLabel='Cancel'
3737
confirmLabel='Create'
3838
onConfirm={close => handleSubmit(null, close)}
3939
>
@@ -47,7 +47,7 @@ function CreateDialog ({ onCreate }) {
4747
<span>Type:</span>
4848
<div>
4949
<Select onChange={handleTypeChange}>
50-
<option value='eventlog' selected>Immutable Log</option>
50+
<option value='eventlog' defaultValue>Immutable Log</option>
5151
<option value='feed'>A list of entries</option>
5252
<option value='keyvalue'>Key-Value Store</option>
5353
<option value='docstore'>Document Store</option>

‎src/components/DocumentStoreControls.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { useState } from 'react'
2+
import {
3+
majorScale,
4+
Button,
5+
Heading,
6+
Pane,
7+
TextInput
8+
} from 'evergreen-ui'
9+
10+
import { useStateValue, actions } from '../state'
11+
12+
function DocumentStoreControls () {
13+
const [appState, dispatch] = useStateValue()
14+
const [key, setKey] = useState('')
15+
const [value, setValue] = useState('')
16+
17+
function handleValueChange (event) {
18+
setValue(event.target.value)
19+
}
20+
21+
function handleKeyChange (event) {
22+
setKey(event.target.value)
23+
}
24+
25+
function handleAdd (event) {
26+
if (event) event.preventDefault()
27+
if (value.length === 0) return
28+
if (key.length === 0) return
29+
addToDB()
30+
}
31+
32+
const addToDB = async () => {
33+
const db = appState.db
34+
35+
if (db.type !== 'docstore') {
36+
throw new Error('This component can only handle Document databases')
37+
}
38+
39+
await db.put({_id: key, value})
40+
41+
const entries = db.query(e => e !== null, {fullOp: true}).reverse()
42+
dispatch({ type: actions.DB.SET_DB, db, entries })
43+
}
44+
45+
return (
46+
<Pane
47+
flex='1'
48+
>
49+
<Heading marginBottom={majorScale(1)}>Add a document to the database</Heading>
50+
<TextInput
51+
onChange={handleKeyChange}
52+
name='key'
53+
placeholder='_id'
54+
height={24}
55+
width='20%'
56+
></TextInput>
57+
<TextInput
58+
onChange={handleValueChange}
59+
name='value'
60+
placeholder='document'
61+
height={24}
62+
width='20%'
63+
marginLeft={majorScale(1)}
64+
></TextInput>
65+
<Button
66+
iconBefore='plus'
67+
appearance='default'
68+
height={24}
69+
marginLeft={majorScale(1)}
70+
onClick={handleAdd}
71+
>
72+
Put
73+
</Button>
74+
</Pane>
75+
)
76+
}
77+
78+
export default DocumentStoreControls

0 commit comments

Comments
 (0)