refactor

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) => (