Use Global Session Context (#143)

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 (
     <h1 className="text-white text-3xl flex justify-center min-h-screen">You are admin!</h1>

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";

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<LibrarySong[]>([]);
 
+  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 (
     <>

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
         )}>
-        <SplashScreen>
-          <MainLayout>{children}</MainLayout>
-        </SplashScreen>
+        <AuthProvider>
+          <SplashScreen>
+            <MainLayout>
+              {children}
+            </MainLayout>
+          </SplashScreen>
+        </AuthProvider>
       </body>
     </html>
   );

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<string | null>(null);
+  const { session } = useSession();
 
-  const session = getSession();
   useEffect(() => {
     async function fetchData() {
       const userCacheKey = `userInfo_${username}`;

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<User[]>([]);

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()

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<string | null>(null)
   const [profilePicture, setProfilePicture] = useState<string | null>(null)
   const [username, setUsername] = useState<string>("")
+  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<typeof FormSchema>) {
-    const session = getSession()
     const userId = Number(session?.sub)
 
     if (file) {

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
             </div>
           </div>
-        {children}
+
+        <AuthProvider>
+          {children}
+        </AuthProvider>
       </body>
     </html>
   )

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<FormData>({
     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));
 

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 && (
     <ScrollButtons heading="In your Library" id="InYourLibrary">

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 && <Button onClick={() => follow(Number(session.sub), userIDToFollow)}>Follow</Button>
 }

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<Friend[]>([])
+  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 && (
     <>

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<LibrarySong[]>([]);
   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 (
     <ScrollButtons heading="From Your Library" id="FromYourLibrary">
       <div className="flex flex-row pb-28">

apps/web/components/Home/ListenAgain.tsx

@@ -9,23 +9,24 @@ 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;
 }
 
 export default function ListenAgain({ genre }: ListenAgainProps) {
   const [listenHistorySongs, setListenHistorySongs] = useState<SongInfo[]>([]);
-
+  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;
 

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";