refactor: update Next.js, React.js and Node.js (#815)

* refactor: update Next.js and React.js

* refactor: update Next.js images

* refactor: update ESLint rules and fix warnings/errors

* fix: remove old intl polyfill

* fix: add proper size to next/image components

* fix: adjust full-size for next/image components

* fix: temporary allow all domains for image optimization

* build: fixes an issue where dev env could lead to javascript heap out of memory

* fix: resolve webpack cache issue with country-flag-icons

* refactor: switch compiler from Babel to SWC

* fix: resize logo in sidebar

* fix: break word on long path to avoid text overflow

* chore: added sharp for production image optimisation

* fix: change extract script for i18n to a custom script

* fix: resolve GitHub CodeQL alert

* chore: temporarily remove builds for ARMv7

* fix: resize avatar images

* refactor: update Node.js to v20

* fix: resolve various UI issues

* build: migrate yarn to pnpm and restrict engine to node@^20.0.0

* ci: specify the pnpm version to use in workflow actions

* ci: fix typo in pnpm action-setup for cypress workflow

* test(cypress): use pnpm instead of yarn

* style: ran prettier on pnpm-lock

* ci(cypress): setup nodejs v20 in cypress workflow

* ci: pnpm cache to reduce install time

* ci: use sh shell to get pnpm store directory

* build(dockerfile): migrate to pnpm from yarn in docker builds

* build(dockerfile): copy the proper pnpm lockfile

* build: install pnpm for all platforms

* build(dockerfile): remove unnecessary `&&` on apk installation steps

* build: migrate pnpm 8 to 9

* build(dockerfile): add node-gyp back in

* build(dockerfile): install node-gyp through npm

* build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned

* build: migrate to pnpm from yarn

* chore: remove a section that is no longer relevant

---------

Co-authored-by: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>

src/components/RequestList/RequestItem/index.tsx

@@ -7,6 +7,7 @@ import StatusBadge from '@app/components/StatusBadge';
 import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import {
   ArrowPathIcon,
@@ -20,14 +21,15 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
+import { FormattedRelativeTime, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 
-const messages = defineMessages({
+const messages = defineMessages('components.RequestList.RequestItem', {
   seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
   failedretry: 'Something went wrong while retrying the request.',
   requested: 'Requested',
@@ -179,17 +181,22 @@ const RequestItemError = ({
                           />
                         ),
                         user: (
-                          <Link href={`/users/${requestData.requestedBy.id}`}>
-                            <a className="group flex items-center truncate">
-                              <img
+                          <Link
+                            href={`/users/${requestData.requestedBy.id}`}
+                            className="group flex items-center truncate"
+                          >
+                            <span className="avatar-sm ml-1.5">
+                              <Image
                                 src={requestData.requestedBy.avatar}
                                 alt=""
-                                className="avatar-sm ml-1.5"
+                                className="avatar-sm object-cover"
+                                width={20}
+                                height={20}
                               />
-                              <span className="truncate text-sm group-hover:underline">
-                                {requestData.requestedBy.displayName}
-                              </span>
-                            </a>
+                            </span>
+                            <span className="truncate text-sm group-hover:underline">
+                              {requestData.requestedBy.displayName}
+                            </span>
                           </Link>
                         ),
                       })}
@@ -233,17 +240,22 @@ const RequestItemError = ({
                         />
                       ),
                       user: (
-                        <Link href={`/users/${requestData.modifiedBy.id}`}>
-                          <a className="group flex items-center truncate">
-                            <img
+                        <Link
+                          href={`/users/${requestData.modifiedBy.id}`}
+                          className="group flex items-center truncate"
+                        >
+                          <span className="avatar-sm ml-1.5">
+                            <Image
                               src={requestData.modifiedBy.avatar}
                               alt=""
-                              className="avatar-sm ml-1.5"
+                              className="avatar-sm object-cover"
+                              width={20}
+                              height={20}
                             />
-                            <span className="truncate text-sm group-hover:underline">
-                              {requestData.modifiedBy.displayName}
-                            </span>
-                          </a>
+                          </span>
+                          <span className="truncate text-sm group-hover:underline">
+                            {requestData.modifiedBy.displayName}
+                          </span>
                         </Link>
                       ),
                     })}
@@ -381,8 +393,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
             <CachedImage
               src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
               alt=""
-              layout="fill"
-              objectFit="cover"
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              fill
             />
             <div
               className="absolute inset-0"
@@ -401,21 +413,20 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                   ? `/movie/${requestData.media.tmdbId}`
                   : `/tv/${requestData.media.tmdbId}`
               }
+              className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
             >
-              <a className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105">
-                <CachedImage
-                  src={
-                    title.posterPath
-                      ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
-                      : '/images/overseerr_poster_not_found.png'
-                  }
-                  alt=""
-                  layout="responsive"
-                  width={600}
-                  height={900}
-                  objectFit="cover"
-                />
-              </a>
+              <CachedImage
+                src={
+                  title.posterPath
+                    ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
+                    : '/images/overseerr_poster_not_found.png'
+                }
+                alt=""
+                sizes="100vw"
+                style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+                width={600}
+                height={900}
+              />
             </Link>
             <div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
               <div className="pt-0.5 text-xs font-medium text-white sm:pt-1">
@@ -430,10 +441,9 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                     ? `/movie/${requestData.media.tmdbId}`
                     : `/tv/${requestData.media.tmdbId}`
                 }
+                className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl"
               >
-                <a className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl">
-                  {isMovie(title) ? title.title : title.name}
-                </a>
+                {isMovie(title) ? title.title : title.name}
               </Link>
               {!isMovie(title) && request.seasons.length > 0 && (
                 <div className="card-field">
@@ -527,17 +537,22 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                         />
                       ),
                       user: (
-                        <Link href={`/users/${requestData.requestedBy.id}`}>
-                          <a className="group flex items-center truncate">
-                            <img
+                        <Link
+                          href={`/users/${requestData.requestedBy.id}`}
+                          className="group flex items-center truncate"
+                        >
+                          <span className="avatar-sm ml-1.5">
+                            <Image
                               src={requestData.requestedBy.avatar}
                               alt=""
-                              className="avatar-sm ml-1.5 object-cover"
+                              className="avatar-sm object-cover"
+                              width={20}
+                              height={20}
                             />
-                            <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
-                              {requestData.requestedBy.displayName}
-                            </span>
-                          </a>
+                          </span>
+                          <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
+                            {requestData.requestedBy.displayName}
+                          </span>
                         </Link>
                       ),
                     })}
@@ -581,17 +596,22 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                       />
                     ),
                     user: (
-                      <Link href={`/users/${requestData.modifiedBy.id}`}>
-                        <a className="group flex items-center truncate">
-                          <img
-                            src={requestData.modifiedBy.avatar}
+                      <Link
+                        href={`/users/${requestData.modifiedBy.id}`}
+                        className="group flex items-center truncate"
+                      >
+                        <span className="avatar-sm ml-1.5">
+                          <Image
+                            src={requestData.requestedBy.avatar}
                             alt=""
-                            className="avatar-sm ml-1.5 object-cover"
+                            className="avatar-sm object-cover"
+                            width={20}
+                            height={20}
                           />
-                          <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
-                            {requestData.modifiedBy.displayName}
-                          </span>
-                        </a>
+                        </span>
+                        <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
+                          {requestData.modifiedBy.displayName}
+                        </span>
                       </Link>
                     ),
                   })}

src/components/RequestList/index.tsx

@@ -6,6 +6,7 @@ import RequestItem from '@app/components/RequestList/RequestItem';
 import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
 import {
   BarsArrowDownIcon,
   ChevronLeftIcon,
@@ -16,10 +17,10 @@ import type { RequestResultsResponse } from '@server/interfaces/api/requestInter
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
-const messages = defineMessages({
+const messages = defineMessages('components.RequestList', {
   requests: 'Requests',
   showallrequests: 'Show All Requests',
   sortAdded: 'Most Recent',
@@ -122,12 +123,12 @@ const RequestList = () => {
         <Header
           subtext={
             router.pathname.startsWith('/profile') ? (
-              <Link href={`/profile`}>
-                <a className="hover:underline">{currentUser?.displayName}</a>
+              <Link href={`/profile`} className="hover:underline">
+                {currentUser?.displayName}
               </Link>
             ) : router.query.userId ? (
-              <Link href={`/users/${user?.id}`}>
-                <a className="hover:underline">{user?.displayName}</a>
+              <Link href={`/users/${user?.id}`} className="hover:underline">
+                {user?.displayName}
               </Link>
             ) : (
               ''