PF-1391 - Fixing session end hooks

miroapp · Nov 20, 2023 · c297e7b · c297e7b
1 parent fa90c8e
commit c297e7b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 55 deletions.
diff --git a/examples/breakout-rooms/NOTES.md b/examples/breakout-rooms/NOTES.md
@@ -14,9 +14,8 @@
 
 # TODO
 
-- [ ] Implement timer and control session with it
+- [x] Implement timer and control session with it
 - [ ] The room starting point selector might need more love.
 - [ ] Should a facilitator be able to zoom to starting point or even remove it?
 - [ ] Make main scrollable and toolbar sitcky to the bottom of the viewport
-- [ ] Address typography/styles issues
-- [ ] Do we need alert component to display messages?
+- [x] Address typography/styles issues
diff --git a/examples/breakout-rooms/src/components/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager.tsx
@@ -10,7 +10,7 @@ import {
   useSelectedItems,
   useTimer,
 } from "../hooks";
-import { formatDisplayTime, isUser } from "../utils";
+import { convertTime, formatDisplayTime, isUser } from "../utils";
 import { RoomConfig } from "./RoomConfig";
 import { DEFAULT_TIME, Timer } from "./Timer";
 
@@ -30,7 +30,7 @@ export const BreakoutManager: React.FC = () => {
 
   const timer = useTimer({
     duration,
-    onStop: () => service.endSession(),
+    onStop: onTimerStop,
     onTick: (timestamp) => setCurrentTime(timestamp),
   });
 
@@ -168,38 +168,10 @@ export const BreakoutManager: React.FC = () => {
 
   return (
     <main>
-      <Timer onSet={setTimerDuration} />
-
-      {duration ? <h5>Duration: {formatDisplayTime(duration)}</h5> : null}
-      {currentTime ? <h5>Timer: {formatDisplayTime(currentTime)}</h5> : null}
-
-      <div>
-        <button
-          className="button button-small button-secondary"
-          onClick={() => timer.start()}
-          disabled={timer.state === "started"}
-        >
-          Start timer
-        </button>
-      </div>
-      <div>
-        <button
-          className="button button-small button-secondary"
-          onClick={() => timer.start()}
-          disabled={timer.state !== "started"}
-        >
-          Pause timer
-        </button>
-      </div>
-      <div>
-        <button
-          className="button button-small button-secondary"
-          onClick={() => timer.stop()}
-          disabled={timer.state !== "started"}
-        >
-          Stop timer
-        </button>
-      </div>
+      <Timer
+        onSet={setTimerDuration}
+        step={convertTime(1, "milliseconds", "minutes")}
+      />
 
       <div className="container">
         <section className="rooms-container">
@@ -220,14 +192,16 @@ export const BreakoutManager: React.FC = () => {
           ))}
         </section>
 
-        <button
-          className="button button-medium button-primary button-add"
-          type="button"
-          title="Add room"
-          onClick={handleAddGroup}
-        >
-          <span className="icon-plus"></span>
-        </button>
+        {breakout?.state !== "started" ? (
+          <button
+            className="button button-medium button-primary button-add"
+            type="button"
+            title="Add room"
+            onClick={handleAddGroup}
+          >
+            <span className="icon-plus"></span>
+          </button>
+        ) : null}
       </div>
 
       {unassignedUsers.length ? (

diff --git a/examples/breakout-rooms/src/hooks.tsx b/examples/breakout-rooms/src/hooks.tsx
@@ -431,15 +431,6 @@ export const useBreakout = () => {
 
   const releaseSession = async () => {
     const breakoutRooms = await miro.board.storage.collection(COLLECTION_NAME);
-    const pastBreakoutRooms =
-      (await breakoutRooms.get<Breakout[]>("past")) ?? [];
-    const historyEntries = [...pastBreakoutRooms, breakout];
-
-    log("releaseSession", { breakoutRooms, pastBreakoutRooms, breakout });
-
-    breakoutRooms.set("past", historyEntries);
-    // Collection.remove does not trigger onValue
-    // breakoutRooms.set(ACTIVE_ITEM, {});
     breakoutRooms.remove(ACTIVE_ITEM);
     setBreakout(undefined);
   };

diff --git a/examples/breakout-rooms/src/styles.css b/examples/breakout-rooms/src/styles.css
@@ -2,7 +2,6 @@
 
 /** 
   TODO: Make main scrollable and toolbar sitcky to the bottom of the viewport
-  TODO: Address typography issues
   TODO: Do we need alert component to display messages?
 **/
 
@@ -51,6 +50,11 @@ img {
   gap: 0.5em;
   overflow: auto;
   width: 100%;
+  height: 100%;
+}
+
+.rooms-container > p {
+  text-align: center;
 }
 
 .room-container {