Merge pull request #25 from MridulDhiman/master

added Role based Access Control in Collaborative Room

Author: MridulDhiman

pnpm-lock.yaml

@@ -1,9 +1,16 @@
+import RoomNavbar from "@/src/components/common/RoomNavbar";
 import SocketProvider from "@/src/context/SocketContext";
+import RoomContextProvider from "@/src/context/RoomContext";
 
 const RoomLayout = ({ children }) => {
   return (
-    <div className="w-full h-screen bg-white">
-      <SocketProvider>{children}</SocketProvider>
+    <div className="bg-black">
+      <RoomContextProvider>
+        <SocketProvider>
+          <RoomNavbar />
+          {children}
+          </SocketProvider>
+      </RoomContextProvider>
     </div>
   );
 };

src/app/room/[roomId]/layout.jsx

@@ -1,14 +1,14 @@
 import { redirect } from "next/navigation";
 import CollaborativeSandpackEditor from "@/src/components/editor/CollaborativeSandpackEditor";
-import { templates } from "@/src/utils";
-import { auth } from "@clerk/nextjs/server";
-import { createNewRoom, fetchLatestRoomFilesState } from "@/src/lib/actions";
-import { logFailureCb, handleFailureCase } from "@/src/lib/utils";
+import { auth, currentUser } from "@clerk/nextjs/server";
+import { createNewRoom, fetchLatestRoomFilesState, fetchRoomMembers, inviteUserToRoom } from "@/src/lib/actions";
+import { logFailureCb, handleFailureCase, templates, RoomRole } from "@/src/lib/utils";
 
 
 
 export default async function CollaborativeRoomPage({ params, searchParams }) {
   const { userId } = await auth();
+  const user = await currentUser();
   const roomId = params["roomId"];
   const template = searchParams["template"];
   console.log("Template: ", template);
@@ -18,7 +18,7 @@ export default async function CollaborativeRoomPage({ params, searchParams }) {
     redirect("/");
   }
 
-  let shardDetails; 
+  let shardDetails, userRole;
   if (roomId === "new-room") {
     if (!template || !templates.includes(template)) {
       console.log("Template not valid");
@@ -33,36 +33,94 @@ export default async function CollaborativeRoomPage({ params, searchParams }) {
       src: "createNewRoom()"
     }, logFailureCb);
 
-    shardDetails = out.data.shards;
+    shardDetails = out.data.shards?.[0];
     const files = out.data.files;
     console.log("shard details: ", shardDetails);
     console.log("files: ", files);
     shardDetails.files = files;
+
+    const newRoomId = shardDetails?.id;
+
+    let roomMembersResponse = await fetchRoomMembers(userId, newRoomId);
+  if (!roomMembersResponse || roomMembersResponse?.error || !roomMembersResponse?.data) {
+    console.log("could not fetch room members: "+ roomMembersResponse);
+      if(roomMembersResponse?.error) console.log("explicit error message: " + roomMembersResponse?.error?.message || "could not fetch room members")
+      redirect("/");
+  }
+
+  console.log("members: ", roomMembersResponse.data);
+    // Member type => [{id: number, userId: string, roomId: number, role : enum<'owner', 'editor', 'viewer'>}]
+    let members = roomMembersResponse.data.members ?? [];
+    const isOwner = members.some(member => member.userId === userId && member.role === RoomRole.OWNER);
+
+    if(isOwner) {
+      // user is already an owner of the room, redirect to the room
+      redirect(`/room/${newRoomId}`);
+    }
+      else {
+        // user is not an owner of the room, add them as an owner
+      const out = await inviteUserToRoom(userId, newRoomId, user.primaryEmailAddress?.emailAddress ?? "", RoomRole.OWNER);
+      if(out?.error) {
+        console.log("error occurred in inviteUserToRoom: ", out);
+        redirect("/");
+      }
+
+      userRole = RoomRole.OWNER;
+    }
   }
 
   if (roomId !== "new-room") {
     let out = await fetchLatestRoomFilesState(userId, roomId);
     if (!out || out?.error || !out?.data) {
       console.log("could not fetch latest room state: "+ out);
       if(out?.error) console.log("explicit error message: " + out?.error?.message)
-        redirect("/your-work");
+        redirect("/");
     }
 
     let data = out.data;
     shardDetails = data.shard;
+
+    let roomMembersResponse = await fetchRoomMembers(userId, roomId);
+  if (!roomMembersResponse || roomMembersResponse?.error || !roomMembersResponse?.data) {
+    console.log("could not fetch room members: "+ roomMembersResponse);
+      if(roomMembersResponse?.error) console.log("explicit error message: " + roomMembersResponse?.error?.message || "could not fetch room members")
+      redirect("/");
   }
 
-  console.log("Shard details: ", shardDetails);
+  console.log("members: ", roomMembersResponse.data);
+    // Member type => [{id: number, userId: string, roomId: number, role : enum<'owner', 'editor', 'viewer'>}]
+    let members = roomMembersResponse.data.members ?? [];
+    const isMember = members.some(member => member.userId === userId);
 
-  const { userId: creator, isTemplate, id } = shardDetails;
+    if(shardDetails?.userId === userId && !isMember) {
+      // user is the creator of the room and not a member yet, add them as a "owner"
+      const out = await inviteUserToRoom(userId, roomId, user.primaryEmailAddress?.emailAddress ?? "", RoomRole.OWNER);
+      if(out?.error) {
+        console.log("error occurred in inviteUserToRoom: ", out);
+        redirect("/");
+      }
+      userRole = RoomRole.OWNER;
+    }
+    else if (!isMember && shardDetails?.userId !== userId) {
+      // user is not a member of the room and is not the creator of the room, redirect to the home page
+      redirect("/");
+    }
+    else if(isMember) {
+      userRole = members.find(member => member.userId === userId)?.role ?? 'undefined';
+    }
+  }
+
+  console.log("Shard details: ", shardDetails);
+  console.log("User role: ", userRole);
 
   return (
     <>
       <CollaborativeSandpackEditor
         shardDetails={JSON.stringify(shardDetails)}
-        template={isTemplate ? shardDetails?.templateType : "react"}
+        template={shardDetails?.templateType}
         id={shardDetails?.id ?? ""}
         isNewShard={roomId === "new-room"}
+        userRole={userRole}
       />
     </>
   );

src/app/room/[roomId]/page.jsx

@@ -1,9 +1,8 @@
 import { redirect } from "next/navigation";
-import { templates } from "@/src/utils";
 import SandpackEditor from "@/src/components/editor/SandpackEditor";
 import { auth, currentUser } from "@clerk/nextjs/server";
 import {  createShard } from "@/src/lib/actions";
-import { handleFailureCase, logFailureCb } from "@/src/lib/utils";
+import { handleFailureCase, logFailureCb, templates } from "@/src/lib/utils";
 
 
 const page = async ({ params }) => {

src/app/shard/template/[template]/page.jsx

@@ -1,6 +1,5 @@
 import SandpackEditor from "@/src/components/editor/SandpackEditor";
-import { templates } from "@/src/utils";
-
+import { templates } from "@/src/lib/utils";
 import { redirect } from "next/navigation";
 export const generateMetadata = ({ params }) => {
   let template = params.template;

src/app/try-editor/[template]/page.jsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useSocket } from "@/src/context/SocketContext";
 import { useUser } from "@clerk/nextjs";
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Minimize2, Maximize2, X } from "lucide-react";
 import { Rnd } from "react-rnd";
+import { useSocket } from "@/src/hooks/useSocket";
 
 export default function ChatBox({roomId}) {
   const { socket, chatMessages, sendChatMessage } = useSocket();
@@ -32,7 +32,7 @@ export default function ChatBox({roomId}) {
 
     const message = {
       text: newMessage,
-      sender: user.fullName,
+      sender: user.username, 
       timestamp: new Date().toISOString(),
     };
 
@@ -91,12 +91,12 @@ export default function ChatBox({roomId}) {
                 <div
                   key={index}
                   className={`flex flex-col ${
-                    msg.sender === user.fullName ? "items-end" : "items-start"
+                    msg.sender === user.username ? "items-end" : "items-start"
                   }`}
                 >
                   <div
                     className={`max-w-[80%] rounded-lg p-2 ${
-                      msg.sender === user.fullName
+                      msg.sender === user.username
                         ? "bg-blue-600 text-white"
                         : "bg-gray-700 text-white"
                     }`}

src/components/chat/ChatBox.jsx

@@ -5,7 +5,7 @@ import Avatar from "react-avatar";
 import Button from "../ui/Button";
 import Comment from "../ui/icons/Comment";
 import { cn } from "@/src/lib/utils";
-import { useActiveComment } from "@/src/context/CommentContext";
+import { useActiveComment } from "@/src/hooks/useActiveComment";
 
 const CommentMsg = ({
   _id,

src/components/comment/CommentMsg.jsx

@@ -1,9 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Textarea } from "../ui/textarea";
 import Button from "../ui/Button";
-import { useActiveComment } from "../../context/CommentContext";
-import { toast } from "sonner";
 import { useUser } from "@clerk/nextjs";
+import { useActiveComment } from "@/src/hooks/useActiveComment";
 
 const CommentTextBox = () => {
   const [input, setInput] = useState("");

src/components/comment/CommentTextbox.jsx

@@ -1,17 +1,18 @@
-import { useRouter } from "next/navigation";
-import { useAuth, useUser } from "@clerk/nextjs";
+import { useUser } from "@clerk/nextjs";
 import { toast } from "sonner";
 import clsx from "clsx";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { isRoomPath } from "@/src/lib/utils";
 
 const ItemsList = () => {
   const { isSignedIn } = useUser();
-  const { userId } = useAuth();
-  const router = useRouter();
+  const pathname = usePathname();
   if (!isSignedIn) {
     toast.error("not signed in");
     return null;
   }
+  
 
   const liItems = [
     // {
@@ -36,11 +37,12 @@ const ItemsList = () => {
     },
   ];
 
-  const evenLiStyles = ``;
-  return (
+  const isRoomPathFlag = isRoomPath(pathname);
+
+   return (
     <>
       <ul className="rounded-sm flex gap-3">
-        {liItems.map((item, index) => (
+        {!isRoomPathFlag && liItems.map((item, index) => (
           <Link
             key={index}
             href={item.target}