Skip to content

feat(frontend): show estimated end date/time preview in CreateStreamF… #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ritik4ever merged 2 commits into from
Apr 28, 2026
Merged

feat(frontend): show estimated end date/time preview in CreateStreamF… #185

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4bfb67
feat(frontend): show estimated end date/time preview in CreateStreamF…
Danielodingz Apr 25, 2026
b7040cf
Merge branch 'main' into wave4/163-estimated-end-date-preview
Danielodingz Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions frontend/src/components/CreateStreamForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,39 @@ export function CreateStreamForm({

const parsedApiError = apiError ? humaniseApiError(apiError) : null;

const startInMinsNum = Number(values.startInMinutes);
const durationHoursNum = Number(values.durationHours);
Comment thread
Danielodingz marked this conversation as resolved.
const estimatedEndLabel: string | null = (() => {
if (
values.startInMinutes === "" ||
values.durationHours === "" ||
isNaN(startInMinsNum) ||
isNaN(durationHoursNum) ||
durationHoursNum < 1 ||
!Number.isInteger(durationHoursNum)
) {
Comment on lines +174 to +181
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Clear the preview when startInMinutes is invalid too.

This guard only rejects invalid durationHours. If a user pastes -5 or 1.5 into Line 394, estimatedEndLabel still renders instead of clearing, which misses the “clear when either field is empty or invalid” requirement.

Suggested fix 
     if (
       values.startInMinutes === "" ||
       values.durationHours === "" ||
       isNaN(startInMinsNum) ||
       isNaN(durationHoursNum) ||
+      startInMinsNum < 0 ||
+      !Number.isInteger(startInMinsNum) ||
       durationHoursNum < 1 ||
       !Number.isInteger(durationHoursNum)
     ) {
       return null;
     }
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/CreateStreamForm.tsx` around lines 174 - 181, The
current validation in CreateStreamForm clears preview only for invalid
durationHours; extend that guard to also treat startInMinutes as invalid when
it's negative or non-integer so estimatedEndLabel is cleared in those cases.
Update the if condition that checks values.startInMinutes, startInMinsNum,
durationHoursNum (the block that decides whether to render estimatedEndLabel) to
include startInMinsNum < 0 || !Number.isInteger(startInMinsNum) (in addition to
the existing empty/isNaN checks) so pasting "-5" or "1.5" into startInMinutes
causes the preview to be cleared.

return null;
}
const nowSeconds = Math.floor(Date.now() / 1000);
const startAt =
startInMinsNum > 0 ? nowSeconds + Math.floor(startInMinsNum * 60) : nowSeconds;
const endAt = startAt + Math.floor(durationHoursNum * 3600);
const endDate = new Date(endAt * 1000);
const datePart = new Intl.DateTimeFormat("en-US", {
month: "short",
day: "numeric",
year: "numeric",
timeZone: "UTC",
}).format(endDate);
const timePart = new Intl.DateTimeFormat("en-US", {
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "UTC",
}).format(endDate);
return `Ends: ${datePart} at ${timePart} UTC`;
})();

return (
<form onSubmit={handleSubmit} noValidate>
{parsedApiError && (
Expand Down Expand Up @@ -304,6 +337,78 @@ export function CreateStreamForm({
</div>
</div>

{/* Duration */}
<div
className={`field-group${errors.durationHours ? " field-group--error" : ""}`}
>
<label htmlFor="stream-duration">
Duration (hours)
<span className="field-required" aria-hidden>
*
</span>
</label>
<input
id="stream-duration"
type="number"
min="1"
step="1"
value={values.durationHours}
onChange={set("durationHours")}
onBlur={blur("durationHours")}
onKeyDown={(e) => {
if (["e", "E", "+", "-", "."].includes(e.key)) e.preventDefault();
}}
aria-describedby={
errors.durationHours ? "duration-error" : "duration-hint"
}
aria-invalid={!!errors.durationHours}
required
/>
{estimatedEndLabel && (
<span id="duration-hint" className="field-hint" aria-live="polite">
{estimatedEndLabel}
</span>
)}
{errors.durationHours && (
<span id="duration-error" className="field-error" role="alert">
{errors.durationHours}
</span>
)}
</div>

{/* Start In Minutes */}
<div
className={`field-group${errors.startInMinutes ? " field-group--error" : ""}`}
>
<label htmlFor="stream-start">
Start In (minutes)
<span className="field-required" aria-hidden>
*
</span>
</label>
<input
id="stream-start"
type="number"
min="0"
step="1"
value={values.startInMinutes}
onChange={set("startInMinutes")}
onBlur={blur("startInMinutes")}
onKeyDown={(e) => {
if (["e", "E", "+", "-", "."].includes(e.key)) e.preventDefault();
}}
aria-describedby={
errors.startInMinutes ? "start-error" : "start-hint"
}
aria-invalid={!!errors.startInMinutes}
required
/>
<span id="start-hint" className="field-hint">
Enter 0 to start immediately
</span>
{errors.startInMinutes && (
<span id="start-error" className="field-error" role="alert">
{errors.startInMinutes}
{/* Duration & Start In Minutes */}
Comment thread
Danielodingz marked this conversation as resolved.
<div className="row">
<div
Expand Down