resolve comment issues and add loader to prevent error msg rendering before actual data

Author: feliciagan

backend/matching-service/.env.sample

@@ -14,3 +14,5 @@ RABBITMQ_DEFAULT_PASS=password  #comment out if use case is (1)
 RABBITMQ_ADDR=amqp://admin:password@rabbitmq:5672  #comment out if use case is (1)
 
 QUESTION_SERVICE_URL=http://question-service:3000/api/questions
+
+QN_HISTORY_SERVICE_URL=http://qn-history-service:3006/api/qnhistories

frontend/src/App.tsx

@@ -52,14 +52,7 @@ function App() {
                 </ProfileContextProvider>
               }
             />
-            <Route 
-              path="profile/:userId/:qnHistoryId" 
-              element={
-                <AuthProvider>
-                  <QuestionHistoryDetail />
-                </AuthProvider>
-              } 
-            />
+            <Route path="profile/:userId/:qnHistoryId" element={<QuestionHistoryDetail />} />
             <Route path="matching" element={<ProtectedRoutes />}>
               <Route element={<NoDirectAccessRoutes />}>
                 <Route index element={<Matching />} />

frontend/src/pages/Profile/index.tsx

@@ -16,12 +16,14 @@ import {
 import qnHistoryReducer, { getQnHistoryList, initialQHState } from "../../reducers/qnHistoryReducer";
 import { grey } from "@mui/material/colors";
 import { convertDateString } from "../../utils/sessionTime";
+import Loader from "../../components/Loader";
 
 const rowsPerPage = 10;
 
 const ProfilePage: React.FC = () => {
   const [page, setPage] = useState<number>(0);
   const [state, dispatch] = useReducer(qnHistoryReducer, initialQHState);
+  const [loading, setLoading] = useState<boolean>(true);
   const navigate = useNavigate();
 
   const { userId } = useParams<{ userId: string }>();
@@ -47,11 +49,14 @@ const ProfilePage: React.FC = () => {
   } = profile;
 
   useEffect(() => {
+    setLoading(true);
     if (!userId) {
+      setTimeout(() => setLoading(false), 500);
       return;
     }
 
     fetchUser(userId);
+    setTimeout(() => setLoading(false), 500);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userId]);
 
@@ -69,6 +74,10 @@ const ProfilePage: React.FC = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => updateQnHistoryList(), [page]);
 
+  if (loading) {
+    return <Loader />;
+  }
+  
   if (!user) {
     return (
       <ServerError

frontend/src/pages/QuestionHistoryDetail/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import AppMargin from "../../components/AppMargin";
 import ServerError from "../../components/ServerError";
@@ -14,11 +14,13 @@ import { grey } from "@mui/material/colors";
 import { convertDateString } from "../../utils/sessionTime";
 import { useAuth } from "../../contexts/AuthContext";
 import { USE_AUTH_ERROR_MESSAGE } from "../../utils/constants";
+import Loader from "../../components/Loader";
 
 const QuestionHistoryDetail: React.FC = () => {
   const { qnHistoryId } = useParams<{ qnHistoryId: string }>();
   const [qnhistState, qnhistDispatch] = useReducer(qnHistoryReducer, initialQHState);
   const [qnState, qnDispatch] = useReducer(reducer, initialState);
+  const [loading, setLoading] = useState<boolean>(true);
   const navigate = useNavigate();
   const auth = useAuth();
 
@@ -44,6 +46,7 @@ const QuestionHistoryDetail: React.FC = () => {
     if (qnhistState.selectedQnHistory) {
       getQuestionById(qnhistState.selectedQnHistory.questionId, qnDispatch);
     }
+    setTimeout(() => setLoading(false), 500);
   }, [qnhistState])
 
 
@@ -55,6 +58,10 @@ const QuestionHistoryDetail: React.FC = () => {
     }
   } 
 
+  if (loading) {
+    return <Loader />;
+  }
+  
   if (!qnhistState.selectedQnHistory) {
     if (qnhistState.selectedQnHistoryError) {
       return (
@@ -72,7 +79,7 @@ const QuestionHistoryDetail: React.FC = () => {
 
   return (
     <AppMargin>
-      <IconButton  sx={{marginTop: 2}} onClick={() => navigate(-1)}>
+      <IconButton  sx={{marginTop: 2}} onClick={() => navigate(`/profile/${user?.id}`)}>
         <ArrowBack />
       </IconButton>
       <Typography variant="h2" style={{marginTop: 20, marginBottom: 20}}>Latest submission details</Typography>