From 3226951814595e3a06e856edfe40fc2cef740c97 Mon Sep 17 00:00:00 2001 From: Matt DiMeglio Date: Sat, 24 May 2025 21:58:18 -0400 Subject: [PATCH] Add more pages | Zustand Local | Aliases --- components/core/Shell/NavBar/NavBar.jsx | 42 +++++++++++++++---- components/index.js | 3 +- components/stores/index.js | 1 + components/stores/useLocalStore.js | 6 +++ package-lock.json | 32 +++++++++++++- package.json | 3 +- src/pages/About/index.js | 1 - src/pages/Home/Home.jsx | 4 +- .../{About/About.jsx => Profile/Profile.jsx} | 6 +-- src/pages/Profile/index.js | 1 + src/pages/Schedule/Schedule.jsx | 16 +++++++ src/pages/Schedule/index.js | 1 + src/pages/Settings/Settings.jsx | 16 +++++++ src/pages/Settings/index.js | 1 + src/pages/index.js | 4 +- src/router/AppRouter.jsx | 21 ++++++++-- vite.config.js | 2 + 17 files changed, 138 insertions(+), 22 deletions(-) create mode 100644 components/stores/index.js create mode 100644 components/stores/useLocalStore.js delete mode 100644 src/pages/About/index.js rename src/pages/{About/About.jsx => Profile/Profile.jsx} (65%) create mode 100644 src/pages/Profile/index.js create mode 100644 src/pages/Schedule/Schedule.jsx create mode 100644 src/pages/Schedule/index.js create mode 100644 src/pages/Settings/Settings.jsx create mode 100644 src/pages/Settings/index.js diff --git a/components/core/Shell/NavBar/NavBar.jsx b/components/core/Shell/NavBar/NavBar.jsx index c18cc1e..156b1f9 100644 --- a/components/core/Shell/NavBar/NavBar.jsx +++ b/components/core/Shell/NavBar/NavBar.jsx @@ -5,7 +5,8 @@ import { useNavigate, useParams } from 'react-router'; -import { Stack } from '@mui/material'; +import { Avatar, Stack } from '@mui/material'; +import { useLocalStore } from '@components'; const NavBox = styled(Stack)` width: 100%; @@ -80,11 +81,12 @@ export const NavBar = ({ notifications, disableNav, settings }) => { const { pathname } = useLocation(); const navigate = useNavigate(); const routeParams = useParams(); + const { user } = useLocalStore(); const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 }); const tabRefs = useRef({}); - const isAdmin = true; // to be changed to check + const isAdmin = user?.isAdmin; const navItems = [ { @@ -94,10 +96,16 @@ export const NavBar = ({ notifications, disableNav, settings }) => { matches: ['', 'home'] }, { - name: 'About Us', - id: 'about', - href: '/about', - matches: ['about', 'aboutus'] + name: 'Schedule', + id: 'schedule', + href: '/schedule', + matches: ['schedule'] + }, + { + name: 'Settings', + id: 'settings', + href: '/settings', + matches: ['settings', 'settings'] }, { name: 'Administrator Panel', @@ -105,6 +113,14 @@ export const NavBar = ({ notifications, disableNav, settings }) => { href: '/admin', matches: ['admin'], hidden: !isAdmin + }, + // Keep this Last (Replaced with the profile icon) + { + name: 'Profile', + id: 'profile', + href: '/profile', + matches: ['profile'], + hidden: true } ]; @@ -124,7 +140,7 @@ export const NavBar = ({ notifications, disableNav, settings }) => { }; const onUserIconClick = () => { - navigate('/settings'); + navigate('/profile'); }; useEffect(() => { @@ -143,7 +159,6 @@ export const NavBar = ({ notifications, disableNav, settings }) => { - {/* */} { } return null; }).filter((item) => item !== null)} + <Tab + key='profile' + ref={(el) => { tabRefs.current['profile'] = el; }} + > + <Avatar + style={{paddingTop: '3px'}} + onClick={() => onUserIconClick()} + > + {`${user?.firstName[0]}${user?.lastName[0]}`} + </Avatar> + </Tab> <SlidingIndicator style={indicatorStyle} /> </RightContainer> </NavGroup> diff --git a/components/index.js b/components/index.js index 02bb11c..a9b98bc 100644 --- a/components/index.js +++ b/components/index.js @@ -1 +1,2 @@ -export * from './core'; \ No newline at end of file +export * from './core'; +export * from './stores'; \ No newline at end of file diff --git a/components/stores/index.js b/components/stores/index.js new file mode 100644 index 0000000..ce1d56f --- /dev/null +++ b/components/stores/index.js @@ -0,0 +1 @@ +export { useLocalStore } from './useLocalStore'; \ No newline at end of file diff --git a/components/stores/useLocalStore.js b/components/stores/useLocalStore.js new file mode 100644 index 0000000..1a936af --- /dev/null +++ b/components/stores/useLocalStore.js @@ -0,0 +1,6 @@ +import { create } from 'zustand'; + +export const useLocalStore = create((set) => ({ + user: null, + setUser: (user) => set({ user }), +})); diff --git a/package-lock.json b/package-lock.json index 2b73535..a7a2e4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,8 @@ "@mui/material": "^7.1.0", "react": "^19.1.0", "react-dom": "^19.1.0", - "react-router-dom": "^7.6.0" + "react-router-dom": "^7.6.0", + "zustand": "^5.0.5" }, "devDependencies": { "@emotion/babel-plugin": "^11.13.5", @@ -3534,6 +3535,35 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz", + "integrity": "sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=18.0.0", + "immer": ">=9.0.6", + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + }, + "use-sync-external-store": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index 0eaf438..ffc7233 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "@mui/material": "^7.1.0", "react": "^19.1.0", "react-dom": "^19.1.0", - "react-router-dom": "^7.6.0" + "react-router-dom": "^7.6.0", + "zustand": "^5.0.5" }, "devDependencies": { "@emotion/babel-plugin": "^11.13.5", diff --git a/src/pages/About/index.js b/src/pages/About/index.js deleted file mode 100644 index e8a9cee..0000000 --- a/src/pages/About/index.js +++ /dev/null @@ -1 +0,0 @@ -export { About } from './About'; \ No newline at end of file diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 17ba954..0b119e6 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -4,13 +4,13 @@ import { Link } from 'react-router-dom'; export const Home = () => { useEffect(() => { - document.title = 'ShiftSync | Home' + document.title = 'ShiftSync | Home'; }, []); return ( <div> <h1>Home Page</h1> - <Link to="/about">Go to About</Link> + <Link to="/settings">Go to Settings</Link> </div> ); }; diff --git a/src/pages/About/About.jsx b/src/pages/Profile/Profile.jsx similarity index 65% rename from src/pages/About/About.jsx rename to src/pages/Profile/Profile.jsx index ccc1a39..809ba8b 100644 --- a/src/pages/About/About.jsx +++ b/src/pages/Profile/Profile.jsx @@ -1,15 +1,15 @@ import React, { useEffect } from 'react'; import { Link } from 'react-router-dom'; -export const About = () => { +export const Profile = () => { useEffect(() => { - document.title = 'ShiftSync | About Us' + document.title = 'ShiftSync | Profile'; }, []); return ( <div> - <h1>About Page</h1> + <h1>Profile Page</h1> <Link to="/">Go to Home</Link> </div> ); diff --git a/src/pages/Profile/index.js b/src/pages/Profile/index.js new file mode 100644 index 0000000..76458e4 --- /dev/null +++ b/src/pages/Profile/index.js @@ -0,0 +1 @@ +export { Profile } from './Profile'; \ No newline at end of file diff --git a/src/pages/Schedule/Schedule.jsx b/src/pages/Schedule/Schedule.jsx new file mode 100644 index 0000000..b04ae51 --- /dev/null +++ b/src/pages/Schedule/Schedule.jsx @@ -0,0 +1,16 @@ +import React, { useEffect } from 'react'; +import { Link } from 'react-router-dom'; + +export const Schedule = () => { + + useEffect(() => { + document.title = 'ShiftSync | Schedule'; + }, []); + + return ( + <div> + <h1>Schedule Page</h1> + <Link to="/">Go to Home</Link> + </div> + ); +}; diff --git a/src/pages/Schedule/index.js b/src/pages/Schedule/index.js new file mode 100644 index 0000000..a1f1737 --- /dev/null +++ b/src/pages/Schedule/index.js @@ -0,0 +1 @@ +export { Schedule } from './Schedule'; \ No newline at end of file diff --git a/src/pages/Settings/Settings.jsx b/src/pages/Settings/Settings.jsx new file mode 100644 index 0000000..7d1133c --- /dev/null +++ b/src/pages/Settings/Settings.jsx @@ -0,0 +1,16 @@ +import React, { useEffect } from 'react'; +import { Link } from 'react-router-dom'; + +export const Settings = () => { + + useEffect(() => { + document.title = 'ShiftSync | Settings'; + }, []); + + return ( + <div> + <h1>Settings Page</h1> + <Link to="/">Go to Home</Link> + </div> + ); +}; diff --git a/src/pages/Settings/index.js b/src/pages/Settings/index.js new file mode 100644 index 0000000..a428dec --- /dev/null +++ b/src/pages/Settings/index.js @@ -0,0 +1 @@ +export { Settings } from './Settings'; \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index b428020..2cacd8d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,2 +1,4 @@ export { Home } from './Home'; -export { About } from './About'; \ No newline at end of file +export { Profile } from './Profile'; +export { Schedule } from './Schedule'; +export { Settings } from './Settings'; \ No newline at end of file diff --git a/src/router/AppRouter.jsx b/src/router/AppRouter.jsx index 0b6d2d4..a2affab 100644 --- a/src/router/AppRouter.jsx +++ b/src/router/AppRouter.jsx @@ -1,14 +1,27 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Routes, Route } from 'react-router-dom'; -import { Home, About } from '@src/pages'; -import { Shell } from '../../components'; +import { Home, Profile, Schedule, Settings } from '@src/pages'; +import { Shell } from '@components'; +import { useLocalStore } from '@components'; const AppRouter = () => { + const { setUser } = useLocalStore(); + + useEffect(() => { + setUser({ + firstName: 'Matt', + lastName: 'DiMeglio', + email: 'mdimeglio@shift-sync.com', + isAdmin: false + }) + }, []); return ( <Shell> <Routes> <Route path="/" element={<Home />} /> - <Route path="/about" element={<About />} /> + <Route path="/schedule" element={<Schedule />} /> + <Route path="/settings" element={<Settings />} /> + <Route path="/profile" element={<Profile />} /> </Routes> </Shell> ); diff --git a/vite.config.js b/vite.config.js index ffd4805..999da17 100644 --- a/vite.config.js +++ b/vite.config.js @@ -8,6 +8,8 @@ export default defineConfig({ resolve: { alias: { '@src': path.resolve(__dirname, 'src'), + '@components': path.resolve(__dirname, 'components'), + '@api': path.resolve(__dirname, 'api'), }, }, });