Major fixes.

Signed-off-by: Aliwoto <aminnimaj@gmail.com>
ALiwoto · Aug 25, 2024 · 9e5d8c3 · 9e5d8c3
1 parent 00c2b34
commit 9e5d8c3
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 66 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +25,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>ExamSphere</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>ExamSphere</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +41,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -132,7 +132,7 @@ const App: React.FC = () => {
                 />
                 <Route
                     path="/examInfo"
-                    element={apiClient.canCreateTopics() ? <ExamInfoPage /> : <Navigate to="/dashboard" />}
+                    element={apiClient.canViewExamInfo() ? <ExamInfoPage /> : <Navigate to="/dashboard" />}
                 />
                 <Route
                     path="/searchExam"

diff --git a/src/apiClient.ts b/src/apiClient.ts
@@ -162,12 +162,16 @@ class ExamSphereAPIClient extends UserApi {
         return localStorage.getItem(this.hash_key(key)) ?? undefined;
     }
 
+    private removeItem(key: string): void {
+        localStorage.removeItem(this.hash_key(key));
+    }
+
     /**
      * Clears the access and refresh tokens from the local storage.
      */
     public clearTokens(): void {
-        localStorage.removeItem('ExamSphere_accessToken');
-        localStorage.removeItem('ExamSphere_refreshToken');
+        this.removeItem('ExamSphere_accessToken');
+        this.removeItem('ExamSphere_refreshToken');
         this.accessToken = undefined;
         this.refreshToken = undefined
     }
@@ -778,6 +782,10 @@ class ExamSphereAPIClient extends UserApi {
         return this.isOwner() || this.isAdmin();
     }
 
+    public canViewExamInfo(): boolean {
+        return this.isLoggedIn();
+    }
+
     public canSearchTopics(): boolean {
         return this.isLoggedIn();
     }

diff --git a/src/components/menus/menuItem.tsx b/src/components/menus/menuItem.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { CurrentAppTheme } from '../../themes/appThemeBase';
+import { CurrentAppTranslation } from '../../translations/appTranslation';
 
 const MenuItemWrapper = styled.div`
   cursor: pointer;
@@ -33,36 +34,41 @@ const ChildItem = styled.div`
 `;
 
 interface MenuItemProps {
-  label: string;
-  children?: React.ReactNode;
-  href?: string;
-  onClick?: () => void;
+    label: string;
+    children?: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
 }
 
 const MenuItem: React.FC<MenuItemProps> = ({ ...props }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { label, children, href } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const { label, children, href } = props;
 
-  return (
-    <MenuItemWrapper>
-      <MenuItemHeader 
-        onClick={() => {
-          setIsOpen(!isOpen);
-          props.onClick?.();
-        }}
-        href={href}
-      >
-        <div>{label}</div>
-      </MenuItemHeader>
-      {children && (
-        <MenuItemChildren $isOpen={isOpen}>
-          {React.Children.map(children, child => (
-            <ChildItem>{child}</ChildItem>
-          ))}
-        </MenuItemChildren>
-      )}
-    </MenuItemWrapper>
-  );
+    return (
+        <MenuItemWrapper>
+            <MenuItemHeader
+                onClick={() => {
+                    setIsOpen(!isOpen);
+                    props.onClick?.();
+                }}
+                style={{
+                    justifyContent: CurrentAppTranslation.justifyContent,
+                }}
+                href={href}
+            >
+                <div>
+                    {label}
+                </div>
+            </MenuItemHeader>
+            {children && (
+                <MenuItemChildren $isOpen={isOpen}>
+                    {React.Children.map(children, child => (
+                        <ChildItem>{child}</ChildItem>
+                    ))}
+                </MenuItemChildren>
+            )}
+        </MenuItemWrapper>
+    );
 };
 
 export default MenuItem;
diff --git a/src/components/rendering/RenderAllQuestions.tsx b/src/components/rendering/RenderAllQuestions.tsx
@@ -75,8 +75,10 @@ const RenderAllQuestions: React.FC<RenderQuestionsListProps> = ({ ...props }) =>
                         />
                     )}
                     {apiClient.getQuestionOptions(question).map((option, index) => (
-                        props.editingId !== question.question_id ?
-                            (<Typography key={index} variant="body2">{`${index + 1}. ${option}`}</Typography>) :
+                        props.editingId !== question.question_id || !props.canEditQuestions ?
+                            (<Typography key={index} variant="body2">
+                                {`${index + 1}. ${option}`}
+                            </Typography>) :
                             (<TextField
                                 key={index}
                                 fullWidth

diff --git a/src/index.css b/src/index.css
@@ -13,6 +13,6 @@ code {
 }
 
 
-*{
+* {
   box-sizing: border-box;
-}
+}
diff --git a/src/pages/examHallPage.tsx b/src/pages/examHallPage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer, useState } from 'react';
-import { Button, Box, Pagination, CircularProgress } from '@mui/material';
+import { Button, Box, Pagination, CircularProgress, Link, Paper } from '@mui/material';
 import { AnswerQuestionData, CreateExamQuestionData, ExamQuestionInfo, GetExamInfoResult } from '../api';
 import { extractErrorDetails } from '../utils/errorUtils';
 import useAppSnackbar from '../components/snackbars/useAppSnackbars';
@@ -251,10 +251,20 @@ const ExamHallPage: React.FC = () => {
             backgroundImage: `url(${backgroundImage1})`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
+            gap: '10px',
         }}
             titleText={
                 `${CurrentAppTranslation.ExamHallText} - ${examInfo?.exam_title ?? ''}`
             }>
+            <Box sx={{ 
+                maxWidth: '650px',
+                width: '100%',
+                margin: '0 auto',
+            }}>
+                <Paper sx={{ backgroundColor: 'white', padding: '8px', margin: '8px', textAlign: 'center' }}>
+                    {`${CurrentAppTranslation.ExamFinishesInText}: ${examInfo?.finishes_in ?? ''}`}
+                </Paper>
+            </Box>
             <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '80vh' }}>
                 <Box sx={{
                     flexGrow: 1,
@@ -281,7 +291,7 @@ const ExamHallPage: React.FC = () => {
                         isParticipating={examInfo?.has_participated ?? false}
                         canEditQuestions={examInfo?.can_edit_question ?? false}
                     />}
-                    {editingId !== -1 && examInfo?.can_edit_question && (
+                    {editingId !== -1 && examInfo?.can_edit_question && !examInfo.has_finished && (
                         <Box sx={{
                             display: 'flex',
                             justifyContent: 'center',
@@ -298,6 +308,17 @@ const ExamHallPage: React.FC = () => {
                     <Pagination
                         count={totalPages} page={page + 1} onChange={(_, newPage) => handleNextPage(newPage - 1)} />
                 </Box>
+                <Box sx={{ display: 'flex', justifyContent: 'center', margin: '0 auto', }}>
+                    <Link href={`/examInfo?examId=${examId}`} style={{ marginTop: '16px' }}
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+                        }}
+                    >
+                        {CurrentAppTranslation.BackToExamInfoText}
+                    </Link>
+                </Box>
             </Box>
         </DashboardContainer>
     );

diff --git a/src/pages/examInfoPage.tsx b/src/pages/examInfoPage.tsx
@@ -190,16 +190,22 @@ const ExamInfoPage = () => {
         <DashboardContainer>
             <Container maxWidth="sm">
                 <Paper elevation={3} sx={{ p: 3, mt: 4 }}>
+                    <Typography variant="h4" style={{
+                        textAlign: 'center',
+                    }} gutterBottom>
+                        {CurrentAppTranslation.ExamInformationText}
+                    </Typography>
                     <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-                        <Typography variant="h4">{CurrentAppTranslation.ExamInformationText}</Typography>
                         <Button variant="contained" onClick={isEditing ? handleSave : handleEdit}>
                             {isEditing ? CurrentAppTranslation.SaveText : CurrentAppTranslation.EditText}
                         </Button>
-                        {(!isEditing && examInfo?.can_participate && !examInfo.has_participated) && (
-                            <Button variant="contained" onClick={handleParticipate}>
-                                {CurrentAppTranslation.ParticipateText}
-                            </Button>
-                        )}
+                        {(!isEditing && examInfo?.can_participate &&
+                            !examInfo.has_participated && 
+                            !examInfo.has_finished && !examInfo.can_edit_question) && (
+                                <Button variant="contained" onClick={handleParticipate}>
+                                    {CurrentAppTranslation.ParticipateText}
+                                </Button>
+                            )}
                         {(!isEditing && examInfo?.can_edit_question) && (
                             <Button variant="contained" onClick={handleExamHall}>
                                 {CurrentAppTranslation.QuestionsText}
@@ -211,6 +217,7 @@ const ExamInfoPage = () => {
                             </Button>
                         )}
                     </Box>
+                    <hr />
                     <Grid container spacing={2}>
                         {RenderAllFields({
                             data: examData,

diff --git a/src/pages/searchCoursePage.tsx b/src/pages/searchCoursePage.tsx
@@ -41,7 +41,12 @@ const RenderCoursesList = (courses: SearchedCourseInfo[] | undefined, forEdit: b
                 <ListItem key={course.course_id} sx={{ mb: 2 }}>
                     <Paper
                         elevation={3}
-                        sx={{ width: '100%', p: 2, borderRadius: 2 }}
+                        sx={{ 
+                            width: '100%', 
+                            p: 2, 
+                            borderRadius: 2,
+                            cursor: 'pointer',
+                        }}
                         onClick={
                             () => {
                                 // Redirect to course info page, make sure to query encode it

diff --git a/src/pages/searchTopicPage.tsx b/src/pages/searchTopicPage.tsx
@@ -104,7 +104,11 @@ const RenderTopicsList = (
                         sx={{ width: '100%', p: 2, borderRadius: 2 }}>
                         <Grid container spacing={2}>
                             <Grid item xs={6}>
-                                <Typography variant="body2">
+                                <Typography variant="body2" sx={
+                                    {
+                                        fontFamily: `${CurrentAppTranslation.fontFamily}`,
+                                    }
+                                }>
                                     {`${CurrentAppTranslation.topic_id}: ${topic.topic_id}`}
                                 </Typography>
                                 <Typography variant="body2">

diff --git a/src/translations/appTranslation.ts b/src/translations/appTranslation.ts
@@ -8,7 +8,7 @@ export class AppTranslationBase {
     ShortLang: string = "en";
 
     //#region Style Attributes
-    fontFamily: string = `"Roboto", "Helvetica", "Arial", sans-serif`;
+    fontFamily: string = `"Vazirmatn", "Roboto", "Helvetica", "Arial", sans-serif`;
     direction: TextDirection = "ltr";
     justifyContent: TextJustifyContent = "flex-start";
     textAlign: string = "left";
@@ -83,8 +83,10 @@ export class AppTranslationBase {
     CreateExamText: string = "Create Exam";
     AddNewQuestionText: string = "Add New Question";
     DeleteTopicButtonText: string = "Delete Topic";
+    BackToExamInfoText: string = "Back to Exam Info";
     CancelButtonText: string = "Cancel";
     SendEmailToUseText: string = "Send email confirmation to user";
+    ExamFinishesInText: string = "Exam finishes in";
 
     // System messages
     ExamParticipationSuccessText: string = "Successfully participated in the exam!";

diff --git a/src/translations/faTranslation.ts b/src/translations/faTranslation.ts
@@ -6,7 +6,7 @@ class FaTranslation extends AppTranslationBase {
     ShortLang: string = "fa";
 
     //#region Style Attributes
-    fontFamily: string = `"B Kamran", "Vazir", "Shabnam", "Samim", "Iran Sans", "Yekan", "Nazanin", "Tahoma", "Arial", sans-serif`;
+    fontFamily: string = `"Vazirmatn", "B Kamran", "Vazir", "Shabnam", "Samim", "Iran Sans", "Yekan", "Nazanin", "Tahoma", "Arial", sans-serif`;
     direction: TextDirection = "rtl";
     justifyContent: TextJustifyContent = "flex-end";
     textAlign: string = "right";
@@ -80,9 +80,11 @@ class FaTranslation extends AppTranslationBase {
     CreateExamText: string = "ایجاد آزمون";
     AddNewQuestionText: string = "افزودن سوال جدید";
     DeleteTopicButtonText: string = "حذف موضوع";
+    BackToExamInfoText: string = "بازگشت به اطلاعات آزمون";
     CreateCourseButtonText: string = "ایجاد دوره";
     CancelButtonText: string = "لغو";
     SendEmailToUseText: string = "ارسال ایمیل تایید به کاربر";
+    ExamFinishesInText: string = "آزمون پایان می یابد در";
 
     // System messages
     ExamParticipationSuccessText: string = "عملیات شرکت در آزمون با موفقیت انجام شد!";