Merge pull request CS3219-AY2324S1#257 from venuslimm/dev

Update frontend background and remove port 3000 from md files
anthonynmh · Nov 12, 2023 · 7e4f119 · 7e4f119
2 parents 637f646 + 7d5cfab
commit 7e4f119
Show file tree

Hide file tree

Showing 20 changed files with 408 additions and 374 deletions.
diff --git a/docs/Containerization.md b/docs/Containerization.md
@@ -4,14 +4,15 @@ Docker is used to containerize our various micro-services
 which serves our combined application.
 
 We have various micro-services including:
-* User Service
-* Auth Service
-* Question Service
-* Match Service
-* Collaboration Service
-* History Service
-* Execution Service
-* Frontend Service (Web UI)
+
+- User Service
+- Auth Service
+- Question Service
+- Match Service
+- Collaboration Service
+- History Service
+- Execution Service
+- Frontend Service (Web UI)
 
 > Additional Note:\
 > The instructions we have are based on Windows OS.
@@ -33,8 +34,7 @@ Download and install these software if you do not have them locally.
 
 - [Docker Desktop](https://www.docker.com/get-started/)
 
-> [!NOTE]
-> **Ensure that RabbitMQ Server and Redis Server are NOT running locally.**
+> [!NOTE] > **Ensure that RabbitMQ Server and Redis Server are NOT running locally.**
 
 # Testing
 
@@ -75,6 +75,7 @@ docker version
 ```
 
 It should output something like
+
 ```
 Client:
  Cloud integration: v1.0.35+desktop.5
@@ -126,7 +127,7 @@ The frontend would only be available after the containers are running.
 > Take caution when deleting maintainer accounts.
 > Do not delete until there is no accounts with admin rights.
 
-Locally, open a web browser and go to [http://localhost:3000](http://localhost:3000).
+Locally, open a web browser and go to [http://localhost](http://localhost).
 
 ## Post-testing
 

diff --git a/frontend/README.md b/frontend/README.md
@@ -9,7 +9,7 @@ In the project directory, you can run:
 ### `npm start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Open [http://localhost](http://localhost) to view it in your browser.
 
 The page will reload when you make changes.\
 You may also see any lint errors in the console.

diff --git a/frontend/src/components/Question/QuestionList.js b/frontend/src/components/Question/QuestionList.js
@@ -10,14 +10,15 @@ import { getQuestions } from '../../api/QuestionApi';
 import { errorHandler } from '../../utils/errors';
 import { getIsMaintainer, getCookie } from '../../utils/helpers';
 import { Tables } from '../../constants';
+import Header from '../Header';
 
 const QuestionList = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [tableData, setTableData] = useState([]);
   const [isMaintainer, setIsMaintainer] = useState(false);
   const tableRef = useRef(null);
   const dataTableRef = useRef(null);
-  
+
   const navigate = useNavigate();
   const tbConsts = Tables.Questions;
 
@@ -57,10 +58,12 @@ const QuestionList = () => {
         tbConsts.DEFAULT_PAGE_LENGTH;
       dataTableRef.current = $(tableRef.current).DataTable({
         pageLength: pageLengthPref,
-        columnDefs: [{
-          target: tbConsts.CustomSort.ColumnNum,
-          type: tbConsts.CustomSort.ColumnName,
-        }],
+        columnDefs: [
+          {
+            target: tbConsts.CustomSort.ColumnNum,
+            type: tbConsts.CustomSort.ColumnName,
+          },
+        ],
       });
 
       // Attach listener: on table pageLength change
@@ -94,42 +97,60 @@ const QuestionList = () => {
   ));
 
   return isLoading ? (
-    <Spinner />
+    <div className='background'>
+      <div className='main'>
+        <div className='questions-page'>
+          <Header />
+          <div className='container'>
+            <Spinner />
+          </div>
+        </div>
+      </div>
+    </div>
   ) : (
-    <div className='container'>
-      <div className='header'>
-        <h1>Question List</h1>
-        <div className='text-md-end'>
-          {isMaintainer ? (
-            <button
-              type='button'
-              className='btn btn-success'
-              onClick={handleNewQuestionClick}
-              style={{ margin: '5px 0px' }}>
-              Create New Question
-            </button>
-          ) : null}
+    <div className='questions-page'>
+      <Header />
+      <div className='background'>
+        <div className='main'>
+          <div className='container' style={{ marginBottom: '20px' }}>
+            <div className='header'>
+              <h1>Question List</h1>
+              <div className='text-md-end'>
+                {isMaintainer ? (
+                  <button
+                    type='button'
+                    className='btn btn-success'
+                    onClick={handleNewQuestionClick}
+                    style={{ margin: '5px 0px' }}>
+                    Create New Question
+                  </button>
+                ) : null}
+              </div>
+            </div>
+            <div style={{ overflowX: 'auto' }}>
+              <table ref={tableRef} className='table table-hover table-striped'>
+                <thead className='table-dark'>
+                  <tr>
+                    <th scope='col' width='100'>
+                      No.
+                    </th>
+                    <th scope='col' width='800'>
+                      Title
+                    </th>
+                    <th scope='col' width='200'>
+                      Tag
+                    </th>
+                    <th scope='col' width='200'>
+                      Complexity
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className='table-group-divider'>{questionList}</tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
-      <table ref={tableRef} className='table table-hover table-striped'>
-        <thead className='table-dark'>
-          <tr>
-            <th scope='col' width='100'>
-              No.
-            </th>
-            <th scope='col' width='800'>
-              Title
-            </th>
-            <th scope='col' width='200'>
-              Tag
-            </th>
-            <th scope='col' width='200'>
-              Complexity
-            </th>
-          </tr>
-        </thead>
-        <tbody className='table-group-divider'>{questionList}</tbody>
-      </table>
     </div>
   );
 };

diff --git a/frontend/src/components/SubmissionHistory/SubmissionList.js b/frontend/src/components/SubmissionHistory/SubmissionList.js
@@ -49,7 +49,7 @@ const SubmissionList = () => {
         parseInt(sessionStorage.getItem('submission-table-page-length')) ||
         Tables.Submissions.DEFAULT_PAGE_LENGTH;
       dataTableRef.current = $(tableRef.current).DataTable({
-        pageLength: pageLengthPref
+        pageLength: pageLengthPref,
       });
 
       // Attach listener: on table pageLength change
@@ -70,10 +70,8 @@ const SubmissionList = () => {
       <td>{parseDatetime(submission.createdAt)}</td>
       <td>{submission.language}</td>
       <td>
-        <span>
-          {submission.duration ? submission.duration : '-'} ms
-        </span>
-        </td>
+        <span>{submission.duration ? submission.duration : '-'} ms</span>
+      </td>
     </tr>
   ));
 
@@ -84,28 +82,30 @@ const SubmissionList = () => {
       ) : (
         <>
           <h1 className='submission-history'>Submission History</h1>
-          <table ref={tableRef} className='table table-hover table-striped'>
-            <thead className='table-dark'>
-              <tr>
-                <th scope='col' width='50'>
-                  No.
-                </th>
-                <th scope='col' width='400'>
-                  Question Title
-                </th>
-                <th scope='col' width='200'>
-                  Time of Submission
-                </th>
-                <th scope='col' width='100'>
-                  Language
-                </th>
-                <th scope='col' width='30'>
-                  Duration
-                </th>
-              </tr>
-            </thead>
-            <tbody className='table-group-divider'>{submissionList}</tbody>
-          </table>
+          <div style={{ overflowX: 'auto' }}>
+            <table ref={tableRef} className='table table-hover table-striped'>
+              <thead className='table-dark'>
+                <tr>
+                  <th scope='col' width='50'>
+                    No.
+                  </th>
+                  <th scope='col' width='400'>
+                    Question Title
+                  </th>
+                  <th scope='col' width='200'>
+                    Time of Submission
+                  </th>
+                  <th scope='col' width='100'>
+                    Language
+                  </th>
+                  <th scope='col' width='30'>
+                    Duration
+                  </th>
+                </tr>
+              </thead>
+              <tbody className='table-group-divider'>{submissionList}</tbody>
+            </table>
+          </div>
         </>
       )}
     </div>

diff --git a/frontend/src/components/User/UserList.js b/frontend/src/components/User/UserList.js
@@ -63,7 +63,7 @@ const UserList = () => {
         parseInt(sessionStorage.getItem('user-table-page-length')) ||
         Tables.Users.DEFAULT_PAGE_LENGTH;
       dataTableRef.current = $(tableRef.current).DataTable({
-        pageLength: pageLengthPref
+        pageLength: pageLengthPref,
       });
 
       // Attach listener: on table pageLength change
@@ -181,59 +181,65 @@ const UserList = () => {
   return isLoading ? (
     <Spinner />
   ) : (
-    <div className='container'>
-      <div className='header'>
-        <h1>Manage User Profiles</h1>
-        <div className='text-md-end'>
-          <button
-            type='button'
-            className='btn btn-success'
-            style={{ margin: '5px' }}
-            onClick={handleNewUserClick}>
-            Register New User
-          </button>
+    <div className='background'>
+      <div className='main'>
+        <div className='container'>
+          <div className='header'>
+            <h1>Manage User Profiles</h1>
+            <div className='text-md-end'>
+              <button
+                type='button'
+                className='btn btn-success'
+                style={{ margin: '5px' }}
+                onClick={handleNewUserClick}>
+                Register New User
+              </button>
+            </div>
+          </div>
+          <div style={{ overflowX: 'auto' }}>
+            <table ref={tableRef} className='table table-hover table-striped'>
+              <thead className='table-dark'>
+                <tr>
+                  <th scope='col' width='50'>
+                    No.
+                  </th>
+                  <th scope='col' width='300'>
+                    Display Name
+                  </th>
+                  <th scope='col' width='400'>
+                    Email
+                  </th>
+                  <th scope='col' width='400'>
+                    Created At
+                  </th>
+                  <th scope='col' width='400'>
+                    Updated At
+                  </th>
+                  <th scope='col' width='400'>
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody key={userList} className='table-group-divider'>
+                {userList}
+              </tbody>
+            </table>
+          </div>
+          {isDeregisterWindowOpen && (
+            <DeregisterWindow
+              onConfirm={handleDeregisterConfirm}
+              onClose={handleDeregisterCancel}
+            />
+          )}
+          {isToggleUserRoleWindowOpen && (
+            <ToggleUserRoleWindow
+              onConfirm={handleToggleUserRoleConfirm}
+              onClose={handleToggleUserRoleCancel}
+              isMaintainer={toggleUserRoleIsMaintainer}
+            />
+          )}
         </div>
       </div>
-      <table ref={tableRef} className='table table-hover table-striped'>
-        <thead className='table-dark'>
-          <tr>
-            <th scope='col' width='50'>
-              No.
-            </th>
-            <th scope='col' width='300'>
-              Display Name
-            </th>
-            <th scope='col' width='400'>
-              Email
-            </th>
-            <th scope='col' width='400'>
-              Created At
-            </th>
-            <th scope='col' width='400'>
-              Updated At
-            </th>
-            <th scope='col' width='400'>
-              Actions
-            </th>
-          </tr>
-        </thead>
-        <tbody key={userList} className='table-group-divider'>
-          {userList}
-        </tbody>
-      </table>
-      {isDeregisterWindowOpen && (
-        <DeregisterWindow
-          onConfirm={handleDeregisterConfirm}
-          onClose={handleDeregisterCancel}
-        />
-      )}
-      {isToggleUserRoleWindowOpen && (
-        <ToggleUserRoleWindow
-          onConfirm={handleToggleUserRoleConfirm}
-          onClose={handleToggleUserRoleCancel}
-          isMaintainer={toggleUserRoleIsMaintainer}
-        />
-      )}
     </div>
   );
 };

diff --git a/frontend/src/css/ManageUserProfiles.css b/frontend/src/css/ManageUserProfiles.css