From 669dae446ea2456fd3375245fa053405b031ba39 Mon Sep 17 00:00:00 2001 From: MansijMishra Date: Sat, 3 May 2025 13:31:42 -0400 Subject: [PATCH 1/4] added progress bar to hangoutlist and update info icon on hangouts page. --- .../hangouts/_components/HangoutList.tsx | 8 ++++ .../_components/HangoutProgressBar.tsx | 47 +++++++++++++++++++ src/utils/etc/informationStrings.ts | 2 +- 3 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 src/app/(private)/hangouts/_components/HangoutProgressBar.tsx diff --git a/src/app/(private)/hangouts/_components/HangoutList.tsx b/src/app/(private)/hangouts/_components/HangoutList.tsx index c08b889..4c9e15b 100644 --- a/src/app/(private)/hangouts/_components/HangoutList.tsx +++ b/src/app/(private)/hangouts/_components/HangoutList.tsx @@ -3,6 +3,7 @@ import React, { useState } from "react"; import HangoutActionButton from "./HangoutActionButton"; import ConfirmLocationModal from "../_components/FinalConfirmationModal"; import { Participant } from "./Hangouts"; +import HangoutProgressBar from "./HangoutProgressBar"; interface HangoutListProps { name: string; @@ -50,6 +51,13 @@ export default function HangoutList({ + +
diff --git a/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx new file mode 100644 index 0000000..3289654 --- /dev/null +++ b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx @@ -0,0 +1,47 @@ +import React from "react"; + +interface HangoutProgressBarProps { + currentStageIndex: number; + completed: number; + total: number; + stages: number; +} + +const stageLabels = [ + "Submit Availability", + "Vote on Availability", + "Vote on Location", + "Confirm Location", + "Completed" +]; + +export default function HangoutProgressBar({ + currentStageIndex, + completed, + total, + stages, +}: HangoutProgressBarProps) { + const label = stageLabels[currentStageIndex] || "Stage"; + + return ( +
+ + {label} {completed}/{total} + +
+ {Array.from({ length: stages }).map((_, i) => ( +
+ ))} +
+
+ ); +} diff --git a/src/utils/etc/informationStrings.ts b/src/utils/etc/informationStrings.ts index 02b9f4e..595980b 100644 --- a/src/utils/etc/informationStrings.ts +++ b/src/utils/etc/informationStrings.ts @@ -2,7 +2,7 @@ export const informationStrings = { startHangout: "Start a new Hangout by giving it a title and inviting your friends. ", hangouts: - "View and manage all your hangouts here.\nEach hangout shows its current status, and available action buttons will appear depending on the stage.", + " View and manage all your hangouts here.\n Each hangout shows its current status, and available action buttons will appear depending on the stage.\nA progress bar visually tracks the hangout’s flow through four key stages:\n1. Submit Availability – attendees share their available times.\n2. Vote on Availability – attendees vote on the best time options.\n3. Vote on Location – attendees vote on where to meet.\n4. Confirm Location – final confirmation of the meeting place and time.", availabilityInput: "Add all the dates and times you are available. These will become the options that attendees vote on.\nThe more options you provide, the easier it will be to find a time that works for everyone!", availabilityVoting: From e48d28f72df9d75c6e54e8339d2c7b219e39f334 Mon Sep 17 00:00:00 2001 From: MansijMishra Date: Sat, 3 May 2025 17:21:26 -0400 Subject: [PATCH 2/4] updated progress bar to incorporate backend, update the info string on hangouts page --- .../hangouts/_components/HangoutList.tsx | 64 ++++++++++++++++--- .../_components/HangoutProgressBar.tsx | 9 ++- src/utils/etc/informationStrings.ts | 2 +- 3 files changed, 61 insertions(+), 14 deletions(-) diff --git a/src/app/(private)/hangouts/_components/HangoutList.tsx b/src/app/(private)/hangouts/_components/HangoutList.tsx index 4c9e15b..05621ea 100644 --- a/src/app/(private)/hangouts/_components/HangoutList.tsx +++ b/src/app/(private)/hangouts/_components/HangoutList.tsx @@ -1,9 +1,11 @@ "use client"; -import React, { useState } from "react"; + +import React, { useState, useEffect } from "react"; import HangoutActionButton from "./HangoutActionButton"; import ConfirmLocationModal from "../_components/FinalConfirmationModal"; -import { Participant } from "./Hangouts"; import HangoutProgressBar from "./HangoutProgressBar"; +import { Participant } from "./Hangouts"; +import { getApiBase } from "@/utils/etc/apiBase"; interface HangoutListProps { name: string; @@ -16,6 +18,17 @@ interface HangoutListProps { participants: Participant[]; } +const flowStatusIndexMap: Record = { + "pending-time-input": 0, + "pending-time-vote": 1, + "pending-location-vote": 2, + "pending-confirm-location": 3, + "accepted-final-confirmation": 4, + "availability-not-started": 5 +}; + +const knownStages = Object.keys(flowStatusIndexMap); + export default function HangoutList({ name, id, @@ -26,8 +39,37 @@ export default function HangoutList({ flowStatus, participants, }: HangoutListProps) { - const [isConfirmationModal, setIsConfirmationModal] = - useState(false); + const [isConfirmationModal, setIsConfirmationModal] = useState(false); + const [progress, setProgress] = useState<{ + currentStageIndex: number; + completed: number; + total: number; + } | null>(null); + + useEffect(() => { + async function fetchHangoutProgress() { + try { + const res = await fetch(`${getApiBase()}/get_hangout_progress/${id}`); + const data = await res.json(); + + if ( + data.status === 200 && + data.current_stage && + knownStages.includes(data.current_stage) + ) { + setProgress({ + currentStageIndex: flowStatusIndexMap[data.current_stage], + completed: data.stage_count, + total: data.total_count, + }); + } + } catch (err) { + console.error("Failed to fetch hangout progress:", err); + } + } + + fetchHangoutProgress(); + }, [id]); return ( <> @@ -51,12 +93,14 @@ export default function HangoutList({
- + {progress && ( + + )}
diff --git a/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx index 3289654..bc740c3 100644 --- a/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx +++ b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx @@ -1,10 +1,10 @@ import React from "react"; interface HangoutProgressBarProps { - currentStageIndex: number; + currentStageIndex: number; completed: number; total: number; - stages: number; + stages: number; } const stageLabels = [ @@ -21,7 +21,10 @@ export default function HangoutProgressBar({ total, stages, }: HangoutProgressBarProps) { - const label = stageLabels[currentStageIndex] || "Stage"; + const label = + currentStageIndex >= 0 && currentStageIndex < stageLabels.length + ? stageLabels[currentStageIndex] + : "Progress"; return (
diff --git a/src/utils/etc/informationStrings.ts b/src/utils/etc/informationStrings.ts index 595980b..abbf02d 100644 --- a/src/utils/etc/informationStrings.ts +++ b/src/utils/etc/informationStrings.ts @@ -2,7 +2,7 @@ export const informationStrings = { startHangout: "Start a new Hangout by giving it a title and inviting your friends. ", hangouts: - " View and manage all your hangouts here.\n Each hangout shows its current status, and available action buttons will appear depending on the stage.\nA progress bar visually tracks the hangout’s flow through four key stages:\n1. Submit Availability – attendees share their available times.\n2. Vote on Availability – attendees vote on the best time options.\n3. Vote on Location – attendees vote on where to meet.\n4. Confirm Location – final confirmation of the meeting place and time.", + " View and manage all your hangouts here.\n Each hangout shows its current status, and available action buttons will appear depending on the stage.\n----------------------\nA progress bar visually tracks the hangout’s flow through four key stages:\n1. Submit Availability – attendees share their available times.\n2. Vote on Availability – attendees vote on the best time options.\n3. Vote on Location – attendees vote on where to meet.\n4. Confirm Location – final confirmation of the meeting place and time.\n----------------------\n The bar will also show how many members have completed the current stage before going onto the next.", availabilityInput: "Add all the dates and times you are available. These will become the options that attendees vote on.\nThe more options you provide, the easier it will be to find a time that works for everyone!", availabilityVoting: From d8c7d9bcee53fa7e45c92f986c9e0f8bf618378a Mon Sep 17 00:00:00 2001 From: MansijMishra Date: Sun, 4 May 2025 13:07:59 -0400 Subject: [PATCH 3/4] fixed issue with progress bar --- .../hangouts/_components/HangoutList.tsx | 38 ++++++++++--------- .../_components/HangoutProgressBar.tsx | 29 ++++++++------ 2 files changed, 38 insertions(+), 29 deletions(-) diff --git a/src/app/(private)/hangouts/_components/HangoutList.tsx b/src/app/(private)/hangouts/_components/HangoutList.tsx index 05621ea..c65d7bb 100644 --- a/src/app/(private)/hangouts/_components/HangoutList.tsx +++ b/src/app/(private)/hangouts/_components/HangoutList.tsx @@ -21,10 +21,10 @@ interface HangoutListProps { const flowStatusIndexMap: Record = { "pending-time-input": 0, "pending-time-vote": 1, - "pending-location-vote": 2, - "pending-confirm-location": 3, - "accepted-final-confirmation": 4, - "availability-not-started": 5 + "pending-confirm-time": 2, + "pending-location-vote": 3, + "pending-confirm-location": 4, + "accepted-final-confirmation": 5, }; const knownStages = Object.keys(flowStatusIndexMap); @@ -51,23 +51,24 @@ export default function HangoutList({ try { const res = await fetch(`${getApiBase()}/get_hangout_progress/${id}`); const data = await res.json(); - - if ( - data.status === 200 && - data.current_stage && - knownStages.includes(data.current_stage) - ) { - setProgress({ - currentStageIndex: flowStatusIndexMap[data.current_stage], - completed: data.stage_count, - total: data.total_count, - }); - } + + if (data.status === 200) { + const stageKey = data.current_stage; + if (knownStages.includes(stageKey)) { + setProgress(prev => ({ + currentStageIndex: flowStatusIndexMap[stageKey], + completed: data.stage_count, + total: data.total_count, + })); + } else { + setProgress(prev => prev ?? null); + } + } } catch (err) { console.error("Failed to fetch hangout progress:", err); } } - + fetchHangoutProgress(); }, [id]); @@ -98,7 +99,8 @@ export default function HangoutList({ currentStageIndex={progress.currentStageIndex} completed={progress.completed} total={progress.total} - stages={4} + stages={5} + flowStatus={flowStatus} /> )} diff --git a/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx index bc740c3..83d79ca 100644 --- a/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx +++ b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx @@ -1,18 +1,20 @@ import React from "react"; interface HangoutProgressBarProps { - currentStageIndex: number; + currentStageIndex: number; completed: number; total: number; stages: number; + flowStatus: string; } const stageLabels = [ - "Submit Availability", - "Vote on Availability", - "Vote on Location", - "Confirm Location", - "Completed" + "Submit Availability", // 0 + "Vote on Availability", // 1 + "Confirm Details", // 2 + "Vote on Location", // 2 + "Confirm Location", // 3 + "Completed" // 4 ]; export default function HangoutProgressBar({ @@ -20,23 +22,28 @@ export default function HangoutProgressBar({ completed, total, stages, + flowStatus, }: HangoutProgressBarProps) { const label = - currentStageIndex >= 0 && currentStageIndex < stageLabels.length - ? stageLabels[currentStageIndex] - : "Progress"; + flowStatus === "pending-confirm-details" + ? "Confirm Details" + : stageLabels[currentStageIndex] ?? "Progress"; + + const showRemaining = + currentStageIndex !== stageLabels.length - 1 && total - completed > 0; return (
- {label} {completed}/{total} + {label} + {showRemaining && <> • {total - completed} remaining}
{Array.from({ length: stages }).map((_, i) => (
Date: Sun, 4 May 2025 13:22:50 -0400 Subject: [PATCH 4/4] changed 'completed' to 'hangout scheduled' --- src/app/(private)/hangouts/_components/HangoutProgressBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx index 83d79ca..c750c28 100644 --- a/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx +++ b/src/app/(private)/hangouts/_components/HangoutProgressBar.tsx @@ -14,7 +14,7 @@ const stageLabels = [ "Confirm Details", // 2 "Vote on Location", // 2 "Confirm Location", // 3 - "Completed" // 4 + "Hangout Scheduled" // 4 ]; export default function HangoutProgressBar({