fix: optimize images and add skeleton

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
   extends: ['react-app', 'react-app/jest', 'plugin:prettier/recommended'],
   plugins: ['prettier'],
   rules: {
-    'no-unused-vars': 'error',
+    'no-unused-vars': 'warn',
     'no-console': ['error', { allow: ['warn', 'error'] }],
   },
 };

src/apps/MainApp.js

@@ -2,6 +2,7 @@ import { Switch, Route } from 'react-router-dom';
 import LandingPage from 'pages/LandingPage';
 import LoginPage from 'pages/LoginPage';
 import AuthenticatedApp, { AuthenticatedPaths } from './AuthenticatedApp';
+import LogoutPage from 'pages/LogoutPage';
 
 export default function MainApp() {
   return (
@@ -12,6 +13,9 @@ export default function MainApp() {
       <Route path="/login">
         <LoginPage />
       </Route>
+      <Route path="/logout">
+        <LogoutPage />
+      </Route>
       <Route paths={AuthenticatedPaths}>
         <AuthenticatedApp />
       </Route>

src/components/FileListTableSkeleton.js

@@ -0,0 +1,29 @@
+import { Table } from 'semantic-ui-react';
+import Skeleton from '@mui/material/Skeleton';
+
+export function FileListTableSkeleton({ numRows }) {
+  return (
+    <Table striped>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Name</Table.HeaderCell>
+          <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          <Table.HeaderCell>File Size</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {Array.from({ length: numRows }, () => (
+          <Table.Row span>
+            <Table.Cell colspan={3}>
+              <Skeleton animation="wave" />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+}
+
+FileListTableSkeleton.defaultProps = {
+  numRows: 5,
+};

src/components/GlobalAppBar.js

@@ -2,8 +2,10 @@ import AppBar from '@mui/material/AppBar';
 import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 import Toolbar from '@mui/material/Toolbar';
-import RCloneLogo from 'assets/images/rclone-icon/logo_on_light__horizontal_color_256px.png';
+import SettingsIcon from '@mui/icons-material/Settings';
+import LogoutIcon from '@mui/icons-material/Logout';
 import './GlobalAppBar.scss';
+import { Link } from 'react-router-dom';
 
 export default function GlobalAppBar({ onDrawerButttonClicked }) {
   return (
@@ -18,7 +20,17 @@ export default function GlobalAppBar({ onDrawerButttonClicked }) {
         >
           <MenuIcon />
         </IconButton>
-        <img className="global-app-bar__logo" src={RCloneLogo} alt="RClone" />
+        <div className="global-app-bar__logo" />
+        <div>
+          <IconButton aria-label="settings">
+            <SettingsIcon />
+          </IconButton>
+          <Link to="/logout">
+            <IconButton>
+              <LogoutIcon />
+            </IconButton>
+          </Link>
+        </div>
       </Toolbar>
     </AppBar>
   );

src/components/GlobalAppBar.scss

@@ -11,6 +11,7 @@
     background-origin: content-box;
     background-position: left center;
     height: 1.5rem;
+    flex-grow: 1;
   }
 
   &__nav-button {

src/components/GlobalNavBar.js

@@ -38,7 +38,9 @@ export default function GlobalNavBar({ isExpanded }) {
         root: cx('global-navbar', {
           'global-navbar--expanded': isExpanded,
         }),
-        paper: 'global-navbar__paper',
+        paper: cx('global-navbar__paper', {
+          'global-navbar__paper--expanded': isExpanded,
+        }),
       }}
     >
       <List>

src/components/GlobalNavBar.scss

@@ -25,14 +25,14 @@ $minimized-navbar-width: 4rem;
   .global-navbar {
     width: $minimized-navbar-width;
 
-    &__paper {
-      width: $minimized-navbar-width;
-    }
-
     &--expanded {
       width: $maximized-navbar-width;
+    }
+
+    &__paper {
+      width: $minimized-navbar-width;
 
-      &__paper {
+      &--expanded {
         width: $maximized-navbar-width;
       }
     }

src/components/Image.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import useRCloneClient from 'hooks/useRCloneClient';
+import { Skeleton } from '@mui/material';
+import cx from 'classnames';
+import './Image.scss';
+
+export default function Image({ image, width, height, imgClassName, skeletonClassName }) {
+  const rCloneClient = useRCloneClient();
+  const [imageUrl, setImageUrl] = useState();
+  const [error, setError] = useState();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setError(undefined);
+        setImageUrl(undefined);
+
+        const imageBlob = await rCloneClient.fetchFileContents(
+          image.remote,
+          image.folderPath,
+          image.fileName
+        );
+
+        const imageUrl = URL.createObjectURL(new Blob([imageBlob]));
+        setImageUrl(imageUrl);
+      } catch (error) {
+        setError(error);
+      }
+    };
+
+    if (!imageUrl && image) {
+      fetchData();
+    }
+
+    return () => {
+      if (imageUrl) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [image, imageUrl, rCloneClient]);
+
+  if (!imageUrl) {
+    return (
+      <Skeleton
+        variant="rectangular"
+        className={cx('image', skeletonClassName)}
+        width={width}
+        height={height}
+      />
+    );
+  }
+
+  return (
+    <img
+      className={cx('image', imgClassName)}
+      src={imageUrl}
+      alt={image.fileName}
+      loading="lazy"
+      width={width}
+      height={height}
+    />
+  );
+}

src/components/Image.scss

@@ -0,0 +1,5 @@
+.image {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}

src/components/LazyImage.js

@@ -1,8 +1,5 @@
-import { Skeleton } from '@mui/material';
-import useRCloneClient from 'hooks/useRCloneClient';
-import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
-import cx from 'classnames';
+import Image from './Image';
 import './LazyImage.scss';
 
 export default function LazyImage({ image, width, height, imgClassName }) {
@@ -11,64 +8,25 @@ export default function LazyImage({ image, width, height, imgClassName }) {
     rootMargin: '0px',
   });
 
-  const rCloneClient = useRCloneClient();
-  const [imageUrl, setImageUrl] = useState();
-  const [error, setError] = useState();
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setError(undefined);
-        setImageUrl(undefined);
-
-        const imageBlob = await rCloneClient.fetchFileContents(
-          image.remote,
-          image.folderPath,
-          image.fileName
-        );
-
-        const imageUrl = URL.createObjectURL(new Blob([imageBlob]));
-        setImageUrl(imageUrl);
-      } catch (error) {
-        setError(error);
-      }
-    };
-
-    if (inView && !imageUrl && image) {
-      fetchData();
-    }
-
-    return () => {
-      if (imageUrl) {
-        URL.revokeObjectURL(imageUrl);
-      }
-    };
-  }, [image, imageUrl, inView, rCloneClient]);
-
   const renderContent = () => {
-    if (error) {
-      return <div>Error! {error.message}</div>;
-    }
-
-    if (!imageUrl) {
-      return <Skeleton variant="rectangular" className="lazy-image__skeleton" />;
+    if (!inView) {
+      return null;
     }
 
     return (
-      <img
-        className={cx('lazy-image__img', imgClassName)}
-        src={imageUrl}
-        alt={image.fileName}
-        loading="lazy"
+      <Image
+        image={image}
         width={width}
         height={height}
+        imgClassName="lazy-image__img"
+        skeletonClassName="lazy-image__skeleton"
       />
     );
   };
 
   return (
     <div ref={ref} data-inview={inView} style={{ width, height }}>
-      {inView ? renderContent() : null}
+      {renderContent()}
     </div>
   );
 }

src/components/LazyImage.scss

@@ -1,11 +1,19 @@
 .lazy-image {
   &__img {
-    object-fit: contain;
-    background-color: black;
-    padding: 0.25rem;
+    object-fit: cover;
+    // background-color: #121212;
+    padding: 0.125rem;
+  }
+
+  &__skeleton-wrapper {
+    // background-color: #121212;
+    width: 100% !important;
+    height: 100% !important;
+    padding: 0.125rem;
   }
 
   &__skeleton {
+    // background-color: #212121 !important;
     width: 100% !important;
     height: 100% !important;
   }

src/hooks/useRCloneInfo.js

@@ -41,12 +41,24 @@ export default function useRCloneInfo() {
     return state?.[key] || localStorage.getItem(key);
   };
 
+  const removeInfo = (dispatchType, localStorageKey) => {
+    localStorage.removeItem(localStorageKey);
+    dispatch({ type: dispatchType, payload: undefined });
+  };
+
+  const clearRCloneInfo = () => {
+    removeInfo(actionTypes.SET_ENDPOINT, 'endpoint');
+    removeInfo(actionTypes.SET_ENDPOINT, 'username');
+    removeInfo(actionTypes.SET_ENDPOINT, 'password');
+  };
+
   return {
     rCloneInfo: {
       endpoint: getValue('endpoint'),
       username: getValue('username'),
       password: getValue('password'),
     },
     setRCloneInfo,
+    clearRCloneInfo,
   };
 }