Merge pull request #628 from nwplus/erping/rewards

Erping/rewards

src/components/Rewards/TotalPoints.jsx

@@ -0,0 +1,69 @@
+import styled from 'styled-components'
+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 TotalPointsCard = styled.div`
+  background: ${p => p.theme.colors.backgroundTertiary};
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: center;
+  padding-left: 29px;
+  border-radius: 5px;
+  width: 302px;
+  height: 113px;
+`
+
+const PointsTitle = styled.div`
+  color: ${p => p.theme.colors.textSecondary};
+  font-size: 18px;
+  font-weight: 700;
+`
+
+const PointsValue = styled.div`
+  color: ${p => p.theme.colors.highlight};
+  font-size: 40px;
+  font-weight: 700;
+`
+
+const TotalPoints = ({ userDetails }) => {
+  const { dbHackathonName } = useHackathon()
+  const [name, setName] = useState('')
+  const [totalPoints, setTotalPoints] = useState(0)
+
+  useEffect(() => {
+    ;(async () => {
+      if (userDetails && dbHackathonName) {
+        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}`)
+        setTotalPoints(
+          filteredEvents.reduce((accumulator, event) => {
+            return accumulator + parseInt(event.points)
+          }, 0)
+        )
+      }
+    })()
+  }, [userDetails, dbHackathonName])
+
+  return (
+    <div>
+      <TotalPointsName>{name}</TotalPointsName>
+      <TotalPointsCard>
+        <PointsTitle>TOTAL POINTS</PointsTitle>
+        <PointsValue>{totalPoints.toLocaleString()} pts</PointsValue>
+      </TotalPointsCard>
+    </div>
+  )
+}
+
+export default TotalPoints

src/containers/Rewards.jsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import TotalPoints from '../components/Rewards/TotalPoints'
 import AttendedEvents from '../components/Rewards/AttendedEvents'
 import { useAuth } from '../utility/Auth'
 import { getUserApplication } from '../utility/firebase'
@@ -39,6 +40,7 @@ const Rewards = () => {
   return (
     <RewardsContainer>
       <RewardsSummaryContainer>
+        <TotalPoints userDetails={userDetails} />
         <AttendedEvents userDetails={userDetails} />
       </RewardsSummaryContainer>
       <RewardsContentContainer></RewardsContentContainer>