Update workflow actions (#649)

* Update workflow actions

* Fix tsc issues

.github/workflows/build_pull_request.yml

@@ -6,7 +6,13 @@ jobs:
     name: ci-pull-request
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Set up NodeJs
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: 'package.json'
+
       - name: Install modules
         run: yarn
 

.github/workflows/build_push_master.yml

@@ -13,19 +13,24 @@ jobs:
 
     steps:
       - name: Cancel previous runs
-        uses: styfle/cancel-workflow-action@0.9.0
+        uses: styfle/cancel-workflow-action@0.12.1
         with:
           access_token: ${{ github.token }}
 
       - name: Checkout master branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           ref: master
           path: master
           fetch-depth: 0
 
+      - name: Set up NodeJs
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: 'package.json'
+
       - name: Cache node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: |
             **/node_modules
@@ -49,7 +54,7 @@ jobs:
           echo "::set-output name=value::$genTag"
 
       - name: Checkout preview branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: "Suwayomi/Suwayomi-WebUI-preview"
           ref: main
@@ -81,7 +86,7 @@ jobs:
           tag: ${{ steps.GenTagName.outputs.value }}
 
       - name: Checkout github pages repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: "Suwayomi-WebUI-preview/suwayomi-webui-preview.github.io"
           ref: main

.github/workflows/issue_moderator.yml

@@ -11,13 +11,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Moderate issues
-        uses: tachiyomiorg/issue-moderator-action@v1
+        uses: tachiyomiorg/issue-moderator-action@v2
         with:
           repo-token: ${{ github.token }}
           duplicate-check-enabled: true
-          duplicate-check-label: Source request
           existing-check-enabled: true
-          existing-check-label: Source request
           auto-close-rules: |
             [
               {

src/components/navbar/ReaderNavBar.tsx

@@ -281,7 +281,7 @@ export function ReaderNavBar(props: IProps) {
                             >
                                 <Select
                                     MenuProps={MenuProps}
-                                    value={chapter.pageCount > -1 ? curPage : ''}
+                                    value={chapter.pageCount > -1 ? `${curPage}` : ''}
                                     displayEmpty
                                     onChange={({ target: { value: selectedPage } }) => {
                                         scrollToPage(Number(selectedPage));
@@ -316,7 +316,7 @@ export function ReaderNavBar(props: IProps) {
                             >
                                 <Select
                                     MenuProps={MenuProps}
-                                    value={chapter.sourceOrder >= 1 ? chapter.sourceOrder : ''}
+                                    value={chapter.sourceOrder >= 1 ? `${chapter.sourceOrder}` : ''}
                                     displayEmpty
                                     onChange={({ target: { value: selectedChapter } }) => {
                                         navigate(`/manga/${manga.id}/chapter/${selectedChapter}`, {

src/components/sourceConfiguration/TwoStatePreference.tsx

@@ -6,14 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { createElement, useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import Checkbox from '@mui/material/Checkbox';
 import { CheckBoxPreferenceProps, SwitchPreferenceCompatProps, TwoStatePreferenceProps } from '@/typings';
 
-function getTwoStateType(type: 'Checkbox' | 'Switch') {
+function getTwoStateType(type: TwoStatePreferenceProps['twoStateType']) {
     if (type === 'Switch') {
         return Switch;
     }
@@ -53,19 +53,23 @@ function TwoSatePreference(props: TwoStatePreferenceProps) {
         setInternalCurrentValue(currentValue ?? defaultValue);
     }, [currentValue]);
 
+    const TwoStateComponent = useMemo(() => getTwoStateType(twoStateType), [twoStateType]);
+
     return (
         <ListItem>
             <ListItemText primary={title} secondary={summary} />
-            {createElement(getTwoStateType(twoStateType), {
+            <TwoStateComponent
-                edge: 'end',
+                {...{
-                checked: internalCurrentValue,
+                    edge: 'end',
-                onChange: () => {
+                    checked: internalCurrentValue,
-                    updateValue(twoStateType === 'Switch' ? 'switchState' : 'checkBoxState', !currentValue);
+                    onChange: () => {
+                        updateValue(twoStateType === 'Switch' ? 'switchState' : 'checkBoxState', !currentValue);
 
-                    // appear smooth
+                        // appear smooth
-                    setInternalCurrentValue(!currentValue);
+                        setInternalCurrentValue(!currentValue);
-                },
+                    },
-            })}
+                }}
+            />
         </ListItem>
     );
 }