Added profile picture to leaderboard

Dosbodoke · Dosbodoke · commit 7636b191286c · 2024-04-17T15:42:19.000-03:00
diff --git a/components/tabs/Ranking/Cadenas.tsx b/components/tabs/Ranking/Cadenas.tsx
@@ -62,6 +62,7 @@ function Cadenas({ highline }: Props) {
                   name: entry.instagram,
                   position: pageIdx * PAGE_SIZE + idx + 1,
                   value: entry.total_cadenas.toString(),
+                  profilePicture: entry.profile_picture,
                 };
               }) || []
             );
diff --git a/components/tabs/Ranking/Distance.tsx b/components/tabs/Ranking/Distance.tsx
@@ -62,6 +62,7 @@ function Distance({ highline }: Props) {
                   name: entry.instagram,
                   position: pageIdx * PAGE_SIZE + idx + 1,
                   value: `${entry.total_distance_walked}m`,
+                  profilePicture: entry.profile_picture,
                 };
               }) || []
             );
diff --git a/components/tabs/Ranking/FullLine.tsx b/components/tabs/Ranking/FullLine.tsx
@@ -62,6 +62,7 @@ function FullLine({ highline }: Props) {
                   name: entry.instagram,
                   position: pageIdx * PAGE_SIZE + idx + 1,
                   value: entry.total_full_lines.toString(),
+                  profilePicture: entry.profile_picture,
                 };
               }) || []
             );
diff --git a/components/tabs/Ranking/Speedline.tsx b/components/tabs/Ranking/Speedline.tsx
@@ -21,13 +21,12 @@ function Speedline({ highline }: Props) {
   const format = useFormatter();
 
   async function fetchEntries({ pageParam = 1 }) {
-    const { data } = await supabase
-      .from("entry")
-      .select()
-      .match({ highline_id: highline.id })
-      .order("crossing_time", { ascending: true })
-      .range((pageParam - 1) * PAGE_SIZE, pageParam * PAGE_SIZE - 1);
-
+    const { data, error } = await supabase.rpc("get_crossing_time", {
+      highline_id: highline.id,
+      page_number: pageParam,
+      page_size: PAGE_SIZE,
+    });
+    console.log({ data });
     return data;
   }
 
@@ -63,11 +62,11 @@ function Speedline({ highline }: Props) {
           entries?.pages.flatMap((page, pageIdx) => {
             return (
               page?.map((entry, idx) => {
-                if (!entry.crossing_time || !entry.created_at) return null;
                 return {
                   name: entry.instagram,
                   position: pageIdx * PAGE_SIZE + idx + 1,
                   value: transformSecondsToTimeString(entry.crossing_time),
+                  profilePicture: entry.profile_picture || "",
                 };
               }) || []
             );
diff --git a/components/tabs/Ranking/leaderboard.tsx b/components/tabs/Ranking/leaderboard.tsx
@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
 import { CrownIcon } from "lucide-react";
+import Image from "next/image";
 import React from "react";
 
 import { cn } from "@/lib/utils";
@@ -11,6 +12,7 @@ interface PodiumProps {
   username: string;
   value: string;
   position: number;
+  profilePicture?: string;
 }
 
 const podiumVariants = cva("", {
@@ -32,7 +34,39 @@ const podiumVariants = cva("", {
   },
 });
 
-const Podium = ({ username, value, position }: PodiumProps) => {
+const RankingPosition = ({ position }: { position: number }) => (
+  <div className="flex items-center justify-center gap-1">
+    <span className="xs:text-sm text-xs text-neutral-400 dark:text-neutral-600 md:text-lg">
+      #
+    </span>
+    <span className="xs:text-base text-sm font-semibold text-neutral-800 dark:text-neutral-50 md:text-2xl">
+      {position}
+    </span>
+  </div>
+);
+
+const ProfilePicture = ({
+  username,
+  src,
+}: {
+  username?: string;
+  src?: string;
+}) => {
+  return (
+    <div className="relative flex h-12 w-12 items-center justify-center rounded-full bg-neutral-200/40 dark:bg-neutral-800/60 md:h-16 md:w-16">
+      {username ? (
+        <Image
+          src={src || "/default-profile-picture.png"}
+          fill={true}
+          alt="Profile picture"
+          className="rounded-full"
+        />
+      ) : null}
+    </div>
+  );
+};
+
+const Podium = ({ username, value, position, profilePicture }: PodiumProps) => {
   const variant =
     position === 1 ? "gold" : position === 2 ? "silver" : "bronze";
 
@@ -60,12 +94,7 @@ const Podium = ({ username, value, position }: PodiumProps) => {
                   )}
                 />
               </div>
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-200/40 dark:bg-neutral-800/60 md:h-16 md:w-16">
-                <i
-                  className="fa-regular fa-user text-lg text-neutral-600 dark:text-neutral-50 md:text-2xl"
-                  aria-hidden="true"
-                />
-              </div>
+              <ProfilePicture username={username} src={profilePicture} />
             </div>
             <div className="flex w-full flex-col items-center gap-0.5 md:gap-0">
               <span className="xs:text-sm max-w-[calc(100%-1rem)] overflow-hidden text-ellipsis whitespace-nowrap text-xs font-normal text-neutral-800 dark:text-neutral-50 md:text-lg">
@@ -78,14 +107,7 @@ const Podium = ({ username, value, position }: PodiumProps) => {
                     podiumVariants({ text: variant })
                   )}
                 >
-                  <span className="whitespace-nowrap">
-                    <i
-                      className="fas fa-dice-d8"
-                      aria-hidden="true"
-                      style={{ scale: "0.6" }}
-                    />{" "}
-                    {value}
-                  </span>
+                  <span className="whitespace-nowrap">{value}</span>
                 </span>
               </div>
             </div>
@@ -99,32 +121,24 @@ const Podium = ({ username, value, position }: PodiumProps) => {
             })
           )}
         >
-          <div className="flex items-center justify-center gap-1">
-            <span className="xs:text-sm text-xs text-neutral-400 dark:text-neutral-600 md:text-lg">
-              #
-            </span>
-            <span className="xs:text-base text-sm font-semibold text-neutral-800 dark:text-neutral-50 md:text-2xl">
-              {position}
-            </span>
-          </div>
+          <RankingPosition position={position} />
         </div>
       </div>
     </Link>
   );
 };
 
-export const LeaderboardRow = ({ username, value, position }: PodiumProps) => {
+export const LeaderboardRow = ({
+  username,
+  value,
+  position,
+  profilePicture,
+}: PodiumProps) => {
   return (
     <li className="py-3 sm:py-4">
-      <div className="flex items-start space-x-4">
-        <div className="flex items-center justify-center gap-1">
-          <span className="xs:text-sm text-xs text-neutral-400 dark:text-neutral-600 md:text-lg">
-            #
-          </span>
-          <span className="xs:text-base text-sm font-semibold text-neutral-800 dark:text-neutral-50 md:text-2xl">
-            {position}
-          </span>
-        </div>
+      <div className="flex space-x-4">
+        <RankingPosition position={position} />
+        <ProfilePicture username={username} src={profilePicture} />
         <div className="min-w-0 flex-1">
           <UsernameLink username={username} />
           {/* <div className="text-sm text-muted-foreground ">
@@ -146,6 +160,7 @@ interface LeaderboardProps {
     name: string;
     value: string;
     position: number;
+    profilePicture: string;
   } | null>;
 }
 
@@ -157,16 +172,19 @@ export const Leaderboard = ({ entries }: LeaderboardProps) => {
           username={entries[1]?.name || ""}
           value={entries[1]?.value || ""}
           position={2}
+          profilePicture={entries[1]?.profilePicture}
         />
         <Podium
           username={entries[0]?.name || ""}
           value={entries[0]?.value || ""}
           position={1}
+          profilePicture={entries[0]?.profilePicture}
         />
         <Podium
           username={entries[2]?.name || ""}
           value={entries[2]?.value || ""}
           position={3}
+          profilePicture={entries[2]?.profilePicture}
         />
       </div>
       <ul className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -179,6 +197,7 @@ export const Leaderboard = ({ entries }: LeaderboardProps) => {
                 username={entry?.name}
                 position={entry?.position}
                 value={entry?.value}
+                profilePicture={entry.profilePicture}
               />
             ) : null
           )}
diff --git a/supabase/migrations/20240417183631_entry_with_profile_picture.sql b/supabase/migrations/20240417183631_entry_with_profile_picture.sql
@@ -0,0 +1,70 @@
+drop function if exists "public"."get_total_cadenas"(highline_id uuid, page_number integer, page_size integer);
+
+drop function if exists "public"."get_total_full_lines"(highline_id uuid, page_number integer, page_size integer);
+
+drop function if exists "public"."get_total_walked"(highline_id uuid, page_number integer, page_size integer);
+
+set check_function_bodies = off;
+
+CREATE OR REPLACE FUNCTION public.get_crossing_time(highline_id uuid, page_number integer, page_size integer)
+ RETURNS TABLE(instagram text, crossing_time integer, profile_picture text)
+ LANGUAGE sql
+AS $function$
+  select e.instagram, e.crossing_time, p.profile_picture
+  from entry e
+  JOIN profiles p on e.instagram = p.username
+  where highline_id = get_crossing_time.highline_id 
+  order by e.crossing_time asc
+  OFFSET (get_crossing_time.page_number - 1) * get_crossing_time.page_size
+  LIMIT get_crossing_time.page_size;
+$function$
+;
+
+CREATE OR REPLACE FUNCTION public.get_total_cadenas(highline_id uuid, page_number integer, page_size integer)
+ RETURNS TABLE(instagram text, total_cadenas integer, profile_picture text)
+ LANGUAGE sql
+AS $function$  SELECT e.instagram, SUM(e.cadenas) AS total_cadenas, p.profile_picture
+  FROM entry e
+  JOIN profiles p on e.instagram = p.username
+  WHERE highline_id = get_total_cadenas.highline_id
+  GROUP BY e.instagram, p.profile_picture
+  HAVING SUM(e.cadenas) > 0
+  ORDER BY total_cadenas DESC
+  OFFSET (get_total_cadenas.page_number - 1) * get_total_cadenas.page_size
+  LIMIT get_total_cadenas.page_size;
+$function$
+;
+
+CREATE OR REPLACE FUNCTION public.get_total_full_lines(highline_id uuid, page_number integer, page_size integer)
+ RETURNS TABLE(instagram text, total_full_lines integer, profile_picture text)
+ LANGUAGE sql
+AS $function$
+  SELECT e.instagram, SUM(e.full_lines) AS total_full_lines, p.profile_picture
+  FROM entry e
+  JOIN profiles p ON e.instagram = p.username
+  WHERE e.highline_id = get_total_full_lines.highline_id
+  GROUP BY e.instagram, p.profile_picture
+  HAVING SUM(e.full_lines) > 0
+  ORDER BY total_full_lines DESC
+  OFFSET (get_total_full_lines.page_number - 1) * get_total_full_lines.page_size
+  LIMIT get_total_full_lines.page_size;
+$function$
+;
+
+CREATE OR REPLACE FUNCTION public.get_total_walked(highline_id uuid, page_number integer, page_size integer)
+ RETURNS TABLE(instagram text, total_distance_walked integer, profile_picture text)
+ LANGUAGE sql
+AS $function$
+  SELECT e.instagram, SUM(e.distance_walked) AS total_distance_walked, p.profile_picture
+  FROM entry e
+  JOIN profiles p on e.instagram = p.username
+  WHERE highline_id = get_total_walked.highline_id
+    AND distance_walked IS NOT NULL
+  GROUP BY e.instagram, p.profile_picture
+  ORDER BY total_distance_walked DESC
+  OFFSET (get_total_walked.page_number - 1) * get_total_walked.page_size
+  LIMIT page_size;
+$function$
+;
+
+
diff --git a/utils/supabase/database.types.ts b/utils/supabase/database.types.ts
