Merge pull request #74 from Smithsonian/feature/repository-ui

Store migration, performance improvements and fixes, treeview issues

client/package.json

@@ -63,7 +63,8 @@
     "react-spring": "8.0.27",
     "react-toastify": "6.0.8",
     "typescript": "3.9.3",
-    "yup": "0.29.3"
+    "yup": "0.29.3",
+    "zustand": "3.1.3"
   },
   "scripts": {
     "start": "react-app-rewired start",

client/src/components/controls/LoadingButton.tsx

@@ -1,4 +1,6 @@
-import { Button, ButtonProps, CircularProgress } from '@material-ui/core'; import React from 'react';
+import React from 'react';
+import { Button, ButtonProps } from '@material-ui/core';
+import Progress from '../shared/Progress';
 
 type LoadingButtonProps = ButtonProps & {
     loading: boolean;
@@ -11,7 +13,7 @@ function LoadingButton(props: LoadingButtonProps): React.ReactElement {
     return (
         <Button {...rest}>
             {!loading && props.children}
-            {loading && <CircularProgress color='inherit' size={loaderSize || 20} />}
+            {loading && <Progress color='inherit' size={loaderSize || 20} />}
         </Button>
     );
 }

client/src/components/controls/RepositoryIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { eSystemObjectType } from '../../types/server';
+import { getTermForSystemObjectType } from '../../utils/repository';
+
+const useStyles = makeStyles(({ typography, breakpoints }) => ({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 20,
+        width: 20,
+        borderRadius: 2.5,
+        backgroundColor: ({ backgroundColor }: RepositoryIconProps) => backgroundColor,
+        [breakpoints.down('lg')]: {
+            height: 15,
+            width: 15,
+        },
+    },
+    initial: {
+        fontSize: 10,
+        fontWeight: typography.fontWeightBold,
+        color: ({ textColor }: RepositoryIconProps) => textColor,
+    }
+}));
+
+interface RepositoryIconProps {
+    objectType: eSystemObjectType;
+    backgroundColor: string;
+    textColor: string;
+}
+
+function RepositoryIcon(props: RepositoryIconProps): React.ReactElement {
+    const { objectType } = props;
+    const classes = useStyles(props);
+    const initial = getTermForSystemObjectType(objectType).toUpperCase().slice(0, 1);
+
+    return (
+        <Box className={classes.container}>
+            <Typography className={classes.initial}>{initial}</Typography>
+        </Box>
+    );
+}
+
+export default RepositoryIcon;

client/src/components/index.ts

@@ -7,7 +7,9 @@ import PrivateRoute from './shared/PrivateRoute';
 import PublicRoute from './shared/PublicRoute';
 import FieldType from './shared/FieldType';
 import Loader from './shared/Loader';
+import Progress from './shared/Progress';
 import LoadingButton from './controls/LoadingButton';
+import RepositoryIcon from './controls/RepositoryIcon';
 
 export * from './shared/Sidebar';
-export { Header, PrivateRoute, PublicRoute, FieldType, LoadingButton, Loader };
+export { Header, PrivateRoute, PublicRoute, FieldType, LoadingButton, Loader, Progress, RepositoryIcon };

client/src/components/shared/FieldType.tsx

@@ -1,6 +1,7 @@
+import { Box, BoxProps, PropTypes, Typography } from '@material-ui/core';
+import { fade, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
-import { Box, Typography, PropTypes, BoxProps } from '@material-ui/core';
-import { makeStyles, fade } from '@material-ui/core/styles';
+import Progress from './Progress';
 
 const useStyles = makeStyles(({ palette, spacing }) => ({
     container: {
@@ -14,6 +15,11 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     label: {
         margin: '5px 0px 10px 0px',
         color: palette.primary.dark
+    },
+    loading: {
+        position: 'absolute',
+        top: 16,
+        right: 10
     }
 }));
 
@@ -27,23 +33,25 @@ interface FieldTypeProps {
     align?: PropTypes.Alignment;
     marginTop?: number;
     error?: boolean;
-    children: React.ReactElement | React.ReactElement[]
+    loading?: boolean;
+    children: React.ReactNode
 }
 
 function FieldType(props: FieldTypeProps): React.ReactElement {
-    const { label, renderLabel, children, align = 'left', direction, containerProps } = props;
+    const { label, renderLabel, children, align = 'left', direction, containerProps, loading } = props;
     const classes = useStyles(props);
 
-    let content: React.ReactElement | null = <Typography align={align} className={classes.label} variant='caption'>{label}</Typography>;
+    let content: React.ReactNode = <Typography align={align} className={classes.label} variant='caption'>{label}</Typography>;
 
     if (renderLabel === false) {
         content = null;
     }
 
     return (
-        <Box className={classes.container} flexDirection={direction || 'column'} {...containerProps}>
+        <Box position='relative' className={classes.container} flexDirection={direction || 'column'} {...containerProps}>
             {content}
             {children}
+            {loading && <Progress className={classes.loading} size={15} />}
         </Box>
     );
 }

client/src/components/shared/Header.tsx

@@ -1,14 +1,13 @@
 import { Box, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useContext } from 'react';
+import React from 'react';
 import { IoIosLogOut, IoIosNotifications, IoIosSearch } from 'react-icons/io';
 import { Link, useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import API from '../../api';
-import { ROUTES, HOME_ROUTES, resolveRoute } from '../../constants';
-import { AppContext } from '../../context';
-import { Colors } from '../../theme';
 import Logo from '../../assets/images/logo-packrat.square.png';
+import { HOME_ROUTES, resolveRoute, ROUTES } from '../../constants';
+import { useUser } from '../../store';
+import { Colors } from '../../theme';
 
 const useStyles = makeStyles(({ palette, spacing }) => ({
     container: {
@@ -40,19 +39,18 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
 }));
 
 function Header(): React.ReactElement {
-    const { user, updateUser } = useContext(AppContext);
     const classes = useStyles();
     const history = useHistory();
+    const { user, logout } = useUser();
 
     const onLogout = async (): Promise<void> => {
         const isConfirmed = global.confirm('Are you sure you want to logout?');
         if (!isConfirmed) return;
 
         try {
-            const { success } = await API.logout();
+            const { success } = await logout();
 
             if (success) {
-                updateUser(null);
                 history.push(ROUTES.LOGIN);
             }
         } catch {
@@ -82,7 +80,7 @@ function Header(): React.ReactElement {
 }
 
 type NavOptionProps = {
-    children: React.ReactChild;
+    children: React.ReactNode;
     onClick?: () => void;
 };
 

client/src/components/shared/Loader.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import { Box, CircularProgress } from '@material-ui/core';
+import { Box } from '@material-ui/core';
+import Progress from './Progress';
 
 interface LoaderProps {
     size?: number;
     height?: number | string;
+    width?: number | string;
     minHeight?: number | string;
+    maxWidth?: number | string;
 }
 
 function Loader(props: LoaderProps): React.ReactElement {
-    const { size, height, minHeight } = props;
+    const { size, height, width, minHeight, maxWidth } = props;
 
     return (
         <Box
@@ -17,9 +20,11 @@ function Loader(props: LoaderProps): React.ReactElement {
             alignItems='center'
             justifyContent='center'
             height={height || '100%'}
+            width={width || '100%'}
             minHeight={minHeight}
+            maxWidth={maxWidth}
         >
-            <CircularProgress color='primary' size={size} />
+            <Progress size={size || 25} />
         </Box>
     );
 }

client/src/components/shared/PrivateRoute.tsx

@@ -2,18 +2,18 @@
  * PrivateRoute
  * Renders a route only if the user is authenticated else redirects to login
  */
-import React, { useContext } from 'react';
+import React from 'react';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
 import { ROUTES } from '../../constants';
-import { AppContext } from '../../context';
+import { useUser } from '../../store';
 
 interface PrivateRouteProps {
     component?: React.ComponentType<unknown>;
     children?: unknown;
 }
 
 function PrivateRoute({ component: Component, children, ...rest }: PrivateRouteProps & RouteProps): React.ReactElement {
-    const { user } = useContext(AppContext);
+    const user = useUser(state => state.user);
 
     const render = props => {
 

client/src/components/shared/Progress.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CircularProgress, CircularProgressProps } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() => ({
+    container: {
+        animationDuration: '750ms'
+    }
+}));
+
+function Progress({ className, ...props }: CircularProgressProps): React.ReactElement {
+    const classes = useStyles();
+
+    return (
+        <CircularProgress className={`${classes.container} ${className}`} color='primary' thickness={2} {...props} />
+    );
+}
+
+export default Progress;

client/src/components/shared/PublicRoute.tsx

@@ -2,18 +2,18 @@
  * PublicRoute
  * Renders a route based on authentication and restriction specified
  */
-import React, { useContext } from 'react';
+import React from 'react';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
 import { ROUTES } from '../../constants';
-import { AppContext } from '../../context';
+import { useUser } from '../../store';
 
 interface PublicRouteProps {
     restricted?: boolean;
     component: React.ComponentType<unknown>;
 }
 
 function PublicRoute({ component: Component, restricted = false, ...rest }: PublicRouteProps & RouteProps): React.ReactElement {
-    const { user } = useContext(AppContext);
+    const user = useUser(state => state.user);
 
     const render = props => (
         !!user && restricted ? <Redirect to={ROUTES.HOME} /> : <Component {...props} />

client/src/components/shared/Sidebar/SidebarMenu.tsx

@@ -33,7 +33,7 @@ interface SidebarMenuProps {
     paramIdentifier: string;
     initialRoute?: SidebarRouteTypes;
     options: SidebarOption[];
-    children: React.ReactElement[];
+    children: React.ReactNode;
 }
 
 export function SidebarMenu(props: SidebarMenuProps): React.ReactElement {
@@ -53,14 +53,14 @@ export function SidebarMenu(props: SidebarMenuProps): React.ReactElement {
     }));
 
     return (
-        <>
+        <React.Fragment>
             <Box className={classes.container}>
                 <Typography className={classes.menuLabel} variant='caption'>{title}</Typography>
                 <Grid container className={classes.menuOptions} direction='column'>
                     {sidebarOptions.map((props, index) => <SidebarMenuOption key={index} {...props} />)}
                 </Grid>
             </Box>
             {children}
-        </>
+        </React.Fragment>
     );
 }