From 56352eacb7d335129eb1bbee6d6635001cb71db2 Mon Sep 17 00:00:00 2001
From: kylebtran <ucitrankyl@gmail.com>
Date: Fri, 24 Jan 2025 02:45:05 -0800
Subject: [PATCH 1/2] feat: replace availability component tab system with
 button toggle - page default switched from personal availability to group
 availability

---
 src/app/availability/[slug]/page.tsx          | 58 +++++--------------
 .../availability/availability-header.tsx      | 10 +++-
 .../availability/group-availability.tsx       | 10 +++-
 .../availability/personal-availability.tsx    |  1 +
 4 files changed, 32 insertions(+), 47 deletions(-)

diff --git a/src/app/availability/[slug]/page.tsx b/src/app/availability/[slug]/page.tsx
index b29e79a..0802919 100644
--- a/src/app/availability/[slug]/page.tsx
+++ b/src/app/availability/[slug]/page.tsx
@@ -60,49 +60,21 @@ export default async function Page({ params }: PageProps) {
         <div className="space-y-2 px-4">
             <AvailabilityHeader meetingData={meetingData} />
 
-            <Tabs
-                defaultValue="personal"
-                className={"space-y-6 px-6"}
-            >
-                <TabsList className="mx-6 space-x-0">
-                    <TabsTrigger
-                        value="personal"
-                        className={cn(
-                            "border-0 border-b-2 border-neutral-500 p-4 pb-0 text-lg duration-0",
-                            "data-[state=active]:border-orange-500"
-                        )}
-                    >
-                        Personal
-                    </TabsTrigger>
-                    <TabsTrigger
-                        value="group"
-                        className={cn(
-                            "border-0 border-b-2 border-neutral-500 p-4 pb-0 text-lg duration-0",
-                            "data-[state=active]:border-orange-500"
-                        )}
-                    >
-                        Group
-                    </TabsTrigger>
-                </TabsList>
-
-                <TabsContent value="personal">
-                    <PersonalAvailability
-                        columns={5}
-                        meetingData={meetingData}
-                        meetingDates={meetingDates}
-                        availability={availability}
-                        availabilityTimeBlocks={availabilityTimeBlocks}
-                    />
-                </TabsContent>
-                <TabsContent value="group">
-                    <GroupAvailability
-                        columns={5}
-                        availabilityDates={[]}
-                        availabilityTimeBlocks={availabilityTimeBlocks}
-                        groupAvailabilities={SAMPLE_MEMBERS}
-                    />
-                </TabsContent>
-            </Tabs>
+            <div className={"space-y-6 px-6"}>
+                <GroupAvailability
+                    columns={5}
+                    availabilityDates={[]}
+                    availabilityTimeBlocks={availabilityTimeBlocks}
+                    groupAvailabilities={SAMPLE_MEMBERS}
+                />
+                <PersonalAvailability
+                    columns={5}
+                    meetingData={meetingData}
+                    meetingDates={meetingDates}
+                    availability={availability}
+                    availabilityTimeBlocks={availabilityTimeBlocks}
+                />
+            </div>
         </div>
     );
 }
diff --git a/src/components/availability/availability-header.tsx b/src/components/availability/availability-header.tsx
index a7ca16c..132b843 100644
--- a/src/components/availability/availability-header.tsx
+++ b/src/components/availability/availability-header.tsx
@@ -46,7 +46,7 @@ export function AvailabilityHeader({ meetingData }: AvailabilityHeaderProps) {
                 {meetingData.title}
             </h1>
 
-            {isEditingAvailability && (
+            {isEditingAvailability ? (
                 <div className="flex space-x-2 md:space-x-4">
                     <Button
                         className={cn(
@@ -109,6 +109,14 @@ export function AvailabilityHeader({ meetingData }: AvailabilityHeaderProps) {
                     </Button>
                     {/* </form> */}
                 </div>
+            ) : (
+                <Button
+                    variant="default"
+                    className={"h-8 min-h-fit md:w-28 md:p-0"}
+                    onClick={() => setIsEditingAvailability((prev) => !prev)}
+                >
+                    <span className="hidden md:flex">Add Availability</span>
+                </Button>
             )}
         </div>
     );
diff --git a/src/components/availability/group-availability.tsx b/src/components/availability/group-availability.tsx
index 9dcaa10..6b3fe8f 100644
--- a/src/components/availability/group-availability.tsx
+++ b/src/components/availability/group-availability.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import { useAvailabilityContext } from "@/components/availability/context/availability-context";
 import { GroupAvailabilityBlock } from "@/components/availability/group-availability-block";
 import { GroupResponses } from "@/components/availability/group-responses";
 import { AvailabilityNavButton } from "@/components/availability/table/availability-nav-button";
@@ -24,6 +25,9 @@ export function GroupAvailability({
     availabilityTimeBlocks,
     groupAvailabilities,
 }: GroupAvailabilityProps) {
+    const { isEditingAvailability } = useAvailabilityContext();
+    if (isEditingAvailability) return null;
+
     const availabilityDates = generateSampleDates(); // TODO: replace with actual data
 
     const itemsPerPage = columns;
@@ -176,7 +180,7 @@ export function GroupAvailability({
 
     return (
         <div className="flex flex-row items-start justify-start align-top">
-            <div className="font-dm-sans flex h-fit items-center justify-between overflow-x-auto lg:w-full lg:pr-10">
+            <div className="flex h-fit items-center justify-between overflow-x-auto font-dm-sans lg:w-full lg:pr-10">
                 <AvailabilityNavButton
                     direction="left"
                     handleClick={handlePrevPage}
@@ -223,9 +227,9 @@ export function GroupAvailability({
                                                         blockIndex;
                                                 const tableCellStyles = cn(
                                                     isTopOfHour &&
-                                                        "border-t-gray-medium border-t-[1px]",
+                                                        "border-t-[1px] border-t-gray-medium",
                                                     isHalfHour &&
-                                                        "border-t-gray-base border-t-[1px]",
+                                                        "border-t-[1px] border-t-gray-base",
                                                     isLastRow &&
                                                         "border-b-[1px]",
                                                     isSelected &&
diff --git a/src/components/availability/personal-availability.tsx b/src/components/availability/personal-availability.tsx
index f70f74b..5c7a3d3 100644
--- a/src/components/availability/personal-availability.tsx
+++ b/src/components/availability/personal-availability.tsx
@@ -50,6 +50,7 @@ export function PersonalAvailability({
         availabilityDates,
         setAvailabilityDates,
     } = useAvailabilityContext();
+    if (!isEditingAvailability) return null;
 
     const [guestSession, setGuestSession] = useState({
         meetingId: meetingData.id || "",

From 09b9dd05f5f2979675ee7a01d1bf7fdfabb5ba9b Mon Sep 17 00:00:00 2001
From: kylebtran <ucitrankyl@gmail.com>
Date: Thu, 30 Jan 2025 10:37:17 -0800
Subject: [PATCH 2/2] revert: remove button toggle system, default availability
 to group

Refs: 56352ea
---
 src/app/availability/[slug]/page.tsx          | 58 ++++++++++++++-----
 .../availability/availability-header.tsx      | 10 +---
 .../availability/group-availability.tsx       |  4 --
 .../availability/personal-availability.tsx    |  1 -
 4 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/src/app/availability/[slug]/page.tsx b/src/app/availability/[slug]/page.tsx
index 0802919..7629cec 100644
--- a/src/app/availability/[slug]/page.tsx
+++ b/src/app/availability/[slug]/page.tsx
@@ -60,21 +60,49 @@ export default async function Page({ params }: PageProps) {
         <div className="space-y-2 px-4">
             <AvailabilityHeader meetingData={meetingData} />
 
-            <div className={"space-y-6 px-6"}>
-                <GroupAvailability
-                    columns={5}
-                    availabilityDates={[]}
-                    availabilityTimeBlocks={availabilityTimeBlocks}
-                    groupAvailabilities={SAMPLE_MEMBERS}
-                />
-                <PersonalAvailability
-                    columns={5}
-                    meetingData={meetingData}
-                    meetingDates={meetingDates}
-                    availability={availability}
-                    availabilityTimeBlocks={availabilityTimeBlocks}
-                />
-            </div>
+            <Tabs
+                defaultValue="group"
+                className={"space-y-6 px-6"}
+            >
+                <TabsList className="mx-6 space-x-0">
+                    <TabsTrigger
+                        value="group"
+                        className={cn(
+                            "border-0 border-b-2 border-neutral-500 p-4 pb-0 text-lg duration-0",
+                            "data-[state=active]:border-orange-500"
+                        )}
+                    >
+                        Group
+                    </TabsTrigger>
+                    <TabsTrigger
+                        value="personal"
+                        className={cn(
+                            "border-0 border-b-2 border-neutral-500 p-4 pb-0 text-lg duration-0",
+                            "data-[state=active]:border-orange-500"
+                        )}
+                    >
+                        Personal
+                    </TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="group">
+                    <GroupAvailability
+                        columns={5}
+                        availabilityDates={[]}
+                        availabilityTimeBlocks={availabilityTimeBlocks}
+                        groupAvailabilities={SAMPLE_MEMBERS}
+                    />
+                </TabsContent>
+                <TabsContent value="personal">
+                    <PersonalAvailability
+                        columns={5}
+                        meetingData={meetingData}
+                        meetingDates={meetingDates}
+                        availability={availability}
+                        availabilityTimeBlocks={availabilityTimeBlocks}
+                    />
+                </TabsContent>
+            </Tabs>
         </div>
     );
 }
diff --git a/src/components/availability/availability-header.tsx b/src/components/availability/availability-header.tsx
index 132b843..a7ca16c 100644
--- a/src/components/availability/availability-header.tsx
+++ b/src/components/availability/availability-header.tsx
@@ -46,7 +46,7 @@ export function AvailabilityHeader({ meetingData }: AvailabilityHeaderProps) {
                 {meetingData.title}
             </h1>
 
-            {isEditingAvailability ? (
+            {isEditingAvailability && (
                 <div className="flex space-x-2 md:space-x-4">
                     <Button
                         className={cn(
@@ -109,14 +109,6 @@ export function AvailabilityHeader({ meetingData }: AvailabilityHeaderProps) {
                     </Button>
                     {/* </form> */}
                 </div>
-            ) : (
-                <Button
-                    variant="default"
-                    className={"h-8 min-h-fit md:w-28 md:p-0"}
-                    onClick={() => setIsEditingAvailability((prev) => !prev)}
-                >
-                    <span className="hidden md:flex">Add Availability</span>
-                </Button>
             )}
         </div>
     );
diff --git a/src/components/availability/group-availability.tsx b/src/components/availability/group-availability.tsx
index c7f5e1f..bc7fab6 100644
--- a/src/components/availability/group-availability.tsx
+++ b/src/components/availability/group-availability.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useEffect, useMemo, useState } from "react";
-import { useAvailabilityContext } from "@/components/availability/context/availability-context";
 import { GroupAvailabilityBlock } from "@/components/availability/group-availability-block";
 import { GroupResponses } from "@/components/availability/group-responses";
 import { AvailabilityNavButton } from "@/components/availability/table/availability-nav-button";
@@ -25,9 +24,6 @@ export function GroupAvailability({
     availabilityTimeBlocks,
     groupAvailabilities,
 }: GroupAvailabilityProps) {
-    const { isEditingAvailability } = useAvailabilityContext();
-    if (isEditingAvailability) return null;
-
     const availabilityDates = useMemo(() => generateSampleDates(), []); // TODO: replace with actual data
 
     const itemsPerPage = columns;
diff --git a/src/components/availability/personal-availability.tsx b/src/components/availability/personal-availability.tsx
index 208bc0c..c85b2c0 100644
--- a/src/components/availability/personal-availability.tsx
+++ b/src/components/availability/personal-availability.tsx
@@ -51,7 +51,6 @@ export function PersonalAvailability({
         availabilityDates,
         setAvailabilityDates,
     } = useAvailabilityContext();
-    if (!isEditingAvailability) return null;
 
     const [guestSession, setGuestSession] = useState({
         meetingId: meetingData.id || "",