From 604c1c1e2f1d439d837d32ea9a54534f2a394f09 Mon Sep 17 00:00:00 2001 From: Rustic-Citrus Date: Tue, 9 Jul 2024 12:41:41 +0100 Subject: [PATCH] refactor: useFeedback hook implementation, used Outlet instead of props --- src/App.jsx | 139 ++++++++++++++-------------- src/components/LessonPlanCreate.jsx | 4 +- src/components/Page.jsx | 25 ++--- src/components/Profile.jsx | 14 +-- src/components/ProtectedRoute.jsx | 8 +- src/components/PublicRoute.jsx | 4 +- src/components/Register.jsx | 10 +- src/components/SignIn.jsx | 10 +- 8 files changed, 102 insertions(+), 112 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d40b593..0610d9f 100644 --- 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 ( - - - - - - } - errorElement={} - /> - - - - } - errorElement={} - /> - - - - } - errorElement={} - /> - - - - } - errorElement={} - /> - - - - } - errorElement={} - /> - - - - } - errorElement={} - /> - - - - } - errorElement={} - /> - - + + + + } errorElement={}> + + + + } + errorElement={} + /> + + + + } + errorElement={} + /> + + + + } + errorElement={} + /> + + + + } + errorElement={} + /> + + + + } + errorElement={} + /> + + + + } + errorElement={} + /> + + + + } + errorElement={} + /> + + + + ); }; diff --git a/src/components/LessonPlanCreate.jsx b/src/components/LessonPlanCreate.jsx index c9e573e..30f82b0 100644 --- 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 index 40829de..0e0f6cb 100644 --- a/src/components/Page.jsx +++ b/src/components/Page.jsx @@ -1,27 +1,20 @@ -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 ( <>
- + - {feedbackVisible && + {showFeedback && feedback.map((feedbackItem, i) => { return ( { title={feedbackItem.title} message={feedbackItem.message} type={feedbackItem.type} - toggleVisible={() => setFeedbackVisible(!feedbackVisible)} + toggleVisible={toggleFeedback} /> ); })} @@ -37,7 +30,3 @@ export const Page = ({ MainComponent }) => { ); }; - -Page.propTypes = { - MainComponent: PropTypes.elementType.isRequired, -}; diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx index 3a2519b..3734dc1 100644 --- 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 ( - + {i + 1} - + {plan.topic} - + {new Date(plan.date).toLocaleDateString("en-GB")} diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx index f688c8c..87365e3 100644 --- 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 ; } + return children; }; diff --git a/src/components/PublicRoute.jsx b/src/components/PublicRoute.jsx index 342064b..35da8a3 100644 --- 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 ; + return ; } + return children; }; diff --git a/src/components/Register.jsx b/src/components/Register.jsx index 008f37c..574bb32 100644 --- 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 }) => { ); }; - -Register.propTypes = { - triggerFeedback: PropTypes.func.isRequired, -}; diff --git a/src/components/SignIn.jsx b/src/components/SignIn.jsx index e687e7e..818cdf2 100644 --- 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 }) => { ); }; - -SignIn.propTypes = { - triggerFeedback: PropTypes.func, -};