From 562cc3983b225f370ade2d33ec158b7bc50e23f7 Mon Sep 17 00:00:00 2001 From: vantage-ola Date: Thu, 15 Aug 2024 14:33:11 +0100 Subject: [PATCH 1/9] chore: make navabarLoggedin central to other logged in compoenents --- tracknow/web/src/App.tsx | 90 ++++++++++--------- tracknow/web/src/components/Home/Home.tsx | 3 - tracknow/web/src/components/Navbar/Navbar.tsx | 22 ++++- .../components/User/UserAccountSettings.tsx | 4 - .../src/components/User/UserAddLaptimes.tsx | 2 - .../web/src/components/User/UserLaptimes.tsx | 4 - .../web/src/components/User/UserProfile.tsx | 3 - 7 files changed, 66 insertions(+), 62 deletions(-) diff --git a/tracknow/web/src/App.tsx b/tracknow/web/src/App.tsx index 134b481..427aedf 100644 --- a/tracknow/web/src/App.tsx +++ b/tracknow/web/src/App.tsx @@ -2,6 +2,7 @@ import React from "react"; import { ChakraProvider } from "@chakra-ui/react"; import { theme } from "./tracknowTheme"; import { BrowserRouter, Routes, Route, useParams } from "react-router-dom"; +import { NavbarLayout } from "./components/Navbar/Navbar"; import { UserLogin } from "./components/User/UserLogin"; import { UserSignUp } from "./components/User/UserSignUp"; @@ -25,52 +26,55 @@ export const App = () => ( } /> } /> } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - - } - > - + + + + }> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> - + ); const UserProfileWrapper = () => { diff --git a/tracknow/web/src/components/Home/Home.tsx b/tracknow/web/src/components/Home/Home.tsx index 6fa2749..3caf64f 100644 --- a/tracknow/web/src/components/Home/Home.tsx +++ b/tracknow/web/src/components/Home/Home.tsx @@ -1,4 +1,3 @@ -import { NavbarLoggedIn } from "../Navbar/Navbar"; import { HomePost } from "../Post/Post"; import { useLaptimes } from "../../hooks/useLaptimes"; import { useUsers } from "../../hooks/useUsers"; @@ -23,8 +22,6 @@ export const Home = () => { return ( <> - - {/* Adjust height to fit the viewport */} {/* Left section */} {isMobile ? ( diff --git a/tracknow/web/src/components/Navbar/Navbar.tsx b/tracknow/web/src/components/Navbar/Navbar.tsx index 398744b..071c925 100644 --- a/tracknow/web/src/components/Navbar/Navbar.tsx +++ b/tracknow/web/src/components/Navbar/Navbar.tsx @@ -13,14 +13,16 @@ import { MenuDivider, MenuItem, MenuList, - IconButton + IconButton, + useDisclosure } from "@chakra-ui/react"; import { AddIcon } from '@chakra-ui/icons'; import { FiMenu } from "react-icons/fi"; import { Link as ReactRouterLink } from 'react-router-dom'; import { identityProfile } from "../../Types"; import useMiscFunctions from "../../misc/miscFunctions"; - +import { Outlet } from 'react-router-dom'; +import { useUsers } from "../../hooks/useUsers"; export const NavbarWelcome = () => ( @@ -68,7 +70,7 @@ export const Navbar = () => ( ); -export const NavbarLoggedIn = ({ name, pp, onOpen }: identityProfile) => { +const NavbarLoggedIn = ({ name, pp, onOpen }: identityProfile) => { const { handleLogout } = useMiscFunctions(); return ( { ); +}; + + +export const NavbarLayout = () => { + const { username, profilePic } = useUsers(); + + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + ) }; \ No newline at end of file diff --git a/tracknow/web/src/components/User/UserAccountSettings.tsx b/tracknow/web/src/components/User/UserAccountSettings.tsx index be65df5..9b5fc62 100644 --- a/tracknow/web/src/components/User/UserAccountSettings.tsx +++ b/tracknow/web/src/components/User/UserAccountSettings.tsx @@ -2,7 +2,6 @@ import * as React from "react"; import { Box, Button, Card, CardBody, CardHeader, useToast, Flex, FormControl, Heading, Stack, Avatar, FormErrorMessage, InputRightElement, InputGroup, Center, Input, useDisclosure, useBreakpointValue } from "@chakra-ui/react"; import { CountryDropdown } from "../../misc/dropDown"; -import { NavbarLoggedIn } from "../Navbar/Navbar"; import { useNavigate, Link as ReactRouterLink } from "react-router-dom"; import { useUsers } from "../../hooks/useUsers"; import { EditUser, EditUserPic } from "../../Types"; @@ -168,9 +167,6 @@ const UserAccountSettings = () => { return ( <> - - - {/* Left section */} {isMobile ? ( diff --git a/tracknow/web/src/components/User/UserAddLaptimes.tsx b/tracknow/web/src/components/User/UserAddLaptimes.tsx index f48534c..18aa6ae 100644 --- a/tracknow/web/src/components/User/UserAddLaptimes.tsx +++ b/tracknow/web/src/components/User/UserAddLaptimes.tsx @@ -12,7 +12,6 @@ import { SimracingTitles } from "../../misc/dropDown"; import { useLaptimes } from "../../hooks/useLaptimes"; import { Laptime } from "../../Types"; import { BeatLoader } from "react-spinners"; -import { NavbarLoggedIn } from "../Navbar/Navbar"; //import { LoadingSpinner } from "../Loading/LoadingSpinner"; import { useUsers } from "../../hooks/useUsers"; @@ -91,7 +90,6 @@ const UserAddLaptimes = () => { return ( <> - {/* Left section*/} {isMobile ? ( diff --git a/tracknow/web/src/components/User/UserLaptimes.tsx b/tracknow/web/src/components/User/UserLaptimes.tsx index 95d6828..f3669b7 100644 --- a/tracknow/web/src/components/User/UserLaptimes.tsx +++ b/tracknow/web/src/components/User/UserLaptimes.tsx @@ -1,6 +1,5 @@ import { HomePost } from "../Post/Post"; import { useLaptimes } from "../../hooks/useLaptimes"; -import { NavbarLoggedIn } from "../Navbar/Navbar"; //import { useNavigate } from "react-router-dom"; //import { LoadingSpinner } from "../Loading/LoadingSpinner"; import { Center, Text, useDisclosure, } from "@chakra-ui/react"; @@ -19,7 +18,6 @@ const UserLaptimes = () => { /* if (laptime_loading) { return ( <> - ); @@ -28,7 +26,6 @@ const UserLaptimes = () => { if (mylaptime.length === 0) { return ( <> -
Nothing to see here, Create Post above @@ -40,7 +37,6 @@ const UserLaptimes = () => { return ( <> - {loading ? ( ) : ( diff --git a/tracknow/web/src/components/User/UserProfile.tsx b/tracknow/web/src/components/User/UserProfile.tsx index 3edabfe..0277e90 100644 --- a/tracknow/web/src/components/User/UserProfile.tsx +++ b/tracknow/web/src/components/User/UserProfile.tsx @@ -1,5 +1,4 @@ import * as React from "react"; -import { NavbarLoggedIn } from "../Navbar/Navbar"; import { useUsers, getProfile } from "../../hooks/useUsers"; import { Flex, Box, Card, CardBody, @@ -93,7 +92,6 @@ export const UserProfile = ({ id }: { id: number }) => { if (!laptime_loading && laptimes.length === 0) { return ( <> -
Nothing to see here @@ -107,7 +105,6 @@ export const UserProfile = ({ id }: { id: number }) => { return ( <> - {laptime_loading ? ( From 1f3c6b0d3d5134695fc76f98c3c05a1c9f2aadec Mon Sep 17 00:00:00 2001 From: vantage-ola Date: Thu, 15 Aug 2024 14:45:31 +0100 Subject: [PATCH 2/9] make navbar central to other components(logged out) --- tracknow/web/src/App.tsx | 24 +++++++++++++++---- tracknow/web/src/components/Navbar/Navbar.tsx | 24 ++++++++++++++++--- .../web/src/components/User/UserLogin.tsx | 2 -- .../web/src/components/User/UserSignUp.tsx | 2 -- .../web/src/components/Welcome/Welcome.tsx | 2 -- 5 files changed, 40 insertions(+), 14 deletions(-) diff --git a/tracknow/web/src/App.tsx b/tracknow/web/src/App.tsx index 427aedf..46adb82 100644 --- a/tracknow/web/src/App.tsx +++ b/tracknow/web/src/App.tsx @@ -2,7 +2,7 @@ import React from "react"; import { ChakraProvider } from "@chakra-ui/react"; import { theme } from "./tracknowTheme"; import { BrowserRouter, Routes, Route, useParams } from "react-router-dom"; -import { NavbarLayout } from "./components/Navbar/Navbar"; +import { NavbarLayout, NavbarLoggedInLayout, NavbarWelcomeLayout } from "./components/Navbar/Navbar"; import { UserLogin } from "./components/User/UserLogin"; import { UserSignUp } from "./components/User/UserSignUp"; @@ -23,12 +23,26 @@ export const App = () => ( } /> - } /> - } /> - } /> + + {/*welcome page*/} + + }> + } /> + + + {/*user is about to login/signup */} + + }> + } /> + } /> + + + {/*user is logged in */} - + }> ( +const NavbarWelcome = () => ( @@ -48,7 +48,7 @@ export const NavbarWelcome = () => ( ); -export const Navbar = () => ( +const Navbar = () => ( @@ -153,10 +153,28 @@ const NavbarLoggedIn = ({ name, pp, onOpen }: identityProfile) => { }; +// Layout to prevent duplicating navbar across components export const NavbarLayout = () => { + return ( + <> + + + + ) +}; +export const NavbarWelcomeLayout = () => { + return ( + <> + + + + ) +}; + +export const NavbarLoggedInLayout = () => { const { username, profilePic } = useUsers(); - const { isOpen, onOpen, onClose } = useDisclosure(); + const { isOpen, onOpen, onClose } = useDisclosure(); // needs fix. return ( <> diff --git a/tracknow/web/src/components/User/UserLogin.tsx b/tracknow/web/src/components/User/UserLogin.tsx index 1d8835b..7fdfd2f 100644 --- a/tracknow/web/src/components/User/UserLogin.tsx +++ b/tracknow/web/src/components/User/UserLogin.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { Flex, Input, Button, Image, Text, Link, useToast, InputRightElement, InputGroup } from "@chakra-ui/react"; import { Link as ReactRouterLink, useNavigate } from 'react-router-dom'; -import { Navbar } from "../Navbar/Navbar"; import API from "../../hooks/API"; import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons' @@ -55,7 +54,6 @@ export const UserLogin = () => { return ( <> - { return ( <> - { return ( <> -