Major fixes and improvements.

Signed-off-by: Aliwoto <[email protected]>
ALiwoto · Aug 24, 2024 · 7cd53d8 · 7cd53d8
1 parent 8992d01
commit 7cd53d8
Show file tree

Hide file tree

Showing 34 changed files with 953 additions and 223 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,7 @@
 {
     "cSpell.words": [
+        "Jalaali",
+        "jalali",
         "snackbars"
     ]
 }
diff --git a/GenerateSwaggerLib.ps1 b/GenerateSwaggerLib.ps1
@@ -2,7 +2,6 @@
 param (
     [string]$SwaggerJsonPath = "./swagger.json",
     [string]$OutputPath = "./src/api"
-    # [string]$OutputFileName = "examSphereApi.ts"
 )
 
 # & npx openapi-generator-cli generate -i path/to/your/swagger.json -g typescript-axios -o src/api

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "axios": "^1.7.4",
+    "js-sha256": "^0.11.0",
     "moment-jalaali": "^0.10.1",
     "notistack": "^3.0.1",
     "react": "^18.3.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -15,118 +15,121 @@ import CreateCoursePage from './pages/createCoursePage';
 import CourseInfoPage from './pages/courseInfoPage';
 import SearchCoursePage from './pages/searchCoursePage';
 import CreateExamPage from './pages/createExamPage';
+import { switchAppTranslation } from './translations/translationSwitcher';
+import ExamInfoPage from './pages/examInfoPage';
 
 const App: React.FC = () => {
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(apiClient.isLoggedIn());
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [isLoggedIn, setIsLoggedIn] = useState<boolean>(apiClient.isLoggedIn());
+    const [isLoading, setIsLoading] = useState<boolean>(true);
 
-  useEffect(() => {
-    const checkAuth = async () => {
-      if (apiClient.isLoggedIn()) {
-        try {
-          const response = await apiClient.getCurrentUserInfo();
-          console.log(`logged in as ${response.user_id} | ${response.full_name}`);
-          setIsLoggedIn(true);
-        } catch (error) {
-          apiClient.clearTokens();
-          setIsLoggedIn(false);
-        }
-      }
+    useEffect(() => {
+        const checkAuth = async () => {
+            if (apiClient.isLoggedIn()) {
+                try {
+                    const response = await apiClient.getCurrentUserInfo();
+                    console.log(`logged in as ${response.user_id} | ${response.full_name}`);
+                    setIsLoggedIn(true);
+                } catch (error) {
+                    apiClient.clearTokens();
+                    setIsLoggedIn(false);
+                }
+            }
 
-      setIsLoading(false);
-    };
+            setIsLoading(false);
+        };
 
-    checkAuth();
-  }, []);
+        checkAuth();
+    }, []);
+
+    switchAppTranslation(apiClient.userLanguage ?? 'en');
+    if (isLoading) {
+        return (
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    backgroundColor: '#f0f0f0',
+                    textAlign: 'center',
+                    padding: 2,
+                }}
+            >
+                <CircularProgress size={80} thickness={4} />
+                <Typography variant="h6" sx={{ mt: 3 }}>
+                    {CurrentAppTranslation.LoadingText}
+                </Typography>
+                <Typography variant="body2" sx={{ mt: 1, color: 'text.secondary' }}>
+                    {CurrentAppTranslation.PleaseWaitText}
+                </Typography>
+            </Box>
+        );
+    }
 
-  if (isLoading) {
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100vh',
-          backgroundColor: '#f0f0f0',
-          textAlign: 'center',
-          padding: 2,
-        }}
-      >
-        <CircularProgress size={80} thickness={4} />
-        <Typography variant="h6" sx={{ mt: 3 }}>
-          {CurrentAppTranslation.LoadingText}
-        </Typography>
-        <Typography variant="body2" sx={{ mt: 1, color: 'text.secondary' }}>
-          Please wait while we load the content for you.
-        </Typography>
-      </Box>
+        <Router>
+            <Routes>
+                <Route
+                    path="/confirmAccountRedirect"
+                    element={<ConfirmAccountRedirectPage />}
+                />
+                <Route
+                    path="/login"
+                    element={isLoggedIn ? <Navigate to="/dashboard" /> : <Login />}
+                />
+                <Route
+                    path="/dashboard"
+                    element={isLoggedIn ? <DashboardPage /> : <Navigate to="/login" />}
+                />
+                <Route
+                    path="/createUser"
+                    element={apiClient.canCreateNewUsers() ? <CreateUserPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/searchUser"
+                    element={apiClient.canSearchUser() ? <SearchUserPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/userInfo"
+                    element={apiClient.canSearchUser() ? <UserInfoPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/createTopic"
+                    element={apiClient.canCreateTopics() ? <CreateTopicPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/searchTopic"
+                    element={apiClient.canSearchTopics() ? <SearchTopicPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/createCourse"
+                    element={apiClient.canCreateTopics() ? <CreateCoursePage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/courseInfo"
+                    element={apiClient.canCreateTopics() ? <CourseInfoPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/searchCourse"
+                    element={apiClient.canSearchTopics() ? <SearchCoursePage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/createExam"
+                    element={apiClient.canCreateTopics() ? <CreateExamPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/examInfo"
+                    element={apiClient.canCreateTopics() ? <ExamInfoPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route
+                    path="/searchExam"
+                    element={apiClient.canSearchTopics() ? <SearchTopicPage /> : <Navigate to="/dashboard" />}
+                />
+                <Route path="*" element={<Navigate to={isLoggedIn ? "/dashboard" : "/login"} />} />
+            </Routes>
+        </Router>
     );
-  }
-
-  return (
-    <Router>
-      <Routes>
-        <Route
-          path="/confirmAccountRedirect"
-          element={<ConfirmAccountRedirectPage />}
-        />
-        <Route
-          path="/login"
-          element={isLoggedIn ? <Navigate to="/dashboard" /> : <Login />}
-        />
-        <Route
-          path="/dashboard"
-          element={isLoggedIn ? <DashboardPage /> : <Navigate to="/login" />}
-        />
-        <Route
-          path="/createUser"
-          element={apiClient.canCreateNewUsers() ? <CreateUserPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/searchUser"
-          element={apiClient.canSearchUser() ? <SearchUserPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/userInfo"
-          element={apiClient.canSearchUser() ? <UserInfoPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/createTopic"
-          element={apiClient.canCreateTopics() ? <CreateTopicPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/searchTopic"
-          element={apiClient.canSearchTopics() ? <SearchTopicPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/createCourse"
-          element={apiClient.canCreateTopics() ? <CreateCoursePage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/courseInfo"
-          element={apiClient.canCreateTopics() ? <CourseInfoPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/searchCourse"
-          element={apiClient.canSearchTopics() ? <SearchCoursePage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/createExam"
-          element={apiClient.canCreateTopics() ? <CreateExamPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/examInfo"
-          element={apiClient.canCreateTopics() ? <CreateCoursePage /> : <Navigate to="/dashboard" />}
-        />
-        <Route
-          path="/searchExam"
-          element={apiClient.canSearchTopics() ? <SearchTopicPage /> : <Navigate to="/dashboard" />}
-        />
-        <Route path="*" element={<Navigate to={isLoggedIn ? "/dashboard" : "/login"} />} />
-      </Routes>
-    </Router>
-  );
 };
 
 export default App;
diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import AppFooter from './components/footers/AppFooter';
+import { SupportedTranslations, switchAppTranslation } from './translations/translationSwitcher';
+import apiClient from './apiClient';
+
+const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [currentAppLanguage, setCurrentAppLanguage] = React.useState<string>('en');
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: '110vh', // Ensure the layout takes at least the full viewport height
+            }}
+        >
+            <Box sx={{ flexGrow: 1 }} key={`ExamSphere-app-${currentAppLanguage}-box`}>
+                {children}
+            </Box>
+            <AppFooter setAppLanguage={async (lang) => {
+                console.log(`Switching from ${currentAppLanguage} to ${lang}`);
+                // doing this, so react re-renders the app with the new language
+                setCurrentAppLanguage(lang);
+                const userLang = lang as SupportedTranslations;
+                switchAppTranslation(userLang);
+                await apiClient.setAppLanguage(userLang);
+            }} />
+        </Box>
+    );
+};
+
+export default AppLayout;