songs done

components/songsTable.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/layout'
 import { Table, Thead, Td, Tr, Tbody, Th, IconButton } from '@chakra-ui/react'
 import { BsFillPlayFill } from 'react-icons/bs'
 import { AiOutlineClockCircle } from 'react-icons/ai'
+import { formatDate, formatTime } from '../lib/formatters'
 
 const SongTable = ({ songs }) => {
   return (
@@ -41,8 +42,8 @@ const SongTable = ({ songs }) => {
               >
                 <Td>{i + 1}</Td>
                 <Td>{song.name}</Td>
-                <Td>{song.createdAt.toString()}</Td>
-                <Td>{song.duration}</Td>
+                <Td>{formatDate(song.createdAt)}</Td>
+                <Td>{formatTime(song.duration)}</Td>
               </Tr>
             ))}
           </Tbody>

lib/formatters.ts

@@ -0,0 +1,13 @@
+import formatDuration from 'format-duration'
+
+export const formatTime = (timeInSeconds = 0) => {
+  return formatDuration(timeInSeconds * 1000)
+}
+
+export const formatDate = (date: Date) => {
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}