-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' of https://github.com/InternAcademy/CookingApp int…
…o dev
- Loading branch information
Showing
25 changed files
with
917 additions
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 24 additions & 4 deletions
28
src/client/CookingAppReact/src/components/auth/SignOutButton.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,30 @@ | ||
| import { handleLogout } from "../../msal/msal"; | ||
| "use client"; | ||
| import { handleLogout } from "@/msal/msal"; | ||
| import { FaSignOutAlt } from "react-icons/fa"; | ||
| // import { useTheme } from "next-themes"; | ||
|
|
||
| const SignOutButton = () => { | ||
| // const { theme } = useTheme(); | ||
| // const isDarkTheme = theme === 'dark'; | ||
|
|
||
| return ( | ||
| <button className="flex items-center" title="Sign Out" onClick={() => handleLogout("redirect")}> | ||
| <span className={`text-lg text-black`}>Sign Out</span> | ||
| </button> | ||
| <FaSignOutAlt | ||
| className="w-6 h-6 mr-4 | ||
| smallPhone:w-4 | ||
| phone:w-4 | ||
| tablet:w-6 | ||
| web:w-6" | ||
| // color={isDarkTheme ? "white" : "black"} | ||
| /> | ||
| <span | ||
| className={` | ||
| smallPhone:text-base | ||
| phone:text-base | ||
| tablet:text-lg | ||
| web:text-lg`}>Sign Out</span> | ||
| </button> | ||
| ); | ||
| }; | ||
| export default SignOutButton; | ||
|
|
||
| export default SignOutButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
src/client/CookingAppReact/src/components/userMenu/UserMenu.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import "tailwindcss/tailwind.css"; | ||
| import React from "react"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { useSelector } from "react-redux"; | ||
| import { FaUtensils, FaCreditCard, FaCog } from "react-icons/fa"; | ||
| import SignOutButton from "../auth/SignOutButton"; | ||
|
|
||
| const UserMenu = ({ isOpen, toggleDropDown }) => { | ||
| const navigate = useNavigate(); | ||
| const isDarkTheme = useSelector(state => state.ui.isDarkTheme); | ||
|
|
||
| if (!isOpen) return null; | ||
|
|
||
| return ( | ||
| <div | ||
| onClick={event => event.stopPropagation()} | ||
| className={`absolute right-10 top-12 w-64 | ||
| ${isDarkTheme ? "bg-[#2F2F2F]" : "bg-white"} | ||
| border border-gray-300 rounded-md shadow-lg z-20`} | ||
| > | ||
| <div className="flex flex-col p-4"> | ||
| <div className="flex flex-col items-start w-full space-y-2"> | ||
| <div | ||
| className={`flex items-center w-full cursor-pointer p-2 | ||
| ${isDarkTheme ? 'hover:bg-[#424242]' : 'hover:bg-gray-100'} hover:rounded`} | ||
| onClick={() => { navigate("/recipes"); toggleDropDown(); }} | ||
| title="Recipes" | ||
| > | ||
| <FaUtensils | ||
| className="w-6 h-6 mr-4" | ||
| color={isDarkTheme ? "white" : "black"} | ||
| /> | ||
| <span className={`${isDarkTheme ? "text-white" : "text-black"}`}> | ||
| Recipes | ||
| </span> | ||
| </div> | ||
| <div | ||
| className={`flex items-center w-full cursor-pointer p-2 | ||
| ${isDarkTheme ? 'hover:bg-[#424242]' : 'hover:bg-gray-100'} hover:rounded`} | ||
| onClick={() => { navigate("/subscription"); toggleDropDown(); }} | ||
| title="Subscription" | ||
| > | ||
| <FaCreditCard | ||
| className="w-6 h-6 mr-4" | ||
| color={isDarkTheme ? "white" : "black"} | ||
| /> | ||
| <span className={`${isDarkTheme ? "text-white" : "text-black"}`}> | ||
| Subscription | ||
| </span> | ||
| </div> | ||
| <div | ||
| className={`flex items-center w-full cursor-pointer p-2 | ||
| ${isDarkTheme ? 'hover:bg-[#424242]' : 'hover:bg-gray-100'} hover:rounded`} | ||
| onClick={() => { navigate("/settings"); toggleDropDown(); }} | ||
| title="Settings" | ||
| > | ||
| <FaCog | ||
| className="w-6 h-6 mr-4" | ||
| color={isDarkTheme ? "white" : "black"} | ||
| /> | ||
| <span className={`${isDarkTheme ? "text-white" : "text-black"}`}> | ||
| Settings | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <hr className={`w-full mt-2 mb-2 ${isDarkTheme ? 'border-[#3C3C3C]' : 'border-gray-200'}`} /> | ||
| <div className={`p-2 ${isDarkTheme ? 'hover:bg-[#424242]' : 'hover:bg-gray-100'} hover:rounded`}> | ||
| <SignOutButton/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserMenu; |
156 changes: 156 additions & 0 deletions
156
src/client/CookingAppReact/src/components/userMenu/settings/Settings.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import "tailwindcss/tailwind.css"; | ||
| import React, { useEffect, useState } from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { FaUserCircle, FaLeaf, FaArchive, FaLanguage, FaFileAlt, FaInfoCircle, FaEnvelope, FaBars, FaTimes } from "react-icons/fa"; | ||
|
|
||
| const Settings = () => { | ||
| const dispatch = useDispatch(); | ||
| const photoUri = useSelector(state => state.ui.photoUri); | ||
| const [selectedMenu, setSelectedMenu] = useState('food-preferences'); | ||
| const [ContentComponent, setContentComponent] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| const loadContent = async () => { | ||
| const components = { | ||
| 'food-preferences': () => import('./foodPreferences/FoodPreferences'), | ||
| // 'archived-recipes': () => import('@/app/archived-recipes/page'), | ||
| // 'language-theme': () => import('@/app/language-theme/page'), | ||
| // 'rules-policies': () => import('@/app/rules-policies/page'), | ||
| // 'about': () => import('@/app/about/page'), | ||
| 'contacts': () => import('./contacts/Contacts') | ||
| }; | ||
|
|
||
| if (components[selectedMenu]) { | ||
| const { default: Component } = await components[selectedMenu](); | ||
| setContentComponent(() => Component); | ||
| } | ||
| } | ||
| loadContent(); | ||
| }, [selectedMenu]); | ||
|
|
||
| const menuItems = [ | ||
| { id: "food-preferences", icon: FaLeaf, label: "Food Preferences" }, | ||
| { id: "archived-recipes", icon: FaArchive, label: "Archived Recipes" }, | ||
| { id: "language-theme", icon: FaLanguage, label: "Language & Theme" }, | ||
| { id: "rules-policies", icon: FaFileAlt, label: "Rules And Policies" }, | ||
| { id: "about", icon: FaInfoCircle, label: "About" }, | ||
| { id: "contacts", icon: FaEnvelope, label: "Contacts" } | ||
| ]; | ||
|
|
||
| // const handleImageUpload = event => { | ||
| // const file = event.target.files[0]; | ||
| // if (file) { | ||
| // const reader = new FileReader(); | ||
| // reader.onloadend = () => { | ||
| // const result = reader.result; | ||
| // dispatch(uiActions.setPhotoUri(result)); | ||
| // if (typeof window !== "undefined") { | ||
| // localStorage.setItem("photoUri", result); | ||
| // } | ||
| // }; | ||
| // reader.readAsDataURL(file); | ||
| // } | ||
| // }; | ||
|
|
||
| return ( | ||
| <div className={`h-auto w-full | ||
| border-gray-300 flex px-10`}> | ||
| {/* <div className="md:flex hidden flex-col p-4 w-1/4"> */} | ||
| <div className="flex flex-col p-4 w-1/4"> | ||
| <div className="flex w-full mb-8 relative"> | ||
| {photoUri ? ( | ||
| <img | ||
| src={photoUri} | ||
| alt="Profile" | ||
| className="w-24 h-24 rounded-full object-cover cursor-pointer" | ||
| onClick={() => document.getElementById("fileInput").click()} | ||
| /> | ||
| ) : ( | ||
| <FaUserCircle | ||
| className="w-24 h-24 cursor-pointer" | ||
| onClick={() => document.getElementById("fileInput").click()} | ||
| /> | ||
| )} | ||
| <input | ||
| type="file" | ||
| id="fileInput" | ||
| accept="image/*" | ||
| style={{ display: "none" }} | ||
| // onChange={handleImageUpload} | ||
| /> | ||
| </div> | ||
| <div className="flex gap-2 flex-col items-start w-full space-y-2"> | ||
| {menuItems.map(item => ( | ||
| <div | ||
| key={item.id} | ||
| className={`flex items-center w-full cursor-pointer p-2 rounded | ||
| `} | ||
| onClick={() => setSelectedMenu(item.id)} | ||
| title={item.label} | ||
| > | ||
| <item.icon | ||
| className="w-6 h-6 mr-4" | ||
|
|
||
| /> | ||
| <span | ||
| className={`text-lg `}>{item.label} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| {/* <div className="md:hidden flex flex-col w-full"> | ||
| <div className="flex justify-between p-4"> | ||
| <div className="flex items-center"> | ||
| {photoUri ? ( | ||
| <img | ||
| src={photoUri} | ||
| alt="Profile" | ||
| className="w-10 h-10 rounded-full object-cover cursor-pointer" | ||
| onClick={() => document.getElementById("fileInput").click()} | ||
| /> | ||
| ) : ( | ||
| <FaUserCircle | ||
| className="w-10 h-10 cursor-pointer" | ||
| color={isDarkTheme ? "white" : "black"} | ||
| onClick={() => document.getElementById("fileInput").click()} | ||
| /> | ||
| )} | ||
| <input | ||
| type="file" | ||
| id="fileInput" | ||
| accept="image/*" | ||
| style={{ display: "none" }} | ||
| onChange={handleImageUpload} | ||
| /> | ||
| </div> | ||
| <div className="flex items-center"> | ||
| <button onClick={() => setHamMenuOpen(!hamMenuOpen)}> | ||
| {hamMenuOpen ? <FaTimes className="w-6 h-6" /> : <FaBars className="w-6 h-6" />} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| {hamMenuOpen && ( | ||
| <div className="flex flex-col p-4"> | ||
| {menuItems.map(item => ( | ||
| <div | ||
| key={item.id} | ||
| className={`flex items-center w-full cursor-pointer p-2 rounded ${selectedMenu === item.id ? isDarkTheme ? "bg-[#424242]" : " bg-[#b2b2b2]" : ""}`} | ||
| onClick={() => { setSelectedMenu(item.id); setHamMenuOpen(false); }} | ||
| title={item.label} | ||
| > | ||
| <item.icon className="w-6 h-6 mr-4" color={selectedMenu === item.id ? "white" : isDarkTheme ? "white" : "black"} /> | ||
| <span className={`text-lg ${selectedMenu === item.id ? "text-white" : isDarkTheme ? "text-white" : "text-black"}`}>{item.label}</span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> */} | ||
| <div className="flex-1 p-4"> | ||
| {ContentComponent && <ContentComponent />} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Settings; |
Oops, something went wrong.