public imalexnord read

Slot

Calendar-first scheduling powered by Cloudflare Workers and Google Calendar.

Languages

Repository composition by tracked source files.

TypeScript

TypeScript 79% CSS 19% SQL 2% HTML 0%

Create file Wiki Documentation

Clone

https://nobgit.com/user/imalexnord/slot.git

ssh://[email protected]:2222/user/imalexnord/slot.git

Commit

Reset booking panel between steps

3cb3ef6

Alex Nord <[email protected]> 3 days ago

src/App.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

Diff

diff --git a/src/App.tsx b/src/App.tsx
index 5c08e9e..7688cf5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -304,7 +304,7 @@ function PublicBooking() {
 
   function renderTimesView() {
     return (
-      <div className="panel-view">
+      <div className="panel-view" key="times">
         <div className="selection-heading">
           <p className="step-label">02 · PICK A TIME</p>
           <h2>{prettyDate(selectedDate, activeConfig.timezone)}</h2>
@@ -340,7 +340,7 @@ function PublicBooking() {
   function renderDurationView() {
     if (!selectedSlot) return null;
     return (
-      <div className="panel-view">
+      <div className="panel-view" key="duration">
         <button className="panel-back" type="button" onClick={changeTime}>
           <ArrowLeft size={16} /> Change time
         </button>
@@ -370,7 +370,7 @@ function PublicBooking() {
   function renderDetailsView() {
     if (!selectedSlot || !duration) return null;
     return (
-      <div className="panel-view panel-view-scroll">
+      <div className="panel-view panel-view-scroll" key="details">
         <button className="panel-back" type="button" onClick={changeDuration}>
           <ArrowLeft size={16} /> Change duration
         </button>
@@ -427,7 +427,7 @@ function PublicBooking() {
   function renderConfirmationView() {
     if (!confirmation) return null;
     return (
-      <div className="panel-view confirmation-panel">
+      <div className="panel-view confirmation-panel" key="confirmed">
         <span className="success-icon"><Check /></span>
         <p className="eyebrow">YOU'RE BOOKED</p>
         <h2>See you then.</h2>
@@ -446,7 +446,7 @@ function PublicBooking() {
   function renderRightPanel() {
     if (!activeConfig.connected) {
       return (
-        <div className="empty-state">
+        <div className="empty-state" key="disconnected">
           <MonitorUp size={28} />
           <h3>Calendar is not connected yet</h3>
           <p>The owner needs to connect Google Calendar before times can be booked.</p>
@@ -455,7 +455,7 @@ function PublicBooking() {
     }
     if (!selectedDate) {
       return (
-        <div className="empty-state subtle-empty">
+        <div className="empty-state subtle-empty" key="empty">
           <ArrowLeft size={28} />
           <h3>Start with the calendar</h3>
           <p>Pick a date and available times will appear here.</p>