Merge pull request #560 from Yavuzlar/559-bug-fix-on-frontend

Bugs fixed on Frontend.

Author: mhmtbyzgl

frontend/src/components/cards/Activity.js

@@ -27,7 +27,8 @@ const CustomSelect = styled(Select)({
 
 const Activity = () => {
   const dispatch = useDispatch();
-  const { activity: activityData } = useSelector((state) => state);
+  // const { activity: activityData } = useSelector((state) => state);
+  const activityData = useSelector((state) => state.activity);
 
   const data = activityData.data.data;
 

frontend/src/components/cards/LabInfo.js

@@ -13,7 +13,8 @@ import { theme } from "src/configs/theme";
 
 const LabInfo = ({ programingId, filter, setIconPath, containerLoading }) => {
   const dispatch = useDispatch();
-  const { lab: stateLabs } = useSelector((state) => state);
+  // const { lab: stateLabs } = useSelector((state) => state);
+  const stateLabs = useSelector((state) => state.lab);
 
   const router = useRouter();
 
@@ -158,8 +159,7 @@ const LabInfo = ({ programingId, filter, setIconPath, containerLoading }) => {
             >
               {containerLoading ? (
                 <CircularProgress size={24} sx={{ position: "absolute" }} />
-              ) :
-              lab.isFinished ? (
+              ) : lab.isFinished ? (
                 <Translations text={"lab.button.review"} />
               ) : (
                 <Translations text={"lab.button.solve"} />

frontend/src/components/cards/Timestatistic.js

@@ -34,7 +34,8 @@ const Timestatistic = () => {
 
   const dispatch = useDispatch();
 
-  const { log: logStatistics } = useSelector((state) => state);
+  // const { log: logStatistics } = useSelector((state) => state);
+  const logStatistics = useSelector((state) => state.log);
 
   useEffect(() => {
     dispatch(getSolitionWeek());

frontend/src/components/filter/FilterUser.js

@@ -44,7 +44,7 @@ const FilterUser = ({
             onChange={(e) => setFilters({ ...filters, search: e.target.value })}
             InputProps={{
               startAdornment: (
-                <InputAdornment sx={{ zIndex: 10, mr: 1 }}>
+                <InputAdornment position="start" sx={{ zIndex: 10, mr: 1 }}>
                   <Search />
                 </InputAdornment>
               ),

frontend/src/configs/i18n.js

@@ -1,26 +1,65 @@
+// import i18n from "i18next";
+// import { initReactI18next } from "react-i18next";
+// import Backend from "i18next-http-backend";
+// import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
+// import themeConfig from "./themeConfig";
+
+// i18n
+
+//   // Enables the i18next backend
+//   .use(Backend)
+
+//   // Enable automatic language detection
+//   .use(I18nextBrowserLanguageDetector)
+
+//   // Enables the hook initialization module
+//   .use(initReactI18next)
+//   .init({
+//     lng: "en",
+//     defaultLng: themeConfig.defaultLng,
+//     backend: {
+//       /* translation file path */
+//       loadPath: "/locales/{{lng}}/common.json",
+//     },
+//     fallbackLng: themeConfig.defaultLng,
+//     debug: false,
+//     keySeparator: false,
+//     react: {
+//       useSuspense: false,
+//     },
+//     interpolation: {
+//       escapeValue: false,
+//       formatSeparator: ",",
+//     },
+//   });
+
+// export default i18n;
+
+// i18n.js
+
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import Backend from "i18next-http-backend";
 import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
 import themeConfig from "./themeConfig";
 
 i18n
-
-  // Enables the i18next backend
   .use(Backend)
-
-  // Enable automatic language detection
   .use(I18nextBrowserLanguageDetector)
-
-  // Enables the hook initialization module
   .use(initReactI18next)
   .init({
-    lng: "en",
+    fallbackLng: themeConfig.defaultLng,
+
     backend: {
-      /* translation file path */
       loadPath: "/locales/{{lng}}/common.json",
     },
-    fallbackLng: themeConfig.defaultLng,
+
+    detection: {
+      order: ["localStorage", "navigator", "cookie", "htmlTag"],
+
+      caches: ["localStorage"],
+    },
+
     debug: false,
     keySeparator: false,
     react: {

frontend/src/context/AuthContext.js

@@ -43,7 +43,7 @@ const AuthProvider = ({ children }) => {
     }
     ws.current = new WebSocket("ws://localhost/api/v1/private/socket/ws");
 
-    ws.current.onopen = () => { };
+    ws.current.onopen = () => {};
 
     ws.current.onmessage = (e) => {
       const data = JSON.parse(e.data);
@@ -145,8 +145,8 @@ const AuthProvider = ({ children }) => {
 
   const initAuth = () => {
     const storedUserData = localStorage.getItem(authConfig.userDataName);
-    
-    if (["/login", "/register"].includes(router.pathname)) {
+
+    if (["/login", "/register"]?.includes(router.pathname)) {
       if (storedUserData) {
         try {
           const userData = JSON.parse(storedUserData);
@@ -256,9 +256,34 @@ const AuthProvider = ({ children }) => {
     }
   };
 
+  // useEffect(() => {
+  //   initAuth();
+  // }, [router.pathname]);
+
+  // useEffect(() => {
+  //   initAuth();
+  // }, []);
+
   useEffect(() => {
     initAuth();
-  }, [router.pathname]);
+
+    const responseInterceptor = axios.interceptors.response.use(
+      (response) => {
+        return response;
+      },
+      (error) => {
+        if (error.response && error.response.status === 401) {
+          handleLogout();
+        }
+
+        return Promise.reject(error);
+      }
+    );
+
+    return () => {
+      axios.interceptors.response.eject(responseInterceptor);
+    };
+  }, []);
 
   const values = {
     user,

frontend/src/layout/components/navigation/item/LanguageSelector.js

@@ -1,58 +1,42 @@
 import { Button, Menu, MenuItem, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import Image from "next/image";
 import Turkish from "src/assets/flags/turkish.png";
 import English from "src/assets/flags/english.png";
 import { useTranslation } from "react-i18next";
 
 const LanguageSelector = () => {
   const [anchorEl, setAnchorEl] = useState(null);
+  const { i18n, t } = useTranslation();
+
   const open = Boolean(anchorEl);
+
+  const currentLanguageCode = i18n.language;
+
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
+
   const handleClose = () => {
     setAnchorEl(null);
   };
-  const [language, setLanguage] = useState("turkish");
-
-  const { i18n } = useTranslation();
-
-  useEffect(() => {
-    switch (language) {
-      case "turkish":
-        i18n.changeLanguage("tr");
-        break;
-
-      case "english":
-        i18n.changeLanguage("en");
 
-      default:
-        i18n.changeLanguage("en");
-        break;
-    }
-  }, [language]);
+  const handleLanguageChange = (langCode) => {
+    i18n.changeLanguage(langCode);
+    handleClose();
+  };
 
   useEffect(() => {
     const handleResize = () => {
       setAnchorEl(null);
     };
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
-  }, [setAnchorEl]);
+  }, []);
 
-  const { t } = useTranslation();
   const tr = t("languages.tr");
   const en = t("languages.en");
 
-  useEffect(() => {
-    const handleResize = () => {
-      setAnchorEl(null);
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [setAnchorEl]);
-
   return (
     <>
       <Button
@@ -63,14 +47,12 @@ const LanguageSelector = () => {
         sx={{ backgroundColor: "transparent" }}
         onClick={handleClick}
       >
-        {language === "turkish" && (
-          <Image src={Turkish} alt="Turkish" width={24} height={24} />
-        )}
-
-        {language === "english" && (
-          <Image src={English} alt="English" width={24} height={24} />
-        )}
-
+        <Image
+          src={currentLanguageCode === "tr" ? Turkish : English}
+          alt={currentLanguageCode === "tr" ? "Turkish Flag" : "English Flag"}
+          width={24}
+          height={24}
+        />
         <Typography
           sx={{
             fontWeight: 300,
@@ -80,9 +62,7 @@ const LanguageSelector = () => {
             ml: 0.5,
           }}
         >
-          {language === "turkish" && tr}
-
-          {language === "english" && en}
+          {currentLanguageCode === "tr" ? tr : en}
         </Typography>
       </Button>
       <Menu
@@ -95,22 +75,8 @@ const LanguageSelector = () => {
         }}
         sx={{ mt: 1, "& .MuiMenu-paper": { backgroundColor: "#0A3B7A" } }}
       >
-        <MenuItem
-          onClick={(e) => {
-            setLanguage("turkish");
-            setAnchorEl(false);
-          }}
-        >
-          {tr}
-        </MenuItem>
-        <MenuItem
-          onClick={(e) => {
-            setLanguage("english");
-            setAnchorEl(false);
-          }}
-        >
-          {en}
-        </MenuItem>
+        <MenuItem onClick={() => handleLanguageChange("tr")}>{tr}</MenuItem>
+        <MenuItem onClick={() => handleLanguageChange("en")}>{en}</MenuItem>
       </Menu>
     </>
   );

frontend/src/layout/components/navigation/item/SingleItem.js

@@ -15,10 +15,10 @@ const SingleItem = (props) => {
 
   const router = useRouter();
 
-  // Sayfaya gitmek için kullanılacak fonksiyon
   const handleLocate = (p) => {
     if (p) {
-      router.replace(p);
+      // router.replace(p);
+      router.push(p);
     }
     ChangePage();
   };
@@ -41,7 +41,6 @@ const SingleItem = (props) => {
       sx={style}
       onKeyDown={handleKeyPress}
       variant="text"
-      active={router.pathname == path}
       onClick={() => handleLocate(path)}
     >
       <Typography

frontend/src/pages/404.js

@@ -59,7 +59,7 @@ const Error404 = () => {
           if (window.history.length > 2) {
             router.back();
             setTimeout(() => {
-              if (window.location.pathname.includes("404")) {
+              if (router.push?.pathname?.includes("404")) {
                 window.history.go(-2);
               }
             }, 100);

frontend/src/pages/_app.js

@@ -69,19 +69,6 @@ const App = (props) => {
         <title>{`${themeConfig.projectName}`}</title>
         <meta name="description" content={`${themeConfig.projectName}`} />
         <meta name="viewport" content="initial-scale=1, width=device-width" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap&subset=latin-ext"
-          rel="stylesheet"
-        ></link>
-
-        <link
-          href="https://fonts.cdnfonts.com/css/cascadia-code"
-          rel="stylesheet"
-        ></link>
-        <link
-          href="https://fonts.cdnfonts.com/css/nunito"
-          rel="stylesheet"
-        ></link>
       </Head>
 
       <AuthProvider>