diff --git a/src/App.jsx b/src/App.jsx index a872538..c7d08b8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -16,7 +16,7 @@ import Charts from "./Pages/Charts" import Profile from "./Pages/Profile" import Album from "./Pages/Album" import Landing from "./Pages/Landing/Landing" -import LogIn from "./Pages/LogIn" +import Login from "./Pages/Login" // first router system /* @@ -71,7 +71,15 @@ const router = createBrowserRouter([ }, { path: '/login', - element: + element: , + }, + { + path: '/logout', + element: + }, + { + path: '/signup', + element: }, //{ // path: "*", diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx index 0b16752..fa82bb3 100644 --- a/src/Components/Header.jsx +++ b/src/Components/Header.jsx @@ -1,15 +1,31 @@ //import { Link } from "react-router-dom" -import { NavLink } from "react-router-dom" +import { NavLink, useLocation } from "react-router-dom" +import { useCookies } from "react-cookie" function Header(){ + const [userCookie, setUserCookie] = useCookies(["user"]) + const location = useLocation() + + const profilePage =
Profile
+ const loginPage =
Log In
+ const switchUser =
Switch User
+ + let check = "" + + //let check = userCookie.user == "" || userCookie.user == "guest" ? loginPage : profilePage + if(check = userCookie.user == "" || userCookie.user == "guest") + check = loginPage + else if(location.pathname == "/profile") + check = switchUser + else + check = profilePage + return(<>
Charts
Search
Landing
-
Profile
- - + { check }
) diff --git a/src/Pages/LogIn.jsx b/src/Pages/LogIn.jsx index 15f346b..6fc4e71 100644 --- a/src/Pages/LogIn.jsx +++ b/src/Pages/LogIn.jsx @@ -1,5 +1,6 @@ import { Form } from "react-router-dom"; import { useCookies } from "react-cookie"; +import { Helmet } from "react-helmet"; import Header from "@/Components/Header"; @@ -14,7 +15,7 @@ import aaa from './CSS/search.css?inline' -export default function LogIn(){ +export default function Login(){ const [user, setUser] = useCookies(["user"]) function submitting(event){ @@ -36,10 +37,10 @@ export default function LogIn(){ - - - - + + Log In + + ) } \ No newline at end of file diff --git a/src/Pages/Profile.jsx b/src/Pages/Profile.jsx index 2c2b53e..33d4ab7 100644 --- a/src/Pages/Profile.jsx +++ b/src/Pages/Profile.jsx @@ -1,6 +1,7 @@ import Header from "../Components/Header" import { useEffect, useState } from "react" -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; +import { Navigate } from "react-router-dom"; import { useCookies } from "react-cookie"; import { collection, doc, getDocs, where, query, orderBy, limit, deleteDoc } from "firebase/firestore"; @@ -14,6 +15,14 @@ import "./CSS/no_page.css?inline" import aaa from './CSS/search.css?inline' export default function Profile(){ + let [userCookie, setUser] = useCookies(["user"]) + const navigate = useNavigate() + useEffect(()=>{ + if(userCookie.user=="guest" || userCookie.user == ""){ + navigate("/login") + } + }, []) + const key = import.meta.env.VITE_keyGIF //process.env.keyGIF let [query, setQuery] = useState(`find me`) let url = `https://api.giphy.com/v1/gifs/translate?api_key=${key}&s=${query}` @@ -23,10 +32,7 @@ export default function Profile(){ let [latest, setLatest] = useState("") //let [genres, setGenres] = useState({}) let [favGenre, setFavGenre] = useState("") - let [favArtist, setFavArtist] = useState("") - - let [userCookie, setUser] = useCookies(["user"]) - + let [favArtist, setFavArtist] = useState("") useEffect(() => { document.title = `Profile`