implement jukebox object, store, network, add info to settings page

src/App.tsx

@@ -5,6 +5,7 @@ import { SocketProvider, Theme } from './context'
 import { SpotifyPlayerProvider } from './context/PlayerContext'
 import {
   fetchCurrentClubInfo,
+  fetchJukeboxes,
   fetchUserInfo,
   initializeUser,
   logoutUser,
@@ -41,6 +42,7 @@ export const App = () => {
         setCurrentClub(resUserInfo.clubs[0])
         setAllClubs(resUserInfo.clubs)
         await fetchCurrentClubInfo()
+        await fetchJukeboxes()
       })
     } else if (userInfo || userIsLoggedIn === false) {
       logoutUser()
@@ -49,7 +51,7 @@ export const App = () => {
 
   return (
     <Theme>
-      <SpotifyPlayerProvider token={spotifyAuth?.accessToken}>
+      <SpotifyPlayerProvider token={spotifyAuth?.access_token}>
         <SocketProvider />
         <Outlet />
       </SpotifyPlayerProvider>

src/apps/admin/components/Topbar.tsx

@@ -9,6 +9,7 @@ export const Topbar = () => {
   const user = useSelector(selectUser)
   const clubs = useSelector(selectAllClubs)
   const currentClub = useSelector(selectCurrentClub)
+  // const jukeboxes = useSelector()
 
   const handleClubChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const selectedClubId = e.target.value
@@ -43,7 +44,7 @@ export const Topbar = () => {
           </button>
         </div>
         <button className="topbar__profile">
-          {user && <img src={user.image} alt={user.lastName} />}
+          {user && <img src={user.image} alt={user.last_name} />}
           {!user && <p>Login required.</p>}
         </button>
       </div>

src/apps/admin/pages/MusicSearch.tsx

@@ -68,4 +68,4 @@ export const MusicSearch = () => {
       </div>
     </div>
   )
-}
+}

src/apps/admin/pages/Overview.scss

@@ -1,85 +1,78 @@
 .disk {
-    align-items: center;
-    float: right;
-    display: flex;
-    height: 100%;
-    position: relative;
+  align-items: center;
+  float: right;
+  display: flex;
+  height: 100%;
+  position: relative;
 
-    z-index: 2;
+  z-index: 2;
 }
 
 .card {
-    display: flex;
-    flex-direction: column;
-    margin: auto;
-    width: 100%;
-    position: relative;
-    transform: translate(0, -25%);
-
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  width: 100%;
+  position: relative;
+  transform: translate(0, -25%);
 }
 
-.song-desc{
+.song-desc {
   margin: 2vh 0 3vh 0;
 }
 
 .song-title {
-    
-    font-family: Chango;
-    padding-bottom: 2vh;
-    padding-top: 1vh;
-    font-size: 1.8vw;
-    font-weight: 100;
+  @include font-display('sm');
+  padding-bottom: 1.5rem;
+
+  &--small {
+    @include font-display('xs');
+  }
 }
 
 .song-queue {
-    background-color: var(--color-surface);
-    display: flex;
-    min-height: 49.5vh;
-
-    flex-direction: column;
-    padding-top: 4vh;
-    padding-bottom: 4vh;
-    padding-left: 0.5vw;
-    padding-right: 0.5vw;
-    border-radius: 10px;
-    margin-top: -10.5vh;
-
-    position: relative;
-    z-index: 3;
-    overflow: overlay;
-
+  background-color: var(--color-surface);
+  display: flex;
+  min-height: 49.5vh;
+
+  flex-direction: column;
+  padding-top: 4vh;
+  padding-bottom: 4vh;
+  padding-left: 0.5vw;
+  padding-right: 0.5vw;
+  border-radius: 10px;
+  margin-top: -10.5vh;
+
+  position: relative;
+  z-index: 3;
+  overflow: overlay;
 }
 
-.curr-song{
+.curr-song {
   @include absCenter;
   border-radius: 50%;
-  border-color: #CA6B4F;
+  border-color: #ca6b4f;
   border-width: 3px;
   border-style: solid;
   width: 28vh;
-
-}   
-
+}
 
 ::-webkit-scrollbar {
-    width: 1vh;
-    background : var(--color-surface);
-    border-radius: 10px;
-  }
-
+  width: 1vh;
+  background: var(--color-surface);
+  border-radius: 10px;
+}
 
-  ::-webkit-scrollbar-track {
-    border-radius: 1vh;
-  }
-
+::-webkit-scrollbar-track {
+  border-radius: 1vh;
+}
 
-  ::-webkit-scrollbar-thumb {
-    background: #818181;
-    border-radius: 1vh;
-    width : 1vh;
-  }
-
+::-webkit-scrollbar-thumb {
+  background: #818181;
+  border-radius: 1vh;
+  width: 1vh;
+}
 
-  ::-webkit-scrollbar-thumb:hover {
-    background: #8F8F8F; 
-  }
+::-webkit-scrollbar-thumb:hover {
+  background: #8f8f8f;
+}

src/apps/admin/pages/Overview.tsx

@@ -1,12 +1,12 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 
 import { AudioPlayer } from 'src/components'
 
 import './Overview.scss'
 
+import Disk from 'src/assets/svg/Disk.svg?react'
 import { SpotifyPlayerContext } from 'src/context'
 import { mockTrack } from 'src/mock'
-import Disk from 'src/assets/svg/Disk.svg?react'
 
 import { Track } from './Track'
 
@@ -15,11 +15,9 @@ export const Overview = () => {
   const [author, setAuthor] = useState('')
   const { currentTrack } = useContext(SpotifyPlayerContext)
   const [currentTrackImage, setCurrentTrackImage] = useState('')
+  const songTitleRef = useRef<HTMLHeadingElement>(null)
 
   useEffect(() => {
-    console.log('Hello')
-    console.log('Current track:', currentTrack)
-    console.log()
     if (currentTrack == undefined) {
       setSong('No song Playing')
       setAuthor('No Author')
@@ -32,6 +30,10 @@ export const Overview = () => {
           .join(', '),
       )
       setCurrentTrackImage(currentTrack?.album?.images[0].url)
+
+      if (currentTrack.name.length > 15) {
+        songTitleRef.current?.classList.add('song-title--small')
+      }
     }
   }, [currentTrack])
 
@@ -41,7 +43,9 @@ export const Overview = () => {
       <div className="grid">
         <div className="col-5 card">
           <div className="song-desc">
-            <div className="song-title">{song}</div>
+            <h2 className="song-title" ref={songTitleRef}>
+              {song}
+            </h2>
             <div className="song-author">{author}</div>
           </div>
           <AudioPlayer />

src/apps/admin/pages/Settings.tsx

@@ -0,0 +1,46 @@
+import { useSelector } from 'react-redux'
+import { selectAllClubs, selectUser } from 'src/store'
+import { selectAllJukeboxes } from 'src/store/jukebox'
+
+export const Settings = () => {
+  const clubs = useSelector(selectAllClubs)
+  const user = useSelector(selectUser)
+  const jukeboxes = useSelector(selectAllJukeboxes)
+
+  return (
+    <div>
+      <section>
+        <h2>Current User</h2>
+        <ul>
+          <li>
+            Name: {user?.first_name} {user?.last_name}
+          </li>
+          <li>Email: {user?.email}</li>
+          <li>Username: {user?.username}</li>
+        </ul>
+      </section>
+      <br />
+      <section>
+        <h2>Clubs</h2>
+        <ul>
+          {clubs.map((club) => (
+            <li key={club.id}>{club.name}</li>
+          ))}
+        </ul>
+      </section>
+      <section>
+        <h2>Jukeboxes</h2>
+        <ul>
+          {jukeboxes.map((jbx) => (
+            <li key={jbx.id}>
+              {jbx.name} (
+              {clubs.find((club) => +club.id === +jbx.club_id)?.name ??
+                'No Club Found'}
+              )
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  )
+}

src/apps/admin/pages/Track.tsx

@@ -1,6 +1,6 @@
 import { formatDuration } from 'src/utils'
 
-export const Track = (props: { track: Nullable<Track> }) => {
+export const Track = (props: { track: Nullable<ITrack> }) => {
   const { track } = props
   return (
     <li className="track-list__track">

src/apps/admin/routes.tsx

@@ -1,10 +1,11 @@
-import { Outlet, type RouteObject } from 'react-router-dom'
+import { type RouteObject } from 'react-router-dom'
 import { Dashboard } from './layout/Dashboard'
 import { Overview } from './pages'
 import { AdminBoard } from './pages/AdminBoard'
-import { MusicSearch } from './pages/MusicSearch'
 import { Music } from './pages/Music'
 import { MusicQueue } from './pages/MusicQueue'
+import { MusicSearch } from './pages/MusicSearch'
+import { Settings } from './pages/Settings'
 
 export const adminOutlet = <Dashboard />
 
@@ -61,6 +62,6 @@ export const adminRoutes: RouteObject[] = [
   },
   {
     path: 'settings',
-    element: <div>Settings</div>,
+    element: <Settings />,
   },
 ]

src/apps/boards/components/TrackItem.tsx

@@ -3,7 +3,7 @@ import { formatDuration } from 'src/utils'
 /**
  * TODO: MOVE THIS COMPONENT TO GLOBAL SCOPE
  */
-export const TrackItem = (props: { track: Nullable<Track> }) => {
+export const TrackItem = (props: { track: Nullable<ITrack> }) => {
   const { track } = props
   return (
     <li className="track-list__track">

src/apps/boards/components/TracksPanel.tsx

@@ -2,8 +2,8 @@ import { AudioPlayer } from 'src/components'
 import { TrackItem } from './TrackItem'
 
 export const TracksPanel = (props: {
-  currentTrack?: Nullable<Track>
-  nextTracks: Track[]
+  currentTrack?: Nullable<ITrack>
+  nextTracks: ITrack[]
 }) => {
   const { currentTrack, nextTracks } = props
 

src/components/audio/AudioPlayer.tsx

@@ -9,7 +9,7 @@ import { ProgressBar } from './ProgressBar'
 import './ProgressBar.scss'
 
 export const AudioPlayerContext = createContext({
-  currentTrack: undefined as Nullable<Track>,
+  currentTrack: undefined as Nullable<ITrack>,
   isPlaying: false,
   timeProgress: 0,
   duration: 0,

src/mock/mock-clubs.ts

@@ -2,16 +2,16 @@ export const mockClubs: IClub[] = [
   {
     id: 0,
     name: 'Test Club 1',
-    ownerId: 0,
+    members: [],
   },
   {
     id: 1,
     name: 'Test Club 2',
-    ownerId: 1,
+    members: [],
   },
   {
     id: 2,
     name: 'Test Club 3',
-    ownerId: 1,
+    members: [],
   },
 ]

src/mock/mock-track.ts

@@ -1,4 +1,4 @@
-export const mockTrack: Track = {
+export const mockTrack: ITrack = {
   album: {
     // album_type: 'compilation',
     // total_tracks: 9,

src/mock/mock-user.ts

@@ -4,13 +4,10 @@ export const mockUser: IUser & { token: string } = {
   id: 0,
   token: 'test-token',
   email: '[email protected]',
-  firstName: 'John',
-  lastName: 'Doe',
-  clubs: mockClubs.map((club) => ({
-    id: club.id,
-    name: club.name,
-    ownerId: 0,
-  })),
+  username: '[email protected]',
+  first_name: 'John',
+  last_name: 'Doe',
+  clubs: mockClubs,
   image:
     'https://static.vecteezy.com/system/resources/thumbnails/001/840/618/small_2x/picture-profile-icon-male-icon-human-or-people-sign-and-symbol-free-vector.jpg',
 }