feat: implement router

Author: mediremi

d2.config.js

@@ -5,7 +5,7 @@ const config = {
     coreApp: true,
 
     entryPoints: {
-        app: './src/AppWrapper',
+        app: './src/App',
     },
 }
 

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-08-28T10:39:30.969Z\n"
-"PO-Revision-Date: 2020-08-28T10:39:30.969Z\n"
+"POT-Creation-Date: 2021-02-15T13:13:41.656Z\n"
+"PO-Revision-Date: 2021-02-15T13:13:41.656Z\n"
 
 msgid "App installed successfully"
 msgstr ""
@@ -23,6 +23,18 @@ msgstr ""
 msgid "Failed to install an app from the app hub"
 msgstr ""
 
+msgid "By"
+msgstr ""
+
+msgid "Install"
+msgstr ""
+
+msgid "App Hub"
+msgstr ""
+
+msgid "CORE APP"
+msgstr ""
+
 msgid "Uploading..."
 msgstr ""
 
@@ -47,20 +59,20 @@ msgstr ""
 msgid "Resource Apps"
 msgstr ""
 
-msgid "App Hub"
+msgid "A new version of App Management is available on the App Hub"
 msgstr ""
 
-msgid "By"
+msgid "Update and reload app"
 msgstr ""
 
-msgid "Install"
+msgid "Preinstalled core apps"
 msgstr ""
 
-msgid "CORE APP"
+msgid "Custom apps"
 msgstr ""
 
-msgid "A new version of App Management is available on the App Hub"
+msgid "Discover more apps"
 msgstr ""
 
-msgid "Update and reload app"
+msgid "Manual install"
 msgstr ""

src/App.js

@@ -0,0 +1,59 @@
+import { useD2 } from '@dhis2/app-runtime-adapter-d2'
+import { CssVariables } from '@dhis2/ui'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import React from 'react'
+import { HashRouter, Route, Switch, Redirect } from 'react-router-dom'
+import styles from './App.module.css'
+import CoreApps from './components/CoreApps'
+import CustomApps from './components/CustomApps'
+import Sidebar from './components/Sidebar'
+import './locales'
+
+import installedAppHub from './stores/installedApp.store'
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
+import './scss/style.scss'
+import theme from './theme'
+
+// TODO
+const AppHub = () => null
+const ManualInstall = () => null
+
+const App = () => {
+    const { d2 } = useD2({
+        onInitialized: d2 => {
+            installedAppHub.setState(d2.system.installedApps)
+        },
+    })
+
+    if (!d2) {
+        return null
+    }
+
+    return (
+        <MuiThemeProvider muiTheme={theme}>
+            <CssVariables spacers colors />
+            <HashRouter>
+                <div className={styles.container}>
+                    <div className={styles.sidebar}>
+                        <Sidebar />
+                    </div>
+
+                    <main className={styles.content}>
+                        <Switch>
+                            <Route exact path="/" component={CoreApps} />
+                            <Route path="/custom-apps" component={CustomApps} />
+                            <Route path="/discover" component={AppHub} />
+                            <Route
+                                path="/manual-install"
+                                component={ManualInstall}
+                            />
+                            <Redirect from="*" to="/" />
+                        </Switch>
+                    </main>
+                </div>
+            </HashRouter>
+        </MuiThemeProvider>
+    )
+}
+
+export default App

src/App.module.css

@@ -0,0 +1,22 @@
+.container {
+    display: grid;
+    height: 100%;
+    grid-template-areas: "sidebar main";
+    grid-template-columns: 224px auto;
+    color: var(--colors-grey900);
+}
+
+.sidebar {
+    grid-area: sidebar;
+    padding-top: var(--spacers-dp4);
+    height: 100%;
+    background: var(--colors-grey200);
+    border-right: 1px solid var(--colors-grey400);
+}
+
+.content {
+    position: relative;
+    grid-area: main;
+    padding: var(--spacers-dp16);
+    background: var(--colors-grey050);
+}

src/AppWrapper.js

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default () => <p>Core apps</p>

src/components/CoreApps.js

@@ -1,11 +1,9 @@
 import i18n from '@dhis2/d2-i18n'
 import { PropTypes } from '@dhis2/prop-types'
-import Sidebar from 'd2-ui/lib/sidebar/Sidebar.component'
 import { Card, CardText } from 'material-ui/Card'
 import CircularProgress from 'material-ui/CircularProgress'
 import FontIcon from 'material-ui/FontIcon'
 import LinearProgress from 'material-ui/LinearProgress'
-import Snackbar from 'material-ui/Snackbar'
 import React from 'react'
 import actions from '../actions'
 import appHubStore from '../stores/appHub.store'
@@ -43,20 +41,16 @@ const styles = {
         fontWeight: 300,
         maxWidth: 734,
     },
-    snackbar: {
-        // left: '2rem',
-        right: 'initial',
-    },
     menuLabel: {
         position: 'relative',
         top: -6,
         marginLeft: 16,
     },
 }
 
-class App extends React.Component {
-    constructor(props, context) {
-        super(props, context)
+class CustomApps extends React.Component {
+    constructor(props) {
+        super(props)
 
         this.state = {
             installedApps: [],
@@ -66,24 +60,6 @@ class App extends React.Component {
             appHub: {},
             lastUpdate: null,
         }
-
-        // Bind 'this' for functions that need it
-        ;[
-            'setSection',
-            'progress',
-            'closeSnackbar',
-            'showSnackbar',
-            'search',
-        ].forEach(fn => {
-            this[fn] = this[fn].bind(this)
-        })
-    }
-
-    getChildContext() {
-        return {
-            d2: this.props.d2,
-            muiTheme: AppTheme,
-        }
     }
 
     componentDidMount() {
@@ -113,16 +89,6 @@ class App extends React.Component {
             actions.refreshApps.subscribe(() => {
                 this.setState({ uploading: false })
             }),
-            actions.showSnackbarMessage.subscribe(params => {
-                if (this.state.snackbar) {
-                    this.setState({ snackbar: undefined })
-                    setTimeout(() => {
-                        this.setState({ snackbar: params.data })
-                    }, 150)
-                } else {
-                    this.setState({ snackbar: params.data })
-                }
-            }),
             actions.installAppVersion.subscribe(({ data }) => {
                 const app = appHubStore.getAppFromVersionId(data[0])
                 this.setSection(
@@ -136,18 +102,11 @@ class App extends React.Component {
 
     componentWillUnmount() {
         this.subscriptions.forEach(subscription => {
-            subscription.dispose()
+            subscription.remove()
         })
     }
 
-    setSection(key) {
-        if (this.sidebar) {
-            this.sidebar.clearSearchBox()
-        }
-        this.setState({ section: key, appSearch: undefined })
-    }
-
-    progress(p) {
+    progress = p => {
         if (p) {
             if (p === 1) {
                 this.setState({ uploading: false, progress: undefined })
@@ -159,15 +118,7 @@ class App extends React.Component {
         }
     }
 
-    closeSnackbar() {
-        this.setState({ snackbar: undefined })
-    }
-
-    showSnackbar(message) {
-        this.setState({ snackbar: message })
-    }
-
-    search(text) {
+    search = text => {
         if (text.length > 0) {
             this.setState({
                 appSearch: this.state.installedApps
@@ -219,7 +170,6 @@ class App extends React.Component {
                     <CircularProgress
                         mode="indeterminate"
                         color="#6688AA"
-                        // size={0.75}
                         value={this.state.progress}
                     />
                     <br />
@@ -234,14 +184,13 @@ class App extends React.Component {
 
     renderSection(key, apps, showUpload) {
         if (key === 'store') {
-            return <AppHub appHub={this.state.appHub} d2={this.props.d2} />
+            return <AppHub appHub={this.state.appHub} />
         }
 
         const filter = (key && key.toString().toUpperCase()) || 'APP'
 
         return (
             <AppList
-                d2={this.props.d2}
                 installedApps={apps}
                 uploadProgress={this.progress}
                 transitionUnmount={this.state.unmountSection}
@@ -317,29 +266,10 @@ class App extends React.Component {
             ),
         }))
 
-        const reffer = r => {
-            this.sidebar = r
-        }
-
         return (
             <div className="app">
                 <SelfUpdateNoticeBox appHub={this.state.appHub} />
-                <Sidebar
-                    sections={sections}
-                    currentSection={this.state.section}
-                    onChangeSection={this.setSection}
-                    showSearchField
-                    onChangeSearchText={this.search}
-                    ref={reffer}
-                />
-                <Snackbar
-                    message={this.state.snackbar || ''}
-                    autoHideDuration={2500}
-                    onRequestClose={this.closeSnackbar}
-                    open={!!this.state.snackbar}
-                    style={styles.snackbar}
-                />
-                <div className="content-area">
+                <div>
                     {this.state.appSearch
                         ? this.renderSearchResults()
                         : this.renderSection(
@@ -354,13 +284,5 @@ class App extends React.Component {
         )
     }
 }
-App.propTypes = {
-    d2: PropTypes.object.isRequired,
-}
-
-App.childContextTypes = {
-    d2: PropTypes.object,
-    muiTheme: PropTypes.object,
-}
 
-export default App
+export default CustomApps