Merge pull request #195 from bluewave-labs/192-template-outlet

solved 192
bluewave-labs · Sep 13, 2024 · 3ec3a29 · 3ec3a29
2 parents 4d23618 + 2b575c9
commit 3ec3a29
Show file tree

Hide file tree

Showing 16 changed files with 159 additions and 191 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -20,34 +20,38 @@ import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 import { Error404 } from "./scenes/errors/404";
 import { Error403 } from "./scenes/errors/403";
+import HomePageTemplate from "./templates/HomePageTemplate/HomePageTemplate";
 
 function App() {
-  const { isLoggedIn } = useAuth();
+  const { isLoggedIn } = useAuth(); 
 
   return (
     <>
       <Routes>
-        <Route path="/"element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}/>
-        <Route path="/home" element={<Private Component={Home} />} />
+        <Route path="/" element={isLoggedIn ? <Private Component={HomePageTemplate} /> : <LoginPage />}>
+          <Route index element={<Home />} />
+          <Route path="link" element={<LinksDefaultPage />} />
+          <Route path="tour" element={<ToursDefaultPage />} />
+          <Route path="/banner/create" element={<BannerPage />} />
+          <Route path="/popup/create" element={<Private Component={CreatePopupPage} />} />
+          <Route path="/banner" element={<Private Component={BannerDefaultPage} />} />
+          <Route path="/popup" element={<Private Component={PopupDefaultPage} />} />
+          <Route path="/hint-default" element={<HintDefaultPage />} />
+          <Route path="/hint/create" element={<CreateHintPage />} />
+          <Route path="/hint" element={<HintPage />} />
+        </Route>
+
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
         <Route path="/check-email" element={<CheckYourEmailPage />} />
         <Route path="/set-new-password" element={<SetNewPasswordPage />} />
+
         <Route path="/progress-steps" element={<ProgressStepsMain />} />
-        <Route path="/banner/create" element={<BannerPage />} />
-        <Route path="/popup/create" element={<Private Component={CreatePopupPage} />} />
-        <Route path="/banner" element={<Private Component={BannerDefaultPage} />} />
-        <Route path="/popup" element={<Private Component={PopupDefaultPage }/>} />
-        <Route path="/link" element={<LinksDefaultPage />} />
-        <Route path="/tour" element={<ToursDefaultPage />} />
-        <Route path="/hint-default" element={<HintDefaultPage />} />
-        <Route path="/hint/create" element={<CreateHintPage />} />
-        <Route path="/hint" element={<HintPage />} />
         <Route path="/403" element={<Error403 />} />
         <Route path="*" element={<Error404 />} />
-      </Routes>    
+      </Routes>
     </>
   );
 }

diff --git a/frontend/src/scenes/bannerPage/BannerPage.jsx b/frontend/src/scenes/bannerPage/BannerPage.jsx
@@ -63,8 +63,8 @@ const BannerPage = () => {
         };
         try {
             const response = location.state?.isEdit
-            ? await editBanner(location.state?.id, bannerData)
-            : await addBanner(bannerData);
+                ? await editBanner(location.state?.id, bannerData)
+                : await addBanner(bannerData);
             const toastMessage = location.state?.isEdit ? 'You edited this banner' : 'New banner saved'
             toastEmitter.emit(TOAST_EMITTER_KEY, toastMessage);
             navigate('/banner');
@@ -78,39 +78,36 @@ const BannerPage = () => {
     }
 
     return (
-        <div >
-            <HomePageTemplate>
-                <GuideTemplate title='New banner'
-                    activeButton={activeButton}
-                    handleButtonClick={handleButtonClick}
-                    onSave={onSave}
-                    rightContent={() =>
-                        <BannerPreview
-                            backgroundColor={backgroundColor}
-                            color={fontColor}
-                            isTopPosition={isTopPosition}
-                            bannerText={bannerText}
-                            setBannerText={setBannerText}
-                        />}
-                    leftContent={() =>
-                        <BannerLeftContent
-                            setIsTopPosition={setIsTopPosition}
-                            isTopPosition={isTopPosition}
-                            url={url}
-                            setUrl={setUrl}
-                            setButtonAction={setButtonAction}
-                            buttonAction={buttonAction}
-                        />}
-                    leftAppearance={() => (
-                        <BannerLeftAppearance
-                            backgroundColor={backgroundColor}
-                            setBackgroundColor={setBackgroundColor}
-                            fontColor={fontColor}
-                            setFontColor={setFontColor}
-                        />
-                    )} />
-            </HomePageTemplate>
-        </div>
+
+        <GuideTemplate title='New banner'
+            activeButton={activeButton}
+            handleButtonClick={handleButtonClick}
+            onSave={onSave}
+            rightContent={() =>
+                <BannerPreview
+                    backgroundColor={backgroundColor}
+                    color={fontColor}
+                    isTopPosition={isTopPosition}
+                    bannerText={bannerText}
+                    setBannerText={setBannerText}
+                />}
+            leftContent={() =>
+                <BannerLeftContent
+                    setIsTopPosition={setIsTopPosition}
+                    isTopPosition={isTopPosition}
+                    url={url}
+                    setUrl={setUrl}
+                    setButtonAction={setButtonAction}
+                    buttonAction={buttonAction}
+                />}
+            leftAppearance={() => (
+                <BannerLeftAppearance
+                    backgroundColor={backgroundColor}
+                    setBackgroundColor={setBackgroundColor}
+                    fontColor={fontColor}
+                    setFontColor={setFontColor}
+                />
+            )} />
     );
 };
 

diff --git a/frontend/src/scenes/dashboard/Dashboard.jsx b/frontend/src/scenes/dashboard/Dashboard.jsx
@@ -29,7 +29,7 @@ const Dashboard = ({ fullName }) => {
     },
   ];
   return (
-    <>
+
       <div className={styles.container}>
         <div className={styles.top}>
           <UserTitle fullName={fullName} />
@@ -40,9 +40,7 @@ const Dashboard = ({ fullName }) => {
         </div>
         <CreateActivityButtonList buttons={buttons} />
         <StatisticCardList metrics={metrics} />
-
       </div>
-    </>
   );
 };
 

diff --git a/frontend/src/scenes/dashboard/Dashboard.module.scss b/frontend/src/scenes/dashboard/Dashboard.module.scss
@@ -4,6 +4,7 @@
     width: 100%;
     padding: 3rem;
     gap:1.5rem;
+
     .top{
         display: flex;
         justify-content: space-between;

diff --git a/frontend/src/scenes/hints/CreateHintPage.jsx b/frontend/src/scenes/hints/CreateHintPage.jsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
 import GuideTemplate from "../../templates/GuideTemplate/GuideTemplate";
 import RichTextEditor from "../../components/RichTextEditor/RichTextEditor";
 import HintLeftContent from "../../components/HintPageComponents/HintLeftContent/HintLeftContent";
@@ -48,38 +47,35 @@ const HintPage = () => {
   ];
 
   return (
-    <div>
-      <HomePageTemplate>
-        <GuideTemplate
-          title="New Hint"
-          activeButton={activeButton}
-          handleButtonClick={handleButtonClick}
-          rightContent={() => (
-            <RichTextEditor
-              previewBtnText={leftContentFormData.actionButtonText}
-              headerBackgroundColor={headerBackgroundColor}
-              headerColor={headerColor}
-              textColor={textColor}
-              buttonBackgroundColor={buttonBackgroundColor}
-              buttonTextColor={buttonTextColor}
-              sx={{
-                width: "100%",
-                maxWidth: "700px",
-                marginLeft: "2.5rem",
-                marginTop: "1rem",
-              }}
-            />
-          )}
-          leftContent={() => (
-            <HintLeftContent
-              formData={leftContentFormData}
-              setLeftContentFormData={setLeftContentFormData}
-            />
-          )}
-          leftAppearance={() => <HintLeftAppearance data={stateList} />}
+
+    <GuideTemplate
+      title="New Hint"
+      activeButton={activeButton}
+      handleButtonClick={handleButtonClick}
+      rightContent={() => (
+        <RichTextEditor
+          previewBtnText={leftContentFormData.actionButtonText}
+          headerBackgroundColor={headerBackgroundColor}
+          headerColor={headerColor}
+          textColor={textColor}
+          buttonBackgroundColor={buttonBackgroundColor}
+          buttonTextColor={buttonTextColor}
+          sx={{
+            width: "100%",
+            maxWidth: "700px",
+            marginLeft: "2.5rem",
+            marginTop: "1rem",
+          }}
+        />
+      )}
+      leftContent={() => (
+        <HintLeftContent
+          formData={leftContentFormData}
+          setLeftContentFormData={setLeftContentFormData}
         />
-      </HomePageTemplate>
-    </div>
+      )}
+      leftAppearance={() => <HintLeftAppearance data={stateList} />}
+    />
   );
 };
 

diff --git a/frontend/src/scenes/hints/HintDefaultPage.jsx b/frontend/src/scenes/hints/HintDefaultPage.jsx
@@ -1,5 +1,4 @@
 import CreateActivityButton from "../../components/Button/CreateActivityButton/CreateActivityButton"
-import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate"
 import { ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
 import ParagraphCSS from "../../components/ParagraphCSS/ParagraphCSS";
 import { useNavigate } from "react-router";
@@ -14,15 +13,13 @@ const HintDefaultPage = () => {
     "align-items": "center",
   };
   return (
-    <HomePageTemplate>
       <div style={style}>
         <ParagraphCSS />
         <CreateActivityButton
           type={ACTIVITY_TYPES.HINTS}
           onClick={() => navigate("/hint/create")}
         />
       </div>
-    </HomePageTemplate>
   );
 };
 

diff --git a/frontend/src/scenes/hints/HintPage.jsx b/frontend/src/scenes/hints/HintPage.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Button from "../../components/Button/Button";
 import List from "../../components/TourComponents/List/List";
-import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
 import HintDefaultPage from "./HintDefaultPage";
 import "./HintPage.css";
 import { useNavigate } from "react-router-dom";
@@ -25,43 +24,41 @@ const HintPage = () => {
     return <HintDefaultPage />;
   } else {
     return (
-      <HomePageTemplate>
-        <div className="hint-page-container">
-          <div className="hint-page-left-section">
-            <h2 className="hint-page-title" style={{ marginBottom: "16px" }}>All Hints</h2>
-            <List items={hintsData} onSelectItem={() => { }} />
-          </div>
-          <div className="hint-right-content">
-            <Button
-              style={{ height: "34px", width: "172px" }}
-              text="Create a new hint"
-              variant="contained"
-              onClick={() => navigate("/hint-default")}
-            />
-            <div className="hint-info">
-              <h2 className="hint-info-title">What is a hint?</h2>
-              <p>
-                Hints are like friendly reminders in an app, giving tips
-                without stopping what you are doing. They show up at small
-                bubbles near buttons or menus, guiding you on how to use
-                things.
-              </p>
-              <p>
-                One good thing about hints is they help you use the app
-                better by giving tips when you need them. For example, they
-                can show clear instructions when you're trying something
-                new, so you don't get stuck or confused.
-              </p>
-              <p>
-                Hints work for everyone, from beginners to experts. They
-                give basic tips for people just starting out and clever
-                tricks for those who know the app well. This makes the app
-                easier for everyone to use.
-              </p>
-            </div>
+      <div className="hint-page-container">
+        <div className="hint-page-left-section">
+          <h2 className="hint-page-title" style={{ marginBottom: "16px" }}>All Hints</h2>
+          <List items={hintsData} onSelectItem={() => { }} />
+        </div>
+        <div className="hint-right-content">
+          <Button
+            style={{ height: "34px", width: "172px" }}
+            text="Create a new hint"
+            variant="contained"
+            onClick={() => navigate("/hint-default")}
+          />
+          <div className="hint-info">
+            <h2 className="hint-info-title">What is a hint?</h2>
+            <p>
+              Hints are like friendly reminders in an app, giving tips
+              without stopping what you are doing. They show up at small
+              bubbles near buttons or menus, guiding you on how to use
+              things.
+            </p>
+            <p>
+              One good thing about hints is they help you use the app
+              better by giving tips when you need them. For example, they
+              can show clear instructions when you're trying something
+              new, so you don't get stuck or confused.
+            </p>
+            <p>
+              Hints work for everyone, from beginners to experts. They
+              give basic tips for people just starting out and clever
+              tricks for those who know the app well. This makes the app
+              easier for everyone to use.
+            </p>
           </div>
         </div>
-      </HomePageTemplate>
+      </div>
     );
   }
 };

diff --git a/frontend/src/scenes/home/Home.css b/frontend/src/scenes/home/Home.css
diff --git a/frontend/src/scenes/home/Home.jsx b/frontend/src/scenes/home/Home.jsx
@@ -1,6 +1,4 @@
-import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
 import Dashboard from "../dashboard/Dashboard";
-import "./Home.css";
 import React, { useEffect, useState } from 'react';
 import { getCurrentUser } from '../../services/loginServices';
 import Cookies from 'js-cookie';
@@ -18,13 +16,7 @@ const Home = () => {
   }, [fullName]);
 
   return (
-    <div className="app">
-      <div className="content">
-        <HomePageTemplate>
-          <Dashboard fullName={fullName} />
-        </HomePageTemplate>
-      </div>
-    </div>
+    <Dashboard fullName={fullName} />
   );
 };
 

diff --git a/frontend/src/scenes/links/LinksDefaultPage.jsx b/frontend/src/scenes/links/LinksDefaultPage.jsx
@@ -1,5 +1,4 @@
 import CreateActivityButton from "../../components/Button/CreateActivityButton/CreateActivityButton"
-import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate"
 import { ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
 import ParagraphCSS from "../../components/ParagraphCSS/ParagraphCSS";
 
@@ -12,13 +11,10 @@ const LinksDefaultPage = () => {
         "align-items": "center",
     }
     return (
-        <HomePageTemplate>
             <div style={style}>
                 <ParagraphCSS />
                 <CreateActivityButton type={ACTIVITY_TYPES.HELPERLINKS} />
             </div>
-
-        </HomePageTemplate>
     )
 }