build(deps): bump dependencies (#2427)

* build(deps): bump dependencies

* build(deps): bump next to 12.0.8

* build(deps): bump swr to 1.1.2

* build(deps): bump more dependencies

* build(deps): bump husky to 7.0.4

* fix: remove user list button outlines

* build(deps): bump dependencies again

* build(deps): bump dependencies once more

.dockerignore

@@ -10,6 +10,7 @@
 .gitconfig
 .github
 .gitignore
+.husky
 .next
 .prettierignore
 config/db/*

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     container: node:14.18-alpine
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
       - name: Install dependencies
         env:
           HUSKY_SKIP_INSTALL: 1
@@ -32,31 +32,31 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1.3.0
+        uses: docker/setup-buildx-action@v1.6.0
       - name: Cache Docker layers
-        uses: actions/cache@v2.1.6
+        uses: actions/cache@v2.1.7
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-buildx-
       - name: Log in to Docker Hub
-        uses: docker/login-action@v1.9.0
+        uses: docker/login-action@v1.12.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}
       - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v1.9.0
+        uses: docker/login-action@v1.12.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        uses: docker/build-push-action@v2.5.0
+        uses: docker/build-push-action@v2.8.0
         with:
           context: .
           file: ./Dockerfile
@@ -86,7 +86,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Get Build Job Status
-        uses: technote-space/workflow-conclusion-action@v2.1.6
+        uses: technote-space/workflow-conclusion-action@v2.2.2
       - name: Combine Job Status
         id: status
         run: |

.github/workflows/deploy_docs.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Generate Swagger UI
-        uses: Legion2/swagger-ui-action@v1.1.2
+        uses: Legion2/swagger-ui-action@v1.1.3
         with:
           output: swagger-ui
           spec-file: overseerr-api.yml

.github/workflows/preview.yml

@@ -11,27 +11,27 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
       - name: Get the version
         id: get_version
         run: echo ::set-output name=VERSION::${GITHUB_REF#refs/tags/}
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1.3.0
+        uses: docker/setup-buildx-action@v1.6.0
       - name: Log in to Docker Hub
-        uses: docker/login-action@v1.9.0
+        uses: docker/login-action@v1.12.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}
       - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v1.9.0
+        uses: docker/login-action@v1.12.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        uses: docker/build-push-action@v2.5.0
+        uses: docker/build-push-action@v2.8.0
         with:
           context: .
           file: ./Dockerfile

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
     container: node:14.18-alpine
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
       - name: Install dependencies
         env:
           HUSKY_SKIP_INSTALL: 1
@@ -28,7 +28,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
         with:
           fetch-depth: 0
       - name: Set up Node.js
@@ -38,14 +38,14 @@ jobs:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1.3.0
+        uses: docker/setup-buildx-action@v1.6.0
       - name: Log in to Docker Hub
-        uses: docker/login-action@v1.9.0
+        uses: docker/login-action@v1.12.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}
       - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v1.9.0
+        uses: docker/login-action@v1.12.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -72,7 +72,7 @@ jobs:
           - armhf
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
         with:
           fetch-depth: 0
       - name: Switch to master branch
@@ -120,7 +120,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Get Build Job Status
-        uses: technote-space/workflow-conclusion-action@v2.1.6
+        uses: technote-space/workflow-conclusion-action@v2.2.2
       - name: Combine Job Status
         id: status
         run: |

.github/workflows/snap.yaml

@@ -12,7 +12,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     steps:
       - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.0
+        uses: styfle/cancel-workflow-action@0.9.1
         with:
           access_token: ${{ secrets.GITHUB_TOKEN }}
 
@@ -23,7 +23,7 @@ jobs:
     container: node:14.18-alpine
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
       - name: Install dependencies
         env:
           HUSKY_SKIP_INSTALL: 1
@@ -46,7 +46,7 @@ jobs:
           - armhf
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.4.0
       - name: Prepare
         id: prepare
         run: |
@@ -88,7 +88,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Get Build Job Status
-        uses: technote-space/workflow-conclusion-action@v2.1.6
+        uses: technote-space/workflow-conclusion-action@v2.2.2
       - name: Combine Job Status
         id: status
         run: |

.github/workflows/support.yml

@@ -8,7 +8,7 @@ jobs:
   support:
     runs-on: ubuntu-20.04
     steps:
-      - uses: dessant/support-requests@v2.0.1
+      - uses: dessant/support-requests@v2.1.2
         with:
           github-token: ${{ github.token }}
           support-label: 'support'

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+[[ -n $HUSKY_BYPASS ]] || npx commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.husky/prepare-commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+exec < /dev/tty && npx cz --hook || true

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package.json

@@ -13,7 +13,8 @@
     "migration:generate": "ts-node --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:generate",
     "migration:create": "ts-node --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:create",
     "migration:run": "ts-node --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:run",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -21,45 +22,45 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@headlessui/react": "^1.4.1",
+    "@headlessui/react": "^1.4.3",
-    "@heroicons/react": "^1.0.4",
+    "@heroicons/react": "^1.0.5",
     "@supercharge/request-ip": "^1.1.2",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.2.0",
-    "@tanem/react-nprogress": "^3.0.79",
+    "@tanem/react-nprogress": "^4.0.2",
-    "ace-builds": "^1.4.12",
+    "ace-builds": "^1.4.13",
     "axios": "^0.21.4",
     "bcrypt": "^5.0.1",
     "bowser": "^2.11.0",
     "connect-typeorm": "^1.1.4",
-    "cookie-parser": "^1.4.5",
+    "cookie-parser": "^1.4.6",
     "copy-to-clipboard": "^3.3.1",
-    "country-flag-icons": "^1.4.10",
+    "country-flag-icons": "^1.4.19",
     "csurf": "^1.11.0",
     "email-templates": "^8.0.8",
-    "express": "^4.17.1",
+    "express": "^4.17.2",
-    "express-openapi-validator": "^4.13.1",
+    "express-openapi-validator": "^4.13.5",
-    "express-rate-limit": "^5.3.0",
+    "express-rate-limit": "^6.1.0",
     "express-session": "^1.17.2",
     "formik": "^2.2.9",
-    "gravatar-url": "3.1.0",
+    "gravatar-url": "^3.1.0",
     "intl": "^1.2.5",
     "lodash": "^4.17.21",
-    "next": "11.1.2",
+    "next": "12.0.8",
     "node-cache": "^5.1.2",
-    "node-schedule": "^2.0.0",
+    "node-schedule": "^2.1.0",
-    "nodemailer": "^6.6.3",
+    "nodemailer": "^6.7.2",
-    "openpgp": "^5.0.0-3",
+    "openpgp": "^5.0.1",
-    "plex-api": "^5.3.1",
+    "plex-api": "^5.3.2",
     "pug": "^3.0.2",
     "react": "17.0.2",
-    "react-ace": "^9.3.0",
+    "react-ace": "^9.5.0",
     "react-animate-height": "^2.0.23",
     "react-dom": "17.0.2",
-    "react-intersection-observer": "^8.32.1",
+    "react-intersection-observer": "^8.33.1",
-    "react-intl": "5.20.10",
+    "react-intl": "5.24.3",
-    "react-markdown": "^6.0.2",
+    "react-markdown": "^8.0.0",
     "react-select": "^4.3.1",
-    "react-spring": "^9.2.4",
+    "react-spring": "^9.4.2",
     "react-toast-notifications": "^2.5.1",
     "react-transition-group": "^4.4.2",
     "react-truncate-markup": "^5.1.0",
@@ -67,93 +68,84 @@
     "reflect-metadata": "^0.1.13",
     "secure-random-password": "^0.2.3",
     "sqlite3": "^5.0.2",
-    "swagger-ui-express": "^4.1.6",
+    "swagger-ui-express": "^4.3.0",
-    "swr": "^0.5.6",
+    "swr": "^1.1.2",
-    "typeorm": "0.2.37",
+    "typeorm": "0.2.41",
     "web-push": "^3.4.5",
-    "winston": "^3.3.3",
+    "winston": "^3.4.0",
     "winston-daily-rotate-file": "^4.5.5",
     "xml2js": "^0.4.23",
     "yamljs": "^0.3.0",
-    "yup": "^0.32.9"
+    "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
+    "@babel/cli": "^7.16.8",
-    "@commitlint/cli": "^13.1.0",
+    "@commitlint/cli": "^16.0.3",
-    "@commitlint/config-conventional": "^13.1.0",
+    "@commitlint/config-conventional": "^16.0.0",
-    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/changelog": "^6.0.1",
-    "@semantic-release/commit-analyzer": "^9.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
-    "@semantic-release/exec": "^5.0.0",
+    "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/git": "^9.0.1",
+    "@semantic-release/git": "^10.0.1",
-    "@tailwindcss/aspect-ratio": "^0.2.1",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@tailwindcss/forms": "^0.3.3",
+    "@tailwindcss/forms": "^0.4.0",
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/typography": "^0.5.0",
     "@types/bcrypt": "^5.0.0",
     "@types/cookie-parser": "^1.4.2",
     "@types/country-flag-icons": "^1.2.0",
     "@types/csurf": "^1.11.2",
     "@types/email-templates": "^8.0.4",
     "@types/express": "^4.17.13",
-    "@types/express-rate-limit": "^5.1.3",
+    "@types/express-session": "^1.17.4",
-    "@types/express-session": "^1.17.3",
+    "@types/lodash": "^4.14.178",
-    "@types/lodash": "^4.14.173",
+    "@types/node": "^17.0.10",
-    "@types/node": "^15.6.1",
     "@types/node-schedule": "^1.3.2",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.22",
+    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^17.0.11",
     "@types/react-select": "^4.0.17",
-    "@types/react-toast-notifications": "^2.4.1",
+    "@types/react-transition-group": "^4.4.4",
-    "@types/react-transition-group": "^4.4.3",
     "@types/secure-random-password": "^0.2.1",
     "@types/swagger-ui-express": "^4.1.3",
     "@types/web-push": "^3.3.2",
     "@types/xml2js": "^0.4.9",
     "@types/yamljs": "^0.2.31",
     "@types/yup": "^0.29.13",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^4.31.1",
+    "@typescript-eslint/parser": "^5.10.0",
-    "autoprefixer": "^10.3.4",
+    "autoprefixer": "^10.4.2",
     "babel-plugin-react-intl": "^8.2.25",
     "babel-plugin-react-intl-auto": "^3.3.0",
     "commitizen": "^4.2.4",
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.7.0",
-    "eslint-config-next": "^11.1.2",
+    "eslint-config-next": "^12.0.8",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-formatjs": "^2.17.6",
+    "eslint-plugin-formatjs": "^2.20.3",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.3",
+    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "extract-react-intl-messages": "^4.1.1",
-    "husky": "4.3.8",
+    "husky": "^7.0.4",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^12.2.1",
-    "nodemon": "^2.0.12",
+    "nodemon": "^2.0.15",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.5",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
-    "semantic-release": "^18.0.0",
+    "semantic-release": "^19.0.2",
     "semantic-release-docker-buildx": "^1.0.1",
-    "tailwindcss": "^2.2.15",
+    "tailwindcss": "^3.0.15",
-    "ts-node": "^10.2.1",
+    "ts-node": "^10.4.0",
-    "typescript": "^4.4.3"
+    "typescript": "^4.5.4"
   },
   "resolutions": {
-    "sqlite3/node-gyp": "^5.1.0"
+    "sqlite3/node-gyp": "^8.4.1"
   },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
-      "commit-msg": "[[ -n $HUSKY_BYPASS ]] || commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "lint-staged": {
     "**/*.{ts,tsx,js}": [
       "prettier --write",

server/tsconfig.json

@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "target": "ES2019",
+    "target": "ES2020",
-    "lib": ["ES2019"],
     "module": "commonjs",
     "outDir": "../dist",
     "noEmit": false

src/components/CollectionDetails/index.tsx

@@ -41,13 +41,14 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   const [requestModal, setRequestModal] = useState(false);
   const [is4k, setIs4k] = useState(false);
 
-  const { data, error, revalidate } = useSWR<Collection>(
+  const {
-    `/api/v1/collection/${router.query.collectionId}`,
+    data,
-    {
+    error,
-      initialData: collection,
+    mutate: revalidate,
-      revalidateOnMount: true,
+  } = useSWR<Collection>(`/api/v1/collection/${router.query.collectionId}`, {
-    }
+    fallbackData: collection,
-  );
+    revalidateOnMount: true,
+  });
 
   const { data: genres } =
     useSWR<{ id: number; name: string }[]>(`/api/v1/genres/movie`);

src/components/IssueDetails/index.tsx

@@ -80,7 +80,7 @@ const IssueDetails: React.FC = () => {
   const intl = useIntl();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const { user: currentUser, hasPermission } = useUser();
-  const { data: issueData, revalidate: revalidateIssue } = useSWR<Issue>(
+  const { data: issueData, mutate: revalidateIssue } = useSWR<Issue>(
     `/api/v1/issue/${router.query.issueId}`
   );
   const { data, error } = useSWR<MovieDetails | TvDetails>(

src/components/MediaSlider/index.tsx

@@ -1,7 +1,7 @@
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
 import React, { useEffect } from 'react';
-import { useSWRInfinite } from 'swr';
+import useSWRInfinite from 'swr/infinite';
 import { MediaStatus } from '../../../server/constants/media';
 import type {
   MovieResult,

src/components/MovieDetails/index.tsx

@@ -90,12 +90,13 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   const [showMoreStudios, setShowMoreStudios] = useState(false);
   const [showIssueModal, setShowIssueModal] = useState(false);
 
-  const { data, error, revalidate } = useSWR<MovieDetailsType>(
+  const {
-    `/api/v1/movie/${router.query.movieId}`,
+    data,
-    {
+    error,
-      initialData: movie,
+    mutate: revalidate,
-    }
+  } = useSWR<MovieDetailsType>(`/api/v1/movie/${router.query.movieId}`, {
-  );
+    fallbackData: movie,
+  });
 
   const { data: ratingData } = useSWR<RTRating>(
     `/api/v1/movie/${router.query.movieId}/ratings`

src/components/RequestCard/index.tsx

@@ -112,9 +112,9 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
   const {
     data: requestData,
     error: requestError,
-    revalidate,
+    mutate: revalidate,
   } = useSWR<MediaRequest>(`/api/v1/request/${request.id}`, {
-    initialData: request,
+    fallbackData: request,
   });
 
   const modifyRequest = async (type: 'approve' | 'decline') => {

src/components/RequestList/RequestItem/index.tsx

@@ -106,13 +106,12 @@ const RequestItem: React.FC<RequestItemProps> = ({
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
     inView ? url : null
   );
-  const {
+  const { data: requestData, mutate: revalidate } = useSWR<MediaRequest>(
-    data: requestData,
+    `/api/v1/request/${request.id}`,
-    revalidate,
+    {
-    mutate,
+      fallbackData: request,
-  } = useSWR<MediaRequest>(`/api/v1/request/${request.id}`, {
+    }
-    initialData: request,
+  );
-  });
 
   const [isRetrying, setRetrying] = useState(false);
 
@@ -135,7 +134,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
 
     try {
       const result = await axios.post(`/api/v1/request/${request.id}/retry`);
-      mutate(result.data);
+      revalidate(result.data);
     } catch (e) {
       addToast(intl.formatMessage(messages.failedretry), {
         autoDismiss: true,

src/components/RequestList/index.tsx

@@ -51,7 +51,11 @@ const RequestList: React.FC = () => {
   const pageIndex = page - 1;
   const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
 
-  const { data, error, revalidate } = useSWR<RequestResultsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<RequestResultsResponse>(
     `/api/v1/request?take=${currentPageSize}&skip=${
       pageIndex * currentPageSize
     }&filter=${currentFilter}&sort=${currentSort}${

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -34,9 +34,11 @@ const NotificationsDiscord: React.FC = () => {
   const settings = useSettings();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/discord'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/discord');
 
   const NotificationsDiscordSchema = Yup.object().shape({
     botAvatarUrl: Yup.string()

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -58,9 +58,11 @@ const NotificationsEmail: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/email'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/email');
 
   const NotificationsEmailSchema = Yup.object().shape(
     {

src/components/Settings/Notifications/NotificationsGotify/index.tsx

@@ -30,9 +30,11 @@ const NotificationsGotify: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/gotify'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/gotify');
 
   const NotificationsGotifySchema = Yup.object().shape({
     url: Yup.string()

src/components/Settings/Notifications/NotificationsLunaSea/index.tsx

@@ -31,9 +31,11 @@ const NotificationsLunaSea: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/lunasea'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/lunasea');
 
   const NotificationsLunaSeaSchema = Yup.object().shape({
     webhookUrl: Yup.string()

src/components/Settings/Notifications/NotificationsPushbullet/index.tsx

@@ -31,9 +31,11 @@ const NotificationsPushbullet: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/pushbullet'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/pushbullet');
 
   const NotificationsPushbulletSchema = Yup.object().shape({
     accessToken: Yup.string().when('enabled', {

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -33,9 +33,11 @@ const NotificationsPushover: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/pushover'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/pushover');
 
   const NotificationsPushoverSchema = Yup.object().shape({
     accessToken: Yup.string()

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -29,9 +29,11 @@ const NotificationsSlack: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/slack'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/slack');
 
   const NotificationsSlackSchema = Yup.object().shape({
     webhookUrl: Yup.string()

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -38,9 +38,11 @@ const NotificationsTelegram: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/telegram'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/telegram');
 
   const NotificationsTelegramSchema = Yup.object().shape({
     botAPI: Yup.string().when('enabled', {

src/components/Settings/Notifications/NotificationsWebPush/index.tsx

@@ -26,9 +26,11 @@ const NotificationsWebPush: React.FC = () => {
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
   const [isHttps, setIsHttps] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/webpush'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/webpush');
 
   useEffect(() => {
     setIsHttps(window.location.protocol.startsWith('https'));

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -74,9 +74,11 @@ const NotificationsWebhook: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
-  const { data, error, revalidate } = useSWR(
+  const {
-    '/api/v1/settings/notifications/webhook'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/webhook');
 
   const NotificationsWebhookSchema = Yup.object().shape({
     webhookUrl: Yup.string()

src/components/Settings/SettingsJobsCache/index.tsx

@@ -77,10 +77,14 @@ interface Job {
 const SettingsJobs: React.FC = () => {
   const intl = useIntl();
   const { addToast } = useToasts();
-  const { data, error, revalidate } = useSWR<Job[]>('/api/v1/settings/jobs', {
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<Job[]>('/api/v1/settings/jobs', {
     refreshInterval: 5000,
   });
-  const { data: cacheData, revalidate: cacheRevalidate } = useSWR<CacheItem[]>(
+  const { data: cacheData, mutate: cacheRevalidate } = useSWR<CacheItem[]>(
     '/api/v1/settings/cache',
     {
       refreshInterval: 10000,

src/components/Settings/SettingsMain.tsx

@@ -65,9 +65,11 @@ const SettingsMain: React.FC = () => {
   const { user: currentUser, hasPermission: userHasPermission } = useUser();
   const intl = useIntl();
   const { setLocale } = useLocale();
-  const { data, error, revalidate } = useSWR<MainSettings>(
+  const {
-    '/api/v1/settings/main'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR<MainSettings>('/api/v1/settings/main');
   const { data: userData } = useSWR<UserSettingsGeneralResponse>(
     currentUser ? `/api/v1/user/${currentUser.id}/settings/main` : null
   );

src/components/Settings/SettingsPlex.tsx

@@ -96,10 +96,12 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
   const [availableServers, setAvailableServers] = useState<PlexDevice[] | null>(
     null
   );
-  const { data, error, revalidate } = useSWR<PlexSettings>(
+  const {
-    '/api/v1/settings/plex'
+    data,
-  );
+    error,
-  const { data: dataSync, revalidate: revalidateSync } = useSWR<SyncStatus>(
+    mutate: revalidate,
+  } = useSWR<PlexSettings>('/api/v1/settings/plex');
+  const { data: dataSync, mutate: revalidateSync } = useSWR<SyncStatus>(
     '/api/v1/settings/plex/sync',
     {
       refreshInterval: 1000,

src/components/Settings/SettingsServices.tsx

@@ -165,12 +165,12 @@ const SettingsServices: React.FC = () => {
   const {
     data: radarrData,
     error: radarrError,
-    revalidate: revalidateRadarr,
+    mutate: revalidateRadarr,
   } = useSWR<RadarrSettings[]>('/api/v1/settings/radarr');
   const {
     data: sonarrData,
     error: sonarrError,
-    revalidate: revalidateSonarr,
+    mutate: revalidateSonarr,
   } = useSWR<SonarrSettings[]>('/api/v1/settings/sonarr');
   const [editRadarrModal, setEditRadarrModal] = useState<{
     open: boolean;

src/components/Settings/SettingsUsers/index.tsx

@@ -33,9 +33,11 @@ const messages = defineMessages({
 const SettingsUsers: React.FC = () => {
   const { addToast } = useToasts();
   const intl = useIntl();
-  const { data, error, revalidate } = useSWR<MainSettings>(
+  const {
-    '/api/v1/settings/main'
+    data,
-  );
+    error,
+    mutate: revalidate,
+  } = useSWR<MainSettings>('/api/v1/settings/main');
 
   if (!data && !error) {
     return <LoadingSpinner />;

src/components/TvDetails/index.tsx

@@ -83,12 +83,13 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
   const [showManager, setShowManager] = useState(false);
   const [showIssueModal, setShowIssueModal] = useState(false);
 
-  const { data, error, revalidate } = useSWR<TvDetailsType>(
+  const {
-    `/api/v1/tv/${router.query.tvId}`,
+    data,
-    {
+    error,
-      initialData: tv,
+    mutate: revalidate,
-    }
+  } = useSWR<TvDetailsType>(`/api/v1/tv/${router.query.tvId}`, {
-  );
+    fallbackData: tv,
+  });
 
   const { data: ratingData } = useSWR<RTRating>(
     `/api/v1/tv/${router.query.tvId}/ratings`

src/components/UserList/index.tsx

@@ -93,7 +93,11 @@ const UserList: React.FC = () => {
   const pageIndex = page - 1;
   const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
 
-  const { data, error, revalidate } = useSWR<UserResultsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserResultsResponse>(
     `/api/v1/user?take=${currentPageSize}&skip=${
       pageIndex * currentPageSize
     }&sort=${currentSort}`
@@ -472,7 +476,7 @@ const UserList: React.FC = () => {
         <div className="flex flex-col flex-grow mt-2 lg:flex-row lg:flex-grow-0">
           <div className="flex flex-col justify-between flex-grow mb-2 sm:flex-row lg:mb-0 lg:flex-grow-0">
             <Button
-              className="flex-grow mb-2 sm:mb-0 sm:mr-2 outline"
+              className="flex-grow mb-2 sm:mb-0 sm:mr-2"
               buttonType="primary"
               onClick={() => setCreateModal({ isOpen: true })}
             >
@@ -480,7 +484,7 @@ const UserList: React.FC = () => {
               <span>{intl.formatMessage(messages.createlocaluser)}</span>
             </Button>
             <Button
-              className="flex-grow outline lg:mr-2"
+              className="flex-grow lg:mr-2"
               buttonType="primary"
               onClick={() => setShowImportModal(true)}
             >

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -55,12 +55,20 @@ const UserGeneralSettings: React.FC = () => {
   const [movieQuotaEnabled, setMovieQuotaEnabled] = useState(false);
   const [tvQuotaEnabled, setTvQuotaEnabled] = useState(false);
   const router = useRouter();
-  const { user, hasPermission, mutate } = useUser({
+  const {
+    user,
+    hasPermission,
+    revalidate: revalidateUser,
+  } = useUser({
     id: Number(router.query.userId),
   });
   const { user: currentUser, hasPermission: currentHasPermission } = useUser();
   const { currentSettings } = useSettings();
-  const { data, error, revalidate } = useSWR<UserSettingsGeneralResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserSettingsGeneralResponse>(
     user ? `/api/v1/user/${user?.id}/settings/main` : null
   );
 
@@ -140,7 +148,7 @@ const UserGeneralSettings: React.FC = () => {
             });
           } finally {
             revalidate();
-            mutate();
+            revalidateUser();
           }
         }}
       >

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -28,7 +28,11 @@ const UserNotificationsDiscord: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx

@@ -33,7 +33,11 @@ const UserEmailSettings: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx

@@ -29,7 +29,11 @@ const UserPushbulletSettings: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx

@@ -34,7 +34,11 @@ const UserPushoverSettings: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx

@@ -30,7 +30,11 @@ const UserTelegramSettings: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx

@@ -25,7 +25,11 @@ const UserWebPushSettings: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 

src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx

@@ -45,7 +45,11 @@ const UserPasswordChange: React.FC = () => {
   const router = useRouter();
   const { user: currentUser } = useUser();
   const { user, hasPermission } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<{ hasPassword: boolean }>(
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<{ hasPassword: boolean }>(
     user ? `/api/v1/user/${user?.id}/settings/password` : null
   );
 

src/components/UserProfile/UserSettings/UserPermissions/index.tsx

@@ -27,8 +27,14 @@ const UserPermissions: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user: currentUser } = useUser();
-  const { user, mutate } = useUser({ id: Number(router.query.userId) });
+  const { user, revalidate: revalidateUser } = useUser({
-  const { data, error, revalidate } = useSWR<{ permissions?: number }>(
+    id: Number(router.query.userId),
+  });
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<{ permissions?: number }>(
     user ? `/api/v1/user/${user?.id}/settings/permissions` : null
   );
 
@@ -90,7 +96,7 @@ const UserPermissions: React.FC = () => {
             });
           } finally {
             revalidate();
-            mutate();
+            revalidateUser();
           }
         }}
       >

src/context/SettingsContext.tsx

@@ -35,7 +35,7 @@ export const SettingsProvider: React.FC<SettingsContextProps> = ({
 }) => {
   const { data, error } = useSWR<PublicSettingsResponse>(
     '/api/v1/settings/public',
-    { initialData: currentSettings }
+    { fallbackData: currentSettings }
   );
 
   let newSettings = defaultSettings;

src/context/UserContext.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react';
-import { useUser, User } from '../hooks/useUser';
 import { useRouter } from 'next/dist/client/router';
+import React, { useEffect, useRef } from 'react';
+import { User, useUser } from '../hooks/useUser';
 
 interface UserContextProps {
   initialUser: User;

src/hooks/useDiscover.ts

@@ -1,4 +1,4 @@
-import { useSWRInfinite } from 'swr';
+import useSWRInfinite from 'swr/infinite';
 import { MediaStatus } from '../../server/constants/media';
 import useSettings from './useSettings';
 

src/hooks/useUser.ts

@@ -1,4 +1,4 @@
-import useSwr from 'swr';
+import useSWR from 'swr';
 import { MutatorCallback } from 'swr/dist/types';
 import { UserType } from '../../server/constants/user';
 import {
@@ -40,8 +40,7 @@ interface UserHookResponse {
   user?: User;
   loading: boolean;
   error: string;
-  revalidate: () => Promise<boolean>;
+  revalidate: (
-  mutate: (
     data?: User | Promise<User> | MutatorCallback<User> | undefined,
     shouldRevalidate?: boolean | undefined
   ) => Promise<User | undefined>;
@@ -55,15 +54,16 @@ export const useUser = ({
   id,
   initialData,
 }: { id?: number; initialData?: User } = {}): UserHookResponse => {
-  const { data, error, revalidate, mutate } = useSwr<User>(
+  const {
-    id ? `/api/v1/user/${id}` : `/api/v1/auth/me`,
+    data,
-    {
+    error,
-      initialData,
+    mutate: revalidate,
-      refreshInterval: 30000,
+  } = useSWR<User>(id ? `/api/v1/user/${id}` : `/api/v1/auth/me`, {
-      errorRetryInterval: 30000,
+    fallbackData: initialData,
-      shouldRetryOnError: false,
+    refreshInterval: 30000,
-    }
+    errorRetryInterval: 30000,
-  );
+    shouldRetryOnError: false,
+  });
 
   const checkPermission = (
     permission: Permission | Permission[],
@@ -76,8 +76,7 @@ export const useUser = ({
     user: data,
     loading: !data && !error,
     error,
-    revalidate,
     hasPermission: checkPermission,
-    mutate,
+    revalidate,
   };
 };

src/pages/collection/[collectionId]/index.tsx

@@ -12,24 +12,25 @@ const CollectionPage: NextPage<CollectionPageProps> = ({ collection }) => {
   return <CollectionDetails collection={collection} />;
 };
 
-export const getServerSideProps: GetServerSideProps<CollectionPageProps> =
+export const getServerSideProps: GetServerSideProps<
-  async (ctx) => {
+  CollectionPageProps
-    const response = await axios.get<Collection>(
+> = async (ctx) => {
-      `http://localhost:${process.env.PORT || 5055}/api/v1/collection/${
+  const response = await axios.get<Collection>(
-        ctx.query.collectionId
+    `http://localhost:${process.env.PORT || 5055}/api/v1/collection/${
-      }`,
+      ctx.query.collectionId
-      {
+    }`,
-        headers: ctx.req?.headers?.cookie
+    {
-          ? { cookie: ctx.req.headers.cookie }
+      headers: ctx.req?.headers?.cookie
-          : undefined,
+        ? { cookie: ctx.req.headers.cookie }
-      }
+        : undefined,
-    );
+    }
+  );
 
-    return {
+  return {
-      props: {
+    props: {
-        collection: response.data,
+      collection: response.data,
-      },
+    },
-    };
   };
+};
 
 export default CollectionPage;

tailwind.config.js

@@ -3,7 +3,7 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
   mode: 'jit',
-  purge: ['./src/pages/**/*.{ts,tsx}', './src/components/**/*.{ts,tsx}'],
+  content: ['./src/pages/**/*.{ts,tsx}', './src/components/**/*.{ts,tsx}'],
   theme: {
     extend: {
       transitionProperty: {

tsconfig.json

@@ -16,7 +16,8 @@
     "strictPropertyInitialization": false,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "useUnknownInCatchVariables": false
+    "useUnknownInCatchVariables": false,
+    "incremental": true
   },
   "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]