From f91a90554975d7590605d13cef77b3521aa9f963 Mon Sep 17 00:00:00 2001 From: roi Date: Fri, 17 May 2024 14:35:45 +0300 Subject: [PATCH 1/3] add lightmode darkmode and traslation --- app/[locale]/leaderboard/page.tsx | 44 +++++++++++--- components/Leaderboard/LeaderBoardChart.tsx | 60 +++++++++++++++++++ components/Leaderboard/Monthly.tsx | 64 +++++++++++++++++++++ components/Leaderboard/Weekly.tsx | 38 ++++++++++++ components/Leaderboard/type.ts | 37 ++++++++++++ public/locales/en.json | 5 ++ public/locales/he.json | 5 ++ 7 files changed, 246 insertions(+), 7 deletions(-) create mode 100644 components/Leaderboard/LeaderBoardChart.tsx create mode 100644 components/Leaderboard/Monthly.tsx create mode 100644 components/Leaderboard/Weekly.tsx create mode 100644 components/Leaderboard/type.ts diff --git a/app/[locale]/leaderboard/page.tsx b/app/[locale]/leaderboard/page.tsx index 18c87ac..23c3a54 100644 --- a/app/[locale]/leaderboard/page.tsx +++ b/app/[locale]/leaderboard/page.tsx @@ -1,6 +1,11 @@ import { Metadata } from 'next'; +import { use } from 'react'; +import LeaderBoardChart from '@/components/LeaderBoard/LeaderBoardChart' +import Monthly from '@/components/LeaderBoard/Monthly' +import Weekly from '@/components/LeaderBoard/Weekly' import { getData } from './getData'; -import Leaderboard from '@/components/Leaderboard/Leaderboard'; +import { useTranslations } from 'next-intl'; +import useTextDirection from '@/hooks/useTextDirection'; export const metadata: Metadata = { title: 'לוח מובילים - Leaderboard', @@ -23,16 +28,41 @@ export const metadata: Metadata = { }, }; -const LeaderboardPage: React.FC = async () => { - const data = await getData(); +const LeaderboardPage: React.FC = () => { + const leaderboard = use(getData()); + const t=useTranslations("LeaderBoard") + const direction=useTextDirection() + + + - data.props.leaderboard.members.sort((a, b) => b.score - a.score); return ( -
- -
+
+
+

{t("MonthlyTitle")}

+ +

{t("WeeklyTitle")}

+ +
+
+

{t('AllTimesTitle')}

+ +
+
); }; export default LeaderboardPage; + +/* +TODO: Create a the page ui for the leaderboard +TODO: Database for the leaderboard +TODO: interface for the leaderboard +TODO: loop through the github users +TODO: +TODO: +TODO: +TODO: +*/ +//add UI translate diff --git a/components/Leaderboard/LeaderBoardChart.tsx b/components/Leaderboard/LeaderBoardChart.tsx new file mode 100644 index 0000000..3dd1c0f --- /dev/null +++ b/components/Leaderboard/LeaderBoardChart.tsx @@ -0,0 +1,60 @@ +import useTextDirection from '@/hooks/useTextDirection'; +import { use } from 'react'; +import { getData } from '@/app/[locale]/leaderboard/getData'; +export default function LeaderBoardChart() { + const leaderBoardData = use(getData()); + + const direction = useTextDirection(); + + return ( +
+ {leaderBoardData.props.leaderboard.members.map((contributor, place) => { + const pathDevelp = contributor + + return ( +
+
+ #{place + 1} + +
+ + {pathDevelp.name} + + + {pathDevelp.stats.commits} commits + + + score:{pathDevelp.score}{' '} + +
+
+ + {pathDevelp.stats.commits} commits + + + {pathDevelp.stats.additions}++ + + + {pathDevelp.stats.deletions}-- + +
+ ); + })} +
+ ); +} diff --git a/components/Leaderboard/Monthly.tsx b/components/Leaderboard/Monthly.tsx new file mode 100644 index 0000000..49fa37c --- /dev/null +++ b/components/Leaderboard/Monthly.tsx @@ -0,0 +1,64 @@ +import { getData } from '@/app/[locale]/leaderboard/getData'; +import useTextDirection from '@/hooks/useTextDirection'; +import React from 'react'; +import { use } from 'react'; +export default function Monthly() { + const leaderBoardData = use(getData()); + + + const Monthly = leaderBoardData.props.leaderboard.members[leaderBoardData.props.leaderboard.members.length - 1]; + const direction = useTextDirection(); + + + return ( +
+
+
+ name:{Monthly.name} + + additions: + {Monthly.stats.additions} + + + deletions: + {Monthly.stats.deletions} + + score:{Monthly.score} +
+ opps +
+

projects

+
+ {Monthly.projects_names.map((project, index) => { + return ( + + {project.name} + + ); + })} +
+
+ ); +} + +// Dark Mode Colors +// darkBg: colors.slate[950], +// darkAccBg: colors.slate[800], +// lightText: colors.slate[50], +// discordDark: colors.white, + +// lightBg: colors.slate[100], +// lightAccBg: colors.indigo[100], +// darkText: colors.slate[950], +// discordLight: colors.indigo[400], diff --git a/components/Leaderboard/Weekly.tsx b/components/Leaderboard/Weekly.tsx new file mode 100644 index 0000000..86c08a7 --- /dev/null +++ b/components/Leaderboard/Weekly.tsx @@ -0,0 +1,38 @@ +import useTextDirection from '@/hooks/useTextDirection'; +import { use } from 'react'; +import { getData } from '@/app/[locale]/leaderboard/getData'; +export default function Weekly() { + const direction = useTextDirection(); + const leaderBoardData = use(getData()); + const Weekly = leaderBoardData.props.leaderboard.members[leaderBoardData.props.leaderboard.members.length-1]; + console.log(leaderBoardData.props.leaderboard); + + return ( +
+
+
+ name:{Weekly.name} + + + additions: + {Weekly.stats.additions} + + + deletions:{' '} + {Weekly.stats.deletions} + + commits:{Weekly.stats.commits} + score:{Weekly.score} +
+ +
+
+ ); +} diff --git a/components/Leaderboard/type.ts b/components/Leaderboard/type.ts new file mode 100644 index 0000000..5415ce5 --- /dev/null +++ b/components/Leaderboard/type.ts @@ -0,0 +1,37 @@ +export type Welcome = { + data: Data; +}; + +export type Data = { + data?: Array>; + since?: Date; + until?: Date; +}; + +export type DatumClass = { + name?: string; + nodeID?: string; + projectsNames?: ProjectsName[]; + avatarURL?: string; + score?: number; + stats?: Stats; +}; + +export type ProjectsName = { + url?: URL; + name?: Name; +}; + +export enum Name { + MaakafWebsite = 'maakaf-website', +} + +export enum URL { + MaakafMaakafWebsite = 'maakaf/maakaf-website', +} + +export type Stats = { + additions?: number; + deletions?: number; + commits?: number; +}; diff --git a/public/locales/en.json b/public/locales/en.json index 9bae24b..adee727 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -132,6 +132,11 @@ "thirdOption": "Third option", "noMemberFound": "No Member found" }, + "LeaderBoard":{ + "MonthlyTitle":"Monthly Score", + "WeeklyTitle":"Weekly Score", + "AllTimesTitle":"All Times Score" + }, "Components": { "home": { "quotes": { diff --git a/public/locales/he.json b/public/locales/he.json index a6bd4ba..74ca555 100644 --- a/public/locales/he.json +++ b/public/locales/he.json @@ -145,6 +145,11 @@ "thirdOption": "אופציה שלישית", "noMemberFound": "המשתמש לא נמצא" }, + "LeaderBoard": { + "MonthlyTitle": "מצטיין חודשי", + "WeeklyTitle": "מצטיין שבועי", + "AllTimesTitle": "כל הזמנים" + }, "Components": { "home": { "quotes": { From 77397e3dd6bd40de9c5e07b57167b971b1c17696 Mon Sep 17 00:00:00 2001 From: roi Date: Fri, 17 May 2024 14:47:12 +0300 Subject: [PATCH 2/3] fix erorr --- app/[locale]/leaderboard/page.tsx | 42 ++++++++++++++------- components/Leaderboard/LeaderBoardChart.tsx | 5 +-- components/Leaderboard/Leaderboard.tsx | 8 ++-- components/Leaderboard/Monthly.tsx | 9 +++-- components/Leaderboard/Weekly.tsx | 7 +++- public/locales/en.json | 8 ++-- 6 files changed, 48 insertions(+), 31 deletions(-) diff --git a/app/[locale]/leaderboard/page.tsx b/app/[locale]/leaderboard/page.tsx index 23c3a54..393d1ea 100644 --- a/app/[locale]/leaderboard/page.tsx +++ b/app/[locale]/leaderboard/page.tsx @@ -1,11 +1,11 @@ import { Metadata } from 'next'; import { use } from 'react'; -import LeaderBoardChart from '@/components/LeaderBoard/LeaderBoardChart' -import Monthly from '@/components/LeaderBoard/Monthly' -import Weekly from '@/components/LeaderBoard/Weekly' import { getData } from './getData'; import { useTranslations } from 'next-intl'; import useTextDirection from '@/hooks/useTextDirection'; +import Monthly from '@/components/Leaderboard/Monthly'; +import Weekly from '@/components/Leaderboard/Weekly'; +import LeaderBoardChart from '@/components/Leaderboard/LeaderBoardChart'; export const metadata: Metadata = { title: 'לוח מובילים - Leaderboard', @@ -30,23 +30,37 @@ export const metadata: Metadata = { const LeaderboardPage: React.FC = () => { const leaderboard = use(getData()); - const t=useTranslations("LeaderBoard") - const direction=useTextDirection() - - - - + const t = useTranslations('LeaderBoard'); + const direction = useTextDirection(); return (
-
-

{t("MonthlyTitle")}

+
+

+ {t('MonthlyTitle')}{' '} +

-

{t("WeeklyTitle")}

+

+ {t('WeeklyTitle')}{' '} +

-

{t('AllTimesTitle')}

+

+ {t('AllTimesTitle')}{' '} +

@@ -65,4 +79,4 @@ TODO: TODO: TODO: */ -//add UI translate +//add UI translate diff --git a/components/Leaderboard/LeaderBoardChart.tsx b/components/Leaderboard/LeaderBoardChart.tsx index 3dd1c0f..0357742 100644 --- a/components/Leaderboard/LeaderBoardChart.tsx +++ b/components/Leaderboard/LeaderBoardChart.tsx @@ -5,18 +5,17 @@ export default function LeaderBoardChart() { const leaderBoardData = use(getData()); const direction = useTextDirection(); - + return (
{leaderBoardData.props.leaderboard.members.map((contributor, place) => { - const pathDevelp = contributor + const pathDevelp = contributor; return (
diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index 8f10904..f472156 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -101,7 +101,7 @@ export const DisplayPerson: React.FC = ({ data, place }) => {
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( = ({
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( = ({ data, place }) => {
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( = ({ data, place }) => {
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( Date: Fri, 17 May 2024 16:27:39 +0300 Subject: [PATCH 3/3] add translate and reverse array Alltimes --- components/Leaderboard/LeaderBoardChart.tsx | 11 +++---- components/Leaderboard/Monthly.tsx | 32 +++++++++++++++------ components/Leaderboard/Weekly.tsx | 32 +++++++++++++-------- public/locales/en.json | 3 +- public/locales/he.json | 3 +- 5 files changed, 53 insertions(+), 28 deletions(-) diff --git a/components/Leaderboard/LeaderBoardChart.tsx b/components/Leaderboard/LeaderBoardChart.tsx index 0357742..3c8ca94 100644 --- a/components/Leaderboard/LeaderBoardChart.tsx +++ b/components/Leaderboard/LeaderBoardChart.tsx @@ -4,6 +4,7 @@ import { getData } from '@/app/[locale]/leaderboard/getData'; export default function LeaderBoardChart() { const leaderBoardData = use(getData()); + const direction = useTextDirection(); return ( @@ -11,7 +12,7 @@ export default function LeaderBoardChart() { dir={direction} className=" bg-lightAccBg overflow-y-auto h-2/3 w-2/3 flex flex-col gap-6 self-center ring-8 rounded-sm dark:bg-darkAccBg dark:ring-offset-darkAccBg p-2 " > - {leaderBoardData.props.leaderboard.members.map((contributor, place) => { + {leaderBoardData.props.leaderboard.members.reverse().map((contributor, place) => { const pathDevelp = contributor; return ( @@ -30,20 +31,20 @@ export default function LeaderBoardChart() { {pathDevelp.name} - {pathDevelp.stats.commits} commits + commits: {pathDevelp.stats.commits} - score:{pathDevelp.score}{' '} + score: {pathDevelp.score}
- {pathDevelp.stats.commits} commits + commits: {pathDevelp.stats.commits} {pathDevelp.stats.additions}++ diff --git a/components/Leaderboard/Monthly.tsx b/components/Leaderboard/Monthly.tsx index 1a51ba2..b27df05 100644 --- a/components/Leaderboard/Monthly.tsx +++ b/components/Leaderboard/Monthly.tsx @@ -1,5 +1,6 @@ import { getData } from '@/app/[locale]/leaderboard/getData'; import useTextDirection from '@/hooks/useTextDirection'; +import { useTranslations } from 'next-intl'; import React from 'react'; import { use } from 'react'; export default function Monthly() { @@ -7,9 +8,11 @@ export default function Monthly() { const Monthly = leaderBoardData.props.leaderboard.members[ - leaderBoardData.props.leaderboard.members.length - 1 + leaderBoardData.props.leaderboard.members.length - 1 ]; const direction = useTextDirection(); + const t=useTranslations("LeaderBoard.card") + return (
- name:{Monthly.name} + {t("name")}: + {Monthly.name} - additions: - {Monthly.stats.additions} + {t('Addition')}: + {Monthly.stats.additions} - deletions: - {Monthly.stats.deletions} + {t('deletions')}: + {Monthly.stats.deletions} - score:{Monthly.score} + {t('score')}: {Monthly.score}
opps
-

projects

+

{t('Projects')}

{Monthly.projects_names.map((project, index) => { return ( + + ); })}
diff --git a/components/Leaderboard/Weekly.tsx b/components/Leaderboard/Weekly.tsx index d99ff78..8a820ae 100644 --- a/components/Leaderboard/Weekly.tsx +++ b/components/Leaderboard/Weekly.tsx @@ -1,14 +1,14 @@ import useTextDirection from '@/hooks/useTextDirection'; import { use } from 'react'; import { getData } from '@/app/[locale]/leaderboard/getData'; +import { useTranslations } from 'next-intl'; export default function Weekly() { const direction = useTextDirection(); + const t=useTranslations("LeaderBoard") + const leaderBoardData = use(getData()); - const Weekly = - leaderBoardData.props.leaderboard.members[ - leaderBoardData.props.leaderboard.members.length - 1 - ]; - console.log(leaderBoardData.props.leaderboard); + const Weekly = leaderBoardData.props.leaderboard.members[leaderBoardData.props.leaderboard.members.length - 1]; + return (
- name:{Weekly.name} + {t("card.name")}: + {Weekly.name} + + - additions: - {Weekly.stats.additions} + {t("card.Addition")}: + {Weekly.stats.additions} - deletions:{' '} - {Weekly.stats.deletions} + {t('card.deletions')}: + {Weekly.stats.deletions} - commits:{Weekly.stats.commits} - score:{Weekly.score} + {t("card.commits")}: {Weekly.stats.commits} + {t("card.score")}: {Weekly.score}
+