add debug code

components/AppContainer.tsx

@@ -20,6 +20,7 @@ import { useNowAllFollowers } from "@/lib/accessTwitch";
 import { debugLogger } from "@/lib/debugLogger";
 
 export default function AppContainer() {
+  debugLogger("AppContainer");
   const [activeTab, setActiveTab] = useState("Follower List");
   const [lastCheckedDate, setLastCheckedDate] = useState<string | null>(
     localStorage.getItem("ftls")
@@ -33,6 +34,7 @@ export default function AppContainer() {
     storeNowFollowes,
   } = useNowAllFollowers();
 
+  debugLogger("AppContainer2");
   const gridRef1 = useRef<AgGridReact<any>>(null);
   const gridRef2 = useRef<AgGridReact<any>>(null);
   const gridRef3 = useRef<AgGridReact<any>>(null);
@@ -68,10 +70,12 @@ export default function AppContainer() {
   }, []);
 
   const onFirstDataRendered = useCallback((params: any) => {
+    debugLogger("onFirstDataRendered");
     params.api.sizeColumnsToFit();
   }, []);
 
   const onGridSizeChanged = useCallback((params: any) => {
+    debugLogger("onGridSizeChanged");
     params.api.sizeColumnsToFit();
   }, []);
 
@@ -91,13 +95,15 @@ export default function AppContainer() {
   }, [refresh, data]);
 
   const onChecked = useCallback(() => {
+    debugLogger("onChecked");
     storeNowFollowes();
     const ftls = formatToLocaleString(new Date());
     localStorage.setItem("ftls", ftls);
     setLastCheckedDate(ftls);
   }, [storeNowFollowes]);
 
   useEffect(() => {
+    debugLogger("onChecked();");
     if (!localStorage.getItem("ftls")) {
       onChecked();
     }

components/CheckDoneButton.tsx

@@ -1,3 +1,4 @@
+import { debugLogger } from "@/lib/debugLogger";
 import { Button } from "@material-tailwind/react";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import classNames from "classnames";
@@ -10,6 +11,7 @@ const CheckDoneButton: React.FC<{
     onChecked();
   };
 
+  debugLogger("CheckDoneButton")
   return (
     <Button
       className={classNames("flex", "items-center", "gap-1", "dark:text-white")}

components/MainContainer.tsx

@@ -2,8 +2,10 @@ import classNames from "classnames";
 import AuthenticateWithTwitch from "./AuthenticateWithTwitch";
 import AppContainer from "./AppContainer";
 import { useIsTwitchTokenAvailable } from "@/lib/accessTwitch";
+import { debugLogger } from "@/lib/debugLogger";
 
 function MainContainer() {
+  debugLogger("MainContainer")
   const isTwitchTokenAvailable = useIsTwitchTokenAvailable();
   let container;
 

components/RefreshListsButton.tsx

@@ -2,14 +2,15 @@ import { useState, useEffect, useCallback } from "react";
 import { Button } from "@material-tailwind/react";
 import AutorenewIcon from "@mui/icons-material/Autorenew";
 import classNames from "classnames";
+import { debugLogger } from "@/lib/debugLogger";
 
 const RefreshListsButton: React.FC<{ onRefresh: () => void }> = ({
   onRefresh,
 }) => {
   const [isDisabled, setIsDisabled] = useState(false);
   const [timeRemaining, setTimeRemaining] = useState<number>(0);
   const [worker, setWorker] = useState<Worker | null>(null);
-
+  debugLogger("RefreshListsButton");
   useEffect(() => {
     return () => {
       if (worker) {

lib/accessTwitch.ts

@@ -7,10 +7,11 @@ export function useIsTwitchTokenAvailable() {
     null | boolean
   >(null);
 
+  debugLogger("useIsTwitchTokenAvailable");
   useEffect(() => {
     const checkAndStoreAccessToken = async () => {
       let accessTokenFromHash = null;
-
+      debugLogger("checkAndStoreAccessToken");
       if (typeof window !== "undefined") {
         const hashParams = new URLSearchParams(
           window.location.hash.substring(1)
@@ -55,7 +56,7 @@ export const useNowAllFollowers = () => {
   const [nowAllFollowers, setNowAllFollowers] = useState<any[] | null>(null);
   const [newAllFollowers, setNewAllFollowers] = useState<any[] | null>(null);
   const [oldAllFollowers, setOldAllFollowers] = useState<any[] | null>(null);
-
+  debugLogger("useNowAllFollowers");
   const fetchFollowers = useCallback(
     async (channelId: string, cursor = ""): Promise<any[]> => {
       const url = `https://api.twitch.tv/helix/channels/followers?broadcaster_id=${channelId}&first=100&after=${cursor}`;
@@ -83,22 +84,19 @@ export const useNowAllFollowers = () => {
   );
 
   type User = { user_id: string; [key: string]: any };
-  const findDifference = useCallback(
-    async (oldArray: User[], newArray: User[]) => {
-      const oldUserIds = oldArray.map((user) => user.user_id);
-      const newUserIds = newArray.map((user) => user.user_id);
-
-      const removedUsers = oldArray.filter(
-        (user) => !newUserIds.includes(user.user_id)
-      );
-      const addedUsers = newArray.filter(
-        (user) => !oldUserIds.includes(user.user_id)
-      );
-
-      return { removedUsers, addedUsers };
-    },
-    []
-  );
+  const findDifference = useCallback((oldArray: User[], newArray: User[]) => {
+    const oldUserIds = oldArray.map((user) => user.user_id);
+    const newUserIds = newArray.map((user) => user.user_id);
+
+    const removedUsers = oldArray.filter(
+      (user) => !newUserIds.includes(user.user_id)
+    );
+    const addedUsers = newArray.filter(
+      (user) => !oldUserIds.includes(user.user_id)
+    );
+
+    return { removedUsers, addedUsers };
+  }, []);
 
   const refresh = useCallback(async () => {
     debugLogger("refresh");
@@ -124,6 +122,7 @@ export const useNowAllFollowers = () => {
   }, [fetchFollowers, findDifference]); // fetchFollowers は依存配列に含まれています
 
   useEffect(() => {
+    debugLogger("refresh");
     refresh(); // コンポーネントがマウントされた時に refresh 関数を呼び出します
   }, [refresh]); // refresh は依存配列に含まれています
 

lib/debugLogger.ts

@@ -1,5 +1,10 @@
-const isDebugMode = (): boolean => window.location.hash.includes("debug");
-
+const isDebugMode = (): boolean => {
+  return true;
+  // if (typeof window !== "undefined") {
+  //   return window.location.hash.includes("debug");
+  // }
+  // return false;
+};
 export const debugLogger = (...messages: any[]): void => {
   if (isDebugMode()) {
     console.log(...messages);

package.json

@@ -18,7 +18,7 @@
     "ag-grid-community": "30.2.0",
     "ag-grid-react": "30.2.0",
     "classnames": "^2.3.2",
-    "next": "13.5.4",
+    "next": "13.5.3",
     "nextra": "3.0.0-alpha.8",
     "nextra-theme-docs": "3.0.0-alpha.8",
     "react": "^18",

pages/_document.tsx

@@ -1,5 +1,45 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 
+// interface LangSettingDocumentProps extends DocumentInitialProps {
+//   lang: string;
+// }
+
+// class LangSettingDocument extends Document<LangSettingDocumentProps> {
+//   static async getInitialProps(ctx: any) {
+//     const supportedLocales = {
+//       en: "en-US",
+//       es: "es-ES",
+//       pt: "pt-BR",
+//       ru: "ru-RU",
+//       de: "de-DE",
+//       fr: "fr-FR",
+//       ja: "ja-JP",
+//       ko: "ko-KR",
+//     };
+//     const initialProps = await Document.getInitialProps(ctx);
+//     const { pathname } = ctx;
+//     const localEntry = Object.entries(supportedLocales).find((entry) =>
+//       pathname.startsWith(`/${entry[0]}`)
+//     );
+//     const lang = localEntry ? localEntry[1] : "en-US";
+//     return { ...initialProps, lang };
+//   }
+
+//   render() {
+//     return (
+//       <Html lang={this.props.lang}>
+//         <Head />
+//         <body>
+//           <Main />
+//           <NextScript />
+//         </body>
+//       </Html>
+//     );
+//   }
+// }
+
+// export default LangSettingDocument;
+
 const LangSettingDocument = ({ lang }: any) => {
   return (
     <Html lang={lang}>