Add 'withAdmin' HOC

src/App.jsx

@@ -3,14 +3,16 @@ import { Switch, Route } from 'react-router-dom';
 
 import * as routes from './routes';
 
-import Files from './pages/Files';
-import Trash from './pages/Trash';
+import withAdmin from './hoc/withAdmin';
 
 import SideBar from './containers/SideBar';
-
 import Toast from './containers/Toast';
 import ToastItem from './containers/ToastItem';
 
+import Files from './pages/Files';
+import Trash from './pages/Trash';
+import UserManagement from './pages/admin/UserManagement';
+
 function App() {
   return (
     <>
@@ -22,6 +24,7 @@ function App() {
           <Switch>
             <Route path={routes.FILES.route} component={Files} />
             <Route path={routes.TRASH.route} component={Trash} />
+            <Route path={routes.USER_MANAGEMENT.route} component={withAdmin(UserManagement)} />
           </Switch>
         </div>
       </div>

src/components/SideBar.jsx

@@ -3,25 +3,26 @@ import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
 import * as icons from '../icons';
+import * as routes from '../routes';
 
 import AccountMenu from '../containers/AccountMenu';
 
 export const menu = [
   {
-    path: '/files',
+    path: routes.FILES.reverse({ path: '.' }),
     title: 'Files',
     icon: <icons.File className="flex-shrink-0 w-5 h-5 mr-3" />,
   },
   {
-    path: '/trash',
+    path: routes.TRASH.reverse({ path: '.' }),
     title: 'Trash',
     icon: <icons.TrashOutlined className="flex-shrink-0 w-5 h-5 mr-3" />,
   },
 ];
 
 const adminMenu = [
   {
-    path: '/admin/users',
+    path: routes.USER_MANAGEMENT.reverse(),
     title: 'User management',
     icon: <icons.UsersOutline className="flex-shrink-0 w-5 h-5 mr-3" />,
   },

src/hoc/withAdmin.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { isAdmin } from '../store/reducers/accounts';
+
+import Forbidden from '../pages/Forbidden';
+
+export default function (Component) {
+  return function AdminComponent(props) {
+    const admin = useSelector(isAdmin);
+
+    if (admin) {
+      return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <Component {...props} />
+      );
+    }
+
+    // return null;
+    return <Forbidden />;
+  };
+}

src/hoc/withAuth.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { getIsAuthenticated } from '../store/reducers/auth';
+
+export default function (Component) {
+  return function AuthenticatedComponent(props) {
+    const history = useHistory();
+    const location = useLocation();
+    const authenticated = useSelector(getIsAuthenticated);
+
+    React.useEffect(() => {
+      if (!authenticated) {
+        const nextLocation = (location.pathname !== '/') ? location.pathname : '/files';
+        history.push(`/signin?next=${nextLocation}`);
+      }
+    }, [authenticated, location.pathname, history]);
+
+    return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <Component {...props} />
+    );
+  };
+}

src/index.jsx

@@ -1,15 +1,20 @@
 import React from 'react';
+
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import './index.css';
-import './tailwind.generated.css';
-import App from './App';
+
+import store from './store/store';
+
+import withAuth from './hoc/withAuth';
+
 import Login from './pages/Login';
-import withAuth from './containers/withAuth';
+
 import * as serviceWorker from './serviceWorker';
+import App from './App';
 
-import store from './store/store';
+import './index.css';
+import './tailwind.generated.css';
 
 ReactDOM.render(
   <React.StrictMode>

src/pages/Forbidden.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import * as icons from '../icons';
+
+import Button from '../components/ui/Button';
+
+function Forbidden() {
+  const history = useHistory();
+
+  return (
+    <div className="fixed inset-0 bg-white z-50">
+      <div className="flex flex-col items-center justify-center min-h-screen space-y-8">
+        <h1 className="text-3xl">
+          Forbidden
+        </h1>
+        <Button
+          type="text"
+          size="lg"
+          icon={<icons.ArrowLeft />}
+          title="Go back"
+          onClick={() => history.push('/')}
+        >
+          Go home
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default Forbidden;

src/pages/admin/UserManagement.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function UserManagement() {
+  return (
+    <div>
+      User Management
+    </div>
+  );
+}
+
+export default UserManagement;

src/routes.js

@@ -56,4 +56,14 @@ export const FILES = {
 
 export const TRASH = {
   route: '/trash/:dirPath*',
+  reverse({ path }) {
+    return join('/trash', path);
+  },
+};
+
+export const USER_MANAGEMENT = {
+  route: '/admin/user-management',
+  reverse() {
+    return this.route;
+  },
 };

src/store/reducers/accounts.js

@@ -20,3 +20,4 @@ export default combineReducers({
 });
 
 export const getCurrentAccount = (state) => state.accounts.currentAccount;
+export const isAdmin = (state) => getCurrentAccount(state)?.superuser ?? false;