michael/grub
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
Michael Zhang 2023-08-10 16:20:21 -05:00
parent 70acdb39b4
commit dcfb286f10
1 changed files with 12 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
client/Room.tsx
View file

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