Merge pull request #659 from nwplus/indy/nwhacks-rewards

Update rewards page for nwhacks

src/components/RewardCard.jsx

@@ -6,8 +6,8 @@ const Container = styled.div`
   background-color: ${p => p.theme.colors.backgroundTertiary};
   border-radius: 8px;
   padding: 20px;
-  width: 280px;
-  height: 160px;
+  width: 300px;
+  height: 180px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -107,8 +107,7 @@ const Back = styled.div`
   cursor: pointer;
 `
 
-// commented code related to points for nwhacks
-const RewardCard = ({ name, desc, company, image, points, prizes }) => {
+const RewardCard = ({ name, desc, company, image, points, requiredPoints }) => {
   const [isFlipped, setIsFlipped] = useState(false)
 
   const handleClick = e => {
@@ -118,45 +117,42 @@ const RewardCard = ({ name, desc, company, image, points, prizes }) => {
 
   let progress = 0
 
-  // if (points === maxPoints) {
-  //   progress = 1
-  //   req = 'Completed!'
-  // } else {
-  //   progress = points / maxPoints
-  // }
+  if (points === requiredPoints) {
+    progress = 1
+    req = 'Completed!'
+  } else {
+    progress = points / requiredPoints
+  }
 
   return (
-    // <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
-    <Container>
-      {/* <InfoIcon onClick={handleClick}>i</InfoIcon> */}
-      <Grid>
-        <Icon src={image} />
-        <div>
-          <Title>{name}</Title>
-          {/* <Text>Reach {points} pts</Text> */}
-          <Text>
-            {desc} {company !== 'None' || (undefined && `from ${company}`)}
-          </Text>
-        </div>
-      </Grid>
-      {/* <div style={{ justifyContent: 'center', alignItems: 'center' }}>
+    <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
+      <Container>
+        <InfoIcon onClick={handleClick}>i</InfoIcon>
+        <Grid>
+          <Icon src={image} />
+          <div>
+            <Title>{name}</Title>
+            <Text>Reach {requiredPoints - points} pts</Text>
+          </div>
+        </Grid>
+        <div style={{ justifyContent: 'center', alignItems: 'center' }}>
           <SubTitle>
-            {points}/{maxPoints} pts
+            {points}/{requiredPoints} pts
           </SubTitle>
           <ProgressContainer>
             <ProgressBar value={progress} />
           </ProgressContainer>
-        </div> */}
-    </Container>
-
-    //   <Back onClick={handleClick}>
-    //     <Container>
-    //       <Description>
-    //         {desc} {company !== 'None' && `from ${company}`}
-    //       </Description>
-    //     </Container>
-    //   </Back>
-    // </ReactCardFlip>
+        </div>
+      </Container>
+
+      <Back onClick={handleClick}>
+        <Container>
+          <Description>
+            {desc} {company && company !== 'None' ? `from ${company}` : ''}
+          </Description>
+        </Container>
+      </Back>
+    </ReactCardFlip>
   )
 }
 

src/components/Rewards/AttendedEvents.jsx

@@ -68,9 +68,18 @@ const AttendedEvents = ({ userDetails }) => {
           {events.map((event, i) => (
             <AttendedEventsCard
               key={i}
-              name={event.title}
-              time={new Date(event.date.seconds * 1000).toLocaleString()}
-              points={event.points}
+              name={event.name}
+              startTime={new Date(event.startTime).toLocaleTimeString('en-US', {
+                hour: 'numeric',
+                minute: '2-digit',
+                hour12: true,
+              })}
+              endTime={new Date(event.endTime).toLocaleTimeString('en-US', {
+                hour: 'numeric',
+                minute: '2-digit',
+                hour12: true,
+              })}
+              points={event.points ? event.points : '0'}
               color={event_type[event.type]?.colour ?? 'gray'}
             />
           ))}

src/components/Rewards/AttendedEventsCard.jsx

@@ -65,14 +65,16 @@ const PointsText = styled(P)`
 /**
  * @param {AttendedEventsCardProps} param0
  */
-const AttendedEventsCard = ({ name, time, points, color }) => {
+const AttendedEventsCard = ({ name, startTime, endTime, points, color }) => {
   return (
     <AttendedEventsCardContainer>
       <CheckmarkSVG color={color} />
       <EventDetailsContainer>
         <EventDetails>
           <EventName>{name}</EventName>
-          <EventTime>{time}</EventTime>
+          <EventTime>
+            {startTime} - {endTime}
+          </EventTime>
         </EventDetails>
         <TagPointsContainer>
           <StyledSVG color={color} />

src/components/Rewards/TotalPoints.jsx

@@ -3,11 +3,11 @@ import { getEvents } from '../../utility/firebase'
 import { useHackathon } from '../../utility/HackathonProvider'
 import { useState, useEffect } from 'react'
 
-const TotalPointsName = styled.h2`
-  color: ${p => p.theme.colors.highlight};
-  font-weight: 700;
-  font-size: 30px;
-`
+// const TotalPointsName = styled.h2`
+//   color: ${p => p.theme.colors.highlight};
+//   font-weight: 700;
+//   font-size: 30px;
+// `
 
 const TotalPointsCard = styled.div`
   background: ${p => p.theme.colors.backgroundTertiary};
@@ -22,20 +22,20 @@ const TotalPointsCard = styled.div`
 `
 
 const PointsTitle = styled.div`
-  color: ${p => p.theme.colors.textSecondary};
+  color: ${p => p.theme.colors.text};
   font-size: 18px;
   font-weight: 700;
 `
 
 const PointsValue = styled.div`
-  color: ${p => p.theme.colors.highlight};
+  color: ${p => p.theme.colors.text};
   font-size: 40px;
   font-weight: 700;
 `
 
 const TotalPoints = ({ userDetails }) => {
   const { dbHackathonName } = useHackathon()
-  const [name, setName] = useState('')
+  // const [name, setName] = useState('')
   const [totalPoints, setTotalPoints] = useState(0)
 
   useEffect(() => {
@@ -44,11 +44,19 @@ const TotalPoints = ({ userDetails }) => {
         const eventIds = userDetails.dayOf.events.map(event => event.eventId)
         const events = await getEvents(dbHackathonName)
         const filteredEvents = events.filter(event => eventIds.includes(event.key))
-
-        setName(`${userDetails.basicInfo.preferredName} ${userDetails.basicInfo.legalLastName}`)
+        console.log(filteredEvents)
+        // setName(`${userDetails.basicInfo.preferredName} ${userDetails.basicInfo.legalLastName}`)
         setTotalPoints(
           filteredEvents.reduce((accumulator, event) => {
-            return accumulator + parseInt(event.points)
+            const points = parseInt(event.points) // Attempt to convert to integer
+            if (!isNaN(points)) {
+              // Only add valid numbers
+              console.log('Adding Points:', points)
+              return accumulator + points
+            } else {
+              console.log('Skipping Invalid Points:', event.points)
+              return accumulator
+            }
           }, 0)
         )
       }
@@ -57,10 +65,10 @@ const TotalPoints = ({ userDetails }) => {
 
   return (
     <div>
-      <TotalPointsName>{name}</TotalPointsName>
+      {/* <TotalPointsName>{name}</TotalPointsName> */}
       <TotalPointsCard>
         <PointsTitle>TOTAL POINTS</PointsTitle>
-        <PointsValue>{totalPoints.toLocaleString()} pts</PointsValue>
+        <PointsValue>{totalPoints ? totalPoints : 0} pts</PointsValue>
       </TotalPointsCard>
     </div>
   )

src/components/Schedule/Tag.jsx

@@ -28,6 +28,7 @@ export const Tag = styled.span`
     padding: 1px 3px;
     font-size: 0.75em;
   }
+  text-wrap: nowrap;
 `
 
 export const PositionedTag = styled(Icon)`

src/containers/Rewards.jsx

@@ -1,16 +1,16 @@
 import styled from 'styled-components'
 import React, { useEffect, useState } from 'react'
 import { useHackathon } from '../utility/HackathonProvider'
-import { rewardsRef } from '../utility/firebase'
+import { applicantsRef, rewardsRef, getEvents } from '../utility/firebase'
 import RewardCard from '../components/RewardCard'
-// import TotalPoints from '../components/Rewards/TotalPoints'
-// import AttendedEvents from '../components/Rewards/AttendedEvents'
-// import { useAuth } from '../utility/Auth'
+import TotalPoints from '../components/Rewards/TotalPoints'
+import AttendedEvents from '../components/Rewards/AttendedEvents'
+import { useAuth } from '../utility/Auth'
 // import { getUserApplication } from '../utility/firebase'
 
 const Container = styled.div`
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 1.2fr 1.8fr;
 
   @media (max-width: 768px) {
     display: flex;
@@ -20,6 +20,25 @@ const Container = styled.div`
   }
 `
 
+const Column = styled.div`
+  margin-right: 24px;
+  margin-top: 10px;
+
+  @media (max-width: 768px) {
+    margin-right: 0px;
+    margin-top: 0px;
+  }
+`
+
+const Spacer = styled.div`
+  margin-bottom: 24px;
+`
+
+const Name = styled.h1`
+  font-weight: 800;
+  font-size: 2rem;
+`
+
 const Header = styled.h1`
   font-weight: 800;
   font-size: 2.5rem;
@@ -48,7 +67,10 @@ const Cards = styled.div`
 
 const Rewards = () => {
   const [rewards, setRewards] = useState([])
+  const [userDetails, setUserDetails] = useState(null)
+  const [userPoints, setUserPoints] = useState(0)
   const { dbHackathonName } = useHackathon()
+  const { user } = useAuth()
 
   useEffect(() => {
     const fetchRewards = async () => {
@@ -61,12 +83,59 @@ const Rewards = () => {
       }
     }
 
+    const getUserPoints = async () => {
+      if (!user) return
+      try {
+        const userDoc = await applicantsRef(dbHackathonName).doc(user.uid).get()
+        if (!userDoc.exists) {
+          console.log('No user data found')
+          return
+        }
+        const userData = userDoc.data()
+
+        if (userData && dbHackathonName) {
+          const eventIds = userData.dayOf.events.map(event => event.eventId)
+          const events = await getEvents(dbHackathonName)
+          const filteredEvents = events.filter(event => eventIds.includes(event.key))
+          console.log(filteredEvents)
+          // setName(`${userData.basicInfo.preferredName} ${userData.basicInfo.legalLastName}`)
+          setUserPoints(
+            filteredEvents.reduce((accumulator, event) => {
+              const points = parseInt(event.points) // Attempt to convert to integer
+              if (!isNaN(points)) {
+                // Only add valid numbers
+                console.log('Adding Points:', points)
+                return accumulator + points
+              } else {
+                console.log('Skipping Invalid Points:', event.points)
+                return accumulator
+              }
+            }, 0)
+          )
+        }
+
+        // const points = userData.points || 0
+        // setUserPoints(points)
+        setUserDetails(userData)
+      } catch (error) {
+        console.error('Error fetching user points:', error)
+      }
+    }
     fetchRewards()
-  }, [])
+    getUserPoints()
+  }, [dbHackathonName, user])
 
   return (
     <Container>
-      {/* <div></div> */}
+      <Column>
+        <Spacer>
+          <Name>
+            {userDetails?.basicInfo?.legalFirstName} {userDetails?.basicInfo?.legalLastName}
+          </Name>
+          <TotalPoints userDetails={userDetails} />
+        </Spacer>
+        <AttendedEvents userDetails={userDetails} />
+      </Column>
       <div>
         <Header>Rewards</Header>
         <Subtitle>
@@ -81,7 +150,8 @@ const Rewards = () => {
               desc={reward.blurb}
               company={reward.from}
               image={reward.imgURL}
-              points={reward.requiredPoints}
+              points={userPoints}
+              requiredPoints={reward.requiredPoints}
               prizes={reward.prizesAvailable}
             />
           ))}

src/utility/firebase.js

@@ -41,8 +41,8 @@ export const applicantsRef = dbHackathonName => {
 export const projectsRef = dbHackathonName => {
   return db.collection(DB_COLLECTION).doc(dbHackathonName).collection('Projects')
 }
-export const eventsRef = dbHackathonName => {
-  return db.collection(DB_COLLECTION).doc(dbHackathonName).collection('Events')
+export const dayOfRef = dbHackathonName => {
+  return db.collection(DB_COLLECTION).doc(dbHackathonName).collection('DayOf')
 }
 export const announcementsRef = dbHackathonName => {
   return db.collection(DB_COLLECTION).doc(dbHackathonName).collection('Announcements')
@@ -58,7 +58,7 @@ export const getLivesiteDoc = callback => {
 }
 
 export const getEvents = async dbHackathonName => {
-  return (await eventsRef(dbHackathonName).get()).docs.map(doc => doc.data())
+  return (await dayOfRef(dbHackathonName).get()).docs.map(doc => doc.data())
 }
 
 const createNewApplication = async (user, dbHackathonName) => {