refactor: useFeedback hook implementation, used Outlet instead of props

Rustic-Citrus · Jul 9, 2024 · 604c1c1 · 604c1c1
1 parent 5c552d5
commit 604c1c1
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 112 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,77 +10,82 @@ import { ProtectedRoute } from "./components/ProtectedRoute";
 import { PublicRoute } from "./components/PublicRoute";
 import { LessonPlanEdit } from "./components/LessonPlanEdit";
 import { AuthProvider } from "./hooks/useAuth";
+import { FeedbackProvider } from "./hooks/useFeedback";
 
 import { Routes, Route } from "react-router-dom";
 
 export const App = () => {
   return (
-    <AuthProvider>
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <PublicRoute>
-              <Page MainComponent={Splash} />
-            </PublicRoute>
-          }
-          errorElement={<Page MainComponent={Error} />}
-        />
-        <Route
-          path="/register"
-          element={
-            <PublicRoute>
-              <Page MainComponent={Register} />
-            </PublicRoute>
-          }
-          errorElement={<Page MainComponent={Error} />}
-        />
-        <Route
-          path="/login"
-          element={
-            <PublicRoute>
-              <Page MainComponent={SignIn} />
-            </PublicRoute>
-          }
-          errorElement={<Page MainComponent={Error} />}
-        />
-        <Route
-          path="/:userId"
-          element={
-            <ProtectedRoute>
-              <Page MainComponent={Profile} />
-            </ProtectedRoute>
-          }
-          errorElement={<Page MainComponent={Error} />}
-        />
-        <Route
-          path="/:userId/view/:lessonId"
-          element={
-            <ProtectedRoute>
-              <Page MainComponent={LessonPlanView} />
-            </ProtectedRoute>
-          }
-          errorElement={<Page MainComponent={Error} />}
-        />
-        <Route
-          path="/:userId/edit/:lessonId"
-          element={
-            <ProtectedRoute>
-              <Page MainComponent={LessonPlanEdit} />
-            </ProtectedRoute>
-          }
-          errorElement={<Page MainComponent={Error} />}
-        />
-        <Route
-          path="/:userId/create"
-          element={
-            <ProtectedRoute>
-              <Page MainComponent={LessonPlanCreate} />
-            </ProtectedRoute>
-          }
-          errorElement={<Page MainComponent={Error} />}
-        />
-      </Routes>
-    </AuthProvider>
+    <FeedbackProvider>
+      <AuthProvider>
+        <Routes>
+          <Route path="/" element={<Page />} errorElement={<Error />}>
+            <Route
+              path="/"
+              element={
+                <PublicRoute>
+                  <Splash />
+                </PublicRoute>
+              }
+              errorElement={<Error />}
+            />
+            <Route
+              path="register"
+              element={
+                <PublicRoute>
+                  <Register />
+                </PublicRoute>
+              }
+              errorElement={<Error />}
+            />
+            <Route
+              path="login"
+              element={
+                <PublicRoute>
+                  <SignIn />
+                </PublicRoute>
+              }
+              errorElement={<Error />}
+            />
+            <Route
+              path=":userId"
+              element={
+                <ProtectedRoute>
+                  <Profile />
+                </ProtectedRoute>
+              }
+              errorElement={<Error />}
+            />
+            <Route
+              path=":userId/view/:lessonId"
+              element={
+                <ProtectedRoute>
+                  <LessonPlanView />
+                </ProtectedRoute>
+              }
+              errorElement={<Error />}
+            />
+            <Route
+              path=":userId/edit/:lessonId"
+              element={
+                <ProtectedRoute>
+                  <LessonPlanEdit />
+                </ProtectedRoute>
+              }
+              errorElement={<Error />}
+            />
+            <Route
+              path=":userId/create"
+              element={
+                <ProtectedRoute>
+                  <LessonPlanCreate />
+                </ProtectedRoute>
+              }
+              errorElement={<Error />}
+            />
+          </Route>
+        </Routes>
+      </AuthProvider>
+    </FeedbackProvider>
   );
 };
diff --git a/src/components/LessonPlanCreate.jsx b/src/components/LessonPlanCreate.jsx
@@ -1,4 +1,5 @@
 import { useAuth } from "../hooks/useAuth";
+import { useFeedback } from "../hooks/useFeedback";
 import { useUpdateLessonPlan } from "../hooks/useUpdateLessonPlan";
 import LessonPlanService from "../service/LessonPlanService";
 import lessonPlanTemplate from "../../data/lessonPlanTemplate.json";
@@ -25,7 +26,8 @@ import Spinner from "react-bootstrap/Spinner";
 
 import { motion } from "framer-motion";
 
-export const LessonPlanCreate = ({ triggerFeedback }) => {
+export const LessonPlanCreate = () => {
+  const { triggerFeedback } = useFeedback();
   const { user } = useAuth();
   const { userId } = useParams();
   const navigate = useNavigate();

diff --git a/src/components/Page.jsx b/src/components/Page.jsx
@@ -1,43 +1,32 @@
-import PropTypes from "prop-types";
-
 import { Header } from "./Header";
 import { Feedback } from "./Feedback";
+import { useFeedback } from "../hooks/useFeedback";
 
-import { useState } from "react";
+import { Outlet } from "react-router-dom";
 
 import ToastContainer from "react-bootstrap/ToastContainer";
 
-export const Page = ({ MainComponent }) => {
-  const [feedbackVisible, setFeedbackVisible] = useState(false);
-  const [feedback, setFeedback] = useState([]);
-
-  const setupFeedback = (reportedFeedback) => {
-    setFeedback(reportedFeedback);
-    setFeedbackVisible(true);
-  };
+export const Page = () => {
+  const { feedback, showFeedback, toggleFeedback } = useFeedback();
 
   return (
     <>
       <Header />
-      <MainComponent triggerFeedback={setupFeedback} />
+      <Outlet />
       <ToastContainer position="top-end" className="m-4">
-        {feedbackVisible &&
+        {showFeedback &&
           feedback.map((feedbackItem, i) => {
             return (
               <Feedback
                 key={i}
                 title={feedbackItem.title}
                 message={feedbackItem.message}
                 type={feedbackItem.type}
-                toggleVisible={() => setFeedbackVisible(!feedbackVisible)}
+                toggleVisible={toggleFeedback}
               />
             );
           })}
       </ToastContainer>
     </>
   );
 };
-
-Page.propTypes = {
-  MainComponent: PropTypes.elementType.isRequired,
-};
diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx
@@ -36,6 +36,8 @@ export const Profile = () => {
 
       fetchLessonPlans(lessonApiRef, setLessonPlans);
     }
+
+    console.log(`Authorised? ${authorised}`);
   }, [authorised, user, userId]);
 
   return (
@@ -79,23 +81,17 @@ export const Profile = () => {
                     return (
                       <tr key={i}>
                         <td>
-                          <Link
-                            to={`/${userId}/view/${plan._id}`}
-                          >
+                          <Link to={`/${userId}/view/${plan._id}`}>
                             {i + 1}
                           </Link>
                         </td>
                         <td>
-                          <Link
-                            to={`/${userId}/view/${plan._id}`}
-                          >
+                          <Link to={`/${userId}/view/${plan._id}`}>
                             {plan.topic}
                           </Link>
                         </td>
                         <td>
-                          <Link
-                            to={`/${userId}/view/${plan._id}`}
-                          >
+                          <Link to={`/${userId}/view/${plan._id}`}>
                             {new Date(plan.date).toLocaleDateString("en-GB")}
                           </Link>
                         </td>

diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
@@ -1,8 +1,11 @@
-import { Navigate } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
-import PropTypes from "prop-types";
+
 import { useEffect } from "react";
 
+import PropTypes from "prop-types";
+
+import { Navigate } from "react-router-dom";
+
 export const ProtectedRoute = ({ children }) => {
   const { user, authenticate } = useAuth();
 
@@ -13,6 +16,7 @@ export const ProtectedRoute = ({ children }) => {
   if (!user) {
     return <Navigate to="/login" />;
   }
+
   return children;
 };
 

diff --git a/src/components/PublicRoute.jsx b/src/components/PublicRoute.jsx
@@ -4,9 +4,11 @@ import PropTypes from "prop-types";
 
 export const PublicRoute = ({ children }) => {
   const { user } = useAuth();
+
   if (user) {
-    return <Navigate to={`/${user._id}`} />;
+    return <Navigate to={`/${user._id}`}/>;
   }
+
   return children;
 };
 

diff --git a/src/components/Register.jsx b/src/components/Register.jsx
@@ -2,11 +2,10 @@ import { handleChangeHelper } from "../helper/handleHelper";
 import { validatePassword, validateUsername } from "../validation/validate";
 import feedback from "../../data/feedback.json";
 import { useAuth } from "../hooks/useAuth";
+import { useFeedback } from "../hooks/useFeedback";
 
 import { useState, useEffect } from "react";
 
-import PropTypes from "prop-types";
-
 import Container from "react-bootstrap/Container";
 import Stack from "react-bootstrap/Stack";
 import FloatingLabel from "react-bootstrap/FloatingLabel";
@@ -18,7 +17,8 @@ import Spinner from "react-bootstrap/Spinner";
 
 import { motion } from "framer-motion";
 
-export const Register = ({ triggerFeedback }) => {
+export const Register = () => {
+  const { triggerFeedback } = useFeedback();
   const [hidePassword, setHidePassword] = useState(true);
   const [hideConfirmPassword, setHideConfirmPassword] = useState(true);
   const [validated, setValidated] = useState(false);
@@ -210,7 +210,3 @@ export const Register = ({ triggerFeedback }) => {
     </Container>
   );
 };
-
-Register.propTypes = {
-  triggerFeedback: PropTypes.func.isRequired,
-};
diff --git a/src/components/SignIn.jsx b/src/components/SignIn.jsx
@@ -1,10 +1,9 @@
 import { handleChangeHelper } from "../helper/handleHelper";
 import { useAuth } from "../hooks/useAuth.jsx";
+import { useFeedback } from "../hooks/useFeedback.jsx";
 
 import { useState } from "react";
 
-import PropTypes from "prop-types";
-
 import Form from "react-bootstrap/Form";
 import Container from "react-bootstrap/Container";
 import FloatingLabel from "react-bootstrap/FloatingLabel";
@@ -16,7 +15,8 @@ import Spinner from "react-bootstrap/Spinner";
 
 import { motion } from "framer-motion";
 
-export const SignIn = ({ triggerFeedback }) => {
+export const SignIn = () => {
+  const { triggerFeedback } = useFeedback();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [hidePassword, setHidePassword] = useState(true);
@@ -152,7 +152,3 @@ export const SignIn = ({ triggerFeedback }) => {
     </Container>
   );
 };
-
-SignIn.propTypes = {
-  triggerFeedback: PropTypes.func,
-};