Redone UI, add leave and delete logic

src/Api.js

@@ -0,0 +1,64 @@
+import firebase from 'firebase/app';
+import 'firebase/auth';
+
+const API_HOST = window.location.href.startsWith('http://localhost')
+  ? 'http://localhost:5001/watch-party-crx/us-central1/widgets'
+  : 'https://us-central1-watch-party-crx.cloudfunctions.net/widgets';
+
+export const isAuthed = () => true && firebase.auth().currentUser;
+
+export const doAuth = () => firebase.auth().signInAnonymously();
+
+export const fetcher = async ({ ENDPOINT, METHOD, ...args }) => {
+  const idToken = await firebase.auth().currentUser.getIdToken();
+  return fetch(`${API_HOST}/${ENDPOINT}`, {
+    method: METHOD,
+    headers: {
+      Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
+    },
+    ...args,
+  });
+};
+
+export const CreateRoomApi = async (data) => {
+  if (!isAuthed()) await doAuth();
+  return fetcher({
+    ENDPOINT: 'create',
+    METHOD: 'POST',
+    body: JSON.stringify(data),
+  });
+};
+
+export const JoinRoomApi = async (data) => {
+  if (!isAuthed()) await doAuth();
+  return fetcher({
+    ENDPOINT: 'join',
+    METHOD: 'POST',
+    body: JSON.stringify(data),
+  });
+};
+
+export const SendMessageApi = async (data) => {
+  if (!isAuthed()) await doAuth();
+  return fetcher({
+    ENDPOINT: 'message',
+    METHOD: 'post',
+    body: JSON.stringify(data),
+  });
+};
+
+export const LeaveRoomApi = async (data) => {
+  if (!isAuthed()) await doAuth();
+  return fetcher({
+    ENDPOINT: `leave/${data.roomId}/users/${data.uid}`,
+    METHOD: 'DELETE',
+  });
+};
+
+export const DeleteRoomApi = async (data) => {
+  if (!isAuthed()) await doAuth();
+  return fetcher({
+    ENDPOINT: `delete/${data.roomId}`,
+    METHOD: 'DELETE',
+  });
+};