refactor: implemented interfaces, default values

src/hooks/useAuth.tsx

@@ -1,13 +1,17 @@
 import { useAuthHook } from "./useAuthHook";
 import { createContext, useContext, useMemo } from "react";
-import { UserData } from "../interfaces";
+import { UserRequest, UserResponse } from "../interfaces";
+import { DEFAULT_USER_RESPONSE, DEFAULT_USER } from "../templates";
 
 const AuthContext = createContext({
-  user: null,
-  register: async (userData: UserData): Promise<void> => {},
-  authenticate: async (userData: UserData): Promise<void> => {},
-  signIn: async (userData: UserData): Promise<void> => {},
-  signOut: async (): Promise<void> => {},
+  user: DEFAULT_USER,
+  register: async (userData: UserRequest): Promise<UserResponse> =>
+    DEFAULT_USER_RESPONSE,
+  authenticate: async (userData: UserRequest): Promise<UserResponse> =>
+    DEFAULT_USER_RESPONSE,
+  signIn: async (userData: UserRequest): Promise<UserResponse> =>
+    DEFAULT_USER_RESPONSE,
+  signOut: async (): Promise<UserResponse> => DEFAULT_USER_RESPONSE,
 });
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {

src/hooks/useAuthHook.tsx

@@ -1,10 +1,11 @@
 import { useLocalStorage } from "./useLocalStorage";
 import { UserService } from "../services";
-import { UserData, UserResponse } from "../interfaces";
+import { UserRequest, UserResponse } from "../interfaces";
 import { useNavigate } from "react-router-dom";
+import { DEFAULT_USER } from "../templates";
 
 export const useAuthHook = () => {
-  const [user, setUser] = useLocalStorage("user", "");
+  const [user, setUser] = useLocalStorage("user", JSON.stringify(DEFAULT_USER));
   const navigate = useNavigate();
   const { VITE_API_ENDPOINT } = import.meta.env;
 
@@ -15,7 +16,7 @@ export const useAuthHook = () => {
       status: 500,
       data: {
         msg: errorMessage,
-        user: null,
+        user: DEFAULT_USER,
       },
     };
   };
@@ -25,7 +26,7 @@ export const useAuthHook = () => {
       const response = await api.authenticate();
 
       if (response.status >= 300) {
-        setUser(null);
+        setUser(DEFAULT_USER);
       }
 
       return response;
@@ -34,7 +35,7 @@ export const useAuthHook = () => {
     }
   };
 
-  const signIn = async (userData: UserData): Promise<UserResponse> => {
+  const signIn = async (userData: UserRequest): Promise<UserResponse> => {
     try {
       const response = await api.login(userData);
 
@@ -54,7 +55,7 @@ export const useAuthHook = () => {
     try {
       const response = await api.logout();
 
-      setUser(null);
+      setUser(DEFAULT_USER);
       navigate("/");
 
       return response;
@@ -63,7 +64,7 @@ export const useAuthHook = () => {
     }
   };
 
-  const register = async (userData: UserData): Promise<UserResponse> => {
+  const register = async (userData: UserRequest): Promise<UserResponse> => {
     try {
       const response = await api.register(userData);
 

src/hooks/useLocalStorage.tsx

@@ -15,7 +15,7 @@ export const useLocalStorage = (keyName: string, defaultValue: string) => {
     }
   });
 
-  const setValue = (newValue: string) => {
+  const setValue = (newValue: string): void => {
     try {
       window.localStorage.setItem(keyName, JSON.stringify(newValue));
     } catch (error: any) {

src/hooks/useUpdateLessonPlan.tsx

@@ -1,16 +1,17 @@
 import { useState } from "react";
+import { LessonPlan } from "../interfaces";
 
-export const useUpdateLessonPlan = (initialLessonPlan) => {
+export const useUpdateLessonPlan = (initialLessonPlan: LessonPlan) => {
   const [lessonPlan, setLessonPlan] = useState(initialLessonPlan);
 
-  const updateLessonPlan = (update, section = null, key = null) => {
-    if (section === null && key === null) {
+  const updateLessonPlan = (update: LessonPlan | string, section = "", key = "") => {
+    if (typeof update !== "string" && section === "" && key === "") {
       setLessonPlan(update);
-    } else {
+    } else if (typeof update === "string") {
       setLessonPlan((prevState) => ({
         ...prevState,
         [section]:
-          key !== null
+          key !== ""
             ? {
                 ...prevState[section],
                 [key]: update,

src/interfaces/LessonPlan.ts

@@ -1,4 +1,5 @@
 export interface LessonPlan {
+  _id: string,
   topic: string;
   date: string;
   presentation: {

src/interfaces/LessonPlanResponse.ts

@@ -0,0 +1,10 @@
+import { LessonPlan } from "./LessonPlan";
+
+export interface LessonPlanResponse {
+    status: number,
+    data: {
+        msg: string,
+        lessonPlan: LessonPlan,
+        lessonPlans: LessonPlan[]
+    };
+}

src/interfaces/User.ts

@@ -0,0 +1,8 @@
+import { LessonPlan } from "./LessonPlan"
+
+export interface User {
+    _id: string,
+    username: string,
+    password: string,
+    lesson_plans: LessonPlan[]
+}

src/interfaces/UserData.ts → src/interfaces/UserRequest.ts

@@ -1,4 +1,4 @@
-export interface UserData {
+export interface UserRequest {
     username: string;
     password: string;
 }

src/interfaces/UserResponse.ts

@@ -1,7 +1,9 @@
+import { User } from "./User";
+
 export interface UserResponse {
   status: number;
   data: {
     msg: string;
-    user: null
+    user: User
   };
 }

src/interfaces/index.ts

@@ -1,4 +1,6 @@
 export * from "./FeedbackItem";
-export * from "./UserData";
+export * from "./UserRequest";
 export * from "./LessonPlan";
-export * from "./UserResponse";
+export * from "./UserResponse";
+export * from "./LessonPlanResponse";
+export * from "./User";

src/pages/LessonPlanCreate.tsx

@@ -2,7 +2,6 @@ import { useUpdateLessonPlan, useFeedback, useAuth } from "../hooks";
 import { LessonPlanService } from "../services";
 import lessonPlanTemplate from "../../data/lessonPlanTemplate.json";
 import { useState, useEffect, useRef } from "react";
-import PropTypes from "prop-types";
 import { Link, useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import {
@@ -512,7 +511,3 @@ export const LessonPlanCreate = () => {
     </Container>
   );
 };
-
-LessonPlanCreate.propTypes = {
-  triggerFeedback: PropTypes.func,
-};

src/pages/LessonPlanView.tsx

@@ -5,7 +5,6 @@ import { useAuth } from "../hooks";
 import { ConfirmDeleteModal } from "../components";
 import { TransitionDecorator } from "../components/decorators";
 import { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import {
   Container,
@@ -31,6 +30,9 @@ export const LessonPlanView = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
+    if (user?._id) {
+      user._id === userId ? setAuthorised(true) : setAuthorised(false);
+    }
     user && user._id === userId ? setAuthorised(true) : setAuthorised(false);
 
     if (authorised && !lessonApiRef.current) {
@@ -263,7 +265,3 @@ export const LessonPlanView = () => {
     </Container>
   );
 };
-
-LessonPlanView.propTypes = {
-  triggerFeedback: PropTypes.func,
-};

src/pages/PageTemplate.tsx

@@ -1,7 +1,7 @@
 import { FeedbackComponent, Header } from "../components";
-import { useFeedback } from "../hooks/useFeedback";
+import { useFeedback } from "../hooks";
 import { Outlet } from "react-router-dom";
-import ToastContainer from "react-bootstrap/ToastContainer";
+import { ToastContainer } from "react-bootstrap";
 import { AnimatePresence } from "framer-motion";
 
 export const PageTemplate = () => {

src/pages/Profile.tsx

@@ -1,7 +1,8 @@
 import { LessonPlanService } from "../services";
 import { useAuth } from "../hooks";
 import { fetchLessonPlans } from "../helpers";
-import { TransitionDecorator } from "../components/decorators"
+import { TransitionDecorator } from "../components/decorators";
+import { LessonPlan } from "../interfaces";
 import { useEffect, useState, useRef } from "react";
 import { Link, useParams } from "react-router-dom";
 import { Container, Row, Col, Table, Button, Image } from "react-bootstrap";
@@ -50,7 +51,7 @@ export const Profile = () => {
           </thead>
           <tbody>
             {lessonPlans !== undefined &&
-              lessonPlans.map((plan, i) => (
+              lessonPlans.map((plan: LessonPlan, i) => (
                 <tr key={i}>
                   <td>
                     <Link to={`/${userId}/view/${plan._id}`}>{i + 1}</Link>

src/services/LessonPlanService.ts

@@ -1,5 +1,6 @@
-import axios, { AxiosResponse, AxiosInstance } from "axios";
-import { LessonPlan } from "../interfaces";
+import axios, { AxiosInstance } from "axios";
+import { LessonPlan, LessonPlanResponse } from "../interfaces";
+import { DEFAULT_LESSON_PLAN } from "../templates";
 
 export class LessonPlanService {
   #instance: AxiosInstance;
@@ -20,68 +21,112 @@ export class LessonPlanService {
     return this.#userId;
   }
 
-  async getLessonPlans(): Promise<AxiosResponse | string> {
+  getErrorResponse(errorMessage: string): LessonPlanResponse {
+    return {
+      status: 500,
+      data: {
+        msg: errorMessage,
+        lessonPlan: DEFAULT_LESSON_PLAN,
+        lessonPlans: [],
+      },
+    };
+  }
+
+  async getLessonPlans(): Promise<LessonPlanResponse> {
     try {
       const response = await this.#instance.get(
         `/${this.#userId}/lesson-plans`
       );
-      return response;
+      return {
+        status: response.status,
+        data: {
+          msg: response.data.msg,
+          lessonPlan: DEFAULT_LESSON_PLAN,
+          lessonPlans: response.data.lessonPlans,
+        },
+      };
     } catch (error: any) {
-      return error.message;
+      return this.getErrorResponse(error.message);
     }
   }
 
-  async getOneLessonPlan(lessonId: string): Promise<AxiosResponse | string> {
+  async getOneLessonPlan(lessonId: string): Promise<LessonPlanResponse> {
     try {
       const response = await this.#instance.get(
         `/${this.#userId}/lesson-plans/${lessonId}`
       );
-      return response;
+      return {
+        status: response.status,
+        data: {
+          msg: response.data.msg,
+          lessonPlan: response.data.lessonPlan,
+          lessonPlans: [],
+        },
+      };
     } catch (error: any) {
-      return error.message;
+      return this.getErrorResponse(error.message);
     }
   }
 
-  async createLessonPlan(
-    lessonPlan: LessonPlan
-  ): Promise<AxiosResponse | string> {
+  async createLessonPlan(lessonPlan: LessonPlan): Promise<LessonPlanResponse> {
     try {
       const response = await this.#instance.post(
         `/${this.#userId}/lesson-plans`,
         {
           lessonPlan,
         }
       );
-      return response;
+      return {
+        status: response.status,
+        data: {
+          msg: response.data.msg,
+          lessonPlan: response.data.lessonPlan,
+          lessonPlans: [],
+        },
+      };
     } catch (error: any) {
-      return error.message;
+      return this.getErrorResponse(error.message);
     }
   }
 
   async updateLessonPlan(
     lessonId: string,
     newLessonPlan: LessonPlan
-  ): Promise<AxiosResponse | string> {
+  ): Promise<LessonPlanResponse> {
     try {
       const response = await this.#instance.put(
         `/${this.#userId}/lesson-plans/${lessonId}`,
         { newLessonPlan }
       );
 
-      return response;
+      return {
+        status: response.status,
+        data: {
+          msg: response.data.msg,
+          lessonPlan: response.data.lessonPlan,
+          lessonPlans: [],
+        },
+      };
     } catch (error: any) {
-      return error.message;
+      return this.getErrorResponse(error.message);
     }
   }
 
-  async deleteLessonPlan(lessonId: string): Promise<AxiosResponse | string> {
+  async deleteLessonPlan(lessonId: string): Promise<LessonPlanResponse> {
     try {
       const response = await this.#instance.delete(
         `/${this.#userId}/lesson-plans/${lessonId}`
       );
-      return response;
+      return {
+        status: response.status,
+        data: {
+          msg: response.data.msg,
+          lessonPlan: DEFAULT_LESSON_PLAN,
+          lessonPlans: [],
+        },
+      };
     } catch (error: any) {
-      return error.message;
+      return this.getErrorResponse(error.message);
     }
   }
 }