From a63c90c1160cdaafbf35c98b50523fbf19a008a5 Mon Sep 17 00:00:00 2001 From: Justin Eder Date: Fri, 29 Jan 2021 11:51:11 -0600 Subject: [PATCH 1/5] Adding players table and summary --- src/App.js | 72 +++++++++++++++++++++++++++++++++++++--- src/players.constants.js | 36 ++++++++++++++++++++ src/players.utils.js | 3 ++ 3 files changed, 107 insertions(+), 4 deletions(-) create mode 100644 src/players.constants.js create mode 100644 src/players.utils.js diff --git a/src/App.js b/src/App.js index 265a516..3caa0c5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,81 @@ -import React from 'react'; +import React, { useState, useMemo } from 'react'; import players from './_players.json'; +import { PLAYER_TABLE_DISPLAY_LIMIT, playersTableColumns } from './players.constants.js' +import { paginatePlayerTableItems } from './players.utils.js' const App = () => { + const [displayIndex, setDisplayIndex] = useState(0); + const [playerSummary, setPlayerSummary] = useState(null); + + // Memoized to prevent re-running calculation when selecting a player summary to view + const playersToDisplay = useMemo( + () => paginatePlayerTableItems(players, displayIndex, PLAYER_TABLE_DISPLAY_LIMIT), + [displayIndex] + ); + + const isFirstPage = displayIndex === 0; + const isLastPage = displayIndex >= players.length - PLAYER_TABLE_DISPLAY_LIMIT; + return (
+
+

Players Table

+

{`Displaying ${displayIndex + 1}-${isLastPage ? players.length : displayIndex + PLAYER_TABLE_DISPLAY_LIMIT} of ${players.length} players`}

+
+ + - + - - + {playersTableColumns.map(header => )} + + + {playersToDisplay.map(player => { + return ( + setPlayerSummary(player)}> + {playersTableColumns.map(header => )} + + ) + })}
helloworld{header.display}
{player[header.key]}
+
+

Player Summary

+ +
+ {playerSummary ? + <> +
+ +
+

{`${playerSummary.nameFirst} ${playerSummary.nameLast} -- ${playerSummary.organization}`}

+

{`${playerSummary.nameFirst} is ${playerSummary.age}-year-old, ${playerSummary.handedness.toLowerCase()} handed, and plays the ${playerSummary.position.toLowerCase()} position.`}

+
+
+
+

Contact

+

{`Phone: ${playerSummary.phone}`}

+

{`Email: ${playerSummary.email}`}

+
+ + : +

--no player selected--

+ } +
+
); } diff --git a/src/players.constants.js b/src/players.constants.js new file mode 100644 index 0000000..4911601 --- /dev/null +++ b/src/players.constants.js @@ -0,0 +1,36 @@ +export const PLAYER_TABLE_DISPLAY_LIMIT = 10 + +export const playersTableColumns = [ + { + display: 'First Name', + key: 'nameFirst', + }, + { + display: 'Last Name', + key: 'nameLast', + }, + { + display: 'Image', + key: 'picture', + }, + { + display: 'Email', + key: 'email', + }, + { + display: 'Phone', + key: 'phone', + }, + { + display: 'Organization', + key: 'organization', + }, + { + display: 'Position', + key: 'organization', + }, + { + display: 'Handedness', + key: 'organization', + } +] \ No newline at end of file diff --git a/src/players.utils.js b/src/players.utils.js new file mode 100644 index 0000000..e08827b --- /dev/null +++ b/src/players.utils.js @@ -0,0 +1,3 @@ +export const paginatePlayerTableItems = (totalItems, startingIndex, displayAmount) => { + return totalItems.slice(startingIndex, startingIndex + displayAmount) +} \ No newline at end of file From dd8f1001a9c6bb70bb4cf77d7ade7a98dce170f1 Mon Sep 17 00:00:00 2001 From: Justin Eder Date: Fri, 29 Jan 2021 11:51:30 -0600 Subject: [PATCH 2/5] Updating test requirement typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 05bc534..f460654 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ This repository should be fairly simple to get running locally if you have exper - once you have navigated passed the first page, there should be a 'previous' button - once you have reached the last page, two things should happen - the 'next' button should disappear or disable - - the table should contain the remaining player records (there should be 96 records in the file, so 6 results are expected) + - the table should contain the remaining player records (there should be 95 records in the file, so 5 results are expected) - clicking on a row in the table should show that players data in a summary view somewhere on the page - finally: submit a **pull request** From 8c8d934520c179556ef442cee0846ccd8a8993d7 Mon Sep 17 00:00:00 2001 From: Justin Eder Date: Fri, 29 Jan 2021 11:54:56 -0600 Subject: [PATCH 3/5] Fixing column keys --- src/players.constants.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/players.constants.js b/src/players.constants.js index 4911601..7bdb52d 100644 --- a/src/players.constants.js +++ b/src/players.constants.js @@ -27,10 +27,10 @@ export const playersTableColumns = [ }, { display: 'Position', - key: 'organization', + key: 'position', }, { display: 'Handedness', - key: 'organization', + key: 'handedness', } ] \ No newline at end of file From b0203b3562bc2f9c1cd0dc9d8afce946b463a2b3 Mon Sep 17 00:00:00 2001 From: Justin Eder Date: Fri, 29 Jan 2021 12:27:18 -0600 Subject: [PATCH 4/5] Cleaning up image and table columns --- src/App.js | 6 +++++- src/players.constants.js | 26 +++++++++++++------------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index 3caa0c5..79b51b5 100644 --- a/src/App.js +++ b/src/App.js @@ -44,7 +44,11 @@ const App = () => { {playersToDisplay.map(player => { return ( setPlayerSummary(player)}> - {playersTableColumns.map(header => {player[header.key]})} + {playersTableColumns.map(header => { + return header.key === 'picture' ? + : + {player[header.key]} + })} ) })} diff --git a/src/players.constants.js b/src/players.constants.js index 7bdb52d..f2137c2 100644 --- a/src/players.constants.js +++ b/src/players.constants.js @@ -2,24 +2,16 @@ export const PLAYER_TABLE_DISPLAY_LIMIT = 10 export const playersTableColumns = [ { - display: 'First Name', - key: 'nameFirst', - }, - { - display: 'Last Name', - key: 'nameLast', - }, - { - display: 'Image', + display: '', key: 'picture', }, { - display: 'Email', - key: 'email', + display: 'First', + key: 'nameFirst', }, { - display: 'Phone', - key: 'phone', + display: 'Last', + key: 'nameLast', }, { display: 'Organization', @@ -32,5 +24,13 @@ export const playersTableColumns = [ { display: 'Handedness', key: 'handedness', + }, + { + display: 'Email', + key: 'email', + }, + { + display: 'Phone', + key: 'phone', } ] \ No newline at end of file From c3ff9a7296348a5f6fa0988d4a48456dfbc4a676 Mon Sep 17 00:00:00 2001 From: Justin Eder Date: Fri, 29 Jan 2021 13:54:27 -0600 Subject: [PATCH 5/5] Adding React keys and alt text --- src/App.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 79b51b5..5b34c32 100644 --- a/src/App.js +++ b/src/App.js @@ -37,17 +37,17 @@ const App = () => { - {playersTableColumns.map(header => )} + {playersTableColumns.map(header => )} {playersToDisplay.map(player => { return ( - setPlayerSummary(player)}> + setPlayerSummary(player)}> {playersTableColumns.map(header => { return header.key === 'picture' ? - : - + : + })} ) @@ -63,7 +63,7 @@ const App = () => { {playerSummary ? <>
- + player

{`${playerSummary.nameFirst} ${playerSummary.nameLast} -- ${playerSummary.organization}`}

{`${playerSummary.nameFirst} is ${playerSummary.age}-year-old, ${playerSummary.handedness.toLowerCase()} handed, and plays the ${playerSummary.position.toLowerCase()} position.`}

{header.display}{header.display}
{player[header.key]}player{player[header.key]}