Add settings panel

ui/src/AuthorizedRoute.js

@@ -1,7 +1,17 @@
 import React from 'react'
 import { Route, Redirect } from 'react-router-dom'
+import gql from 'graphql-tag'
+import { Query } from 'react-apollo'
 
-const AuthorizedRoute = ({ component: Component, ...props }) => {
+const adminQuery = gql`
+  query adminQuery {
+    myUser {
+      admin
+    }
+  }
+`
+
+const AuthorizedRoute = ({ component: Component, admin, ...props }) => {
   const token = localStorage.getItem('token')
 
   let unauthorizedRedirect = null
@@ -9,12 +19,30 @@ const AuthorizedRoute = ({ component: Component, ...props }) => {
     unauthorizedRedirect = <Redirect to="/login" />
   }
 
+  let adminRedirect = null
+  if (token && admin) {
+    adminRedirect = (
+      <Query query={adminQuery}>
+        {({ loading, error, data }) => {
+          if (error) alert(error)
+
+          if (data && data.myUser && !data.myUser.admin) {
+            return <Redirect to="/" />
+          }
+
+          return null
+        }}
+      </Query>
+    )
+  }
+
   return (
     <Route
       {...props}
       render={routeProps => (
         <>
           {unauthorizedRedirect}
+          {adminRedirect}
           <Component {...routeProps} />
         </>
       )}

ui/src/Layout.js

@@ -2,6 +2,16 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import { NavLink } from 'react-router-dom'
 import { Icon } from 'semantic-ui-react'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const adminQuery = gql`
+  query adminQuery {
+    myUser {
+      admin
+    }
+  }
+`
 
 const Container = styled.div`
   height: 100%;
@@ -86,6 +96,20 @@ class Layout extends Component {
             <Icon name="images outline" />
             <SideButtonLabel>Albums</SideButtonLabel>
           </SideButton>
+          <Query query={adminQuery}>
+            {({ loading, error, data }) => {
+              if (data && data.myUser && data.myUser.admin) {
+                return (
+                  <SideButton to="/settings" exact>
+                    <Icon name="settings" />
+                    <SideButtonLabel>Settings</SideButtonLabel>
+                  </SideButton>
+                )
+              }
+
+              return null
+            }}
+          </Query>
         </LeftSidebar>
         <Content>{this.props.children}</Content>
         <Header>

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -7,7 +7,7 @@ import PhotoSidebar from '../../components/sidebar/PhotoSidebar'
 
 const photoQuery = gql`
   query allPhotosPage {
-    myAlbums(orderBy: title_asc) {
+    myAlbums(orderBy: title_asc, filter: { photos_not: null }) {
       title
       id
       photos(orderBy: title_desc, first: 12) {

ui/src/Pages/SettingsPage/SettingsPage.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import Layout from '../../Layout'
+
+import { Button, Icon } from 'semantic-ui-react'
+import { Mutation } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const scanMutation = gql`
+  mutation scanAllMutation {
+    scanAll {
+      success
+      errorMessage
+    }
+  }
+`
+
+const SettingsPage = () => (
+  <Layout>
+    <h1>Settings</h1>
+    <Mutation mutation={scanMutation}>
+      {(scan, { data }) => (
+        <>
+          <h2>Scanner</h2>
+          <Button
+            icon
+            labelPosition="left"
+            onClick={() => {
+              scan()
+            }}
+            disabled={data && data.scanAll && data.scanAll.success}
+          >
+            <Icon name="sync" />
+            Scan All
+          </Button>
+          <p>Scan for new images for all users</p>
+        </>
+      )}
+    </Mutation>
+  </Layout>
+)
+
+export default SettingsPage

ui/src/Routes.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Route, Switch, Redirect } from 'react-router-dom'
 
 import { Loader } from 'semantic-ui-react'
+import Layout from './Layout'
 
 const AlbumsPage = React.lazy(() => import('./Pages/AllAlbumsPage/AlbumsPage'))
 const AlbumPage = React.lazy(() => import('./Pages/AlbumPage/AlbumPage'))
@@ -13,17 +14,28 @@ const InitialSetupPage = React.lazy(() =>
   import('./Pages/LoginPage/InitialSetupPage')
 )
 
+const SettingsPage = React.lazy(() =>
+  import('./Pages/SettingsPage/SettingsPage')
+)
+
 class Routes extends React.Component {
   render() {
     return (
-      <React.Suspense fallback={<Loader active>Loading page</Loader>}>
+      <React.Suspense
+        fallback={
+          <Layout>
+            <Loader active>Loading page</Loader>
+          </Layout>
+        }
+      >
         <Switch>
           <Route path="/login" component={LoginPage} />
           <Route path="/initialSetup" component={InitialSetupPage} />
           <AuthorizedRoute exact path="/albums" component={AlbumsPage} />
           <AuthorizedRoute path="/album/:id" component={AlbumPage} />
           <AuthorizedRoute path="/photos" component={PhotosPage} />
-          <Route path="/" exact render={() => <Redirect to="photos" />} />
+          <AuthorizedRoute admin path="/settings" component={SettingsPage} />
+          <Route path="/" exact render={() => <Redirect to="/photos" />} />
           <Route render={() => <div>Page not found</div>} />
         </Switch>
       </React.Suspense>