Merge branch 'master' into assistant-api

CS3219-AY2324S1 · Nov 10, 2023 · f8cce00 · f8cce00
2 parents 70f9405 + 381c768
commit f8cce00
Show file tree

Hide file tree

Showing 6 changed files with 484 additions and 318 deletions.
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
@@ -0,0 +1,77 @@
+type ConfirmModalProps = {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  cancelButtonText?: string;
+  confirmButtonText?: string;
+  type?: "warning" | "neutral";
+};
+const ConfirmModal = ({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  cancelButtonText = "Cancel",
+  confirmButtonText = "Confirm",
+  type = "neutral",
+}: ConfirmModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed z-10 inset-0 overflow-y-auto">
+      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div className="fixed inset-0 transition-opacity" aria-hidden="true">
+          <div className="absolute inset-0 bg-gray-500 opacity-70"></div>
+        </div>
+        <span
+          className="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div className="sm:flex sm:items-start">
+              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <h3
+                  className="text-lg leading-6 font-medium text-gray-900"
+                  id="modal-title"
+                >
+                  {title}
+                </h3>
+                <div className="mt-2">
+                  <p className="text-sm text-gray-500">{message}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <button
+              type="button"
+              className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white ${
+                type == "warning"
+                  ? "bg-red-600 hover:bg-red-700 focus:ring-red-500"
+                  : "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500"
+              }focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`}
+              onClick={onConfirm}
+            >
+              {confirmButtonText}
+            </button>
+            <button
+              type="button"
+              className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+              onClick={onCancel}
+            >
+              {cancelButtonText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;
diff --git a/src/hooks/useMatchUsers.ts b/src/hooks/useMatchUsers.ts
@@ -3,34 +3,36 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { api } from "~/utils/api";
 
-
 type UseMatchUsersResult = {
-    setMatchedUsers: (user1: string, user2: string) => void;
+  setMatchedUsers: (user1: string, user2: string) => void;
 };
 /**
  * Hook for matching users
- * @returns 
+ * @returns a function to set a pair of matched users
  */
 export default function useMatchUsers(): UseMatchUsersResult {
-    const { data: session } = useSession(); 
-    const matchedUsers = api.sharedSession.createSharedCodeSession.useMutation();
-
-    const router = useRouter();
-    const matchUsersSubscription = api.sharedSession.sharedCodeSessionSubscription.useSubscription(undefined, {
-        onData(data) {
-            if (data.user1 === session?.user.id|| data.user2 === session?.user.id) {
-                console.log("Routing");
-                void router.push(`/collab/rooms/${data.sessionId}`);
-            }
-        }
-    });
+  const { data: session } = useSession();
+  const matchedUsers = api.sharedSession.createSharedCodeSession.useMutation();
 
-    return {
-        setMatchedUsers(user1, user2) {
-            const smallerUser = user1 < user2 ? user1 : user2;
-            if (smallerUser === session?.user.id) return; // the larger user does the matching
-            matchedUsers.mutate({ user1, user2 });
+  const router = useRouter();
+  const matchUsersSubscription =
+    api.sharedSession.sharedCodeSessionSubscription.useSubscription(undefined, {
+      onData(data) {
+        if (
+          data.user1 === session?.user.id ||
+          data.user2 === session?.user.id
+        ) {
+          console.log("Routing");
+          void router.push(`/collab/rooms/${data.sessionId}`);
         }
-    }
+      },
+    });
 
+  return {
+    setMatchedUsers(user1, user2) {
+      const smallerUser = user1 < user2 ? user1 : user2;
+      if (smallerUser === session?.user.id) return; // the larger user does the matching
+      matchedUsers.mutate({ user1, user2 });
+    },
+  };
 }