Release/v0.3.0

src/App.js

@@ -17,8 +17,10 @@ import { SmallCloseIcon, HamburgerIcon } from '@chakra-ui/icons'
 import BoardgamesList from './screens/BoardgamesList'
 import RecordGame from './screens/RecordGame'
 import PlayersList from './screens/PlayersList'
-import PlayerDetails from './screens/PlayerDetails'
 import GameRecordList from './screens/GameRecordList'
+import PlayerDetails from './screens/PlayerDetails'
+import BoardgameDetails from './screens/BoardgameDetails'
+import GameRecordDetails from './screens/GameRecordDetails'
 
 function App () {
   const currentLocation = useLocation().pathname
@@ -34,7 +36,7 @@ function App () {
       linkName: 'Boardgames'
     },
     {
-      path: '/playersList',
+      path: '/playerList',
       linkName: 'Players'
     },
     {
@@ -72,6 +74,9 @@ function App () {
             <Link to={'/'}>
               <Text color="blue.700" fontSize="xl" fontWeight="black">
                 SCOREBOARD
+                <Text color="gray.500" fontSize="xs" as="kbd" >
+                  {' '}v0.2.3
+                </Text>
               </Text>
             </Link>
           </Box>
@@ -82,6 +87,9 @@ function App () {
               <Link to={'/'}>
                 <Text color="blue.700" fontSize="xl" fontWeight="black">
                   SCOREBOARD
+                  <Text color="gray.500" fontSize="xs" as="kbd" >
+                    {' '}v0.2.3
+                  </Text>
                 </Text>
               </Link>
               <IconButton
@@ -125,13 +133,23 @@ function App () {
         <Switch>
           <Route exact path={'/'} component={RecordGame} />
           <Route exact path={'/boardgameList'} component={BoardgamesList} />
-          <Route exact path={'/playersList'} component={PlayersList} />
+          <Route exact path={'/playerList'} component={PlayersList} />
           <Route exact path={'/gameRecordList'} component={GameRecordList} />
           <Route
             exact
-            path={'/playersList/:id/playerDetails'}
+            path={'/playerList/:id'}
             component={PlayerDetails}
           />
+          <Route
+            exact
+            path={'/boardgameList/:id'}
+            component={BoardgameDetails}
+          />
+          <Route
+            exact
+            path={'/gameRecordList/:id'}
+            component={GameRecordDetails}
+          />
         </Switch>
       </Container>
     </Flex>

src/components/ListCard.js/index.js

@@ -10,10 +10,12 @@ import {
 import DeleteButton from '../DeleteButton'
 import UpsertButton from '../UpsertButton'
 import PropTypes, { objectOf } from 'prop-types'
+import { Link } from 'react-router-dom'
 
 export default function ListCard ({ item, type }) {
   const { cardTitle, subContent, index, originalData } = item
   const [gray, blue] = useToken('colors', ['gray.200', 'blue.700'])
+  const baseRoute = type.toLowerCase()
   return (
       <Flex
         key={cardTitle + index}
@@ -27,7 +29,9 @@ export default function ListCard ({ item, type }) {
         borderRadius={8}
         mb="2"
       >
-        <Heading size="md" color={blue}>{cardTitle}</Heading>
+        <Link to={`/${baseRoute}List/${originalData._id}`}>
+           <Heading size="md" color={blue}>{cardTitle}</Heading>
+        </Link>
         <Text as="kbd" fontSize="xs">{originalData._id}</Text>
         <Wrap pt="2" justifyContent="space-between">
           {subContent.map((data) => (

src/components/Loader/index.js

@@ -0,0 +1,14 @@
+import { Flex } from '@chakra-ui/layout'
+import { Spinner } from '@chakra-ui/spinner'
+import React from 'react'
+
+export default function Loader () {
+  return <Flex
+            flexDirection="column"
+            alignItems="center"
+            justifyContent="center"
+            style={{ flex: 1, height: '85vh' }}
+        >
+            <Spinner size="lg"/>
+        </Flex>
+}

src/components/ModalCard/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Box, Flex, Heading, Text, Wrap } from '@chakra-ui/layout'
+
+export default function ModalCard ({ cardTitle, subContent }) {
+  return (
+    <Box
+      p={4}
+      mb={2}
+      border="1px solid lightgrey"
+      borderRadius={8}
+    >
+      <Heading fontSize='large'>{cardTitle}</Heading>
+      <Wrap justifyContent="space-between">
+        {subContent.map((item) => {
+          const { title, content } = item
+          return (
+            <Box minWidth={'30%'} key={title} display="flex" flexGrow="1">
+              <Flex flexDir="column">
+                <Text fontWeight="bold" fontSize="sm" color="grey">
+                  {title}
+                </Text>
+                <Text>{content}</Text>
+              </Flex>
+            </Box>
+          )
+        })}
+      </Wrap>
+    </Box>
+  )
+}

src/graphql/operations.js

@@ -71,6 +71,31 @@ export const READ_RECORDS = gql`
   }
 `
 
+export const READ_PLAYER_RECORDS = gql`
+  query readBoardgameRecords($_id: ObjectId) {
+    gameRecords(query: {players: {_id: $_id}} sortBy: DATE_DESC) {
+      players {
+        _id
+        firstName
+        lastName
+        score
+      }
+      date
+      boardgamePlayed{
+        _id
+        name
+        expansionsOwned
+      }
+      expansionsPlayed
+    }
+    player(query: {_id: $_id}){
+      _id
+      firstName
+      lastName
+    }
+  }
+`
+
 export const READ_BOARDGAME_RECORDS = gql`
   query readBoardgameRecords($_id: ObjectId) {
     gameRecords(query: {_id: $_id} sortBy: DATE_DESC) {

src/index.js

@@ -14,7 +14,9 @@ import { BrowserRouter, HashRouter } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
 
 dotenv.config()
-const APP_ID = 'scoreboard-vvnfl'
+// REMEMBER change this when deploying
+const APP_ID = 'scoreboard-dev-ubvpl'
+
 // const APP_ID = process.env.APP_ID;
 // const API_KEY = process.env.MONGODB_GRAPHQL_API_KEY;
 const app = new Realm.App(APP_ID)

src/screens/BoardgameDetails/index.js

@@ -0,0 +1,6 @@
+import { Box } from '@chakra-ui/layout'
+import React from 'react'
+
+export default function BoardgameDetails () {
+  return <Box/>
+}

src/screens/GameRecordDetails/index.js

@@ -0,0 +1,6 @@
+import { Box } from '@chakra-ui/layout'
+import React from 'react'
+
+export default function GameRecordDetails () {
+  return <Box/>
+}

src/screens/PlayerDetails/index.js

@@ -1,7 +1,81 @@
+import { useQuery } from '@apollo/client'
+import { Flex, Box, Text, Heading } from '@chakra-ui/react'
 import React from 'react'
+import { useLocation } from 'react-router'
+import Loader from '../../components/Loader'
+import ModalCard from '../../components/ModalCard'
+import { READ_PLAYER_RECORDS } from '../../graphql/operations'
 
 function PlayerDetails () {
-  return <div className="App">Player Details</div>
+  const location = useLocation()
+  const currentId = location.pathname.split('/playerList/').pop('')
+  const { loading, data } = useQuery(READ_PLAYER_RECORDS, {
+    variables: { _id: currentId }
+  })
+
+  if (loading || !data) {
+    return <Loader />
+  }
+  const { player } = data
+  const gameRecords = [...data.gameRecords]
+
+  gameRecords.sort((a, b) => {
+    return a.boardgamePlayed.name > b.boardgamePlayed.name ? 1 : -1
+  })
+
+  const gameRecordsByBoardgame = [[]]
+  gameRecords.forEach((record, index) => {
+    gameRecordsByBoardgame[gameRecordsByBoardgame.length - 1].push(record)
+    gameRecords[index + 1] &&
+      record.boardgamePlayed.name !==
+        gameRecords[index + 1].boardgamePlayed.name &&
+      gameRecordsByBoardgame.push([])
+  })
+
+  const dateOptions = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric'
+  }
+  const dateFormat = new Intl.DateTimeFormat('en-US', dateOptions)
+
+  const findByKeyValue = (value, key, object) => {
+    return object[object.findIndex((obj) => obj[key] === value)]
+  }
+
+  return (
+    <Box>
+      <Heading>
+        {player.firstName} {player.lastName}
+      </Heading>
+      <Text as="kbd" fontSize="xs">
+        {player._id}
+      </Text>
+      <Heading fontSize="lg" mt={8} mb={2}>
+        Boardgames Played
+      </Heading>
+      {gameRecordsByBoardgame.map((recordGroup, index) => {
+        const { _id, name } = recordGroup[index].boardgamePlayed
+        let avgScore = 0
+        let highScore = 0
+        recordGroup.forEach((record) => {
+          const myRecord = findByKeyValue(player._id, '_id', record.players)
+          const myScore = parseInt(myRecord.score)
+          avgScore = avgScore + myScore
+          highScore = myScore > highScore ? myScore : highScore
+        })
+        avgScore = Math.round(avgScore / recordGroup.length * 10) / 10
+
+        const subContent = [
+          { title: 'Times Played', content: recordGroup.length },
+          { title: 'High Score', content: avgScore },
+          { title: 'Avg Score', content: highScore },
+          { title: 'Last Played', content: dateFormat.format(new Date(recordGroup[0].date)) }
+        ]
+        return <ModalCard key={_id} subContent={subContent} cardTitle={name} />
+      })}
+    </Box>
+  )
 }
 
 export default PlayerDetails

src/screens/RecordGame/index.js

@@ -74,6 +74,8 @@ function RecordGame () {
         )
       })
     )
+    // need to figure out other ways to clear form
+    // location.reload()
   }
 
   if (!data || loading) {