feat: add questionnaire list

flourish-client/src/App.tsx

@@ -1,18 +1,23 @@
 import { Box } from "@chakra-ui/react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-// import { customLayoutPaths } from "./assets/data/app";
+import { setupInterceptors } from "./api/config/apiConfig";
+import { nav } from "./assets/data/routes";
+import { useAppSelector } from "./hooks/useStore";
 import Auth from "./pages/auth";
 import SignIn from "./pages/auth/signin";
 import SignUp from "./pages/auth/signup";
+import Dashboard from "./pages/dashboard";
+import Questionnaire from "./pages/dashboard/questionnaire";
 import Homepage from "./pages/homepage";
-import { useAppSelector } from "./hooks/useStore";
+import QuestionnaireDetails from "./pages/dashboard/questionnaire/QuestionnaireDetails";
+import QuestionnaireList from "./pages/dashboard/questionnaire/QuestionnaireList";
 
 const App = () => {
-  // const currentRoute = window.location.pathname;
-  // const isLayout = !customLayoutPaths.includes(currentRoute);
-
   const isSignedIn = useAppSelector((state) => state.flags.isSignedIn);
+  const token = useAppSelector((state) => state?.user?.token);
+
+  if (token) setupInterceptors(token);
 
   return (
     <Box
@@ -28,12 +33,29 @@ const App = () => {
         <Routes>
           <Route index element={<Homepage />} />
           {!isSignedIn && (
-            <Route path="auth" element={<Auth />}>
+            <Route path={nav.auth} element={<Auth />}>
               <Route index element={<SignIn />} />
-              <Route path="signIn" element={<SignIn />} />
-              <Route path="signUp" element={<SignUp />} />
+              <Route path={nav.signIn} element={<SignIn />} />
+              <Route path={nav.signUp} element={<SignUp />} />
+            </Route>
+          )}
+
+          {isSignedIn && (
+            <Route path={`${nav.dashboard}`} element={<Dashboard />}>
+              <Route path={nav.questionnaire} element={<Questionnaire />}>
+                <Route index element={<QuestionnaireList />} />
+                <Route path=":id" element={<QuestionnaireDetails />} />
+              </Route>
+              <Route index element={<h1>Members</h1>} />
+              <Route path={nav.members} element={<h1>Members</h1>} />
+              <Route
+                path={nav.sessionRequest}
+                element={<h1>sessionRequest</h1>}
+              />
+              <Route path={nav.overview} element={<h1>Overview</h1>} />
             </Route>
           )}
+          <Route path="*" element={<h1>404</h1>} />
         </Routes>
       </BrowserRouter>
     </Box>

flourish-client/src/api/apiAuth.ts

@@ -0,0 +1,18 @@
+import { api as apiData } from "../assets/data/server";
+import { SignIn, SignUp } from "../types/Form";
+import { User } from "../types/User";
+import { api } from "./config/apiConfig";
+
+export const apiSignIn = async (data: SignIn): Promise<User> => {
+  const response = await api.post(apiData.signIn, {
+    ...data,
+  });
+
+  return response.data;
+};
+
+export const apiSignUp = async (data: SignUp): Promise<void> => {
+  await api.post(apiData.signUp[data.type], {
+    ...(data as SignIn),
+  });
+};

flourish-client/src/api/apiQuestionnaire.ts

@@ -0,0 +1,9 @@
+import { api as apiData } from "../assets/data/server";
+import { Questionnaire } from "../types/Questionnaire";
+import { api } from "./config/apiConfig";
+
+export const getQuestionnaire = async (): Promise<Questionnaire[]> => {
+  const response = await api.get(apiData.questionnaire.adminCounselor, {});
+
+  return response.data;
+};

flourish-client/src/api/config/apiConfig.ts

@@ -1,9 +1,13 @@
 import axios, { AxiosError, AxiosInstance } from "axios";
+
 import { api as apiData } from "../../assets/data/server";
 
 export const api: AxiosInstance = axios.create({
   baseURL: apiData.base,
   timeout: 30000, // 30 seconds
+  headers: {
+    "Content-Type": "application/json",
+  },
 });
 
 const errorHandler = (error: AxiosError) => {
@@ -22,3 +26,10 @@ const errorHandler = (error: AxiosError) => {
 api.interceptors.response.use(undefined, (error) => {
   return errorHandler(error);
 });
+
+export const setupInterceptors = (token: string) => {
+  api.interceptors.request.use((config) => {
+    config.headers.Authorization = `token ${token}`;
+    return config;
+  });
+};

flourish-client/src/assets/data/auth.ts

@@ -1,4 +1,4 @@
-import { nav } from "./nav";
+import { routes } from "./routes";
 
 export const headerContent = {
   signIn: {
@@ -16,12 +16,12 @@ export const headerContent = {
 export const footerContent = {
   signIn: {
     title: "Sign Up",
-    href: nav.signUp,
+    href: routes.signUp,
     description: "Don't have an account?",
   },
   signUp: {
     title: "Sign In",
-    href: nav.signIn,
+    href: routes.signIn,
     description: "Already have an account?",
   },
 };

flourish-client/src/assets/data/dashboard/dashboard.tsx

@@ -0,0 +1,28 @@
+import { RxDashboard, RxQuestionMarkCircled } from "react-icons/rx";
+
+import { userTypes } from "../../../types/User";
+import { nav, routes } from "../routes";
+
+export const menu = {
+  [userTypes.ADMIN]: [
+    {
+      title: "Dashboard",
+      href: routes.dashboard,
+      icon: <RxDashboard fontSize={24} strokeWidth={0.1} />,
+      exclude: [nav.questionnaire],
+    },
+    {
+      title: "Questionnaires",
+      href: routes.questionnaire,
+      icon: <RxQuestionMarkCircled fontSize={24} strokeWidth={0.1} />,
+    },
+  ],
+};
+
+export const navBar = {
+  [userTypes.ADMIN]: [
+    { title: "Members", href: routes.members },
+    { title: "Session Request", href: routes.sessionRequest },
+    { title: "Overview", href: routes.overview },
+  ],
+};

flourish-client/src/assets/data/dashboard/questionnaire/questionnaire.tsx

@@ -0,0 +1,38 @@
+import { IoAddCircleOutline, IoRemoveCircleOutline } from "react-icons/io5";
+
+export const questionnaireData = {
+  name: { title: "Questionnaire Group", placeholder: "Enter a name" },
+  questionnaires: "All Questionnaires",
+  questionnaireField: {
+    title: "Question",
+    placeholder: "Enter a question",
+  },
+  options: "Options and Points",
+  optionField: {
+    option: "Option",
+    points: "Points",
+  },
+
+  button: {
+    questionnaire: {
+      add: {
+        title: "Add a Questionnaire",
+        icon: <IoAddCircleOutline />,
+      },
+      remove: {
+        title: "",
+        icon: <IoRemoveCircleOutline />,
+      },
+    },
+    option: {
+      title: "Add a option",
+      icon: <IoAddCircleOutline />,
+    },
+    save: {
+      title: "Save",
+    },
+    reset: {
+      title: "Reset",
+    },
+  },
+};

flourish-client/src/assets/data/routes.ts

@@ -0,0 +1,48 @@
+export const nav = {
+  home: "",
+  auth: "auth",
+  dashboard: "dashboard",
+  signIn: "signin",
+  signUp: "signup",
+  questionnaire: "questionnaires",
+  resource: "resource",
+  support: "support",
+  members: "members",
+  sessionRequest: "session-request",
+  overview: "overview",
+};
+
+export const routes = {
+  home: `/${nav.home}`,
+  auth: `/${nav.auth}`,
+  signIn: `/${nav.auth}/${nav.signIn}`,
+  signUp: `/${nav.auth}/${nav.signUp}`,
+  dashboard: `/${nav.dashboard}`,
+  questionnaire: `/${nav.dashboard}/${nav.questionnaire}`,
+  resource: `/${nav.resource}`,
+  support: `/${nav.support}`,
+  members: `/${nav.dashboard}/${nav.members}`,
+  sessionRequest: `/${nav.dashboard}/${nav.sessionRequest}`,
+  overview: `/${nav.dashboard}/${nav.overview}`,
+};
+
+export const header = [
+  { title: "Resources", href: routes.resource },
+  {
+    title: "Support",
+    href: routes.support,
+  },
+];
+
+export const headerNav = {
+  signIn: { title: "Sign In", href: routes.signIn },
+  dashboard: {
+    title: "Dashboard",
+    href: routes.dashboard,
+  },
+};
+
+export const signOut = {
+  title: "Sign Out",
+  href: routes.home,
+};

flourish-client/src/assets/data/server.ts

@@ -1,11 +1,14 @@
 import { userTypes } from "../../types/User";
 
 export const api = {
-  base: "https://flourish.onrender.com",
+  base: "https://flourish.onrender.com/",
   signUp: {
-    [userTypes.CLIENT]: "/client/signup",
-    [userTypes.ADMIN]: "/adminCounselor/signup",
-    [userTypes.COUNSELOR]: "counselor/signup",
+    [userTypes.CLIENT]: "client/signup/",
+    [userTypes.ADMIN]: "adminCounselor/signup/",
+    [userTypes.COUNSELOR]: "counselor/signup/",
+  },
+  signIn: "login/",
+  questionnaire: {
+    [userTypes.ADMIN]: "adminCounselor/questionnaire/",
   },
-  signIn: "/login",
 };

flourish-client/src/assets/svg/Auth.tsx

@@ -1,10 +1,10 @@
 import { SVGProps } from "react";
 import { useLocation } from "react-router-dom";
-import { nav } from "../data/nav";
+import { routes } from "../data/routes";
 
 const SignIn = (props: SVGProps<SVGSVGElement>) => {
   const { pathname } = useLocation();
-  const isSignUp = pathname !== nav.signUp;
+  const isSignUp = pathname !== routes.signUp;
 
   return (
     <svg