From c3e778af99b86b24bce2bc9307fc67aa4d2e79db Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:09:52 +0100 Subject: [PATCH 01/39] Feat((admin)/admin): Use UseSession Hook --- apps/web/app/(admin)/admin/page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/web/app/(admin)/admin/page.tsx b/apps/web/app/(admin)/admin/page.tsx index 559c36f9..9585ea4b 100644 --- a/apps/web/app/(admin)/admin/page.tsx +++ b/apps/web/app/(admin)/admin/page.tsx @@ -3,16 +3,18 @@ import { useEffect } from "react"; import getSession from "@/lib/Authentication/JWT/getSession"; import { useRouter } from "next/navigation"; +import { useSession } from "@/components/Providers/AuthProvider"; export default function AdminPage() { + const { session } = useSession() const { push } = useRouter(); useEffect(() => { - const session = getSession(); + if (session?.role !== "admin") { push("/home"); } - }, [push]); + }, [push, session?.role]); return (

You are admin!

From 43a57c5c39bdf773ec2a7fdcfddded05fe31ea30 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:18:50 +0100 Subject: [PATCH 02/39] Feat((app)/layout): Add AuthProvider Globally --- apps/web/app/(app)/layout.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx index bc3b9362..90125715 100644 --- a/apps/web/app/(app)/layout.tsx +++ b/apps/web/app/(app)/layout.tsx @@ -4,6 +4,7 @@ import { Metadata, Viewport } from "next"; import MainLayout from "./main-layout"; import SplashScreen from "@/components/Layout/SplashScreen"; import { cn } from "@music/ui/lib/utils"; +import AuthProvider from "@/components/Providers/AuthProvider"; export const metadata: Metadata = { applicationName: "ParsonLabs Music", @@ -48,9 +49,13 @@ export default async function RootLayout({ children }: any) { "min-h-screen bg-background font-sans antialiased bg-gray-900 texxt-white", fontSans.variable )}> - - {children} - + + + + {children} + + + ); From a746d358bcd90f0da337139b3de7e6c86b9cc41a Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:20:19 +0100 Subject: [PATCH 03/39] Feat(ArtistComponent): Use UseSession Hook --- apps/web/app/(app)/artist/ArtistComponent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/web/app/(app)/artist/ArtistComponent.tsx b/apps/web/app/(app)/artist/ArtistComponent.tsx index 49b13272..83819268 100644 --- a/apps/web/app/(app)/artist/ArtistComponent.tsx +++ b/apps/web/app/(app)/artist/ArtistComponent.tsx @@ -7,7 +7,6 @@ import ScrollButtons from "@/components/Home/ScrollButtons"; import PageGradient from "@/components/Layout/PageGradient"; import AlbumCard from "@/components/Music/Card/Album/AlbumCard"; import SongCard from "@/components/Music/Card/SongCard"; -import getSession from "@/lib/Authentication/JWT/getSession"; import { getArtistInfo } from "@music/sdk"; import { Album, Artist, LibrarySong } from "@music/sdk/types"; import { useSearchParams } from "next/navigation"; From 3d24707e8dd289dc762f960f5bee00d2d1a5563a Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:21:43 +0100 Subject: [PATCH 04/39] Feat(history): Use useSession hook --- apps/web/app/(app)/history/page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/web/app/(app)/history/page.tsx b/apps/web/app/(app)/history/page.tsx index 81e5b442..ad5d3bfe 100644 --- a/apps/web/app/(app)/history/page.tsx +++ b/apps/web/app/(app)/history/page.tsx @@ -2,6 +2,7 @@ import SongCard from "@/components/Music/Card/SongCard"; +import { useSession } from "@/components/Providers/AuthProvider"; import getSession from "@/lib/Authentication/JWT/getSession"; import { getListenHistory, getSongInfo } from "@music/sdk"; import { LibrarySong } from "@music/sdk/types"; @@ -11,9 +12,10 @@ import { useEffect, useState } from "react"; export default function HistoryPage() { const [listenHistorySongs, setListenHistorySongs] = useState([]); + const { session } = useSession() + useEffect(() => { const fetchListenHistory = async () => { - const session = getSession() if (session) { const listenHistoryItems = await getListenHistory(Number(session.sub)); @@ -25,7 +27,7 @@ export default function HistoryPage() { }; fetchListenHistory(); - }, []); + }, [session]); return ( <> From 8189ed6f1a4a936be5ab3a97ffa5bdba264e9921 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:22:51 +0100 Subject: [PATCH 05/39] Feat(UsernameComponent): Use useSession hook --- apps/web/app/(app)/profile/UsernameComponent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/app/(app)/profile/UsernameComponent.tsx b/apps/web/app/(app)/profile/UsernameComponent.tsx index 11223342..b7785df3 100644 --- a/apps/web/app/(app)/profile/UsernameComponent.tsx +++ b/apps/web/app/(app)/profile/UsernameComponent.tsx @@ -6,6 +6,7 @@ import PageGradient from "@/components/Layout/PageGradient"; import ArtistCard from "@/components/Music/Artist/ArtistCard"; import AlbumCard from "@/components/Music/Card/Album/AlbumCard"; import SongCard from "@/components/Music/Card/SongCard"; +import { useSession } from "@/components/Providers/AuthProvider"; import getSession from "@/lib/Authentication/JWT/getSession"; import { getCache } from "@/lib/Caching/cache"; import { getListenHistory, getProfilePicture, getSongInfo, getUserInfo, LibraryAlbum } from "@music/sdk"; @@ -23,8 +24,8 @@ export default function UsernameComponent() { const [topAlbums, setTopAlbums] = useState<(LibraryAlbum & { count: number, artist: Artist })[]>([]); const [topSongs, setTopSongs] = useState<(LibrarySong & { count: number })[]>([]); const [profilePicture, setProfilePicture] = useState(null); + const { session } = useSession(); - const session = getSession(); useEffect(() => { async function fetchData() { const userCacheKey = `userInfo_${username}`; From cee1c8ff4e4a8824a849bcf0413ba0c6aea1e130 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:23:04 +0100 Subject: [PATCH 06/39] Feat(social): Use useSession hook --- apps/web/app/(app)/social/page.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/app/(app)/social/page.tsx b/apps/web/app/(app)/social/page.tsx index 3037979f..018dbdfb 100644 --- a/apps/web/app/(app)/social/page.tsx +++ b/apps/web/app/(app)/social/page.tsx @@ -9,9 +9,10 @@ import FollowButton from "@/components/Friends/FollowButton"; import ArtistCard from "@/components/Music/Artist/ArtistCard"; import { User } from "@music/sdk/types"; import UserCard from "@/components/Music/Card/User/UserCard"; +import { useSession } from "@/components/Providers/AuthProvider"; export default function SocialPage() { - const session = getSession(); + const { session } = useSession() const id = session?.sub; const [followers, setFollowers] = useState([]); From addbf3dd51bce9b05792119d7169fd9ba3246119 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:23:37 +0100 Subject: [PATCH 07/39] Feat((dashboard)/layout): Use useSession hook --- apps/web/app/(dashboard)/layout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/app/(dashboard)/layout.tsx b/apps/web/app/(dashboard)/layout.tsx index d9a51730..1e24c0c2 100644 --- a/apps/web/app/(dashboard)/layout.tsx +++ b/apps/web/app/(dashboard)/layout.tsx @@ -11,6 +11,7 @@ import Image from "next/image" import { usePathname, useRouter } from "next/navigation" import { useEffect } from "react" import getSession from "@/lib/Authentication/JWT/getSession" +import { useSession } from "@/components/Providers/AuthProvider" const fontSans = FontSans({ subsets: ["latin"], @@ -22,7 +23,7 @@ type RootLayoutProps = { } export default function RootLayout({ children }: RootLayoutProps) { - const session = getSession() + const { session } = useSession() const isAdmin = session?.role === "admin" const pathname = usePathname() const router = useRouter() From b3e76a54413179aeae5698d2ceb6bdb822596b11 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 10:23:50 +0100 Subject: [PATCH 08/39] Feat(settings) --- apps/web/app/(dashboard)/settings/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/web/app/(dashboard)/settings/page.tsx b/apps/web/app/(dashboard)/settings/page.tsx index dd90116a..5f67b8e4 100644 --- a/apps/web/app/(dashboard)/settings/page.tsx +++ b/apps/web/app/(dashboard)/settings/page.tsx @@ -19,6 +19,7 @@ import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar" import { useState, useEffect } from "react" import { useForm } from "react-hook-form" import { z } from "zod" +import { useSession } from "@/components/Providers/AuthProvider" const FormSchema = z.object({ picture: z.instanceof(File).optional(), @@ -36,10 +37,10 @@ export default function SettingsPage() { const [message, setMessage] = useState(null) const [profilePicture, setProfilePicture] = useState(null) const [username, setUsername] = useState("") + const { session } = useSession() useEffect(() => { const fetchSessionAndProfilePicture = async () => { - const session = getSession() if (session) { setUsername(session.username) const profilePic = await getProfilePicture(Number(session.sub)) @@ -51,10 +52,9 @@ export default function SettingsPage() { } } fetchSessionAndProfilePicture() - }, []) + }, [session]) async function onSubmit(data: z.infer) { - const session = getSession() const userId = Number(session?.sub) if (file) { From f86c43b984f4ba06af6e81d9af1f5ff99e01df8b Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:29:16 +0100 Subject: [PATCH 09/39] Feat((unprotected)/layout): Add AuthProvider to Unproteected Routes --- apps/web/app/(unprotected)/layout.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/web/app/(unprotected)/layout.tsx b/apps/web/app/(unprotected)/layout.tsx index 9e38680c..682e5d6f 100644 --- a/apps/web/app/(unprotected)/layout.tsx +++ b/apps/web/app/(unprotected)/layout.tsx @@ -5,6 +5,7 @@ import pl from "@/assets/pl-tp.png" import { cn } from "@music/ui/lib/utils" import { Metadata } from "next" import Image from "next/image" +import AuthProvider from "@/components/Providers/AuthProvider" const fontSans = FontSans({ subsets: ["latin"], @@ -34,7 +35,10 @@ export default function RootLayout({ children }: RootLayoutProps) { ParsonLabs Music - {children} + + + {children} + ) From 7e688617bc7b2a81c4cad21cd23fb790082383ec Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:31:15 +0100 Subject: [PATCH 10/39] Feat((unprotected): Add useSession hook --- apps/web/app/(unprotected)/page.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/app/(unprotected)/page.tsx b/apps/web/app/(unprotected)/page.tsx index fd5c6970..3969c088 100644 --- a/apps/web/app/(unprotected)/page.tsx +++ b/apps/web/app/(unprotected)/page.tsx @@ -1,6 +1,7 @@ "use client"; import pl from "@/assets/pl-tp.png"; +import { useSession } from "@/components/Providers/AuthProvider"; import ServerSelectIcon from "@/components/Setup/Server/ServerSelectIcon"; import getSession from "@/lib/Authentication/JWT/getSession"; import { zodResolver } from '@hookform/resolvers/zod'; @@ -18,7 +19,7 @@ import { import { Input } from '@music/ui/components/input'; import { Loader2Icon } from "lucide-react"; import Image from "next/image"; -import { useRouter } from "next/navigation"; +import { useRouter, useSelectedLayoutSegment } from "next/navigation"; import { useEffect, useState } from "react"; import { SubmitHandler, useForm } from 'react-hook-form'; import * as z from 'zod'; @@ -34,6 +35,7 @@ export default function MainPage() { const [showServerURLInput, setShowServerURLInput] = useState(false); const [showServerSelect, setShowServerSelect] = useState(false); const { push } = useRouter(); + const { session } = useSession() useEffect(() => { const checkServerUrl = async () => { @@ -46,7 +48,6 @@ export default function MainPage() { ); let serverInfo: ServerInfo = await response.json(); - const session = getSession(); if (serverInfo.product_name && serverInfo.startup_wizard_completed) { localStorage.setItem("server", JSON.stringify(serverInfo)); @@ -76,7 +77,7 @@ export default function MainPage() { }; checkServerUrl(); - }, [push]); + }, [push, session]); const form = useForm({ resolver: zodResolver(schema), @@ -91,7 +92,6 @@ export default function MainPage() { localStorage.setItem("server", JSON.stringify({ local_address: data.serverUrl })); let serverInfo = await getServerInfo(); - const session = getSession(); if (serverInfo.product_name && serverInfo.startup_wizard_completed) { localStorage.setItem("server", JSON.stringify(serverInfo)); From a9437e983c2fe89a7f72b9232c96afc171c87168 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:31:30 +0100 Subject: [PATCH 11/39] Feat(SongsInLibrary): Add useSession hook --- apps/web/components/Artist/SongsInLibrary.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Artist/SongsInLibrary.tsx b/apps/web/components/Artist/SongsInLibrary.tsx index 897f890f..87bd008f 100644 --- a/apps/web/components/Artist/SongsInLibrary.tsx +++ b/apps/web/components/Artist/SongsInLibrary.tsx @@ -5,6 +5,7 @@ import { useSearchParams } from "next/navigation"; import { useEffect, useState } from "react"; import ScrollButtons from "../Home/ScrollButtons"; import SongCard from "../Music/Card/SongCard"; +import { useSession } from "../Providers/AuthProvider"; async function getSongsFromYourLibrary(user_id: number, artist_id: string) { const playlists = await getPlaylists(user_id); @@ -32,9 +33,9 @@ export default function FromYourLibrary() { const searchParams = useSearchParams(); const id = searchParams?.get("id"); + const { session } = useSession() useEffect(() => { - const session = getSession(); async function fetchSongs() { if (session && id) { @@ -45,7 +46,7 @@ export default function FromYourLibrary() { } fetchSongs(); - }, [id]); + }, [id, session]); return librarySongs.length > 0 && ( From 953a9fbe4fe068cedb420f30619714ce850ab15f Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:31:55 +0100 Subject: [PATCH 12/39] Feat(FollowButton): Use useSession Hook --- apps/web/components/Friends/FollowButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Friends/FollowButton.tsx b/apps/web/components/Friends/FollowButton.tsx index afcbec6f..2f7993f9 100644 --- a/apps/web/components/Friends/FollowButton.tsx +++ b/apps/web/components/Friends/FollowButton.tsx @@ -3,13 +3,14 @@ import getSession from "@/lib/Authentication/JWT/getSession" import { follow } from "@music/sdk" import { Button } from "@music/ui/components/button" +import { useSession } from "../Providers/AuthProvider" type FollowButtonProps = { userIDToFollow: number } export default function FollowButton({ userIDToFollow }: FollowButtonProps) { - const session = getSession() + const { session } = useSession() return session && } \ No newline at end of file From 9e4ae41cf8a5a9a82b5bbf91db0ea22839e4b172 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:32:12 +0100 Subject: [PATCH 13/39] Feat(FriendActivity): Use useSession Hook --- apps/web/components/Friends/FriendActivity.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Friends/FriendActivity.tsx b/apps/web/components/Friends/FriendActivity.tsx index c1c2129d..068f9d9a 100644 --- a/apps/web/components/Friends/FriendActivity.tsx +++ b/apps/web/components/Friends/FriendActivity.tsx @@ -8,6 +8,7 @@ import { Disc3Icon } from 'lucide-react'; import Link from "next/link"; import { useEffect, useState } from "react"; import { getProfilePicture } from "@music/sdk"; +import { useSession } from "../Providers/AuthProvider"; type Friend = User & { nowPlaying: { @@ -20,9 +21,9 @@ type Friend = User & { export default function FriendActivity() { const [friends, setFriends] = useState([]) + const { session } = useSession() useEffect(() => { - const session = getSession(); async function getActivity() { if (session) { const followingIDs = await getFollowing(Number(session?.sub) ?? ""); @@ -63,7 +64,7 @@ export default function FriendActivity() { return () => { clearInterval(intervalId); }; - }, []); + }, [session]); return friends && ( <> From 0d644901331b2930ebe775ef0eef9075045b24f5 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:32:23 +0100 Subject: [PATCH 14/39] Feat(FromYourLibrary): Use useSession Hook --- apps/web/components/Home/FromYourLibrary.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/web/components/Home/FromYourLibrary.tsx b/apps/web/components/Home/FromYourLibrary.tsx index 2b81429f..957b752a 100644 --- a/apps/web/components/Home/FromYourLibrary.tsx +++ b/apps/web/components/Home/FromYourLibrary.tsx @@ -7,6 +7,7 @@ import { LibrarySong } from "@music/sdk/types"; import { useEffect, useState } from "react"; import SongCard from "../Music/Card/SongCard"; import ScrollButtons from "./ScrollButtons"; +import { useSession } from "../Providers/AuthProvider"; async function getSongsFromYourLibrary(user_id: number, genre?: string) { const playlists = await getPlaylists(user_id); @@ -41,9 +42,9 @@ interface FromYourLibraryProps { export default function FromYourLibrary({ genre }: FromYourLibraryProps) { const [librarySongs, setLibrarySongs] = useState([]); const [loading, setLoading] = useState(true); + const { session } = useSession() useEffect(() => { - const session = getSession(); async function fetchSongs() { const cacheKey = "fromYourLibrary"; @@ -65,11 +66,11 @@ export default function FromYourLibrary({ genre }: FromYourLibraryProps) { } fetchSongs(); - }, [genre]); + }, [genre, session]); if (loading) return null; if (!librarySongs || librarySongs.length === 0) return null; - +`` return (
From e180088c1bd02309f37a9229512be21af6aa2d46 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:35:37 +0100 Subject: [PATCH 15/39] Fix(ListenAgain): Use Null Checking Operator in UseEffect --- apps/web/components/Home/ListenAgain.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/web/components/Home/ListenAgain.tsx b/apps/web/components/Home/ListenAgain.tsx index 4fbc3bc5..b53411b9 100644 --- a/apps/web/components/Home/ListenAgain.tsx +++ b/apps/web/components/Home/ListenAgain.tsx @@ -9,6 +9,7 @@ import PageGradient from "../Layout/PageGradient"; import AlbumCard from "../Music/Card/Album/AlbumCard"; import SongCard from "../Music/Card/SongCard"; import ScrollButtons from "./ScrollButtons"; +import { useSession } from "../Providers/AuthProvider"; interface ListenAgainProps { genre?: string; @@ -16,16 +17,16 @@ interface ListenAgainProps { export default function ListenAgain({ genre }: ListenAgainProps) { const [listenHistorySongs, setListenHistorySongs] = useState([]); - + const { session } = useSession() + useEffect(() => { const fetchListenHistory = async () => { - const session = getSession(); const listenHistory = await getListenAgain(Number(session?.sub)); setListenHistorySongs(listenHistory); }; fetchListenHistory(); - }, [genre]); + }, [genre, session?.sub]); if (!(listenHistorySongs[0]) || listenHistorySongs.length === 0) return null; From cb827248e4693030d86a4f6fc0907d4c5782517a Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:36:10 +0100 Subject: [PATCH 16/39] RF(RandomSongs): Remove getSession invocation --- apps/web/components/Home/RandomSongs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/web/components/Home/RandomSongs.tsx b/apps/web/components/Home/RandomSongs.tsx index 1f518ab4..a6b3b968 100644 --- a/apps/web/components/Home/RandomSongs.tsx +++ b/apps/web/components/Home/RandomSongs.tsx @@ -1,6 +1,5 @@ "use client" -import getSession from "@/lib/Authentication/JWT/getSession"; import setCache, { getCache } from "@/lib/Caching/cache"; import { getRandomSong } from "@music/sdk"; import { LibrarySong } from "@music/sdk/types"; From 8f0dfb067a5cebcd25c4d298f8ca79f05c4e1f70 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:36:22 +0100 Subject: [PATCH 17/39] Feat(RecommendedAlbums): Use useSession Hook --- apps/web/components/Home/RecommendedAlbums.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Home/RecommendedAlbums.tsx b/apps/web/components/Home/RecommendedAlbums.tsx index 396f8722..738bedf2 100644 --- a/apps/web/components/Home/RecommendedAlbums.tsx +++ b/apps/web/components/Home/RecommendedAlbums.tsx @@ -7,6 +7,7 @@ import { useEffect, useState } from "react"; import AlbumCard from "../Music/Card/Album/AlbumCard"; import ScrollButtons from "./ScrollButtons"; import { LibrarySong } from "@music/sdk/types"; +import { useSession } from "../Providers/AuthProvider"; async function getSongsFromYourLibrary(user_id: number, genre?: string) { const playlists = await getPlaylists(user_id); @@ -41,9 +42,9 @@ interface RecommendedAlbumsProps { export default function RecommendedAlbums({ genre }: RecommendedAlbumsProps) { const [librarySongs, setLibrarySongs] = useState([]); const [loading, setLoading] = useState(true); + const { session } = useSession() useEffect(() => { - const session = getSession(); async function fetchSongs() { const cacheKey = genre ? `recommendedAlbums_${genre}` : "recommendedAlbums"; @@ -65,7 +66,7 @@ export default function RecommendedAlbums({ genre }: RecommendedAlbumsProps) { } fetchSongs(); - }, [genre]); + }, [genre, session]); if (loading) return null; if (!librarySongs || librarySongs.length === 0) return null; From 9bc6025dbddd37f2d8762e6b0430376ca76aacf1 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:36:33 +0100 Subject: [PATCH 18/39] Feat(ScrollButtons): Use useSession Hook --- apps/web/components/Home/ScrollButtons.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Home/ScrollButtons.tsx b/apps/web/components/Home/ScrollButtons.tsx index a64d5967..afc5f464 100644 --- a/apps/web/components/Home/ScrollButtons.tsx +++ b/apps/web/components/Home/ScrollButtons.tsx @@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import Image from 'next/image'; import { Popover, PopoverContent, PopoverTrigger } from '@music/ui/components/popover'; import { useLayoutConfig } from '../Providers/LayoutConfigContext'; +import { useSession } from '../Providers/AuthProvider'; type ScrollButtonsProps = { id?: string; @@ -36,9 +37,10 @@ export default function ScrollButtons({ id, children, heading, showUser, topText } }, []); + const { session } = useSession() + useEffect(() => { const fetchUserData = async () => { - const session = getSession(); const profilePictureBlob = await getProfilePicture(Number(session?.sub)); const profilePictureUrl = URL.createObjectURL(profilePictureBlob); setProfilePicture(profilePictureUrl); @@ -59,7 +61,7 @@ export default function ScrollButtons({ id, children, heading, showUser, topText currentScrollRef.removeEventListener('scroll', checkScrollPosition); } }; - }, [checkScrollPosition, showUser]); + }, [checkScrollPosition, showUser, session?.username, session?.sub]); const scrollLeft = useCallback(() => { if (scrollRef.current) { From 2038a34468cb96073b12799d4ebfd8d61f3d8277 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:36:43 +0100 Subject: [PATCH 19/39] Feat(SimilarTo): Use useSession Hook --- apps/web/components/Home/SimilarTo.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Home/SimilarTo.tsx b/apps/web/components/Home/SimilarTo.tsx index 1dc03ea0..0a1d4bd7 100644 --- a/apps/web/components/Home/SimilarTo.tsx +++ b/apps/web/components/Home/SimilarTo.tsx @@ -8,6 +8,7 @@ import PageGradient from "../Layout/PageGradient"; import AlbumCard from "../Music/Card/Album/AlbumCard"; import ScrollButtons from "./ScrollButtons"; import { Skeleton } from "@music/ui/components/skeleton"; +import { useSession } from "../Providers/AuthProvider"; function capitalizeWords(str: string): string { return str.replace(/\b\w/g, char => char.toUpperCase()); @@ -17,11 +18,11 @@ export default function SimilarTo() { const [similarAlbums, setSimilarAlbums] = useState([]); const [genre, setGenre] = useState(null); const [loading, setLoading] = useState(true); + const { session } = useSession() useEffect(() => { const fetchSimilarAlbums = async () => { try { - const session = getSession(); if (!session || !session.sub) { throw new Error("Invalid session"); } @@ -38,7 +39,7 @@ export default function SimilarTo() { }; fetchSimilarAlbums(); - }, []); + }, [session]); const albumCoverSrc = similarAlbums[0]?.album_cover?.length === 0 ? "/snf.png" From ee1c12239d6b79fdd819b57333aa76ee5e711c31 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:36:52 +0100 Subject: [PATCH 20/39] Feat(LibraryButtons): Use useSession Hook --- apps/web/components/Layout/LibraryButtons.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Layout/LibraryButtons.tsx b/apps/web/components/Layout/LibraryButtons.tsx index 75553e71..2469c40b 100644 --- a/apps/web/components/Layout/LibraryButtons.tsx +++ b/apps/web/components/Layout/LibraryButtons.tsx @@ -10,6 +10,7 @@ import ArtistCard from "../Music/Artist/ArtistCard"; import AlbumCard from "../Music/Card/Album/AlbumCard"; import SongCard from "../Music/Card/SongCard"; import { useGradientHover } from "../Providers/GradientHoverProvider"; +import { useSession } from "../Providers/AuthProvider"; function capitalizeWords(str: string): string { return str.replace(/\b\w/g, char => char.toUpperCase()); @@ -31,6 +32,8 @@ export default function LibraryButtons() { const { setGradient } = useGradientHover(); setGradient("#000000"); + const { session } = useSession() + useEffect(() => { const fetchListenHistory = async () => { const cacheKey = "listenAgain"; @@ -41,7 +44,6 @@ export default function LibraryButtons() { return; } - const session = getSession(); if (session && session.sub) { const userId = Number(session.sub); if (!isNaN(userId) && userId > 0) { @@ -57,7 +59,7 @@ export default function LibraryButtons() { }; fetchListenHistory(); - }, []); + }, [session]); useEffect(() => { const albumsMap = listenHistorySongs.reduce((acc: { [key: string]: LibrarySong[] }, song: LibrarySong) => { From 2b2eefcc43a3145ad7f1287abfdfddd21e871292 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:37:05 +0100 Subject: [PATCH 21/39] Feat(Playlists): Use useSession Hook --- apps/web/components/Layout/Playlists.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Layout/Playlists.tsx b/apps/web/components/Layout/Playlists.tsx index 9d22dacb..419f032c 100644 --- a/apps/web/components/Layout/Playlists.tsx +++ b/apps/web/components/Layout/Playlists.tsx @@ -9,6 +9,7 @@ import Link from "next/link"; import { useEffect, useState } from "react"; import CreatePlaylistDialog from "../Music/Playlist/CreatePlaylistDialog"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@music/ui/components/accordion" +import { useSession } from "../Providers/AuthProvider"; interface Playlist extends OriginalPlaylist { users: string[]; @@ -16,10 +17,10 @@ interface Playlist extends OriginalPlaylist { export default function Playlists() { const [playlists, setPlaylists] = useState(null); + const { session } = useSession() useEffect(() => { async function fetchData() { - const session = getSession(); const playlistsData = await getPlaylists((Number(session?.sub)) ?? 0); const transformedPlaylists: Playlist[] = await Promise.all( @@ -43,7 +44,7 @@ export default function Playlists() { setPlaylists(transformedPlaylists); } fetchData(); - }, []); + }, [session?.sub]); return (
From 22a4a34c553f565d97171450896c00ff58932b0c Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:37:18 +0100 Subject: [PATCH 22/39] Feat(SplashScreen): Use useSession Hook --- apps/web/components/Layout/SplashScreen.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Layout/SplashScreen.tsx b/apps/web/components/Layout/SplashScreen.tsx index 7274bdfb..9af9f9ed 100644 --- a/apps/web/components/Layout/SplashScreen.tsx +++ b/apps/web/components/Layout/SplashScreen.tsx @@ -6,6 +6,7 @@ import { Loader2Icon } from 'lucide-react'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; import React, { useEffect, useState } from 'react'; +import { useSession } from '../Providers/AuthProvider'; interface SplashScreenProps { children: React.ReactNode; @@ -37,6 +38,7 @@ const getItemWithExpiry = (key: string) => { const SplashScreen: React.FC = ({ children }) => { const [loading, setLoading] = useState(true); const { push } = useRouter(); + const { session } = useSession() useEffect(() => { const checkServerUrl = async () => { @@ -46,7 +48,6 @@ const SplashScreen: React.FC = ({ children }) => { ); if (response.ok) { - const session = getSession(); if (session) { const currentPath = window.location.pathname; const queryParams = window.location.search; @@ -71,7 +72,7 @@ const SplashScreen: React.FC = ({ children }) => { }; checkServerUrl(); - }, [push]); + }, [push, session]); useEffect(() => { const storedLoading = getItemWithExpiry("loading"); From b0bdd0cf51ed927a9917dfcdcd53ab0e19e779ac Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:37:39 +0100 Subject: [PATCH 23/39] Feat(Sidebar): Use useSession Hook --- apps/web/components/Layout/Settings/Sidebar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Layout/Settings/Sidebar.tsx b/apps/web/components/Layout/Settings/Sidebar.tsx index 8311bc3b..ebc2423b 100644 --- a/apps/web/components/Layout/Settings/Sidebar.tsx +++ b/apps/web/components/Layout/Settings/Sidebar.tsx @@ -1,12 +1,13 @@ "use client" +import { useSession } from "@/components/Providers/AuthProvider" import getSession from "@/lib/Authentication/JWT/getSession" import Link from "next/link" import { usePathname } from "next/navigation" import { useEffect, useState } from "react" export default function SettingsSidebar() { - const session = getSession() + const { session } = useSession() const isAdmin = session?.role === "admin" const pathname = usePathname() From 4071cc1a84964f5a5993fcce05792fdca069eeaa Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:37:59 +0100 Subject: [PATCH 24/39] Feat(Player): Use useSession Hook --- apps/web/components/Music/Player.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Music/Player.tsx b/apps/web/components/Music/Player.tsx index 6acd6a01..23ea0de6 100644 --- a/apps/web/components/Music/Player.tsx +++ b/apps/web/components/Music/Player.tsx @@ -28,6 +28,7 @@ import VideoPlayerDialog from "./Player/VideoPlayerDialog"; import { PanelContext } from "./Queue/QueuePanelContext"; import { Input } from "@music/ui/components/input"; import { Label } from "@radix-ui/react-label"; +import { useSession } from "../Providers/AuthProvider"; export default function Player() { const [liked, setLiked] = useState(false); @@ -74,6 +75,7 @@ export default function Player() { const reverbEffect = useRef(null); const pitchShift = useRef(null); const [isLoaded, setIsLoaded] = useState(false); + const { session } = useSession() useEffect(() => { reverbEffect.current = new Tone.Reverb().toDestination(); @@ -81,7 +83,6 @@ export default function Player() { }, []); useEffect(() => { - const session = getSession(); let songURL = `${getBaseURL()}/api/stream/${encodeURIComponent(song.path)}?bitrate=${session && session.bitrate || 0}`; if (reverb) { songURL += "&slowed_reverb=true"; @@ -100,7 +101,7 @@ export default function Player() { // console.error('Error loading player:', error); // } // }).toDestination(); - }, [reverb, song, setAudioSource]); + }, [reverb, song, setAudioSource, session]); const handleFileUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; From 5c5e7aabc2853e78638d4d3fcc27767ce2578193 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:38:09 +0100 Subject: [PATCH 25/39] Feat(SongContextMenu): Use useSession Hook --- apps/web/components/Music/SongContextMenu.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Music/SongContextMenu.tsx b/apps/web/components/Music/SongContextMenu.tsx index fac71f14..25f8dad7 100644 --- a/apps/web/components/Music/SongContextMenu.tsx +++ b/apps/web/components/Music/SongContextMenu.tsx @@ -31,6 +31,7 @@ import { useEffect, useState, useTransition } from "react"; import Bars3Left from "../Icons/Bars3Left"; import { usePlayer } from "./Player/usePlayer"; import { LibrarySong } from "@music/sdk/types"; +import { useSession } from "../Providers/AuthProvider"; type SongContextMenuProps = { children: React.ReactNode; @@ -53,15 +54,15 @@ export default function SongContextMenu({ }: SongContextMenuProps) { const [playlists, setPlaylists] = useState(null); const [songInfo, setSongInfo] = useState(null); + const { session } = useSession() useEffect(() => { const getPlaylistsRequest = async () => { - const session = getSession(); let playlists = await getPlaylists(Number(session?.sub) ?? 0); setPlaylists(playlists); }; getPlaylistsRequest(); - }, []); + }, [session?.sub]); const [isPending, startTransition] = useTransition(); From 21e92aba56f3db5eaf928afe69153a25c099cfc4 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:38:18 +0100 Subject: [PATCH 26/39] Feat(AlbumTable): Use useSession Hook --- apps/web/components/Music/Album/AlbumTable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Music/Album/AlbumTable.tsx b/apps/web/components/Music/Album/AlbumTable.tsx index d3dce45e..1494f653 100644 --- a/apps/web/components/Music/Album/AlbumTable.tsx +++ b/apps/web/components/Music/Album/AlbumTable.tsx @@ -9,6 +9,7 @@ import PlaylistCard from '../Playlist/PlaylistCard'; import SongContextMenu from "../SongContextMenu"; import { getArtistInfo } from "@music/sdk"; import Link from "next/link"; +import { useSession } from "@/components/Providers/AuthProvider"; type PlaylistTableProps = { songs: LibrarySong[] @@ -34,7 +35,7 @@ export default function AlbumTable({ songs, album, artist }: PlaylistTableProps) const [orderedSongs, setOrderedSongs] = useState([]); const [contributingArtists, setContributingArtists] = useState<{ [key: string]: Artist[] }>({}); - const session = getSession(); + const { session } = useSession() const bitrate = session?.bitrate ?? 0; useEffect(() => { From 63d62b92f337afa5cfbd4942d7d1cbd035ca798d Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:38:34 +0100 Subject: [PATCH 27/39] Feat(HorizontalCard): Use useSession Hook --- apps/web/components/Music/Card/HorizontalCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Music/Card/HorizontalCard.tsx b/apps/web/components/Music/Card/HorizontalCard.tsx index 3807409b..cfe2b565 100644 --- a/apps/web/components/Music/Card/HorizontalCard.tsx +++ b/apps/web/components/Music/Card/HorizontalCard.tsx @@ -13,6 +13,7 @@ import { FastAverageColor } from "fast-average-color"; import Image from "next/image"; import Link from "next/link"; import { usePlayer } from "../Player/usePlayer"; +import { useSession } from "@/components/Providers/AuthProvider"; type HorizontalCardProps = { item: CombinedItem @@ -21,7 +22,7 @@ type HorizontalCardProps = { export default function HorizontalCard({ item }: HorizontalCardProps) { const { item_type, name, artist_object, album_object, song_object } = item; const imagePath = album_object?.cover_url || artist_object?.icon_url || ""; - const session = getSession(); + const { session } = useSession() const { setImageSrc, From b4d4e12794925d4af52a291116eb8e142624b56d Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:38:51 +0100 Subject: [PATCH 28/39] Feat(SongCard): Use useSession Hook --- apps/web/components/Music/Card/SongCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Music/Card/SongCard.tsx b/apps/web/components/Music/Card/SongCard.tsx index 99671030..0ab013fb 100644 --- a/apps/web/components/Music/Card/SongCard.tsx +++ b/apps/web/components/Music/Card/SongCard.tsx @@ -9,6 +9,7 @@ import Link from "next/link"; import { usePlayer } from "../Player/usePlayer"; import SongContextMenu from "../SongContextMenu"; import { getSongInfo } from "@music/sdk"; +import { useSession } from "@/components/Providers/AuthProvider"; type SongCardProps = { song_name: string; @@ -40,7 +41,7 @@ export default function SongCard({ setPlayedFromAlbum, } = usePlayer(); - const session = getSession(); + const { session } = useSession() const artist = { id: artist_id, name: artist_name }; const album = { id: album_id, name: album_name, cover_url: album_cover }; From d3cf9e77ab86f9972a3db9cf6328997aa1257060 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:39:09 +0100 Subject: [PATCH 29/39] Feat(AddToPlaylistDropdown --- apps/web/components/Music/Player/AddToPlaylistDropdown.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx b/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx index 0df3d69b..0e6438ac 100644 --- a/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx +++ b/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx @@ -10,6 +10,7 @@ import { ScrollArea } from "@music/ui/components/scroll-area" import { CircleDashed } from "lucide-react" import { useEffect, useState } from "react" import { usePlayer } from "./usePlayer" +import { useSession } from "@/components/Providers/AuthProvider" type AddToPlaylistDropdownProps = { children: React.ReactNode; @@ -28,13 +29,13 @@ type PlaylistWithSongs = BasePlaylist & { export default function AddToPlaylistDropdown({ children }: AddToPlaylistDropdownProps) { const { song, isPlaying } = usePlayer(); + const { session: sessionData } = useSession(); const [playlists, setPlaylists] = useState([]); const [playlistAddedNow, setPlaylistAddedNow] = useState(""); useEffect(() => { const getPlaylistsRequest = async () => { - const sessionData = getSession(); if (sessionData) { const playlistsResponse = await getPlaylists(Number(sessionData.sub)); const detailedPlaylistsPromises = playlistsResponse.map(playlist => getPlaylist(playlist.id)); @@ -63,7 +64,7 @@ export default function AddToPlaylistDropdown({ children }: AddToPlaylistDropdow if (isPlaying) { getPlaylistsRequest(); } - }, [isPlaying]); + }, [isPlaying, sessionData]); return ( From 1407f27d70bf87ae21a46479ebf55158c8b43561 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:39:44 +0100 Subject: [PATCH 30/39] Feat(usePlayer): Use useSession Hook --- apps/web/components/Music/Player/usePlayer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Music/Player/usePlayer.tsx b/apps/web/components/Music/Player/usePlayer.tsx index 67ccaf52..d0061a46 100644 --- a/apps/web/components/Music/Player/usePlayer.tsx +++ b/apps/web/components/Music/Player/usePlayer.tsx @@ -19,6 +19,7 @@ import { setNowPlaying, } from "@music/sdk"; import { Album, Artist, Genre, LibrarySong, Song } from "@music/sdk/types"; +import { useSession } from "@/components/Providers/AuthProvider"; const isBrowser = typeof window !== "undefined"; const audioElement = isBrowser ? new Audio() : null; @@ -154,7 +155,7 @@ export function PlayerProvider({ children }: PlayerProviderProps) { let bitrate = 0; - const session = getSession(); + const { session } = useSession() useEffect(() => { if (song.id && lastAddedSongIdRef.current != String(song.id)) { From 307718c4b1938e6d9faf5da01936097db314f1a2 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:39:54 +0100 Subject: [PATCH 31/39] Feat(CreatePlaylistDialog): Use useSession Hook --- apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx b/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx index a2973261..cf73ec23 100644 --- a/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx +++ b/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx @@ -1,5 +1,6 @@ "use client" +import { useSession } from "@/components/Providers/AuthProvider" import getSession from "@/lib/Authentication/JWT/getSession" import { createPlaylist } from "@music/sdk" import { Button } from "@music/ui/components/button" @@ -25,8 +26,8 @@ export default function CreatePlaylistDialog({ children }: CreatePlaylistDialog) const [playlistName, setPlaylistName] = useState("") const [openDialog, setOpenDialog] = useState(false) const [isPending, startTransition] = useTransition() + const { session } = useSession() - const session = getSession() const username = session?.username const open = () => setOpenDialog(true) From 0079159b4b1ac7630ba754a966c8928f1ae09fe4 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:40:05 +0100 Subject: [PATCH 32/39] Feat(PlaylistTablee): Use useSession Hook --- apps/web/components/Music/Playlist/PlaylistTable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/Music/Playlist/PlaylistTable.tsx b/apps/web/components/Music/Playlist/PlaylistTable.tsx index 499d87ed..019ebf1a 100644 --- a/apps/web/components/Music/Playlist/PlaylistTable.tsx +++ b/apps/web/components/Music/Playlist/PlaylistTable.tsx @@ -16,6 +16,7 @@ import { } from "@music/ui/components/table"; import Link from "next/link"; import SongContextMenu from "../SongContextMenu"; +import { useSession } from "@/components/Providers/AuthProvider"; type PlaylistTableProps = { songsWithMetadata: (LibrarySong & { date_added: string })[]; @@ -24,7 +25,7 @@ type PlaylistTableProps = { export default function PlaylistTable({ songsWithMetadata }: PlaylistTableProps) { const { setImageSrc, setSong, setArtist, setAudioSource, setAlbum } = usePlayer() - const session = getSession() + const { session } = useSession() const handlePlay = async (coverURL: string, song: LibrarySong, songURL: string, artist: Artist, album: Album) => { setImageSrc(`${getBaseURL()}/image/${encodeURIComponent(coverURL)}`) From 79479a58403784f09e277e9edf8865d4111e84d7 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:40:26 +0100 Subject: [PATCH 33/39] Feat(AuthProvider): Context to Globally Access Sessions --- .../web/components/Providers/AuthProvider.tsx | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 apps/web/components/Providers/AuthProvider.tsx diff --git a/apps/web/components/Providers/AuthProvider.tsx b/apps/web/components/Providers/AuthProvider.tsx new file mode 100644 index 00000000..f56d707a --- /dev/null +++ b/apps/web/components/Providers/AuthProvider.tsx @@ -0,0 +1,33 @@ +"use client" + +import { ReactNode, createContext, useState, useContext, useEffect } from 'react'; +import getSession, { type ExtendedJWTPayload } from '@/lib/Authentication/JWT/getSession'; + +interface AuthContextType { + session: ExtendedJWTPayload | null; +} + +const AuthContext = createContext(undefined); + +export default function AuthProvider({ children }: { children: ReactNode }) { + const [session, setSession] = useState(null); + + useEffect(() => { + const session = getSession(); + setSession(session); + }, []); + + return ( + + {children} + + ); +} + +export function useSession() { + const context = useContext(AuthContext); + if (context === undefined) { + throw new Error("useSession must be used within an AuthProvider"); + } + return context; +} \ No newline at end of file From a55a442d061a67e56db6d91073b1d52c079a64d8 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:41:20 +0100 Subject: [PATCH 34/39] Fix(SidebarProvider): --- apps/web/components/Providers/SideBarProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/components/Providers/SideBarProvider.tsx b/apps/web/components/Providers/SideBarProvider.tsx index 715a9be5..4ec00b47 100644 --- a/apps/web/components/Providers/SideBarProvider.tsx +++ b/apps/web/components/Providers/SideBarProvider.tsx @@ -35,4 +35,4 @@ export const useSidebar = () => { throw new Error('useSidebar must be used within a SidebarProvider'); } return context; -}; \ No newline at end of file +} \ No newline at end of file From a91b3bba12790b1a39a430ca41bf6b4b0fa5c11a Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:41:29 +0100 Subject: [PATCH 35/39] Feat(SearchBar): Context to Globally Access Sessions --- apps/web/components/Search/SearchBar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/web/components/Search/SearchBar.tsx b/apps/web/components/Search/SearchBar.tsx index 690ff07b..0c97fcd4 100644 --- a/apps/web/components/Search/SearchBar.tsx +++ b/apps/web/components/Search/SearchBar.tsx @@ -10,6 +10,7 @@ import { useRouter } from "next/navigation"; import { FormEvent, useContext, useEffect, useState } from "react"; import { LyricsContext } from "../Lyrics/LyricsOverlayContext"; import { ScrollContext } from "../Providers/ScrollProvider"; +import { useSession } from "../Providers/AuthProvider"; type SearchBarProps = { isSearchActive: boolean; @@ -25,11 +26,11 @@ export default function SearchBar({ const [isSearchBoxClicked, setIsSearchBoxClicked] = useState(false); const { onTopOfPage } = useContext(ScrollContext); const { areLyricsVisible } = useContext(LyricsContext) + const { session } = useSession() const router = useRouter(); const handleSubmit = (event: FormEvent) => { - const session = getSession() event.preventDefault(); session && addSearchHistory({ user_id: Number(session.sub), search: query }) router.push(`/search?q=${query}`); @@ -37,7 +38,6 @@ export default function SearchBar({ }; useEffect(() => { - const session = getSession() async function getLastSearchedQueriesFn() { if (session) { const queries = await getLastSearchedQueries({ user_id: Number(session.sub) }); @@ -49,7 +49,7 @@ export default function SearchBar({ } getLastSearchedQueriesFn(); - }, []); + }, [session]); return (
From 8e93d68aed6848fa0baadff205c069df5e6adcb6 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:41:39 +0100 Subject: [PATCH 36/39] Feat(ChangeBitrate): Context to Globally Access Sessions --- apps/web/components/User/ChangeBitrate.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/User/ChangeBitrate.tsx b/apps/web/components/User/ChangeBitrate.tsx index 76a4667c..5c012f9d 100644 --- a/apps/web/components/User/ChangeBitrate.tsx +++ b/apps/web/components/User/ChangeBitrate.tsx @@ -24,6 +24,7 @@ import { import { useForm } from "react-hook-form"; import { z } from "zod"; import { useState } from "react"; +import { useSession } from "../Providers/AuthProvider"; const FormSchema = z.object({ bitrate: z.string({ @@ -33,6 +34,7 @@ const FormSchema = z.object({ }); export default function ChangeBitrate() { + const { session } = useSession() const [message, setMessage] = useState(null); const bitrateMapping: { [key: string]: number } = { @@ -68,7 +70,6 @@ export default function ChangeBitrate() { data.bitrate === "custom" ? Number(data.customBitrate) : bitrateMapping[data.bitrate]; if (newBitrate !== undefined) { - const session = getSession(); setBitrate(Number(session?.sub), newBitrate); setMessage("Bitrate changed successfully!"); } else { From d5e21eeb8b7740ed3a1d7c2f259f3ba759216c1f Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:41:50 +0100 Subject: [PATCH 37/39] Feat(ChangePassword): Context to Globally Access Sessions --- apps/web/components/User/ChangePassword.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/User/ChangePassword.tsx b/apps/web/components/User/ChangePassword.tsx index d144e61f..479a4f16 100644 --- a/apps/web/components/User/ChangePassword.tsx +++ b/apps/web/components/User/ChangePassword.tsx @@ -9,6 +9,7 @@ import { FormItem, FormLabel, FormControl, FormMessage } from "@music/ui/compone import { Input } from "@music/ui/components/input"; import { Form, useForm, FormProvider } from "react-hook-form"; import { z } from "zod"; +import { useSession } from "../Providers/AuthProvider"; const changePasswordSchema = z.object({ password: z @@ -21,7 +22,7 @@ const changePasswordSchema = z.object({ export function ChangePassword() { const [isClient, setIsClient] = useState(false); - const session = getSession(); + const { session } = useSession() useEffect(() => { setIsClient(true); From 6ca2efe60c5f032d2dba71bd958a9e00e6fef398 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:42:16 +0100 Subject: [PATCH 38/39] Feat(NavbarProfilePicture): Use useSession Hook --- apps/web/components/User/NavbarProfilePicture.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/components/User/NavbarProfilePicture.tsx b/apps/web/components/User/NavbarProfilePicture.tsx index b6101f3f..106c800b 100644 --- a/apps/web/components/User/NavbarProfilePicture.tsx +++ b/apps/web/components/User/NavbarProfilePicture.tsx @@ -33,6 +33,7 @@ import { Inter as FontSans } from "next/font/google" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import { cn } from "@music/ui/lib/utils" +import { useSession } from "../Providers/AuthProvider" const fontSans = FontSans({ subsets: ["latin"], @@ -42,10 +43,10 @@ const fontSans = FontSans({ export default function NavbarProfilePicture() { const [username, setUsername] = useState("") const [profilePicture, setProfilePicture] = useState(null) + const { session } = useSession() useEffect(() => { const fetchSessionAndProfilePicture = async () => { - const session = getSession() if (session) { setUsername(session.username) const profilePic = await getProfilePicture(Number(session.sub)) @@ -57,7 +58,7 @@ export default function NavbarProfilePicture() { } } fetchSessionAndProfilePicture() - }, []) + }, [session]) const { push } = useRouter() function signOut() { From 3be275532f60ed82de2a7d895009e121670f6983 Mon Sep 17 00:00:00 2001 From: WillKirkmanM Date: Mon, 7 Oct 2024 15:42:53 +0100 Subject: [PATCH 39/39] Feat(Username): Use useSession Hook --- apps/web/components/User/Username.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/components/User/Username.tsx b/apps/web/components/User/Username.tsx index f97b5a7c..9cc8163c 100644 --- a/apps/web/components/User/Username.tsx +++ b/apps/web/components/User/Username.tsx @@ -16,9 +16,10 @@ import { FormLabel, FormMessage, } from "@music/ui/components/form" +import { useSession } from "../Providers/AuthProvider" export default function Username() { - const session = getSession() + const { session } = useSession() const username = session?.username const FormSchema = z.object({