Merge pull request #54 from Eclipse-Dominator/fix-concurrent-access-to-edits

Decentralized initiation of shared values

Author: cheehongw

collab_service/package.json

@@ -3,10 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node ./y-webrtc-signaling"
+    "start": "y-webrtc-signaling"
   },
   "keywords": [],
   "author": "",

collab_service/y-webrtc-signaling.js

@@ -7,38 +7,34 @@ import {
   EditorState,
   EditorView,
   Extension,
-  ViewUpdate,
   basicSetup,
 } from "@uiw/react-codemirror";
 import { Flex } from "@chakra-ui/react";
 import { language, useSharedEditor } from "../../contexts/sharededitor.context";
 
 const toLangSyntax = (lang: language) => {
   switch (lang) {
-    case "C++17":
+    case "c++17":
       return cpp();
-    case "Python3":
+    case "python3":
       return python();
-    case "Java":
+    case "java":
       return java();
   }
 };
 
 const CollabEditor = () => {
   const editorRef = useRef<HTMLDivElement>(null);
-  const { setCode, lang, codeUndo, ycode, provider } = useSharedEditor();
+  const { lang, codeUndo, ycode, provider } = useSharedEditor();
 
   useEffect(() => {
-    if (!editorRef.current || !ycode || !codeUndo || !provider) return () => {}; // nothing to reset
+    if (!editorRef.current || !ycode || !codeUndo || !provider || !lang)
+      return () => {}; // nothing to reset
 
     const extensions: Extension[] = [
       basicSetup(),
       toLangSyntax(lang),
-      EditorView.updateListener.of((v: ViewUpdate) => {
-        if (v.docChanged) {
-          setCode(v.state.doc.toString());
-        }
-      }),
+      EditorView.lineWrapping,
       yCollab(ycode, provider?.awareness, { undoManager: codeUndo }),
     ];
 
@@ -58,7 +54,7 @@ const CollabEditor = () => {
         editorRef.current.removeChild(view.dom);
       }
     };
-  }, [editorRef, lang, provider]);
+  }, [editorRef, lang, provider, ycode]);
 
   return <Flex h="100%" w="100%" ref={editorRef}></Flex>;
 };

frontend/src/components/CollabEditor/CollabEditor.component.tsx

@@ -1,5 +1,13 @@
 import { ChevronDownIcon } from "@chakra-ui/icons";
-import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import {
+  Button,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from "@chakra-ui/react";
 import { useMatchmake } from "../../contexts/matchmake.context";
 
 const diffRange = [
@@ -9,12 +17,26 @@ const diffRange = [
   [8, 9.9],
 ];
 
+const CollaborateBtn = () => {
+  return (
+    <HStack>
+      <Text>In Room</Text>
+    </HStack>
+  );
+};
+
 const MatchMakeBtn = () => {
-  const { findMatch } = useMatchmake();
+  const { findMatch, isMatching, matchedRoom } = useMatchmake();
 
-  return (
+  return matchedRoom ? (
+    <CollaborateBtn />
+  ) : (
     <Menu>
-      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+      <MenuButton
+        as={Button}
+        rightIcon={<ChevronDownIcon />}
+        isLoading={isMatching}
+      >
         Collaborate
       </MenuButton>
       <MenuList>

frontend/src/components/MatchMakeBtn/MatchMakeBtn.component.tsx

@@ -16,8 +16,9 @@ export const Navbar = () => {
   const isAdmin = useSelector(selectIsAdmin);
 
   return (
-    <chakra.header boxShadow={"md"} minH="10vh" zIndex="999">
-      <Flex w="100%" px="6" py="2vh" align={"center"} justify={"space-between"}>
+    <chakra.header boxShadow="md" minH="10vh" zIndex="2" pos="sticky">
+      {/* chakra dont recomment zindex > 2 */}
+      <Flex w="100%" px="6" py="2vh" align="center" justify="space-between">
         <HStack spacing="4px">
           <Link to="/">
             <Button colorScheme="linkedin" variant="outline">

frontend/src/components/Navbar/Navbar.component.tsx

@@ -75,7 +75,7 @@ const QnSubmissionHistory = () => {
           position="sticky"
           top={0}
           bg="gray.200"
-          zIndex={1}
+          zIndex="1"
           boxShadow="base"
         >
           <Tr>

frontend/src/components/QnSubmissionHistory/QnSubmissionHistory.component.tsx

@@ -24,7 +24,7 @@ export function QuestionEntry(props : QuestionEntryProps) {
     }
 
     return (
-      <Tr>
+      <Tr key={qn.id}>
         <Td>
           <Link to={`/view/${qn._id}`}>
             <Text>{qn.displayedQuestion}</Text>
@@ -49,7 +49,10 @@ export function QuestionEntry(props : QuestionEntryProps) {
                   icon={<EditIcon />}
                 ></IconButton>
               </Link>
-              <DeleteQnBtn qn={qn} onSubmit={() => onDelete(qn._id)}></DeleteQnBtn>
+              <DeleteQnBtn
+                qn={qn}
+                onSubmit={() => onDelete(qn._id)}
+              ></DeleteQnBtn>
             </ButtonGroup>
           </Td>
         ) : (

frontend/src/components/QnTable/QuestionEntry.component.tsx

@@ -13,8 +13,9 @@ import { useToast } from "@chakra-ui/react";
 
 interface RoomDetail {
   partner: string;
-  host: string;
+  init: boolean;
   qn: string;
+  room: string;
 }
 
 interface MatchmakeContextInterface {