Frontend final

components/ScoreCard.js

@@ -4,7 +4,7 @@ import { getUserId } from '../lib/userAuth'
 
 const CONFIRM_MESSAGE = 'Are you sure you want to delete the score?'
 
-const ScoreCard = ({ id, playedAt, totalScore, userId, userName }) => {
+const ScoreCard = ({ id, playedAt, totalScore, userId, userName, number_of_holes }) => {
   const { deleteScore } = useScoreDelete(id)
 
   return (
@@ -14,7 +14,7 @@ const ScoreCard = ({ id, playedAt, totalScore, userId, userName }) => {
           {playedAt}
         </div>
         <div>
-          {`${userName} posted a score of ${totalScore}`}
+          {`${userName} posted a score of ${totalScore} (${number_of_holes} - holes)`}
         </div>
       </div>
       <div className="w-1/6">

lib/useScorePost.js

@@ -5,7 +5,7 @@ import { FEED_URL } from './useScores'
 const url = `${process.env.NEXT_PUBLIC_API_URL}/scores`
 
 const useScorePost = () => {
-  const postScore = async (totalScore, playedAt) => {
+  const postScore = async (totalScore, playedAt, number_of_holes) => {
     fetch(url, {
       method: 'POST',
       headers: {
@@ -16,6 +16,7 @@ const useScorePost = () => {
         score: {
           total_score: totalScore,
           played_at: playedAt,
+          number_of_holes: number_of_holes,
         },
       }),
     }).then(res => res.json())

pages/index.js

@@ -22,6 +22,7 @@ const Home = () => {
                 playedAt={score.played_at}
                 userId={score.user_id}
                 userName={score.user_name}
+                number_of_holes={score.number_of_holes}
               />
             ))}
           </>

pages/user/[id].js

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/router'
+import Layout from '../../components/Layout'
+import { getToken } from '../../lib/userAuth'
+
+const UserPage = () =>{
+  const router=useRouter()
+  const {id} = router.query
+  const [user,setUser]=useState(null)
+
+  useEffect(
+    () => {
+      if(!id)return 
+      fetch(`${process.env.NEXT_PUBLIC_API_URL}/users/${id}`, {
+        headers: { Authorization: `Bearer ${getToken()}` },})
+        .then(res => res.json())
+        .then (data=> setUser(data.user))
+        .catch(e=> {alert(e)})
+
+    },
+    [ id ]
+  )
+
+  if(!user)return <Layout>User not found</Layout>
+
+  return ( 
+    <Layout>
+      <h1 className='text-2xl font-bold mb-4'>{user.name}</h1>
+      <p className='mb-4'>Email: {user.email}</p>
+      {user.scores.map(score => (
+        <div key={score.id} className='p-2 my-2 shadow-md'>
+          <div className='italic text-gray-400'>{score.played_at}</div>
+          <div> {`${user.name} posted ${score.total_score} (${score.number_of_holes}-holes)`}</div>
+        </div>
+      ))
+      }
+    </Layout>
+    )
+}
+
+export default UserPage