Add CC Room progress indicators

communitycenter · May 23, 2024 · 3e0f5e8 · 3e0f5e8
1 parent 10c9f23
commit 3e0f5e8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 29 deletions.
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -20,20 +20,29 @@ AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    pullRight?: React.ReactNode;
+  }
+>(({ className, children, pullRight, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
         // TODO: remove hover:underline ?
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>*>svg]:rotate-180 [&[data-state=open]>svg]:rotate-180",
         className,
       )}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400" />
+      {pullRight ? (
+        <div className="flex">
+          {pullRight}
+          <ChevronDownIcon className=" ml-2 h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400" />
+        </div>
+      ) : (
+        <ChevronDownIcon className="h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400" />
+      )}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
@@ -1,26 +1,33 @@
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-neutral-900 transition-all dark:bg-neutral-50"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+>(({ className, value, max, ...props }, ref) => (
+  <div className="flex items-center space-x-2">
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex h-2 w-full overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20 ",
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 bg-neutral-900 transition-all dark:bg-neutral-50"
+        style={{
+          transform: `translateX(-${100 - (value && max ? (value / max) * 100 : 0)}%)`,
+        }}
+      />
+    </ProgressPrimitive.Root>
+    <span className="flex text-sm">
+      {value && max ? `${value} / ${max}` : ``}
+    </span>
+  </div>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };
diff --git a/src/pages/bundles.tsx b/src/pages/bundles.tsx
@@ -70,6 +70,7 @@ type BundleAccordionProps = {
 type AccordionSectionProps = {
   title: string;
   children: JSX.Element | JSX.Element[];
+  completedCount?: number;
 };
 
 const CommunityCenterRooms: CommunityCenterRoomName[] = [
@@ -83,11 +84,26 @@ const CommunityCenterRooms: CommunityCenterRoomName[] = [
 ];
 
 function AccordionSection(props: AccordionSectionProps): JSX.Element {
+  let progressIndicator =
+    props.completedCount &&
+    Array.isArray(props.children) &&
+    props.completedCount < props.children.length ? (
+      <Progress
+        value={props.completedCount}
+        max={props.children.length}
+        className="w-32"
+      />
+    ) : (
+      ``
+    );
   return (
     <Accordion type="single" collapsible defaultValue="item-1" asChild>
       <section className="space-y-3">
         <AccordionItem value="item-1">
-          <AccordionTrigger className="ml-1 pt-0 text-xl font-semibold text-gray-900 dark:text-white">
+          <AccordionTrigger
+            className="ml-1 pt-0 text-xl font-semibold text-gray-900 dark:text-white"
+            pullRight={progressIndicator}
+          >
             {props.title}
           </AccordionTrigger>
           <AccordionContent asChild>
@@ -193,9 +209,6 @@ function BundleAccordion(props: BundleAccordionProps): JSX.Element {
                   max={requiredItems}
                   className="w-32"
                 />
-                <span className="flex pl-3 text-sm">
-                  {requiredItems - remainingCount} / {requiredItems}
-                </span>
               </div>
             )}
           </AccordionTriggerNoToggle>
@@ -551,6 +564,7 @@ export default function Bundles() {
           </AccordionSection>
           {CommunityCenterRooms.map((roomName: CommunityCenterRoomName) => {
             let roomBundles: BundleWithStatus[] = [];
+            let completedCount = 0;
             if (activePlayer && Array.isArray(activePlayer.bundles)) {
               roomBundles = activePlayer.bundles.filter((bundleWithStatus) => {
                 if (bundleWithStatus?.bundle) {
@@ -559,14 +573,22 @@ export default function Bundles() {
                   return false;
                 }
               });
+              completedCount = roomBundles.reduce((acc, curBundelRet) => {
+                if (BundleCompleted(curBundelRet)) return acc + 1;
+                return acc;
+              }, 0);
             } else {
               roomBundles = bundles.filter(
                 (bundleWithStatus) =>
                   bundleWithStatus.bundle.areaName === roomName,
               );
             }
             return (
-              <AccordionSection key={roomName} title={roomName}>
+              <AccordionSection
+                key={roomName}
+                title={roomName}
+                completedCount={completedCount}
+              >
                 {roomBundles.map((bundleWithStatus: BundleWithStatus) => {
                   return (
                     <BundleAccordion