refactor: implemented ts

src/components/Header.tsx

@@ -17,8 +17,8 @@ export const Header = (): JSX.Element => {
     setIsSigningOut(true);
 
     try {
-      setTimeout(async () => {
-        await signOut();
+      setTimeout(() => {
+        signOut();
       }, 1000);
     } catch (error: any) {
       console.log(error.message);

src/components/ProtectedRoute.tsx

@@ -1,26 +1,19 @@
-import { useAuth } from "../hooks/useAuth";
-import { useEffect } from "react";
-import PropTypes from "prop-types";
+import { useAuth } from "../hooks";
+import React, { useEffect } from "react";
 import { Navigate } from "react-router-dom";
 
-export const ProtectedRoute = ({ children }) => {
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   const { user, authenticate } = useAuth();
 
   useEffect(() => {
-    const waitThenCheckUser = async () => {
-      await authenticate();
-
-      if (!user) {
-        return <Navigate to="/login" />;
-      }
-    };
-
-    waitThenCheckUser();
+    if (!user) {
+      authenticate();
+    }
   }, [user, authenticate]);
 
-  return children;
-};
+  if (!user) {
+    return <Navigate to="/login" />;;
+  }
 
-ProtectedRoute.propTypes = {
-  children: PropTypes.element,
+  return children;
 };

src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from "./useAuthHook";
 export * from "./useFeedback";
 export * from "./useFeedbackHook";
 export * from "./useLocalStorage";
+export * from "./useUpdateLessonPlan";

src/hooks/useAuth.tsx

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

src/hooks/useAuthHook.tsx

@@ -1,6 +1,8 @@
 import { useLocalStorage } from "./useLocalStorage";
-import UserService from "../service/UserService";
+import { UserService } from "../services";
+import { UserData, Response } from "../interfaces";
 import { useNavigate } from "react-router-dom";
+import { AxiosResponse } from "axios";
 
 export const useAuthHook = () => {
   const [user, setUser] = useLocalStorage("user", "");
@@ -9,12 +11,12 @@ export const useAuthHook = () => {
 
   const api = new UserService(VITE_API_ENDPOINT);
 
-  const authenticate = async () => {
+  const authenticate = async (): Promise<AxiosResponse | Response | void> => {
     try {
       const response = await api.authenticate();
 
       if (response.status >= 300) {
-        setUser("");
+        setUser(null);
       }
 
       return response;
@@ -23,36 +25,40 @@ export const useAuthHook = () => {
     }
   };
 
-  const signIn = async (userData) => {
+  const signIn = async (
+    userData: UserData
+  ): Promise<AxiosResponse | Response | void> => {
     try {
       const response = await api.login(userData);
 
-      if (response.status === 200 && response.data.user._id) {
+      if (response.status < 300) {
         setTimeout(() => {
           setUser(response.data.user);
         }, 2000);
       }
 
       return response;
-    } catch (error) {
+    } catch (error: any) {
       console.log(error.message);
     }
   };
 
-  const signOut = async () => {
+  const signOut = async (): Promise<AxiosResponse | Response | void> => {
     try {
       const response = await api.logout();
 
       setUser(null);
       navigate("/");
 
       return response;
-    } catch (error) {
+    } catch (error: any) {
       console.log(error.message);
     }
   };
 
-  const register = async (userData) => {
+  const register = async (
+    userData: UserData
+  ): Promise<AxiosResponse | Response | void> => {
     try {
       const response = await api.register(userData);
 
@@ -63,7 +69,7 @@ export const useAuthHook = () => {
       }
 
       return response;
-    } catch (error) {
+    } catch (error: any) {
       console.log(error.message);
     }
   };

src/pages/LessonPlanCreate.tsx

@@ -1,29 +1,23 @@
-import { useAuth } from "../hooks/useAuth";
-import { useFeedback } from "../hooks/useFeedback";
-import { useUpdateLessonPlan } from "../hooks/useUpdateLessonPlan";
-import LessonPlanService from "../service/LessonPlanService";
+import { useUpdateLessonPlan, useFeedback, useAuth } from "../hooks";
+import { LessonPlanService } from "../services";
 import lessonPlanTemplate from "../../data/lessonPlanTemplate.json";
-// import { Error } from "./Error";
-
 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 Container from "react-bootstrap/Container";
-import Col from "react-bootstrap/Col";
-import Row from "react-bootstrap/Row";
-import Image from "react-bootstrap/Image";
-import Button from "react-bootstrap/Button";
-import Nav from "react-bootstrap/Nav";
-import Tab from "react-bootstrap/Tab";
-import Card from "react-bootstrap/Card";
-import Form from "react-bootstrap/Form";
-import InputGroup from "react-bootstrap/InputGroup";
-import Spinner from "react-bootstrap/Spinner";
-
+import {
+  Container,
+  Col,
+  Row,
+  Image,
+  Button,
+  Nav,
+  Tab,
+  Card,
+  Form,
+  InputGroup,
+  Spinner,
+} from "react-bootstrap";
 import { motion } from "framer-motion";
 
 export const LessonPlanCreate = () => {

src/pages/LessonPlanEdit.tsx

@@ -1,9 +1,8 @@
-import { useAuth } from "../hooks/useAuth";
-import { useUpdateLessonPlan } from "../hooks/useUpdateLessonPlan";
-import LessonPlanService from "../service/LessonPlanService";
+import { useAuth, useUpdateLessonPlan } from "../hooks";
+import { LessonPlanService } from "../services";
 import lessonPlanTemplate from "../../data/lessonPlanTemplate.json";
-import { fetchOneLessonPlan } from "../helper/fetchHelper";
-import { TransitionDecorator } from "../components/decorators/TransitionDecorator";
+import { fetchOneLessonPlan } from "../helpers";
+import { TransitionDecorator } from "../components/decorators";
 import { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
@@ -31,7 +30,7 @@ export const LessonPlanEdit = () => {
     useUpdateLessonPlan(lessonPlanTemplate);
 
   useEffect(() => {
-    if (!lessonApiRef.current) {
+    if (!lessonApiRef.current && userId) {
       lessonApiRef.current = new LessonPlanService(
         import.meta.env.VITE_API_ENDPOINT,
         userId

src/pages/LessonPlanView.tsx

@@ -1,8 +1,9 @@
 import lessonPlanTemplate from "../../data/lessonPlanTemplate";
-import LessonPlanService from "../service/LessonPlanService";
-import { fetchOneLessonPlan } from "../helper/fetchHelper";
-import { useAuth } from "../hooks/useAuth";
-import { ConfirmDeleteModal } from "../components/ConfirmDeleteModal";
+import { LessonPlanService } from "../services";
+import { fetchOneLessonPlan } from "../helpers";
+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";
@@ -17,7 +18,6 @@ import {
   Card,
   Spinner,
 } from "react-bootstrap";
-import { TransitionDecorator } from "../components/decorators/TransitionDecorator";
 
 export const LessonPlanView = () => {
   const [lessonPlan, setLessonPlan] = useState(lessonPlanTemplate);

src/pages/Profile.tsx

@@ -1,7 +1,7 @@
-import LessonPlanService from "../service/LessonPlanService";
-import { useAuth } from "../hooks/useAuth";
-import { fetchLessonPlans } from "../helper/fetchHelper";
-import { TransitionDecorator } from "../components/decorators/TransitionDecorator";
+import { LessonPlanService } from "../services";
+import { useAuth } from "../hooks";
+import { fetchLessonPlans } from "../helpers";
+import { TransitionDecorator } from "../components/decorators"
 import { useEffect, useState, useRef } from "react";
 import { Link, useParams } from "react-router-dom";
 import { Container, Row, Col, Table, Button, Image } from "react-bootstrap";

src/pages/Register.tsx

@@ -17,7 +17,7 @@ import {
   InputGroup,
   Spinner,
 } from "react-bootstrap";
-import { FeedbackItem, RegisterResponse } from "../interfaces";
+import { FeedbackItem, Response } from "../interfaces";
 
 export const Register = () => {
   const { triggerFeedback } = useFeedback();
@@ -75,7 +75,7 @@ export const Register = () => {
       }
     } else {
       try {
-        const response: RegisterResponse = await register(formState);
+        const response = await register(formState);
 
         reportedFeedback.push({
           title:

src/pages/SignIn.tsx

@@ -1,4 +1,4 @@
-import { handleChangeHelper } from "../helper/handleHelper";
+import { handleChangeHelper } from "../helpers";
 import { useAuth, useFeedback } from "../hooks";
 import { LoadingWithSpinner, PrimaryButton } from "../components";
 import {