Merge pull request #143 from bluewave-labs/reorganized-components

reorganized components

frontend/src/components/CreateActivityButton/CreateActivityButton.jsx → frontend/src/components/Button/CreateActivityButton/CreateActivityButton.jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import Button from "../Button/Button";
+import Button from "../Button";
 import "./CreateActivityButtonStyles.css";
-import CheckIcon from "../CheckIcon/CheckIcon";
+import CheckIcon from "../../CheckIcon/CheckIcon";
 import PropTypes from "prop-types";
-import { activityData, ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
+import { activityData, ACTIVITY_TYPES } from "../../../data/CreateActivityButtonData";
 
 
 const CreateActivityButton = ({ type = ACTIVITY_TYPES.HINTS, onClick }) => {

frontend/src/components/CreateActivityButton/CreateActivityButtonStyles.css → frontend/src/components/Button/CreateActivityButton/CreateActivityButtonStyles.css

@@ -1,4 +1,4 @@
-@import "../../styles/variables.css";
+@import "../../../styles/variables.css";
 
 .bannerStyle{
     display: flex;

frontend/src/components/DropdownMenu/DropdownMenu.jsx → frontend/src/components/Header/DropdownMenu/DropdownMenu.jsx

@@ -5,7 +5,7 @@ import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import Person2OutlinedIcon from '@mui/icons-material/Person2Outlined';
 import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
 import { useNavigate } from 'react-router-dom';
-import { logout } from '../../services/loginServices';
+import { logout } from '../../../services/loginServices';
 
 const DropdownMenu = () => {
     const navigate = useNavigate();

frontend/src/components/Header/Header.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import './Header.css'; 
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
-import DropdownMenu from '../DropdownMenu/DropdownMenu';
+import DropdownMenu from './DropdownMenu/DropdownMenu';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import Avatar from '../Avatar/Avatar'; 
+import Avatar from './Avatar/Avatar'; 
 
 function Header({ user }) {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);

frontend/src/components/Title/Title.jsx → frontend/src/components/Header/Title/Title.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box, Typography } from '@mui/material';
-import Button from '../Button/Button';
+import Button from '../../Button/Button';
 import './TitleStyles.css';
 
 const Title = ({ title, buttonText, onButtonClick, titleStyle, buttonStyle, children }) => {

frontend/src/scenes/bannerPage/BannerDefaultPage.jsx

@@ -1,5 +1,5 @@
-import CreateActivityButton from "../../components/CreateActivityButton/CreateActivityButton"
-import HomePageTemplate from "../../components/templates/HomePageTemplate"
+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-dom';

frontend/src/scenes/bannerPage/BannerPage.jsx

@@ -1,5 +1,5 @@
-import HomePageTemplate from '../../components/templates/HomePageTemplate';
-import GuideTemplate from '../../components/templates/GuideTemplate/GuideTemplate';
+import HomePageTemplate from '../../templates/HomePageTemplate/HomePageTemplate';
+import GuideTemplate from '../../templates/GuideTemplate/GuideTemplate';
 import BannerLeftContent from '../../components/BannerPageComponents/BannerLeftContent/BannerLeftContent';
 import BannerLeftAppearance from '../../components/BannerPageComponents/BannerLeftAppearance/BannerLeftApperance';
 import { React, useState } from 'react';

frontend/src/scenes/hints/HintDefaultPage.jsx

@@ -1,5 +1,5 @@
-import CreateActivityButton from "../../components/CreateActivityButton/CreateActivityButton"
-import HomePageTemplate from "../../components/templates/HomePageTemplate"
+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";
 

frontend/src/scenes/home/Home.jsx

@@ -1,4 +1,4 @@
-import HomePageTemplate from "../../components/templates/HomePageTemplate";
+import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
 import Dashboard from "../dashboard/Dashboard";
 import "./Home.css";
 import React, { useEffect, useState } from 'react';

frontend/src/scenes/links/LinksDefaultPage.jsx

@@ -1,5 +1,5 @@
-import CreateActivityButton from "../../components/CreateActivityButton/CreateActivityButton"
-import HomePageTemplate from "../../components/templates/HomePageTemplate"
+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";
 

frontend/src/scenes/login/CreateAccountPage.jsx

@@ -47,8 +47,6 @@ function CreateAccountPage() {
       return;
     }
 
-    const userData = { username: formData.username, email: formData.email, password: formData.password };
-
     try {
       const response = await signUp(formData);
       console.log('Sign up successful:', response);

frontend/src/scenes/popup/CreatePopupPage.jsx

@@ -1,5 +1,5 @@
-import HomePageTemplate from '../../components/templates/HomePageTemplate';
-import GuideTemplate from '../../components/templates/GuideTemplate/GuideTemplate';
+import HomePageTemplate from '../../templates/HomePageTemplate/HomePageTemplate';
+import GuideTemplate from '../../templates/GuideTemplate/GuideTemplate';
 import { React, useState } from 'react';
 import RichTextEditor from '../../components/RichTextEditor/RichTextEditor';
 import PopupAppearance from '../../components/PopupPageComponents/PopupAppearance/PopupAppearance';

frontend/src/scenes/popup/PopupDefaultPage.jsx

@@ -1,5 +1,5 @@
-import CreateActivityButton from "../../components/CreateActivityButton/CreateActivityButton"
-import HomePageTemplate from "../../components/templates/HomePageTemplate"
+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-dom';

frontend/src/scenes/tours/ToursDefaultPage.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import CreateActivityButton from "../../components/CreateActivityButton/CreateActivityButton";
-import HomePageTemplate from "../../components/templates/HomePageTemplate";
+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 TourPage from './ProductTour';

frontend/src/templates/GuideTemplate/GuideTemplate.jsx

@@ -0,0 +1,58 @@
+import { React } from 'react';
+import PropTypes from 'prop-types';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import styles from './GuideTemplate.module.scss';
+import classNames from 'classnames';
+import Button from '../../components/Button/Button';
+import { useNavigate } from 'react-router-dom';
+
+const GuideTemplate = ({ title = '', handleButtonClick = () => null, activeButton = 0, leftContent = () => null, rightContent = () => null, leftAppearance = () => null }) => {
+    const navigate = useNavigate();
+    const buttons = ['Content', 'Appearance'];
+    return (
+        <div className={styles.container}>
+            <div className={styles.popup}>
+                <div className={styles.header}>
+                    <span style={{ marginLeft: '5px' }}>{title}</span>
+                    <CloseOutlinedIcon style={{ color: '#98A2B3', fontSize: '20px' }} />
+                </div>
+                <div className={styles.content}>
+                    {/* Content and Appereance buttons */}
+                    <div className={styles.buttons}>
+                        {buttons.map((buttonName, index) => (
+                            <button
+                                key={index}
+                                className={classNames(styles.menuButton, {
+                                    [styles.active]: activeButton === index,
+                                })}
+                                onClick={() => handleButtonClick(index)}
+                            >
+                                {buttonName}
+                            </button>
+                        ))}
+                    </div>
+                    <div className={styles.leftRightContent}>
+                        {activeButton === 1 ? leftAppearance() : leftContent()}
+                        {rightContent()}
+                    </div>
+                    <div className={styles.optionButtons}>
+                        <Button text='Cancel' buttonType='secondary-grey' onClick={() => {navigate('/');}}/>
+                        <Button text='Save'/>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+};
+
+GuideTemplate.propTypes = {
+    title: PropTypes.string,
+    handleButtonClick: PropTypes.func,
+    activeButton: PropTypes.number,
+    leftContent: PropTypes.func,
+    rightContent: PropTypes.func,
+    leftAppearance: PropTypes.func,
+};
+
+export default GuideTemplate;

frontend/src/components/templates/GuideTemplate/GuideTemplate.module.scss → frontend/src/templates/GuideTemplate/GuideTemplate.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/globals.scss' as *;
+@use '../../styles/globals.scss' as *;
 
 .container {
 

frontend/src/templates/GuideTemplate/Readme.md

@@ -0,0 +1,12 @@
+# Guide Template
+
+The Guide Template is designed for creating "Create Activity" pages, such as CreatePopupPage and CreateBannerPage.
+
+## Overview
+
+- **LeftContent**: Displayed when the "Content" button is clicked.
+- **LeftAppearance**: Displayed when the "Appearance" button is clicked.
+- **RightContent**: Always visible on the page.
+- **onSave**: Specifies the action to be taken when the "Save" button is clicked.
+- **title**: Allows editing of the page title.
+- **handleButtonClick**: Manages which button is clicked (either "Appearance" or "Content").

frontend/src/components/templates/HomePageTemplate.jsx → frontend/src/templates/HomePageTemplate/HomePageTemplate.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import LeftMenu from "../../components/LeftMenu/LeftMenu";
-import Header from "../Header/Header";
+import Header from "../../components/Header/Header";
 import "./HomePageTemplate.css";
 import { getCurrentUser } from '../../services/loginServices';