Added cursor position streaming and better ux all over

Author: hrshtdotme

apps/http-server/dist/controllers/roomControllers.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRoomController = createRoomController;
 exports.joinRoomController = joinRoomController;
 exports.fetchAllRoomsController = fetchAllRoomsController;
+exports.fetchRoomByIdController = fetchRoomByIdController;
 const client_1 = require("@workspace/db/client");
 const utils_1 = require("../utils");
 const common_1 = require("@workspace/common");
@@ -178,3 +179,33 @@ function fetchAllRoomsController(req, res) {
         }
     });
 }
+function fetchRoomByIdController(req, res) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const userId = req.userId;
+        const roomId = req.params.roomId;
+        if (!userId) {
+            res.status(401).json({ message: "User Id not found" });
+            return;
+        }
+        if (!roomId) {
+            res.status(400).json({ message: "Room Id required" });
+            return;
+        }
+        try {
+            const existingRooms = yield client_1.db.select().from(client_1.roomsTable).where((0, drizzle_orm_1.eq)(client_1.roomsTable.id, roomId));
+            const room = existingRooms[0];
+            if (!room) {
+                res.status(404).json({ message: "Room not found" });
+                return;
+            }
+            res.json({
+                message: "Room fetched successfully",
+                room,
+            });
+        }
+        catch (e) {
+            console.log(e);
+            res.status(500).json({ message: "Error fetching room" });
+        }
+    });
+}

apps/http-server/dist/routes/roomRouter.js

@@ -7,4 +7,5 @@ const router = (0, express_1.Router)();
 router.route("/create").post(authenticateUser_1.authenticateUser, roomControllers_1.createRoomController);
 router.route("/join").post(authenticateUser_1.authenticateUser, roomControllers_1.joinRoomController);
 router.route("/all").get(authenticateUser_1.authenticateUser, roomControllers_1.fetchAllRoomsController);
+router.route("/:roomId").get(authenticateUser_1.authenticateUser, roomControllers_1.fetchRoomByIdController);
 exports.default = router;

apps/web/components/auth/SigninForm.tsx

@@ -16,8 +16,12 @@ import { signinAction } from "@/actions/authActions";
 import { useFormStatus } from "react-dom";
 import { useActionState, useEffect } from "react";
 import { BiInfoCircle } from "react-icons/bi";
-import { redirect } from "next/navigation";
-import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
+import { useRouter } from "next/navigation";
+
+interface RequestCookie {
+  name: string;
+  value: string;
+}
 import { setUser } from "@/lib/features/meetdraw/appSlice";
 import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
 import { toast } from "@workspace/ui/components/sonner";
@@ -47,13 +51,14 @@ export default function SigninForm({
   const [state, formAction] = useActionState(signinAction, initialState);
   const userState = useAppSelector((state) => state.app.user);
   const dispatch = useAppDispatch();
+  const router = useRouter();
 
   useEffect(() => {
     const sessionUser = sessionStorage.getItem("user");
 
     if (sessionUser && jwtCookie && jwtCookie.value) {
       dispatch(setUser(JSON.parse(sessionUser)));
-      redirect("/home");
+      router.replace("/home");
     } else if (state.user) {
       const user = {
         id: state.user.id,
@@ -67,7 +72,7 @@ export default function SigninForm({
 
   useEffect(() => {
     if (jwtCookie && jwtCookie.value && userState !== null) {
-      redirect("/home");
+      router.replace("/home");
     }
   }, [userState]);
 

apps/web/components/auth/SignupForm.tsx

@@ -16,8 +16,12 @@ import Link from "next/link";
 import { signupAction } from "@/actions/authActions";
 import { useFormStatus } from "react-dom";
 import { useActionState, useEffect } from "react";
-import { redirect } from "next/navigation";
-import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
+import { useRouter } from "next/navigation";
+
+interface RequestCookie {
+  name: string;
+  value: string;
+}
 import { setUser } from "@/lib/features/meetdraw/appSlice";
 import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
 import { toast } from "@workspace/ui/components/sonner";
@@ -47,13 +51,14 @@ export default function SignupForm({
   const [state, formAction] = useActionState(signupAction, initialState);
   const dispatch = useAppDispatch();
   const userState = useAppSelector((state) => state.app.user);
+  const router = useRouter();
 
   useEffect(() => {
     const sessionUser = sessionStorage.getItem("user");
 
     if (sessionUser && jwtCookie && jwtCookie.value) {
       dispatch(setUser(JSON.parse(sessionUser)));
-      redirect("/home");
+      router.replace("/home");
     } else if (state.user) {
       const user = {
         id: state.user.id,
@@ -67,7 +72,7 @@ export default function SignupForm({
 
   useEffect(() => {
     if (jwtCookie && jwtCookie.value && userState) {
-      redirect("/home");
+      router.replace("/home");
     }
   }, [userState]);
 

apps/web/components/canvas/Canvas.tsx

@@ -52,7 +52,7 @@ import { TbZoom } from "react-icons/tb";
 import { GrRedo, GrUndo } from "react-icons/gr";
 import { AiOutlineHome } from "react-icons/ai";
 import { BiCopy } from "react-icons/bi";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
 import { setUser, setActiveRoom } from "@/lib/features/meetdraw/appSlice";
 import { useWebSocket } from "@/lib/hooks/websocket";
@@ -84,6 +84,7 @@ const Canvas = ({ roomId, token }: { roomId: string; token: string }) => {
   const [showChatBar, setShowChatBar] = useState(false);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isClient, setIsClient] = useState(false);
+  const router = useRouter();
   const { socket, isLoading, isError } = useWebSocket(
     `${process.env.NEXT_PUBLIC_WS_URL}?token=${token}`
   );
@@ -178,7 +179,7 @@ const Canvas = ({ roomId, token }: { roomId: string; token: string }) => {
 
   useEffect(() => {
     if (!token) {
-      redirect("/signin");
+      router.replace("/signin");
     }
 
     if (!user) {
@@ -1580,7 +1581,7 @@ const Canvas = ({ roomId, token }: { roomId: string; token: string }) => {
                 className={`bg-transparent relative p-2 hover:bg-green-600/20 cursor-pointer`}
                 onClick={() => {
                   closeSocket();
-                  redirect("/home");
+                  router.replace("/home");
                 }}
               >
                 <AiOutlineHome className="text-white" size="18" />

apps/web/components/home/ChatRoom.tsx

@@ -3,9 +3,13 @@ import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
 import { toast } from "@workspace/ui/components/sonner";
 import { setHomeView } from "@/lib/features/meetdraw/appSlice";
 import { useWebSocket } from "@/lib/hooks/websocket";
-import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
 import { useEffect, useRef, useState } from "react";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
+
+interface RequestCookie {
+  name: string;
+  value: string;
+}
 import { Button } from "@workspace/ui/components/button";
 import { IoSend } from "react-icons/io5";
 import { WebSocketMessage } from "@workspace/common";
@@ -31,6 +35,7 @@ const ChatRoom = ({ jwtCookie }: { jwtCookie: RequestCookie }) => {
   const userState = useAppSelector((state) => state.app.user);
   const [serverReady, setServerReady] = useState(false);
   const dispatch = useAppDispatch();
+  const router = useRouter();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [messages, setMessages] = useState<Message[]>();
   const chatDivRef = useRef<HTMLDivElement>(null);
@@ -129,7 +134,8 @@ const ChatRoom = ({ jwtCookie }: { jwtCookie: RequestCookie }) => {
     toast.error("Please sign in to chat", {
       description: "You must be signed in to chat",
     });
-    redirect("/signin");
+    router.replace("/signin");
+    return null;
   }
 
   if (!activeRoom) {

apps/web/components/home/CreateRoomView.tsx

@@ -6,20 +6,21 @@ import SubmitButton from "../common/SubmitButton";
 import { RxCross1 } from "react-icons/rx";
 import { createRoomAction } from "@/actions/roomActions";
 import { useEffect } from "react";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useAppDispatch } from "@/lib/hooks/redux";
 import { setHomeView } from "@/lib/features/meetdraw/appSlice";
 
 const CreateRoomView = () => {
   const dispatch = useAppDispatch();
+  const router = useRouter();
   const [state, formAction, isPending] = useActionState(createRoomAction, {
     message: "",
     room: undefined,
   });
 
   useEffect(() => {
     if (state.room) {
-      redirect(`/canvas/${state.room.id}`);
+      router.push(`/canvas/${state.room.id}`);
     }
   }, [state.room]);
 

apps/web/components/home/JoinRoomView.tsx

@@ -5,20 +5,21 @@ import FormInput from "../common/FormInput";
 import SubmitButton from "../common/SubmitButton";
 import { RxCross1 } from "react-icons/rx";
 import { joinRoomAction } from "@/actions/roomActions";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { setHomeView } from "@/lib/features/meetdraw/appSlice";
 import { useAppDispatch } from "@/lib/hooks/redux";
 
 const JoinRoomView = () => {
   const dispatch = useAppDispatch();
+  const router = useRouter();
   const [state, formAction, isPending] = useActionState(joinRoomAction, {
     message: "",
     room: undefined,
   });
 
   useEffect(() => {
     if (state.room) {
-      redirect(`/canvas/${state.room.id}`);
+      router.push(`/canvas/${state.room.id}`);
     }
   }, [state.room]);
 

apps/web/components/home/LinkButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Button } from "@workspace/ui/components/button";
-import { redirect, RedirectType } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { ReactNode } from "react";
 
 export interface LinkButtonprops {
@@ -16,9 +16,10 @@ const LinkButton = ({
   variant,
   className,
 }: LinkButtonprops) => {
+  const router = useRouter();
   return (
     <Button
-      onClick={() => redirect(href)}
+      onClick={() => router.push(href)}
       className={`overflow-clip relative p-0 cursor-pointer transition-all duration-500 hover:bg-black hover:text-white border border-black hover:border-green-600/30 ${className}`}
     >
       {variant === "ghost" ? (

apps/web/components/home/MainPage.tsx

@@ -8,9 +8,13 @@ import { useEffect, useRef, useState } from "react";
 import StateButton from "./StateButton";
 import CreateRoomView from "./CreateRoomView";
 import JoinRoomView from "./JoinRoomView";
-import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
 import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
+
+interface RequestCookie {
+  name: string;
+  value: string;
+}
 import {
   setHomeView,
   setRooms,
@@ -32,10 +36,11 @@ const MainPage = ({
 }) => {
   const userState = useAppSelector((state) => state.app.user);
   const dispatch = useAppDispatch();
+  const router = useRouter();
 
   useEffect(() => {
     if (!jwtCookie || !jwtCookie.value) {
-      redirect("/signin");
+      router.replace("/signin");
     }
     if (!userState) {
       const user = JSON.parse(sessionStorage.getItem("user")!);