Merge pull request #26 from a-company-jp/feature/eslins-fix

ESLintのエラーを直す
a-company-jp · Apr 14, 2024 · 68aeaf2 · 68aeaf2
2 parents a57bbd8 + 299666e
commit 68aeaf2
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 37 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,7 +11,7 @@ function App() {
 
   const [activePage, setActivePage] = useState(1);
   const [uploaded, setUploaded] = useState(false);
-  const { LGTMUrls, loading, error } = useLGTMFetch(activePage, uploaded, setUploaded);
+  const {LGTMUrls} = useLGTMFetch(activePage, uploaded, setUploaded);
 
   return (
     <UIProvider>

diff --git a/src/components/Pagination/indext.tsx → src/components/Pagination/index.tsx b/src/components/Pagination/indext.tsx → src/components/Pagination/index.tsx
@@ -42,21 +42,21 @@ export const Pagination = ({ activePage, setActivePage }: PaginationProps) => {
                 return (
                     activePage === pageNum ? (
                         <li className={styles.itemBox}>
-                            <a
+                            <button
                                 onClick={() => clickHandler(pageNum)}
                                 className={styles.active}
                             >
                                 {pageNum}
-                            </a>
+                            </button>
                         </li>
                     ) : (
                         <li className={styles.itemBox}>
-                            <a
+                            <button
                                 onClick={() => clickHandler(pageNum)}
                                 className={styles.item}
                             >
                                 {pageNum}
-                            </a>
+                            </button>
                         </li>
                     )
                 )

diff --git a/src/components/atoms/ButtonToChromeExtension/index.tsx b/src/components/atoms/ButtonToChromeExtension/index.tsx
@@ -1,5 +1,3 @@
-import { config } from "process";
-
 const ButtonToChromeExtension = (): JSX.Element => {
 
   // TODO: set environment variable

diff --git a/src/components/atoms/NextButton/index.tsx b/src/components/atoms/NextButton/index.tsx
@@ -9,7 +9,7 @@ const NextButton = ({ clickHandler }: NextButtonProps) => {
 
     return (
         <li>
-            <a
+            <button
                 onClick={clickHandler}
                 className={styles.nextButton}
             >
@@ -26,7 +26,7 @@ const NextButton = ({ clickHandler }: NextButtonProps) => {
                         clip-rule="evenodd"
                     />
                 </svg>
-            </a>
+            </button>
         </li>
     )
 }

diff --git a/src/components/atoms/PrevButton/index.tsx b/src/components/atoms/PrevButton/index.tsx
@@ -1,5 +1,3 @@
-import { click } from "@testing-library/user-event/dist/click";
-
 type PrevButtonProps = {
     clickHandler: () => void;
 }
@@ -9,7 +7,7 @@ const PrevButton = ({ clickHandler }: PrevButtonProps) => {
         prevButton: 'inline-flex size-12 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180 hover:bg-gray-200',
     }
     return (
-        <a
+        <button
             onClick={clickHandler}
             className={styles.prevButton}
         >
@@ -26,7 +24,7 @@ const PrevButton = ({ clickHandler }: PrevButtonProps) => {
                     clip-rule="evenodd"
                 />
             </svg>
-        </a>
+        </button>
     )
 }
 

diff --git a/src/hooks/useDisplayPage.ts b/src/hooks/useDisplayPage.ts
@@ -1,18 +1,24 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
 type UsePaginationProps = {
     activePage: number;
     setActivePage: (num: number) => void;
 }
 
 const useDisplayPageNums = ({ activePage, setActivePage }: UsePaginationProps) => {
-
-    // TODO: make it dynamic
     const NUM_MAX_PAGE = parseInt(process.env.REACT_APP_MAX_PAGE || '20');
     const NUM_DISPLAY_PAGE = 5;
 
     const [pageNums, setPageNums] = useState<number[]>([1, 2, 3, 4, 5]);
 
+    const generatePageNums = useCallback((numActivePage: number): number[] => {
+        if (numActivePage < 3) {
+            return [1, 2, 3, 4, 5];
+        } else if (numActivePage > NUM_MAX_PAGE - 3) {
+            return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => NUM_MAX_PAGE - 4 + index);
+        }
+        return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => numActivePage - 2 + index);
+    }, [NUM_MAX_PAGE, NUM_DISPLAY_PAGE]);
 
     useEffect(() => {
         if (activePage < 1) {
@@ -24,25 +30,7 @@ const useDisplayPageNums = ({ activePage, setActivePage }: UsePaginationProps) =
         } else {
             setPageNums(generatePageNums(activePage));
         }
-    }, [activePage]);
-
-    const generatePageNums = (numActivePage: number): number[] => {
-        // small page number case
-        if (numActivePage < 3) {
-            return [1, 2, 3, 4, 5];
-        } else if (numActivePage > NUM_MAX_PAGE - 3) { // large page number case
-            return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => {
-                return NUM_MAX_PAGE - 4 + index;
-            });
-        }
-
-        // usual case
-        return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => {
-            return numActivePage - 2 + index;
-        });
-    }
-
-
+    }, [activePage, generatePageNums, NUM_MAX_PAGE, setActivePage]);
 
     return { pageNums };
 }

diff --git a/src/hooks/useLGTMFetch.ts b/src/hooks/useLGTMFetch.ts
@@ -24,7 +24,7 @@ const useLGTMFetch = (activePage: number, uploaded: boolean, setUploaded: (uploa
     };
 
     fetchData();
-  }, [activePage, uploaded]);
+  }, [activePage, uploaded, setUploaded]);
 
   return { LGTMUrls, loading, error };
 }

diff --git a/src/hooks/useSendImage.ts b/src/hooks/useSendImage.ts
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { set, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { post } from '../fetch/LGTM'
 
 export const IMAGE_ID = 'image';