refactor(webapp): server api

webapp/components/join.tsx

@@ -5,7 +5,7 @@ import {
   meetingIdAtom,
 } from '../store/atom'
 import { setMeetingId } from '../lib/storage'
-import { addSplitSymbol, delSplitSymbol } from '../lib/util'
+import { newRoom } from '../lib/api'
 
 export default function Join() {
   const [loc, setLoc] = useAtom(locationAtom)
@@ -14,18 +14,15 @@ export default function Join() {
   const [tmpId, setTmpId] = useState<string>("")
 
   const newMeeting = async () => {
-    let res = await fetch(`/room/`, {
-      method: "POST"
-    })
-    let meetingId = (await res.json()).roomId
+    let meetingId = (await newRoom()).roomId
     enterMeeting(meetingId)
   }
 
   const joinMeeting = async () => {
     let meetingId = tmpId
-    await fetch(`/room/${meetingId}`, {
-      method: "PATCH"
-    })
+    //await fetch(`/room/${meetingId}`, {
+    //  method: "PATCH"
+    //})
     enterMeeting(meetingId)
   }
 

webapp/components/layout.tsx

@@ -15,6 +15,7 @@ import {
 import copy from 'copy-to-clipboard'
 import SvgDone from './svg/done'
 import SvgEnd from './svg/end'
+import { getRoom, delStream } from '../lib/api'
 
 export default function Layout(props: { meetingId: string }) {
   const [copyStatus, setCopyStatus] = useState(false)
@@ -29,8 +30,7 @@ export default function Layout(props: { meetingId: string }) {
   const [presentationStream] = useAtom(presentationStreamAtom)
 
   const refresh = async () => {
-    let res = await fetch(location.origin + `/room/${props.meetingId}`)
-    const data = (await res.json()).streams
+    const data = (await getRoom(props.meetingId)).streams
     const r = Object.keys(data)
       .filter(i => i !== localStreamId)
       .filter(i => !!i)
@@ -42,9 +42,7 @@ export default function Layout(props: { meetingId: string }) {
   }
 
   const callEnd = async () => {
-    await fetch(`/room/${props.meetingId}/stream/${localStreamId}`, {
-      method: "DELETE"
-    })
+    delStream(props.meetingId, localStreamId)
 
     setMeetingJoined(false)
   }

webapp/components/member.tsx

@@ -6,17 +6,17 @@ import {
   remoteStreamIdsAtom,
   meetingIdAtom,
 } from '../store/atom'
+import { getRoom, setStream } from '../lib/api'
 
 export default function Member() {
   const [localStreamId] = useAtom(localStreamIdAtom)
-  const [_, setStream] = useAtom(remoteStreamIdsAtom)
+  const [_, setRemoteStreamIds] = useAtom(remoteStreamIdsAtom)
   const [meetingId] = useAtom(meetingIdAtom)
 
   const [localUserStatus] = useAtom(localUserStatusAtom)
 
   const refresh = async () => {
-    let res = await fetch(location.origin + `/room/${meetingId}`)
-    setStream(Object.keys((await res.json()).streams).filter(i => i !== localStreamId))
+    setRemoteStreamIds(Object.keys((await getRoom(meetingId)).streams).filter(i => i !== localStreamId))
   }
 
   useEffect(() => {
@@ -25,13 +25,7 @@ export default function Member() {
   }, [])
 
   useEffect(() => {
-    fetch(location.origin + `/room/${meetingId}/stream/${localStreamId}`, {
-      method: 'PATCH',
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(localUserStatus),
-    })
+    setStream(meetingId, localStreamId, localUserStatus)
   }, [localUserStatus])
 
   return <></>

webapp/lib/api.ts

@@ -0,0 +1,75 @@
+
+interface Room {
+  roomId: string,
+  locked: false,
+  owner: string,
+  presenter?: string,
+  streams: any,
+}
+
+
+interface Stream {
+  name: string,
+  audio: boolean,
+  video: boolean,
+  screen: boolean,
+}
+
+async function newRoom(): Promise<Room> {
+  return (await fetch(`/room/`, {
+    method: "POST",
+  })).json()
+}
+
+async function getRoom(roomId: string): Promise<Room> {
+  return (await fetch(`/room/${roomId}`)).json()
+}
+
+async function setRoom(roomId: string, data: any): Promise<Room> {
+  return (await fetch(`/room/${roomId}`, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "PATCH",
+    body: JSON.stringify(data),
+  })).json()
+}
+
+async function delRoom(roomId: string): Promise<void> {
+  return (await fetch(`/room/${roomId}`, {
+    method: "DELETE",
+  })).json()
+}
+
+async function newStream(roomId: string): Promise<Stream> {
+  return (await fetch(`/room/${roomId}/stream`, {
+    method: "POST",
+  })).json()
+}
+
+async function setStream(roomId: string, streamId: string, data: any): Promise<Stream> {
+  return (await fetch(`/room/${roomId}/stream/${streamId}`, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "PATCH",
+    body: JSON.stringify(data),
+  })).json()
+}
+
+async function delStream(roomId: string, streamId: string): Promise<void> {
+  return (await fetch(`/room/${roomId}/stream/${streamId}`, {
+    method: "DELETE",
+  })).json()
+}
+
+export {
+  newRoom,
+  getRoom,
+  setRoom,
+  delRoom,
+
+  newStream,
+  setStream,
+  delStream,
+}