Chore/leaderboard improvements (#78)

* fix: sorting bug after changing pages

* feat: adds share to twitter btn on voting interface

* added changeset

Author: Nick Lionis

.changeset/nine-cars-relate.md

@@ -0,0 +1,6 @@
+---
+"@gitcoin/ui": patch
+---
+
+chore: improve leaderboard sorting
+feat: add share to twitter btn after submitting the ballot

packages/ui/src/features/retrofunding/components/BallotForm/BallotForm.stories.tsx

@@ -90,3 +90,11 @@ export const AlreadyVoted: Story = {
     },
   },
 };
+
+export const ShareBallot: Story = {
+  args: {
+    ...AlreadyVoted.args,
+    name: "shareBallot-metrics",
+    onShare: action("onShare"),
+  },
+};

packages/ui/src/features/retrofunding/components/BallotForm/BallotForm.tsx

@@ -34,6 +34,7 @@ interface BallotFormProps {
   maxAllocation?: number;
   onSubmit: (values: BallotValues[]) => void;
   onChange?: (values: BallotValues[]) => void;
+  onShare?: () => void;
 }
 
 const getTotalAllocation = (items: BallotItemsMap) =>
@@ -52,6 +53,7 @@ export const BallotForm: React.FC<BallotFormProps> = ({
   maxAllocation = 100,
   onSubmit,
   onChange,
+  onShare,
 }) => {
   const { getValue, setValue, isReady } = useIndexedDB({
     dbName: DB_NAME,
@@ -182,7 +184,10 @@ export const BallotForm: React.FC<BallotFormProps> = ({
 
   return (
     <div className={cn("flex flex-col gap-6", className)}>
-      <AlreadyVotedBadge submittedAt={submittedBallot?.submittedAt} />
+      <AlreadyVotedBadge
+        submittedAt={submittedBallot?.submittedAt}
+        onShare={onShare}
+      />
       <div className="w-[720px] space-y-4 rounded-xl border border-grey-300 bg-grey-50 p-10">
         <BallotHeader sortOrder={sortOrder ?? DEFAULT_SORT_ORDER} setSortOrder={setSortOrder} />
         <div>

packages/ui/src/features/retrofunding/components/BallotForm/components/AlreadyVotedBadge.tsx

@@ -1,12 +1,31 @@
 import moment from "moment";
 
-export const AlreadyVotedBadge = ({ submittedAt }: { submittedAt?: string }) => {
+import { Button } from "@/primitives";
+import { IconType, Icon } from "@/primitives";
+
+export const AlreadyVotedBadge = ({
+  submittedAt,
+  onShare,
+}: {
+  submittedAt?: string;
+  onShare?: () => void;
+}) => {
   if (!submittedAt) return null;
   return (
-    <p className="rounded-xl bg-moss-100 p-4 text-sm font-medium text-moss-300">
-      {`Your ballot was submitted on ${moment(submittedAt).format(
-        "MMMM D, YYYY [at] HH:mm [UTC]",
-      )}.`}
-    </p>
+    <div className="flex items-center justify-between rounded-xl bg-moss-100 p-4">
+      <p className="text-sm font-medium text-moss-700">
+        {`Your ballot was submitted on ${moment(submittedAt).format(
+          "MMMM D, YYYY [at] HH:mm [UTC]",
+        )}.`}
+      </p>
+      {onShare && (
+        <Button
+          value="Share on"
+          icon={<Icon type={IconType.TWITTER} className="size-4 fill-white" />}
+          iconPosition="right"
+          onClick={onShare}
+        />
+      )}
+    </div>
   );
 };

packages/ui/src/features/retrofunding/components/Leaderboard/Leaderboard.tsx

@@ -8,7 +8,7 @@ import { useMediaQuery } from "usehooks-ts";
 import { cn } from "@/lib/utils";
 
 import { DesktopLeaderboard, MobileLeaderboard } from "./components";
-import { LeaderboardProps } from "./types";
+import { LeaderboardProps, SortConfig } from "./types";
 
 const leaderboardVariants = tv({
   base: "leaderboard-container",
@@ -44,7 +44,7 @@ const leaderboardVariants = tv({
 
 interface LeaderboardPropsWithVariants
   extends VariantProps<typeof leaderboardVariants>,
-    Omit<LeaderboardProps, "expandedProject" | "setExpandedProject" | "paginationProps"> {}
+    Omit<LeaderboardProps, "expandedProject" | "setExpandedProject" | "paginationProps" | "sortConfig" | "setSortConfig"> {}
 
 export const Leaderboard = ({ projects, metrics, ...props }: LeaderboardPropsWithVariants) => {
   const leaderboardClassNames = leaderboardVariants({
@@ -53,6 +53,7 @@ export const Leaderboard = ({ projects, metrics, ...props }: LeaderboardPropsWit
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
   const [expandedProject, setExpandedProject] = useState<number | null>(null);
+  const [sortConfig, setSortConfig] = useState<SortConfig>({ key: "rank", direction: "asc" });
   const isDesktopView = useMediaQuery("(min-width: 768px)");
 
   const totalProjects = Object.keys(projects).length;
@@ -115,6 +116,8 @@ export const Leaderboard = ({ projects, metrics, ...props }: LeaderboardPropsWit
           expandedProject={expandedProject}
           setExpandedProject={setExpandedProject}
           parentWidth={parentWidth}
+          sortConfig={sortConfig}
+          setSortConfig={setSortConfig}
         />
       ) : (
         <MobileLeaderboard
@@ -130,6 +133,8 @@ export const Leaderboard = ({ projects, metrics, ...props }: LeaderboardPropsWit
           }}
           expandedProject={expandedProject}
           setExpandedProject={setExpandedProject}
+          sortConfig={sortConfig}
+          setSortConfig={setSortConfig}
         />
       )}
     </div>

packages/ui/src/features/retrofunding/components/Leaderboard/components/DesktopLeaderboard.tsx

@@ -35,6 +35,8 @@ export const DesktopLeaderboard = ({
   expandedProject,
   setExpandedProject,
   parentWidth,
+  sortConfig,
+  setSortConfig,
 }: LeaderboardProps & { parentWidth: number }) => {
   const {
     headerText,
@@ -46,7 +48,6 @@ export const DesktopLeaderboard = ({
     icon,
     tooltipText,
   } = desktopLeaderboard();
-  const [sortConfig, setSortConfig] = useState<SortConfig>({ key: "rank", direction: "asc" });
   const ranks = Object.keys(projects).map(Number);
   const metricIds = Object.keys(metrics);
 
@@ -77,14 +78,9 @@ export const DesktopLeaderboard = ({
   );
 
   const handleSort = (key: "rank" | string) => {
-    setSortConfig((currentConfig) => {
-      if (currentConfig.key === key) {
-        return {
-          key,
-          direction: currentConfig.direction === "asc" ? "desc" : "asc",
-        };
-      }
-      return { key, direction: "desc" };
+    setSortConfig({
+      key,
+      direction: sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc",
     });
   };
 

packages/ui/src/features/retrofunding/components/Leaderboard/components/MobileLeaderboard.tsx

@@ -29,6 +29,8 @@ export const MobileLeaderboard = ({
   paginationProps,
   expandedProject,
   setExpandedProject,
+  sortConfig,
+  setSortConfig,
 }: LeaderboardProps) => {
   const {
     rankBadge,
@@ -51,12 +53,33 @@ export const MobileLeaderboard = ({
       ...projects[rank],
     }))
     .sort((a, b) => {
-      return a.originalRank - b.originalRank;
+      if (sortConfig.key === "rank") {
+        return sortConfig.direction === "asc"
+          ? a.originalRank - b.originalRank
+          : b.originalRank - a.originalRank;
+      }
+
+      const aValue = a.metrics[sortConfig.key];
+      const bValue = b.metrics[sortConfig.key];
+
+      if (sortConfig.direction === "asc") {
+        return aValue - bValue;
+      }
+      return bValue - aValue;
     });
+
   const paginatedProjects = sortedProjects.slice(
     (paginationProps.currentPage - 1) * paginationProps.rowsPerPage,
     paginationProps.currentPage * paginationProps.rowsPerPage,
   );
+
+  const handleSort = (key: "rank" | string) => {
+    setSortConfig({
+      key,
+      direction: sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc",
+    });
+  };
+
   return (
     <div className="space-y-4 p-1">
       {paginatedProjects.map((projectData) => {
@@ -74,6 +97,7 @@ export const MobileLeaderboard = ({
                       originalRank === 1 && firstRankBadge(),
                       originalRank === 2 && secondRankBadge(),
                     )}
+                    onClick={() => handleSort("rank")}
                   >
                     {originalRank}
                   </span>
@@ -102,7 +126,9 @@ export const MobileLeaderboard = ({
                 {metricIds.map((metricId) => (
                   <div key={metricId} className="space-y-1">
                     <div className="flex items-center gap-1">
-                      <span className={metricLabel()}>{metrics[metricId].name}</span>
+                      <span className={metricLabel()} onClick={() => handleSort(metricId)}>
+                        {metrics[metricId].name}
+                      </span>
                       {metrics[metricId].description && (
                         <IconWithTooltip
                           iconType={IconType.INFORMATION_CIRCLE}
@@ -111,6 +137,11 @@ export const MobileLeaderboard = ({
                           tooltipClassName={tooltipText()}
                         />
                       )}
+                      <Icon
+                        type={IconType.SORT}
+                        className={cn(icon())}
+                        onClick={() => handleSort(metricId)}
+                      />
                     </div>
                     <div className={metricValue()}>{projectMetrics[metricId]}</div>
                   </div>

packages/ui/src/features/retrofunding/components/Leaderboard/types.ts

@@ -31,6 +31,8 @@ export interface LeaderboardProps {
   };
   expandedProject: number | null;
   setExpandedProject: (project: number | null) => void;
+  sortConfig: SortConfig;
+  setSortConfig: (config: SortConfig) => void;
 }
 
 export interface SortConfig {