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

Commit 7f9e487

Browse files
author
haad
committed
First version
0 parents  commit 7f9e487

24 files changed

+42199
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
build/

‎README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Control Center
2+
3+
UI for managing [OrbitDB](https://github.com/orbitdb/orbit-db) databases.
4+
5+
<img width="80%" src="https://raw.githubusercontent.com/haadcode/orbit-db-control-center/master/screenshot.png"/>
6+
7+
**Run the [Control Center](https://gateway.pinata.cloud/ipfs/QmQ1xiVTRZhxRAvW6YEwmYyFfFb6rJim3S27MdFND5C7pF/) in your browser**
8+
9+
or
10+
11+
Install and run from source:
12+
13+
```shell
14+
git clone https://github.com/haadcode/orbit-db-control-center.git
15+
cd orbit-db-control-center/
16+
npm i && npm start
17+
```

‎package-lock.json

Lines changed: 40839 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "orbit-db-control-center",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "react-scripts start",
8+
"build": "react-scripts build",
9+
"test": "react-scripts test",
10+
"eject": "react-scripts eject"
11+
},
12+
"author": "",
13+
"license": "ISC",
14+
"dependencies": {
15+
"baseui": "^9.34.0",
16+
"evergreen-ui": "^4.21.5",
17+
"ipfs": "^0.40.0",
18+
"orbit-db": "^0.23.0",
19+
"react": "^16.12.0",
20+
"react-dom": "^16.12.0",
21+
"react-router-dom": "^5.1.2",
22+
"react-scripts": "^3.3.0",
23+
"styletron-engine-atomic": "^1.4.4",
24+
"styletron-react": "^5.2.6"
25+
},
26+
"eslintConfig": {
27+
"extends": "react-app"
28+
},
29+
"browserslist": {
30+
"production": [
31+
">0.2%",
32+
"not dead",
33+
"not op_mini all"
34+
],
35+
"development": [
36+
"last 1 chrome version",
37+
"last 1 firefox version",
38+
"last 1 safari version"
39+
]
40+
},
41+
"devDependencies": {
42+
"standard": "^14.3.1"
43+
}
44+
}

‎public/Orbit_round-02.png

112 KB
Loading

‎public/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="logo.png" />
6+
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Titillium+Web|Source+Code+Pro&display=swap" rel="stylesheet">
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<link rel="apple-touch-icon" href="logo.png" />
10+
<!--
11+
manifest.json provides metadata used when your web app is installed on a
12+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
13+
-->
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<!--
16+
Notice the use of %PUBLIC_URL% in the tags above.
17+
It will be replaced with the URL of the `public` folder during the build.
18+
Only files inside the `public` folder can be referenced from the HTML.
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>Network Admin</title>
24+
</head>
25+
<body>
26+
<noscript>You need to enable JavaScript to run this app.</noscript>
27+
<div id="root"></div>
28+
</body>
29+
</html>

‎public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "Control Center",
3+
"name": "OrbitDB Control Center",
4+
"icons": [
5+
{
6+
"src": "logo.png",
7+
"type": "image/png",
8+
"sizes": "100x100"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎screenshot.png

274 KB
Loading

‎src/App.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import React from 'react'
2+
import { Pane } from 'evergreen-ui'
3+
import { Route, Switch } from 'react-router-dom'
4+
5+
import { actions, useStateValue, loadingState, StateProvider } from './state'
6+
7+
import Status from './components/Status'
8+
import Header from './components/Header'
9+
10+
import IndexView from './views/Index'
11+
import ProgramView from './views/Program'
12+
import MyProgramsView from './views/MyPrograms'
13+
import SearchResultsView from './views/SearchResults'
14+
15+
function App () {
16+
const initialState = {
17+
user: null,
18+
loginDialogOpen: false,
19+
createDBDialogOpen: false,
20+
programs: [],
21+
program: false,
22+
db: null,
23+
entries: [],
24+
orbitdbStatus: 'Starting',
25+
ipfsStatus: 'Starting',
26+
loading: {
27+
programs: false
28+
}
29+
}
30+
31+
const reducer = (state, action) => {
32+
switch (action.type) {
33+
case actions.AUTH.OPEN_LOGIN_DIALOG:
34+
return {
35+
...state,
36+
loginDialogOpen: true
37+
}
38+
case actions.AUTH.CLOSE_LOGIN_DIALOG:
39+
return {
40+
...state,
41+
loginDialogOpen: false
42+
}
43+
case actions.AUTH.SET_USER:
44+
return {
45+
...state,
46+
user: action.user
47+
}
48+
case actions.SYSTEMS.SET_ORBITDB:
49+
return {
50+
...state,
51+
orbitdbStatus: action.orbitdbStatus
52+
}
53+
case actions.SYSTEMS.SET_IPFS:
54+
return {
55+
...state,
56+
ipfsStatus: action.ipfsStatus
57+
}
58+
case actions.PROGRAMS.SET_PROGRAM:
59+
return {
60+
...state,
61+
program: action.program
62+
}
63+
case actions.PROGRAMS.SET_PROGRAM_LOADING:
64+
return {
65+
...state,
66+
program: loadingState
67+
}
68+
case actions.PROGRAMS.SET_PROGRAMS:
69+
return {
70+
...state,
71+
programs: action.programs
72+
}
73+
case actions.DB.SET_DB:
74+
return {
75+
...state,
76+
db: action.db,
77+
entries: action.entries,
78+
}
79+
case actions.DB.OPEN_CREATEDB_DIALOG:
80+
return {
81+
...state,
82+
createDBDialogOpen: true
83+
}
84+
case actions.DB.CLOSE_CREATEDB_DIALOG:
85+
return {
86+
...state,
87+
createDBDialogOpen: false
88+
}
89+
case actions.PROGRAMS.SET_PROGRAMS_LOADING:
90+
return {
91+
...state,
92+
loading: { ...state.loading, programs: action.loading }
93+
}
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+
// }
124+
default:
125+
return state
126+
}
127+
}
128+
129+
return (
130+
<StateProvider initialState={initialState} reducer={reducer}>
131+
<Pane background='tint1' height='100%'>
132+
<Header />
133+
<Status />
134+
<Switch>
135+
<Route path='/search'>
136+
<SearchResultsView />
137+
</Route>
138+
<Route path='/orbitdb/:programName/:dbName'>
139+
<ProgramView />
140+
</Route>
141+
<Route path='/my-programs'>
142+
<IndexView />
143+
</Route>
144+
<Route path='/'>
145+
<MyProgramsView />
146+
</Route>
147+
</Switch>
148+
</Pane>
149+
</StateProvider>
150+
)
151+
}
152+
153+
export default App

‎src/App.test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import App from './App'
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div')
7+
ReactDOM.render(<App />, div)
8+
ReactDOM.unmountComponentAtNode(div)
9+
})

‎src/components/CreateDialog.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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 CreateDialog ({ onCreate }) {
11+
const [appState, dispatch] = useStateValue()
12+
const [name, setName] = React.useState('')
13+
const [type, setType] = React.useState('eventlog')
14+
15+
function handleSubmit (event) {
16+
if (event) event.preventDefault()
17+
if (name.length === 0) return
18+
console.log("Create:", name, type)
19+
onCreate({ name, type })
20+
dispatch({ type: actions.DB.CLOSE_CREATEDB_DIALOG })
21+
}
22+
23+
function handleNameChange (event) {
24+
setName(event.target.value)
25+
}
26+
27+
function handleTypeChange (event) {
28+
setType(event.target.value)
29+
}
30+
31+
return (
32+
<Dialog
33+
isShown={appState.createDBDialogOpen}
34+
title='Create Database'
35+
onCloseComplete={() => dispatch({ type: actions.DB.CLOSE_CREATEDB_DIALOG })}
36+
cancelLabel='Close'
37+
confirmLabel='Create'
38+
onConfirm={close => handleSubmit(null, close)}
39+
>
40+
<form onSubmit={handleSubmit}>
41+
<TextInput
42+
onChange={handleNameChange}
43+
name='name'
44+
placeholder='Database name'
45+
width='100%'
46+
></TextInput>
47+
<span>Type:</span>
48+
<div>
49+
<Select onChange={handleTypeChange}>
50+
<option value='eventlog' selected>Immutable Log</option>
51+
<option value='feed'>A list of entries</option>
52+
<option value='keyvalue'>Key-Value Store</option>
53+
<option value='docstore'>Document Store</option>
54+
<option value='counter'>Counter (CRDT)</option>
55+
</Select>
56+
</div>
57+
</form>
58+
</Dialog>
59+
)
60+
}
61+
62+
export default CreateDialog

0 commit comments

Comments
 (0)