-
- {children}
+
+
-
-
- {error && (
- {String(error)}
- )}
- {isLoading && (
- Loading
- )}
-
-
+
);
};
diff --git a/packages/console-client/src/components/Sidebar.js b/packages/console-client/src/components/Sidebar.js
new file mode 100644
index 0000000..e60b21e
--- /dev/null
+++ b/packages/console-client/src/components/Sidebar.js
@@ -0,0 +1,61 @@
+//
+// Copyright 2020 DxOS
+//
+
+import clsx from 'clsx';
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'column',
+ justifyContent: 'space-between'
+ },
+
+ list: {
+ padding: 0
+ },
+
+ icon: {
+ color: theme.palette.grey[500]
+ },
+
+ selected: {
+ color: theme.palette.primary.main
+ }
+}));
+
+const Sidebar = ({ modules: { services, settings } }) => {
+ const classes = useStyles();
+
+ // TODO(burdon): Change.
+ const router = {};
+
+ const Modules = ({ modules }) => (
+
+ {modules.map(({ path, title, icon: Icon }) => (
+ router.push(path)}>
+
+
+
+
+
+ ))}
+
+ );
+
+ return (
+
+
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/packages/console-client/src/containers/ConsoleContextProvider.js b/packages/console-client/src/containers/ConsoleContextProvider.js
index 476c1a0..b88d81b 100644
--- a/packages/console-client/src/containers/ConsoleContextProvider.js
+++ b/packages/console-client/src/containers/ConsoleContextProvider.js
@@ -7,9 +7,7 @@ import defaultsDeep from 'lodash.defaultsdeep';
import ErrorBoundary from '../components/ErrorBoundary';
-import { statusReducer, SET_STATUS } from '../hooks/status';
-
-import { ConsoleContext } from '../hooks';
+import { ConsoleContext, statusReducer, SET_STATUS } from '../hooks';
const defaultState = {};
@@ -29,11 +27,12 @@ const appReducer = (state, action) => ({
* Wraps children with a React ErrorBoundary component, which catches runtime errors and enables reset.
*
* @param {function} children
+ * @param {function} modules
* @param {Object} [initialState]
* @param {function} [errorHandler]
* @returns {function}
*/
-const ConsoleContextProvider = ({ children, initialState = {}, errorHandler }) => {
+const ConsoleContextProvider = ({ children, modules, initialState = {}, errorHandler }) => {
const [state, dispatch] = useReducer(appReducer, defaultsDeep({}, initialState, defaultState));
const { errors: { exceptions = [] } = {} } = state[SET_STATUS] || {};
@@ -53,7 +52,7 @@ const ConsoleContextProvider = ({ children, initialState = {}, errorHandler }) =
}
return (
-
+
{children}
diff --git a/packages/console-client/src/containers/Main.js b/packages/console-client/src/containers/Main.js
index 120cf9f..6fbe6d1 100644
--- a/packages/console-client/src/containers/Main.js
+++ b/packages/console-client/src/containers/Main.js
@@ -2,34 +2,32 @@
// Copyright 2020 DxOS
//
-import { ApolloProvider } from '@apollo/react-hooks';
-import ApolloClient from 'apollo-boost';
import React from 'react';
+import { ApolloProvider } from '@apollo/react-hooks';
+import { ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+import config from '../../config.json';
+
+import { createTheme } from '../theme';
+import { client } from '../client';
+import modules from '../modules';
import Status from './Status';
-import config from '../../config.json';
import Layout from '../components/Layout';
import ConsoleContextProvider from './ConsoleContextProvider';
-const { server, port = 80, path } = config;
-
-// TODO(burdon): Authentication:
-// https://www.apollographql.com/docs/react/networking/authentication/
-
-// TODO(burdon): Configure from server.
-// TODO(burdon): Configure error handling for server errors.
-const client = new ApolloClient({
- uri: `${server}:${port}${path}`
-});
-
const Main = () => {
return (
-
-
-
-
+
+
+
+
+
+
+
);
diff --git a/packages/console-client/src/containers/StatusBar.js b/packages/console-client/src/containers/StatusBar.js
new file mode 100644
index 0000000..ca31902
--- /dev/null
+++ b/packages/console-client/src/containers/StatusBar.js
@@ -0,0 +1,96 @@
+//
+// Copyright 2020 DxOS
+//
+
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { makeStyles } from '@material-ui/core';
+import ErrorIcon from '@material-ui/icons/Error';
+import LoadingIcon from '@material-ui/icons/Wifi';
+import RunningIcon from '@material-ui/icons/CheckCircle';
+import grey from '@material-ui/core/colors/grey';
+import green from '@material-ui/core/colors/green';
+import red from '@material-ui/core/colors/red';
+
+import config from '../../config.json';
+import { version } from '../../package.json';
+import { useStatusReducer } from '../hooks';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'row',
+ flex: 1,
+ justifyContent: 'space-around',
+ backgroundColor: grey[900],
+ color: '#EEE',
+ height: 32,
+ padding: 4
+ },
+ left: {
+ width: 160
+ },
+ right: {
+ width: 160,
+ textAlign: 'right'
+ },
+ center: {
+ flex: 1,
+ textAlign: 'center'
+ },
+ icon: {
+ margin: '0 2px'
+ },
+ error: {
+ color: red[500]
+ },
+ running: {
+ color: green[500]
+ },
+ loading:{
+ color: theme.palette.primary.dark
+ }
+}));
+
+const StatusBar = () => {
+ const classes = useStyles();
+ const [{ loading, error }] = useStatusReducer();
+ const [isLoading, setLoading] = useState(loading);
+
+ useEffect(() => {
+ let t;
+ if (loading) {
+ setLoading(loading);
+ t = setTimeout(() => {
+ setLoading(false);
+ }, 1000);
+ }
+
+ return () => clearTimeout(t);
+ }, [loading]);
+
+ const StatusIcon = ({ error }) => {
+ if (error) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ };
+
+ return (
+
+
+
(c) {config.app.org} {version}
+
+
+
+
+