From 62dd73bd0192852a23d81c4366a5260b5da89b3b Mon Sep 17 00:00:00 2001 From: barel-mishal Date: Wed, 15 May 2024 17:10:38 +0300 Subject: [PATCH 1/7] chore: Refactor LeaderboardPage and add Image component for member avatars --- components/Leaderboard/Leaderboard.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index f46af03..b017dab 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -1,8 +1,9 @@ import { Analitycs } from '@/app/[locale]/leaderboard/getData'; +import Image from 'next/image'; const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { return ( -
+

Leaderboard

{props.leaderboard.until} @@ -11,7 +12,13 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => {

{props.leaderboard.members.map(data => { return ( -
+
+ +
+ {data.name} +
{data.name}
+
+
{data.name}
From e8c7d921c05cfd3c4e53cf07cea328223978eaba Mon Sep 17 00:00:00 2001 From: barel-mishal Date: Wed, 15 May 2024 20:29:38 +0300 Subject: [PATCH 2/7] leader-board design --- components/Leaderboard/Leaderboard.tsx | 96 ++++++++++++++++++-------- 1 file changed, 66 insertions(+), 30 deletions(-) diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index b017dab..de7d3b2 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -1,39 +1,75 @@ import { Analitycs } from '@/app/[locale]/leaderboard/getData'; +import { Code2, Feather, StarIcon } from 'lucide-react'; import Image from 'next/image'; const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { + const since = new Date(props.leaderboard.since); + const until = new Date(props.leaderboard.until); + const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + const bigScreenFormatter = new Intl.DateTimeFormat('en-US', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + }); + +const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + }); + const datesText = { + since: bigScreenFormatter.format(since), + until: bigScreenFormatter.format(until), + smallSince: smallScreenFormatter.format(since), + smallUntil: smallScreenFormatter.format(until), + } + return ( -
-

Leaderboard

-

- {props.leaderboard.until} - {props.leaderboard.since} -

-
- {props.leaderboard.members.map(data => { +
+
+
+

Leaderboard

+

+ {datesText.since} - {datesText.until} +

+
+ {props.leaderboard.members.map((data, ind) => { return ( -
- -
- {data.name} -
{data.name}
-
- -
{data.name}
-
-
- {data.stats.additions} - ++ -
-
- {data.stats.deletions} - -- +
+ {data.name} +
+ + {data.name}
{data.score}
{ind+1}#
+ +
+
+
+ {data.stats.additions} + ++ +
+
+ {data.stats.deletions} + -- +
+
+
+ Coomit + {data.stats.commits} +
+
-
-
- Coomit - {data.stats.commits} -
); })} @@ -42,4 +78,4 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { ); }; -export default LeaderboardPage; +export default LeaderboardPage; \ No newline at end of file From cd8898820eec1898ad5dbe99c0695d40f4aef58c Mon Sep 17 00:00:00 2001 From: barel-mishal Date: Wed, 15 May 2024 23:49:03 +0300 Subject: [PATCH 3/7] chore: Refactor LeaderboardPage, improve date formatting, and optimize code --- components/Leaderboard/Leaderboard.tsx | 87 +++++++++++++++----------- 1 file changed, 51 insertions(+), 36 deletions(-) diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index de7d3b2..262483e 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -5,7 +5,12 @@ import Image from 'next/image'; const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { const since = new Date(props.leaderboard.since); const until = new Date(props.leaderboard.until); - const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + const options = { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + }; const bigScreenFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', @@ -13,7 +18,7 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { day: 'numeric', }); -const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { + const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', @@ -23,12 +28,12 @@ const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { until: bigScreenFormatter.format(until), smallSince: smallScreenFormatter.format(since), smallUntil: smallScreenFormatter.format(until), - } + }; return ( -
+
-
+

Leaderboard

{datesText.since} - {datesText.until} @@ -36,40 +41,50 @@ const smallScreenFormatter = new Intl.DateTimeFormat('en-US', {

{props.leaderboard.members.map((data, ind) => { return ( -
- {data.name} -
- - {data.name}
{data.score}
{ind+1}#
- -
-
-
- {data.stats.additions} - ++ -
-
- {data.stats.deletions} - -- -
+
+ {data.name} +
+ + + {data.name} + +
+
{data.score}
+ + {ind + 1}# +
+ +
+
+
+ {data.stats.additions} + ++
-
- Coomit - {data.stats.commits} +
+ {data.stats.deletions} + --
+
+ Coomit + {data.stats.commits} +
+
); })} @@ -78,4 +93,4 @@ const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { ); }; -export default LeaderboardPage; \ No newline at end of file +export default LeaderboardPage; From 9977edfdd95c27b14fa7e6ea0e6a15646d675cb6 Mon Sep 17 00:00:00 2001 From: barel-mishal Date: Thu, 16 May 2024 00:03:59 +0300 Subject: [PATCH 4/7] first place --- components/Leaderboard/Leaderboard.tsx | 157 ++++++++++++++++--------- 1 file changed, 100 insertions(+), 57 deletions(-) diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index 262483e..8760dd8 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -5,12 +5,7 @@ import Image from 'next/image'; const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { const since = new Date(props.leaderboard.since); const until = new Date(props.leaderboard.until); - const options = { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric', - }; + const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const bigScreenFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', @@ -18,7 +13,7 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { day: 'numeric', }); - const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { +const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', @@ -28,64 +23,26 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { until: bigScreenFormatter.format(until), smallSince: smallScreenFormatter.format(since), smallUntil: smallScreenFormatter.format(until), - }; + } + const firstPlace = props.leaderboard.members[0]; + const secondPlace = props.leaderboard.members[1]; + const thirdPlace = props.leaderboard.members[2]; return ( -
-
-
+
+
+

Leaderboard

{datesText.since} - {datesText.until}

- {props.leaderboard.members.map((data, ind) => { + + + + {props.leaderboard.members.slice(3, -1).map((data, ind) => { return ( -
- {data.name} -
- - - {data.name} - -
-
{data.score}
- - {ind + 1}# -
- -
-
-
- {data.stats.additions} - ++ -
-
- {data.stats.deletions} - -- -
-
-
- Coomit - {data.stats.commits} -
-
-
-
+ ); })}
@@ -94,3 +51,89 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { }; export default LeaderboardPage; + +export const DisplayPerson = ({data, place}) => { + return ( +
+ {data.name} +
+ + {data.name}
{data.score}
{place}#
+ +
+
+
+ {data.stats.additions} + ++ +
+
+ {data.stats.deletions} + -- +
+
+
+ Coomit + {data.stats.commits} +
+
+
+
+ ) +} + +export const FirstPlacePerson = ({data, place}) => { + return ( +
+ {data.name} +
+ + + {data.name} + +
+
{data.score}
+ {place}# +
+ +
+
+
+ {data.stats.additions} + ++ +
+
+ {data.stats.deletions} + -- +
+
+
+ Coomit + {data.stats.commits} +
+
+
+
+ ) +} \ No newline at end of file From ca9f3e80cbc0bf86ec13bfcbe5b5328fdf800482 Mon Sep 17 00:00:00 2001 From: barel-mishal Date: Thu, 16 May 2024 00:06:22 +0300 Subject: [PATCH 5/7] Refactor LeaderboardPage, improve date formatting, and optimize code --- components/Leaderboard/Leaderboard.tsx | 189 ++++++++++++++----------- 1 file changed, 104 insertions(+), 85 deletions(-) diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index 8760dd8..1c14c48 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -5,7 +5,12 @@ import Image from 'next/image'; const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { const since = new Date(props.leaderboard.since); const until = new Date(props.leaderboard.until); - const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + const options = { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + }; const bigScreenFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', @@ -13,7 +18,7 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { day: 'numeric', }); -const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { + const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', @@ -23,15 +28,15 @@ const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { until: bigScreenFormatter.format(until), smallSince: smallScreenFormatter.format(since), smallUntil: smallScreenFormatter.format(until), - } + }; const firstPlace = props.leaderboard.members[0]; const secondPlace = props.leaderboard.members[1]; const thirdPlace = props.leaderboard.members[2]; return ( -
+
-
+

Leaderboard

{datesText.since} - {datesText.until} @@ -52,88 +57,102 @@ const smallScreenFormatter = new Intl.DateTimeFormat('en-US', { export default LeaderboardPage; -export const DisplayPerson = ({data, place}) => { +interface PersonPlace {data: Analitycs["members"][number], place: number} + +export const DisplayPerson: React.FC = ({ data, place }) => { return ( -

- {data.name} -
- - {data.name}
{data.score}
{place}#
- -
-
-
- {data.stats.additions} - ++ -
-
- {data.stats.deletions} - -- -
-
-
- Coomit - {data.stats.commits} -
-
-
+
+ {data.name} +
+ + {data.name} +
+
{data.score}
+ + {place}# +
+ +
+
+
+ {data.stats.additions} + ++
- ) -} +
+ {data.stats.deletions} + -- +
+
+
+ Coomit + {data.stats.commits} +
+
+
+
+ ); +}; -export const FirstPlacePerson = ({data, place}) => { +export const FirstPlacePerson: React.FC = ({ data, place }) => { return ( -
- {data.name} -
- - - {data.name} - -
-
{data.score}
- {place}# -
- -
-
-
- {data.stats.additions} - ++ -
-
- {data.stats.deletions} - -- -
-
-
- Coomit - {data.stats.commits} -
-
-
+
+ {data.name} +
+ + + {data.name} + +
+
{data.score}
+ + {place}# +
+ +
+
+
+ {data.stats.additions} + ++
- ) -} \ No newline at end of file +
+ {data.stats.deletions} + -- +
+
+
+ Coomit + {data.stats.commits} +
+
+
+
+ ); +}; From b2bfbbff267857de7a57867905c4f0b9f11a5d64 Mon Sep 17 00:00:00 2001 From: barel-mishal Date: Thu, 16 May 2024 10:30:12 +0300 Subject: [PATCH 6/7] make --- app/[locale]/leaderboard/getData.ts | 6 +++++- components/Leaderboard/Leaderboard.tsx | 5 ++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/[locale]/leaderboard/getData.ts b/app/[locale]/leaderboard/getData.ts index d1d22ac..ef41bbf 100644 --- a/app/[locale]/leaderboard/getData.ts +++ b/app/[locale]/leaderboard/getData.ts @@ -1,5 +1,7 @@ +export const LEADERBOARD_ROUTE = 'https://baas-data-provider.onrender.com/leaderboard'; // If you want to use local server use 'http://localhost:8080/leaderboard' + export async function getData() { - const res = await fetch('http://localhost:8080/leaderboard', { + const res = await fetch(LEADERBOARD_ROUTE, { cache: 'no-store', }); @@ -9,6 +11,8 @@ export async function getData() { }; } + + export type Analitycs = { members: { name: string; diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index 1c14c48..fa48f23 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -57,7 +57,10 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => { export default LeaderboardPage; -interface PersonPlace {data: Analitycs["members"][number], place: number} +interface PersonPlace { + data: Analitycs['members'][number]; + place: number; +} export const DisplayPerson: React.FC = ({ data, place }) => { return ( From 791f824e9f70bda769f4e684d562d862d2ba87b7 Mon Sep 17 00:00:00 2001 From: barel-mishal Date: Thu, 16 May 2024 10:41:28 +0300 Subject: [PATCH 7/7] sort from frontend --- app/[locale]/leaderboard/getData.ts | 5 ++--- app/[locale]/leaderboard/page.tsx | 2 ++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/[locale]/leaderboard/getData.ts b/app/[locale]/leaderboard/getData.ts index ef41bbf..ce159bd 100644 --- a/app/[locale]/leaderboard/getData.ts +++ b/app/[locale]/leaderboard/getData.ts @@ -1,4 +1,5 @@ -export const LEADERBOARD_ROUTE = 'https://baas-data-provider.onrender.com/leaderboard'; // If you want to use local server use 'http://localhost:8080/leaderboard' +export const LEADERBOARD_ROUTE = + 'https://baas-data-provider.onrender.com/leaderboard'; // If you want to use local server use 'http://localhost:8080/leaderboard' export async function getData() { const res = await fetch(LEADERBOARD_ROUTE, { @@ -11,8 +12,6 @@ export async function getData() { }; } - - export type Analitycs = { members: { name: string; diff --git a/app/[locale]/leaderboard/page.tsx b/app/[locale]/leaderboard/page.tsx index c5c7265..18c87ac 100644 --- a/app/[locale]/leaderboard/page.tsx +++ b/app/[locale]/leaderboard/page.tsx @@ -26,6 +26,8 @@ export const metadata: Metadata = { const LeaderboardPage: React.FC = async () => { const data = await getData(); + data.props.leaderboard.members.sort((a, b) => b.score - a.score); + return (