Merge pull request #273 from barel-mishal/leaderboard-using-fetch

Leaderboard using fetch
Maakaf · May 16, 2024 · a2dff2a · a2dff2a
2 parents a661a49 + 791f824
commit a2dff2a
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 26 deletions.
diff --git a/app/[locale]/leaderboard/getData.ts b/app/[locale]/leaderboard/getData.ts
@@ -1,5 +1,8 @@
+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',
   });
 

diff --git 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 (
     <div>
       <Leaderboard leaderboard={data.props.leaderboard} />

diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx
@@ -1,33 +1,53 @@
 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),
+  };
+  const firstPlace = props.leaderboard.members[0];
+  const secondPlace = props.leaderboard.members[1];
+  const thirdPlace = props.leaderboard.members[2];
+
   return (
-    <div>
-      <h1>Leaderboard</h1>
-      <p>
-        <span>{props.leaderboard.until}</span>
-        <span>{props.leaderboard.since}</span>
-      </p>
-      <div className="grid gap-3">
-        {props.leaderboard.members.map(data => {
+    <div dir="ltr" className="font-inter">
+      <div className="grid gap-5 p-2 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto  ">
+        <div className="col-span-full">
+          <h1>Leaderboard</h1>
+          <p>
+            {datesText.since} - {datesText.until}
+          </p>
+        </div>
+        <FirstPlacePerson data={firstPlace} place={1} />
+        <DisplayPerson data={secondPlace} place={2} />
+        <DisplayPerson data={thirdPlace} place={3} />
+        {props.leaderboard.members.slice(3, -1).map((data, ind) => {
           return (
-            <div key={data.node_id} className="flex flex-col">
-              <div className="col-span-full">{data.name}</div>
-              <div className="flex gap-2›">
-                <div className="text-green-300">
-                  <span>{data.stats.additions}</span>
-                  <span>++</span>
-                </div>
-                <div className="text-red-300">
-                  <span>{data.stats.deletions}</span>
-                  <span>--</span>
-                </div>
-              </div>
-              <div className="text-slate-300 flex gap-2 ">
-                <span>Coomit</span>
-                <span>{data.stats.commits}</span>
-              </div>
-            </div>
+            <DisplayPerson data={data} key={data.node_id} place={ind + 4} />
           );
         })}
       </div>
@@ -36,3 +56,106 @@ const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => {
 };
 
 export default LeaderboardPage;
+
+interface PersonPlace {
+  data: Analitycs['members'][number];
+  place: number;
+}
+
+export const DisplayPerson: React.FC<PersonPlace> = ({ data, place }) => {
+  return (
+    <div
+      className="flex gap-2 ring ring-slate-500 rounded-md p-4 "
+      key={data.node_id}
+    >
+      <Image
+        src={data.avatar_url}
+        className="rounded-full w-[50px] h-[50px] "
+        alt={data.name}
+        width={50}
+        height={50}
+      />
+      <div className="flex flex-col w-full  ">
+        <a
+          className="flex justify-between "
+          href={`https://github.com/${data.name}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span className="underline first-letter:capitalize">{data.name}</span>
+          <div className="flex gap-2 text-slate-500">
+            <div>{data.score}</div>
+            <Code2 />
+            {place}#
+          </div>
+        </a>
+        <div className="flex gap-2">
+          <div className="flex gap-2 ">
+            <div className="text-green-300">
+              <span>{data.stats.additions}</span>
+              <span>++</span>
+            </div>
+            <div className="text-red-300">
+              <span>{data.stats.deletions}</span>
+              <span>--</span>
+            </div>
+          </div>
+          <div className="text-slate-300 flex gap-2  ">
+            <span>Coomit</span>
+            <span>{data.stats.commits}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const FirstPlacePerson: React.FC<PersonPlace> = ({ data, place }) => {
+  return (
+    <div
+      className="flex gap-2 ring ring-slate-500 rounded-md p-4 col-span-full "
+      key={data.node_id}
+    >
+      <Image
+        src={data.avatar_url}
+        className="rounded-full w-[100px] h-[100px] "
+        alt={data.name}
+        width={100}
+        height={100}
+      />
+      <div className="flex flex-col w-full  ">
+        <a
+          className="flex justify-between "
+          href={`https://github.com/${data.name}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span className="underline first-letter:capitalize text-2xl tracking-wider">
+            {data.name}
+          </span>
+          <div className="flex gap-2 text-slate-500">
+            <div>{data.score}</div>
+            <Code2 />
+            {place}#
+          </div>
+        </a>
+        <div className="flex gap-2">
+          <div className="flex gap-2 ">
+            <div className="text-green-300">
+              <span>{data.stats.additions}</span>
+              <span>++</span>
+            </div>
+            <div className="text-red-300">
+              <span>{data.stats.deletions}</span>
+              <span>--</span>
+            </div>
+          </div>
+          <div className="text-slate-300 flex gap-2  ">
+            <span>Coomit</span>
+            <span>{data.stats.commits}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};