fix: upgrade all packages (#201)

* fix: upgrade all packages * fix: tests * fix: wip * fix: upgrade root to react 18 * fix: set node version * fix: styling * fix: readme * fix: readme
EKarton · Oct 1, 2024 · c92f186 · c92f186
1 parent 19c8a4e
commit c92f186
Show file tree

Hide file tree

Showing 101 changed files with 7,504 additions and 6,418 deletions.
diff --git a/.github/workflows/check-pull-request.yaml b/.github/workflows/check-pull-request.yaml
@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node JS
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: Cache dependencies
         uses: actions/cache@v3.3.1
@@ -45,7 +45,7 @@ jobs:
       - name: Setup Node JS
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: Cache dependencies
         uses: actions/cache@v3.3.1
@@ -76,7 +76,7 @@ jobs:
       - name: Setup Node JS
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: Cache dependencies
         uses: actions/cache@v3.3.1

diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
 npx commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
 yarn lint-staged --debug --verbose
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -4,7 +4,4 @@
  */
 module.exports = {
   extends: ['stylelint-config-standard-scss'],
-  rules: {
-    'string-quotes': 'single',
-  },
 };
diff --git a/README.md b/README.md
@@ -2,11 +2,11 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/e431cc05-9841-4b26-9092-78783424de4b/deploy-status)](https://app.netlify.com/sites/rclonedrive/deploys) [![codecov](https://codecov.io/gh/EKarton/RClone-Drive-WebUI/branch/main/graph/badge.svg?token=IK7IKBHD45)](https://codecov.io/gh/EKarton/RClone-Drive-WebUI)
 
-### Description:
+## Description
 
 The RClone Drive Web UI is a RClone client that provides an easy-to-use web interface to view and manage your files on RClone. It uses your RClone instance's [Remote Control](https://rclone.org/rc/) to connect to your cloud drives.
 
-### Features:
+## Features
 
 - [x] Navigate and see files in directories and remotes
 - [x] See images and files in detail
@@ -18,53 +18,61 @@ The RClone Drive Web UI is a RClone client that provides an easy-to-use web inte
 - [x] Clear trash can on selected cloud providers and remotes
 - [ ] Search for files and images across remotes
 
-### Walkthrough:
+## Walkthrough
 
 Refer to [this doc](docs/Walkthrough.md) for a detailed walkthrough. However, here are a few screenshots:
 
 ![files-list-page](docs/screenshots/files-list-page.png)
 
 ![pictures-list-page](docs/screenshots/pictures-list-page.png)
 
-### Setup / Getting Started:
+## Setup / Getting Started
 
 1. Install dependencies by running `yarn install`
 2. Start your RClone instance:
 
    1. If your RClone config is in its [default location](https://rclone.org/docs/#:~:text=The%20exact%20default%20is%20a%20bit%20complex%20to%20describe%2C%20due%20to%20changes%20introduced%20through%20different%20versions%20of%20rclone%20while%20preserving%20backwards%20compatibility%2C%20but%20in%20most%20cases%20it%20is%20as%20simple%20as%3A), run:
 
-      ```
+      ```bash
       rclone rcd --rc-allow-origin 'http://localhost:3000' --rc-user='local' --rc-pass="1234" --rc-serve
       ```
 
    2. Else, if it is in a different location, run:
 
-      ```
+      ```bash
       rclone rcd --rc-allow-origin 'http://localhost:3000' --rc-user='local' --rc-pass="1234" --rc-serve --config <Path to RClone config>
       ```
 
    More info is at the [RClone docs](https://rclone.org/commands/rclone_rcd/)
 
-3. Run this app in development mode by running `yarn start-dev`. You can access your local build on http://localhost:3000 on your web browser.
+3. Run this app in development mode by running `yarn start-dev`. You can access your local build on <http://localhost:3000> on your web browser.
 
-### Useful Scripts for Local Development:
+## Useful Scripts for Local Development
 
 1. `yarn test`
 
-   Runs all test cases
+   Runs all test cases. To run only one test case, specify the relative path to the test like `yarn test src/pages/FilesPage/__tests__/index.test.js`
 
 2. `yarn build`
 
    Builds the app in production mode
 
-### Usage:
+3. `yarn lint`
+
+   Checks code formatting. To automatically fix code formatting, run `yarn lint:fix`
+
+4. `yarn start-dev`:
+
+   Starts the app in development mode
+
+## Usage
 
 Please note that this project is used for educational purposes and is not intended to be used commercially. We are not liable for any damages/changes/lost data done by this project.
 
-### Credits:
+## Credits
 
-Emilio Kartono, who made the entire project. Illustrations are from https://undraw.co/.
+Emilio Kartono, who made the entire project. Illustrations are from <https://undraw.co/>.
 
-### License:
+## License
 
 This project is protected under the GNU licence. Please refer to the LICENSE.txt for more information.
diff --git a/package.json b/package.json
@@ -2,68 +2,73 @@
   "name": "rclone-drive-webui",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "20.x"
+  },
   "scripts": {
     "clean": "rm -rf ./node_modules && rm -rf ./build",
-    "prepare": "husky install",
+    "prepare": "husky",
     "start-dev": "GENERATE_SOURCEMAP=false react-scripts start",
     "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "lint": "eslint 'src/**/*.js' && stylelint 'src/**/*.scss' && prettier --check .",
     "lint:fix": "eslint --fix 'src/**/*.js' && stylelint --fix 'src/**/*.scss' && prettier --write .",
     "test": "react-scripts test --watchAll=false --coverage"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.4.2",
-    "@mui/lab": "^5.0.0-alpha.103",
-    "@mui/material": "^5.4.3",
-    "axios": "^0.26.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/lab": "^6.0.0-beta.10",
+    "@mui/material": "^6.1.1",
+    "@mui/x-tree-view": "^7.18.0",
+    "axios": "^1.7.7",
     "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
+    "classnames": "^2.5.1",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
-    "lru-cache": "^7.4.0",
-    "notistack": "^2.0.3",
-    "pretty-bytes": "^5.6.0",
+    "lru-cache": "^11.0.1",
+    "notistack": "^3.0.1",
+    "pretty-bytes": "^6.1.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-error-boundary": "^3.1.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-file-viewer": "^1.2.1",
-    "react-intersection-observer": "^9.4.1",
-    "react-pdf": "^5.7.1",
-    "react-router-dom": "^6.2.1",
-    "react-scripts": "^5.0.0",
-    "react-virtualized": "^9.22.3",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.6",
-    "rxjs": "^7.5.2",
-    "sass": "^1.55.0",
-    "uuid": "^8.3.2",
-    "web-vitals": "^2.1.4",
-    "yarn": "^1.22.17"
+    "react-intersection-observer": "^9.13.1",
+    "react-pdf": "^9.1.1",
+    "react-router-dom": "^6.26.2",
+    "react-scripts": "^5.0.1",
+    "react-virtualized": "^9.22.5",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
+    "rxjs": "^7.8.1",
+    "sass": "^1.79.3",
+    "uuid": "^10.0.0",
+    "web-vitals": "^4.2.3",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.16.7",
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^16.0.0",
-    "@testing-library/dom": "^8.11.3",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.5.0",
-    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
-    "babel-plugin-transform-import-meta": "^2.1.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-react": "^7.24.7",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-preset-react-app": "^10.0.1",
-    "blob-polyfill": "^6.0.20211015",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.4",
-    "postcss": "^8.4.5",
-    "prettier": "^2.5.1",
-    "stylelint": "^14.13.0",
-    "stylelint-config-standard-scss": "^3.0.0"
+    "blob-polyfill": "^9.0.20240710",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard-scss": "^13.1.0"
   },
   "browserslist": {
     "production": [
@@ -78,9 +83,6 @@
     ]
   },
   "jest": {
-    "moduleNameMapper": {
-      "^react-pdf/dist/umd/entry.webpack$": "react-pdf"
-    },
     "coveragePathIgnorePatterns": [
       "<rootDir>/src/index.js",
       "<rootDir>/src/reportWebVitals.js"
@@ -92,12 +94,15 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 100,
-        "functions": 100,
-        "lines": 100,
-        "statements": 100
+        "branches": 98,
+        "functions": 98,
+        "lines": 98,
+        "statements": 98
       }
     },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!axios|pretty-bytes)"
+    ],
     "transform": {
       "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/jest-transformer.js"
     }

diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/apps/__tests__/MainApp.test.js b/src/apps/__tests__/MainApp.test.js
@@ -18,6 +18,19 @@ jest.mock('pages/PicturesPage');
 jest.mock('pages/PicturesListPage');
 jest.mock('pages/ErrorPages/NotFoundErrorPage');
 
+jest.mock('react-pdf', () => ({
+  Document: jest.fn(() => null),
+  Page: jest.fn(() => null),
+  pdfjs: {
+    GlobalWorkerOptions: {
+      workerSrc: 'mockedWorkerSrc',
+    },
+  },
+}));
+
+jest.mock('react-pdf/dist/Page/AnnotationLayer.css', () => ({}), { virtual: true });
+jest.mock('react-pdf/dist/Page/TextLayer.css', () => ({}), { virtual: true });
+
 describe('MainApp', () => {
   it('should match snapshot given valid route', () => {
     LandingPage.mockReturnValue(null);