From dcfb286f10f4b6e7444180595c9f7de27bf0b155 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Thu, 10 Aug 2023 16:20:21 -0500
Subject: [PATCH] refactor

---
 client/Room.tsx | 50 ++++++++++++-------------------------------------
 1 file changed, 12 insertions(+), 38 deletions(-)

diff --git a/client/Room.tsx b/client/Room.tsx
index c198515..9fe754f 100644
--- a/client/Room.tsx
+++ b/client/Room.tsx
@@ -15,11 +15,15 @@ const connectionStatusMap = {
 export default function Room({ roomId }) {
   const [readyState, setReadyState] = useState(ReadyState.CLOSED);
   const [connectedClients, setConnectedClients] = useState([]);
-  const [clientId, setClientId] = useState(null);
+  const [clientId, setClientId] = useState<string | null>(null);
   const [chats, setChats] = useState([]);
 
   const [doc, setDoc] = useState(Automerge.init());
   const [syncState, setSyncState] = useState(Automerge.initSyncState());
+
+  const [message, setMessage] = useState("");
+  const [addItemName, setAddItemName] = useState("");
+
   function updateDoc(newDoc) {
     setDoc(newDoc);
   }
@@ -85,41 +89,6 @@ export default function Room({ roomId }) {
     setReadyState(newReadyState);
   }, [newReadyState]);
 
-  const connectionStatus = connectionStatusMap[readyState];
-
-  return (
-    <>
-      <p>Room Id: {roomId}</p>
-      <p>Connection status: {connectionStatus}</p>
-      {newReadyState === ReadyState.OPEN && (
-        <ReadyPart
-          doc={doc}
-          updateDoc={updateDoc}
-          syncState={syncState}
-          chats={chats}
-          roomId={roomId}
-          clientId={clientId}
-          connectedClients={connectedClients}
-          sendWtfMessage={sendWtfMessage}
-        />
-      )}
-    </>
-  );
-}
-
-function ReadyPart({
-  doc,
-  syncState,
-  roomId,
-  clientId,
-  chats,
-  connectedClients,
-  sendWtfMessage,
-  updateDoc,
-}) {
-  const [message, setMessage] = useState("");
-  const [addItemName, setAddItemName] = useState("");
-
   function onSubmit(e) {
     e.preventDefault();
     sendWtfMessage({
@@ -133,8 +102,6 @@ function ReadyPart({
     setMessage("");
   }
 
-  const items = doc.items || [];
-
   function addItem(e) {
     e.preventDefault();
     const newDoc = Automerge.change(doc, (doc) => {
@@ -156,8 +123,15 @@ function ReadyPart({
     setAddItemName("");
   }
 
+  const items = doc.items || [];
+  const connectionStatus = connectionStatusMap[readyState];
+
+  if (newReadyState !== ReadyState.OPEN) return <>Connecting...</>;
+
   return (
     <>
+      <p>Room Id: {roomId}</p>
+      <p>Connection status: {connectionStatus}</p>
       Connected:
       <ul>
         {connectedClients.map((x) => (