PEER-249 Add Question Details basic card

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/components/blocks/private-route.tsx

@@ -1,12 +1,7 @@
-import { ReactNode } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate, Outlet } from 'react-router-dom';
 
-interface PrivateRouteProps {
-  children: ReactNode;
-}
-
-export function PrivateRoute({ children }: PrivateRouteProps) {
+export function PrivateRoute() {
   //const isAuthenticated = checkUserAuthentication();
   const isAuthenticated = true;
-  return isAuthenticated ? children : <Navigate to='/login' />;
+  return isAuthenticated ? <Outlet /> : <Navigate to='/login' />;
 }

frontend/src/components/providers/query-provider.tsx

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 const IS_SHOW_DEVTOOLS = false;
-const queryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 export const QueryProvider: FC<PropsWithChildren> = ({ children }) => {
   return (

frontend/src/lib/router.tsx

@@ -4,21 +4,25 @@ import { Layout } from '@/components/blocks/layout';
 import { PrivateRoute } from '@/components/blocks/private-route';
 import { ForgotPassword } from '@/routes/forgot-password';
 import { Login } from '@/routes/login';
-import { Root } from '@/routes/root';
 import { SignUp } from '@/routes/signup';
 import { ROUTES } from './routes';
+import { loader as qnDetailsLoader, QuestionDetails } from '@/routes/questions/details';
+import { queryClient } from '@/components/providers';
 
 export const router = createBrowserRouter([
   {
     element: <Layout />,
     children: [
       {
         path: ROUTES.HOME,
-        element: (
-          <PrivateRoute>
-            <Root />
-          </PrivateRoute>
-        ),
+        element: <PrivateRoute />,
+        children: [
+          {
+            path: ROUTES.QUESTION_DETAILS,
+            loader: qnDetailsLoader(queryClient),
+            element: <QuestionDetails />,
+          },
+        ],
       },
       {
         path: ROUTES.LOGIN,

frontend/src/lib/routes.ts

@@ -3,4 +3,5 @@ export const ROUTES = {
   LOGIN: '/login',
   SIGNUP: '/signup',
   FORGOT_PASSWORD: '/forgot-password',
+  QUESTION_DETAILS: 'questions/:questionId',
 };

frontend/src/services/api-clients.ts

@@ -7,4 +7,11 @@ export const userApiClient: AxiosInstance = axios.create({
   },
 });
 
+export const questionApiClient = axios.create({
+  baseURL: '/question-service',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
 // define more api clients for other microservices