refactor: cleaned up code and improved readability

.github/workflows/ci.yml

@@ -12,8 +12,8 @@ jobs:
   test:
     name: Lint & Test Build
     if: github.event_name == 'pull_request'
-    runs-on: ubuntu-20.04
-    container: node:20.9-alpine
+    runs-on: ubuntu-22.04
+    container: node:18.18-alpine
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -31,7 +31,7 @@ jobs:
   build_and_push:
     name: Build & Publish Docker Images
     if: github.ref == 'refs/heads/develop' && !contains(github.event.head_commit.message, '[skip ci]')
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -69,7 +69,7 @@ jobs:
     name: Send Discord Notification
     needs: build_and_push
     if: always() && github.event_name != 'pull_request' && !contains(github.event.head_commit.message, '[skip ci]')
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Get Build Job Status
         uses: technote-space/workflow-conclusion-action@v3

.github/workflows/preview.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   build_and_push:
     name: Build & Publish Docker Preview Images
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.github/workflows/release.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   semantic-release:
     name: Tag and release latest version
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -45,7 +45,7 @@ jobs:
   build-snap:
     name: Build Snap Package (${{ matrix.architecture }})
     needs: semantic-release
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     strategy:
       fail-fast: false
       matrix:
@@ -101,7 +101,7 @@ jobs:
     name: Send Discord Notification
     needs: semantic-release
     if: always()
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Get Build Job Status
         uses: technote-space/workflow-conclusion-action@v3

.github/workflows/snap.yaml

@@ -8,7 +8,7 @@ on:
 jobs:
   jobs:
     name: Job Check
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     steps:
       - name: Cancel Previous Runs
@@ -19,7 +19,7 @@ jobs:
   build-snap:
     name: Build Snap Package (${{ matrix.architecture }})
     needs: jobs
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     strategy:
       fail-fast: false
       matrix:
@@ -67,7 +67,7 @@ jobs:
     name: Send Discord Notification
     needs: build-snap
     if: always() && !contains(github.event.head_commit.message, '[skip ci]')
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Get Build Job Status
         uses: technote-space/workflow-conclusion-action@v3

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.9-alpine AS BUILD_IMAGE
+FROM node:18.18-alpine AS BUILD_IMAGE
 
 WORKDIR /app
 
@@ -8,7 +8,9 @@ ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
 RUN \
   case "${TARGETPLATFORM}" in \
   'linux/arm64' | 'linux/arm/v7') \
-  apk add --no-cache python3 make g++ \
+  apk update && \
+  apk add --no-cache python3 make g++ gcc libc6-compat bash && \
+  yarn global add node-gyp \
   ;; \
   esac
 
@@ -32,7 +34,7 @@ RUN touch config/DOCKER
 RUN echo "{\"commitTag\": \"${COMMIT_TAG}\"}" > committag.json
 
 
-FROM node:20.9-alpine
+FROM node:18.18-alpine
 
 WORKDIR /app
 

Dockerfile.local

@@ -1,4 +1,4 @@
-FROM node:20.9-alpine
+FROM node:18.18-alpine
 
 COPY . /app
 WORKDIR /app

snap/snapcraft.yaml

@@ -16,9 +16,9 @@ architectures:
 parts:
   overseerr:
     plugin: nodejs
-    nodejs-version: '20.9.0'
+    nodejs-version: '18.18.2'
     nodejs-package-manager: 'yarn'
-    nodejs-yarn-version: v1.22.17
+    nodejs-yarn-version: v1.22.19
     build-packages:
       - git
       - on arm64:

src/components/Layout/PullToRefresh/index.tsx

@@ -4,17 +4,15 @@ import { useEffect, useRef, useState } from 'react';
 
 const PullToRefresh = () => {
   const router = useRouter();
-
-  const [pullStartPoint, setPullStartPoint] = useState(0);
-  const [pullChange, setPullChange] = useState(0);
+  const [pullStartPoint, setPullStartPoint] = useState<number>(0);
+  const [pullChange, setPullChange] = useState<number>(0);
+  const [iconPlacement, setIconPlacement] = useState<number>(0);
   const refreshDiv = useRef<HTMLDivElement>(null);
 
-  // Various pull down thresholds that determine icon location
-  const pullDownInitThreshold = pullChange > 20;
-  const pullDownStopThreshold = 120;
-  const pullDownReloadThreshold = pullChange > 340;
-  const pullDownIconLocation = pullChange / 3;
-
+  // If pull change is greater than 20, we have passed
+  // the initialization threshold of the pull to refresh
+  // (the icon will start to show). If it hits 120,
+  // the reload will start on release
   useEffect(() => {
     // Reload function that is called when reload threshold has been hit
     // Add loading class to determine when to add spin animation
@@ -37,8 +35,9 @@ const PullToRefresh = () => {
         refreshDiv.current?.classList.remove('hidden');
         document.body.style.touchAction = 'none';
         document.body.style.overscrollBehavior = 'none';
+
         if (html) {
-          html.style.overscrollBehaviorY = 'none';
+          html.style.overscrollBehavior = 'none';
         }
       } else {
         refreshDiv.current?.classList.remove('block');
@@ -47,13 +46,17 @@ const PullToRefresh = () => {
     };
 
     // Tracks how far we have pulled down the refresh icon
-    const pullDown = async (e: TouchEvent) => {
+    const pullDown = (e: TouchEvent) => {
       const screenY = e.targetTouches[0].screenY;
-
       const pullLength =
         pullStartPoint < screenY ? Math.abs(screenY - pullStartPoint) : 0;
 
       setPullChange(pullLength);
+
+      // Lock the body when the icon is shown
+      if (iconPlacement > 50) {
+        document.body.style.overflow = 'hidden';
+      }
     };
 
     // Will reload the page if we are past the threshold
@@ -61,16 +64,17 @@ const PullToRefresh = () => {
     const pullFinish = () => {
       setPullStartPoint(0);
 
-      if (pullDownReloadThreshold) {
+      if (pullChange > 340) {
         forceReload();
       } else {
         setPullChange(0);
       }
 
       document.body.style.touchAction = 'auto';
-      document.body.style.overscrollBehaviorY = 'auto';
+      document.body.style.overscrollBehavior = 'auto';
+      document.body.style.overflow = 'scroll';
       if (html) {
-        html.style.overscrollBehaviorY = 'auto';
+        html.style.overscrollBehavior = 'auto';
       }
     };
 
@@ -78,26 +82,28 @@ const PullToRefresh = () => {
     window.addEventListener('touchmove', pullDown, { passive: false });
     window.addEventListener('touchend', pullFinish, { passive: false });
 
+    // Determines the position of the icon based on
+    // the pull-down distance to touch
+    if (pullChange / 3 < 120 && pullChange > 20) {
+      setIconPlacement(pullChange / 3);
+    } else if (pullChange > 20) {
+      setIconPlacement(120);
+    } else {
+      setIconPlacement(0);
+    }
+
     return () => {
       window.removeEventListener('touchstart', pullStart);
       window.removeEventListener('touchmove', pullDown);
       window.removeEventListener('touchend', pullFinish);
     };
-  }, [pullDownInitThreshold, pullDownReloadThreshold, pullStartPoint, router]);
+  }, [iconPlacement, pullChange, pullStartPoint, router]);
 
   return (
     <div
       ref={refreshDiv}
-      className="absolute left-0 right-0 top-0 z-50 m-auto w-fit transition-all ease-out"
-      id="refreshIcon"
-      style={{
-        top:
-          pullDownIconLocation < pullDownStopThreshold && pullDownInitThreshold
-            ? pullDownIconLocation
-            : pullDownInitThreshold
-            ? pullDownStopThreshold
-            : '',
-      }}
+      className="absolute left-0 right-0 z-50 m-auto w-fit transition-all ease-out"
+      style={{ top: iconPlacement }}
     >
       <div
         className={`${
@@ -107,7 +113,7 @@ const PullToRefresh = () => {
       >
         <ArrowPathIcon
           className={`rounded-full ${
-            pullDownReloadThreshold && 'rotate-180'
+            pullChange > 340 && 'rotate-180'
           } text-indigo-500 transition-all duration-300`}
         />
       </div>

src/styles/globals.css

@@ -524,22 +524,3 @@
     height: calc(4rem + env(safe-area-inset-bottom));
   }
 }
-
-.ptr--ptr {
-  box-shadow: initial !important;
-  position: absolute !important;
-  z-index: 30 !important;
-}
-
-.ptr--refresh {
-  overflow: visible !important;
-  z-index: 30 !important;
-}
-
-.ptr--pull {
-  z-index: 30 !important;
-}
-
-.ptr--box {
-  margin-bottom: -13px !important;
-}