chore: cleaned code

.prettierrc.js

@@ -6,4 +6,16 @@ module.exports = {
   trailingComma: 'es5',
   singleQuote: true,
   printWidth: 90,
+  importOrder: [
+    '<THIRD_PARTY_MODULES>',
+    '^apps/(.*)$',
+    '^assets/(.*)$',
+    '^components/(.*)$',
+    '^contexts/(.*)$',
+    '^hooks/(.*)$',
+    '^pages/(.*)$',
+    '^utils/(.*)$',
+    '^test-utils/(.*)$',
+    '^[./]',
+  ],
 };

jsconfig.json

@@ -3,5 +3,6 @@
     "module": "es2015",
     "baseUrl": "src"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules"]
 }

package.json

@@ -47,6 +47,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
+    "@trivago/prettier-plugin-sort-imports": "^3.1.1",
     "blob-polyfill": "^6.0.20211015",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",

src/apps/AuthenticatedApp.js

@@ -1,13 +1,12 @@
+import { useState } from 'react';
+import { Route, Switch } from 'react-router';
 import GlobalAppBar from 'components/GlobalAppBar';
 import GlobalNavBar from 'components/GlobalNavBar';
-import FilesPage from 'pages/FilesPage';
 import FilesListPage from 'pages/FilesListPage';
-import { useState } from 'react';
-import { Route, Switch } from 'react-router';
-import './AuthenticatedApp.scss';
-import FileViewerDialog from 'pages/FileViewerDialog';
-import PicturesPage from 'pages/PicturesPage';
+import FilesPage from 'pages/FilesPage';
 import PicturesListPage from 'pages/PicturesListPage';
+import PicturesPage from 'pages/PicturesPage';
+import './AuthenticatedApp.scss';
 
 export default function AuthenticatedApp() {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -38,7 +37,6 @@ export default function AuthenticatedApp() {
           </Switch>
         </div>
       </div>
-      <FileViewerDialog />
     </div>
   );
 }

src/apps/MainApp.js

@@ -1,9 +1,9 @@
 import { Switch, Route } from 'react-router-dom';
 import LandingPage from 'pages/LandingPage';
 import LoginPage from 'pages/LoginPage';
-import AuthenticatedApp from './AuthenticatedApp';
 import LogoutPage from 'pages/LogoutPage';
 import { AuthenticatedPaths } from 'utils/constants';
+import AuthenticatedApp from './AuthenticatedApp';
 
 export default function MainApp() {
   return (

src/apps/__tests__/AuthenticatedApp.test.js

@@ -1,24 +1,21 @@
 import AuthenticatedApp from 'apps/AuthenticatedApp';
+import GlobalAppBar from 'components/GlobalAppBar';
+import GlobalNavBar from 'components/GlobalNavBar';
 import FilesListPage from 'pages/FilesListPage';
 import FilesPage from 'pages/FilesPage';
 import PicturesListPage from 'pages/PicturesListPage';
 import PicturesPage from 'pages/PicturesPage';
-import FileViewerDialog from 'pages/FileViewerDialog';
 import { act, customRender } from 'test-utils/react';
-import GlobalAppBar from 'components/GlobalAppBar';
-import GlobalNavBar from 'components/GlobalNavBar';
 
 jest.mock('pages/FilesListPage');
 jest.mock('pages/FilesPage');
 jest.mock('pages/PicturesListPage');
 jest.mock('pages/PicturesPage');
-jest.mock('pages/FileViewerDialog');
 jest.mock('components/GlobalAppBar');
 jest.mock('components/GlobalNavBar');
 
 describe('AuthenticatedApp', () => {
   beforeEach(() => {
-    FileViewerDialog.mockReturnValue(null);
     GlobalAppBar.mockReturnValue(null);
     GlobalNavBar.mockReturnValue(null);
   });

src/apps/__tests__/MainApp.test.js

@@ -3,8 +3,8 @@ import MainApp from 'apps/MainApp';
 import LandingPage from 'pages/LandingPage';
 import LoginPage from 'pages/LoginPage';
 import LogoutPage from 'pages/LogoutPage';
-import { customRender } from 'test-utils/react';
 import { AuthenticatedPaths } from 'utils/constants';
+import { customRender } from 'test-utils/react';
 
 jest.mock('pages/LandingPage');
 jest.mock('pages/LoginPage');

src/components/Breadcrumbs.js

@@ -1,4 +1,5 @@
-import { Breadcrumbs, Typography } from '@mui/material';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Typography from '@mui/material/Typography';
 import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { hashRemotePath } from 'utils/remote-paths-url';

src/components/FileListTable/ContextMenu.js

@@ -1,10 +1,14 @@
-import { Divider, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
-import FileOpenIcon from '@mui/icons-material/FileOpen';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteIcon from '@mui/icons-material/Delete';
 import DownloadIcon from '@mui/icons-material/Download';
 import DriveFileMoveIcon from '@mui/icons-material/DriveFileMove';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DriveFileRenameOutlineIcon from '@mui/icons-material/DriveFileRenameOutline';
-import DeleteIcon from '@mui/icons-material/Delete';
+import FileOpenIcon from '@mui/icons-material/FileOpen';
+import Divider from '@mui/material/Divider';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 export default function ContextMenu({
   open,

src/components/FileListTable/FileIcon.js

@@ -1,9 +1,9 @@
-import FolderIcon from '@mui/icons-material/Folder';
 import DescriptionIcon from '@mui/icons-material/Description';
+import FolderIcon from '@mui/icons-material/Folder';
 import ImageIcon from '@mui/icons-material/Image';
 import Icon from '@mui/material/Icon';
-import './FileIcon.scss';
 import LazyImage from 'components/LazyImage';
+import './FileIcon.scss';
 
 export default function FileIcon({ file, iconSize, showPreview }) {
   if (file.isDirectory) {

src/components/FileListTable/Row.js

@@ -1,12 +1,12 @@
+import cx from 'classnames';
+import prettyBytes from 'pretty-bytes';
 import PropTypes from 'prop-types';
+import { useState } from 'react';
 import { Table } from 'semantic-ui-react';
 import { ICON_SIZE } from 'utils/constants';
-import './Row.scss';
-import prettyBytes from 'pretty-bytes';
-import { useState } from 'react';
-import cx from 'classnames';
 import ContextMenu from './ContextMenu';
 import FileIcon from './FileIcon';
+import './Row.scss';
 
 export default function Row({
   file,

src/components/FileListTable/__tests__/ContextMenu.test.js

@@ -1,5 +1,5 @@
-const { customRender } = require('test-utils/react');
-const { default: ContextMenu } = require('../ContextMenu');
+import { customRender } from 'test-utils/react';
+import ContextMenu from '../ContextMenu';
 
 describe('ContextMenu', () => {
   it('should match snapshot given it is open', () => {

src/components/FileListTable/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import { customRender } from 'test-utils/react';
-import FileListTable from '../index';
 import Row from '../Row';
+import FileListTable from '../index';
 
 jest.mock('../Row');
 

src/components/FileListTableSkeleton.js

@@ -1,6 +1,6 @@
-import { Table } from 'semantic-ui-react';
-import PropTypes from 'prop-types';
 import Skeleton from '@mui/material/Skeleton';
+import PropTypes from 'prop-types';
+import { Table } from 'semantic-ui-react';
 import './FileListTableSkeleton.scss';
 
 export default function FileListTableSkeleton({ numRows }) {

src/pages/FileViewerDialog/PDFDialogContent.js → src/components/FileViewerDialog/PDFDialogContent.js

@@ -1,6 +1,6 @@
-import { Document, Page } from 'react-pdf/dist/umd/entry.webpack';
 import { useState } from 'react';
 import 'react-pdf/dist/umd/Page/AnnotationLayer.css';
+import { Document, Page } from 'react-pdf/dist/umd/entry.webpack';
 import './PDFDialogContent.scss';
 
 export default function PDFDialogContent({ fileUrl }) {

src/pages/FileViewerDialog/TextDialogContent.js → src/components/FileViewerDialog/TextDialogContent.js

@@ -1,4 +1,5 @@
-import { DialogContent, DialogContentText } from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
 import { useState, useEffect } from 'react';
 import './TextDialogContent.scss';
 

src/pages/FileViewerDialog/__tests__/__snapshots__/index.test.js.snap → src/components/FileViewerDialog/__tests__/__snapshots__/index.test.js.snap

@@ -9,6 +9,7 @@ exports[`FileViewerDialog should match snapshot and download file when fileInfo
   />
   <div
     class="MuiModal-root fileviewer-dialog__root MuiDialog-root fileviewer-dialog css-zw3mfo-MuiModal-root-MuiDialog-root"
+    data-testid="fileviewer-dialog"
     role="presentation"
   >
     <div
@@ -102,6 +103,26 @@ exports[`FileViewerDialog should match snapshot and download file when fileInfo
                 class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
               />
             </button>
+            <button
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium fileviewer-dialog__header-content css-i4bv87-MuiSvgIcon-root"
+                data-testid="close-button"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
           </div>
         </div>
         <img
@@ -127,6 +148,7 @@ exports[`FileViewerDialog should match snapshot when api is not resolved yet 1`]
   />
   <div
     class="MuiModal-root fileviewer-dialog__root MuiDialog-root fileviewer-dialog css-zw3mfo-MuiModal-root-MuiDialog-root"
+    data-testid="fileviewer-dialog"
     role="presentation"
   >
     <div
@@ -220,6 +242,26 @@ exports[`FileViewerDialog should match snapshot when api is not resolved yet 1`]
                 class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
               />
             </button>
+            <button
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium fileviewer-dialog__header-content css-i4bv87-MuiSvgIcon-root"
+                data-testid="close-button"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
           </div>
         </div>
         <div
@@ -264,6 +306,7 @@ exports[`FileViewerDialog should match snapshot when fileInfo is an unknown file
   />
   <div
     class="MuiModal-root fileviewer-dialog__root MuiDialog-root fileviewer-dialog css-zw3mfo-MuiModal-root-MuiDialog-root"
+    data-testid="fileviewer-dialog"
     role="presentation"
   >
     <div
@@ -357,6 +400,26 @@ exports[`FileViewerDialog should match snapshot when fileInfo is an unknown file
                 class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
               />
             </button>
+            <button
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium fileviewer-dialog__header-content css-i4bv87-MuiSvgIcon-root"
+                data-testid="close-button"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
           </div>
         </div>
         <div
@@ -401,6 +464,7 @@ exports[`FileViewerDialog should match snapshot when user zooms into the dialog
   />
   <div
     class="MuiModal-root fileviewer-dialog__root MuiDialog-root fileviewer-dialog css-zw3mfo-MuiModal-root-MuiDialog-root"
+    data-testid="fileviewer-dialog"
     role="presentation"
   >
     <div
@@ -503,6 +567,26 @@ exports[`FileViewerDialog should match snapshot when user zooms into the dialog
                 class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
               />
             </button>
+            <button
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium fileviewer-dialog__header-content css-i4bv87-MuiSvgIcon-root"
+                data-testid="close-button"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
           </div>
         </div>
         <div
@@ -547,6 +631,7 @@ exports[`FileViewerDialog should match snapshot when user zooms out of the dialo
   />
   <div
     class="MuiModal-root fileviewer-dialog__root MuiDialog-root fileviewer-dialog css-zw3mfo-MuiModal-root-MuiDialog-root"
+    data-testid="fileviewer-dialog"
     role="presentation"
   >
     <div
@@ -649,6 +734,26 @@ exports[`FileViewerDialog should match snapshot when user zooms out of the dialo
                 class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
               />
             </button>
+            <button
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium fileviewer-dialog__header-content css-i4bv87-MuiSvgIcon-root"
+                data-testid="close-button"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
           </div>
         </div>
         <div