playlist

components/sidebar.tsx

@@ -17,6 +17,7 @@ import {
   MdPlaylistAdd,
   MdFavorite,
 } from 'react-icons/md'
+import { usePlaylist } from '../lib/hooks'
 
 const navMenu = [
   {
@@ -49,9 +50,10 @@ const musicMenu = [
   },
 ]
 
-const playlists = new Array(30).fill(1).map((_, i) => `Playlist ${i + 1}`)
+// const playlists = new Array(30).fill(1).map((_, i) => `Playlist ${i + 1}`)
 
 const Sidebar = () => {
+  const { playlists } = usePlaylist()
   return (
     <Box
       width="100%"
@@ -108,10 +110,10 @@ const Sidebar = () => {
         <Box height="66%" overflowY="auto" paddingY="20px">
           <List spaceing={2}>
             {playlists.map((playlist) => (
-              <ListItem paddingX="20px" key={playlist}>
+              <ListItem paddingX="20px" key={playlist.id}>
                 <LinkBox>
                   <NextLink href="/" passHref>
-                    <LinkOverlay>{playlist}</LinkOverlay>
+                    <LinkOverlay>{playlist.name}</LinkOverlay>
                   </NextLink>
                 </LinkBox>
               </ListItem>

lib/fetcher.ts

@@ -6,5 +6,10 @@ export default function fetcher(url: string, data = undefined) {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(data),
+  }).then((res) => {
+    if (res.status > 399 && res.status < 200) {
+      throw new Error()
+    }
+    return res.json()
   })
 }

lib/hooks.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr'
+import fetcher from './fetcher'
+
+export const useMe = () => {
+  const { data, error } = useSWR('/me', fetcher)
+
+  return {
+    user: data,
+    isLoading: !data && !error,
+    isError: error,
+  }
+}
+
+export const usePlaylist = () => {
+  const { data, error } = useSWR('/playlist', fetcher)
+  return {
+    playlists: (data as any) || [],
+    isLoading: !data && !error,
+    isError: error,
+  }
+}

pages/api/playlist.ts

@@ -0,0 +1,15 @@
+import prisma from '../../lib/prisma'
+import { validateRoute } from '../../lib/auth'
+
+export default validateRoute(async (req, res, user) => {
+  const playlists = await prisma.playlist.findMany({
+    where: {
+      userId: user.id,
+    },
+    orderBy: {
+      name: 'asc',
+    },
+  })
+
+  res.json(playlists)
+})