SCRUM-47 Basic information about Carpool Group

prisma/migrations/20241119202005_increase_group_message_length/migration.sql

@@ -0,0 +1,13 @@
+-- AlterTable
+ALTER TABLE `conversation` ADD COLUMN `dateCreated` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE `group` ADD COLUMN `dateCreated` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE `user` ADD COLUMN `coop_end_date` DATE NULL,
+    ADD COLUMN `coop_start_date` DATE NULL,
+    ADD COLUMN `dateCreated` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+    ADD COLUMN `dateModified` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+    ADD COLUMN `group_message` TEXT NULL,
+    MODIFY `role` ENUM('RIDER', 'DRIVER', 'VIEWER') NOT NULL DEFAULT 'VIEWER';

prisma/migrations/20241119202706_add_text_type/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `group` MODIFY `message` TEXT NOT NULL;

prisma/schema.prisma

@@ -112,7 +112,7 @@ model Message {
 // Represents a group of users
 model CarpoolGroup {
   id          String   @id @default(cuid()) // primary key
-  message     String
+  message     String   @db.Text
   users       User[]
   dateCreated DateTime @default(now())
 
@@ -163,6 +163,7 @@ model User {
   Message            Message[]
   dateCreated        DateTime      @default(now())
   dateModified       DateTime      @default(now()) @updatedAt
+  groupMessage       String?       @map("group_message") @db.Text
 
   @@index([carpoolId])
   @@map(name: "user")

src/components/GroupPage.tsx

@@ -5,6 +5,9 @@ import { trpc } from "../utils/trpc";
 import { UserContext } from "../utils/userContext";
 import { Role, User } from "@prisma/client";
 import Spinner from "./Spinner";
+import { toast } from "react-toastify";
+import { TRPCClientError } from "@trpc/client";
+import { useToasts } from "react-toast-notifications";
 
 interface GroupPageProps {
   onClose: () => void;
@@ -48,24 +51,76 @@ const GroupBody = ({
   onClose: () => void;
 }) => {
   return !curUser?.carpoolId ? (
-    <NoGroupInfo role={curUser.role} />
+    <NoGroupInfo role={curUser.role} onClose={onClose} />
   ) : (
     <GroupInfo curUser={curUser} onClose={onClose} />
   );
 };
 
 interface NoGroupInfoProps {
   role: Role;
+  onClose: () => void;
 }
 
-const NoGroupInfo = ({ role }: NoGroupInfoProps) => {
-  const text =
-    role === Role.VIEWER
-      ? "You are in Viewer mode, switch to Rider or Driver to join a group"
-      : "You are not currently part of a carpool group";
+const NoGroupInfo = ({ role, onClose }: NoGroupInfoProps) => {
+  const utils = trpc.useContext();
+  const { data: user } = trpc.user.me.useQuery();
+  const [groupMessage, setGroupMessage] = useState(user?.groupMessage ?? "");
+  const { mutate: updateUserMessage } = trpc.user.groups.updateUserMessage.useMutation({
+    onSuccess: () => {
+      // Invalidate and refetch the user.me query
+      utils.user.me.invalidate();
+    },
+  });
+
+  useEffect(() => {
+    if (user?.groupMessage) {
+      setGroupMessage(user.groupMessage);
+    }
+  }, [user]);
+
+  const handleMessageSubmit = async () => {
+    if (user?.id && role === "DRIVER") {
+      await updateUserMessage({ message: groupMessage });
+    }
+  };
+
   return (
-    <div className="flex flex-grow items-center justify-center text-xl font-light">
-      {text}
+    <div className="flex flex-col">
+      {role === Role.VIEWER ? (
+        <div className="flex flex-grow items-center justify-center text-xl font-light">
+          You are in Viewer mode, switch to Rider or Driver to join a group
+        </div>
+      ) : (
+        <>
+          {role === "DRIVER" && (
+            <div className="mx-20 flex flex-col py-1 mb-8">
+              <div className="my-1 text-xs italic text-slate-400">
+                Below, share any information that you would like riders joining you your Carpool to know. You can indicate when you generally like to be leaving your place, what your preferred method of communication is, what your preference is to split gas and what your Carpool vibe will be like.
+              </div>
+              <div className="flex flex-row gap-2">
+                <textarea
+                  className="form-input min-h-[50px] flex-grow resize-none rounded-md py-2 shadow-sm"
+                  value={groupMessage}
+                  onChange={(e) => setGroupMessage(e.target.value)}
+                />
+                <button
+                  className="w-[150px] rounded-md bg-red-700 py-2 text-white h-full"
+                  onClick={async () => {
+                    await handleMessageSubmit();
+                    toast.success('Group message successfully saved!');
+                  }}
+                >
+                  Submit
+                </button>
+              </div>
+            </div>
+          )}
+          <div className="flex flex-grow items-center justify-center text-xl font-light">
+            You are not currently part of a carpool group
+          </div>
+        </>
+      )}
     </div>
   );
 };
@@ -77,19 +132,33 @@ const GroupInfo = ({
   curUser: User;
   onClose: () => void;
 }) => {
+  const utils = trpc.useContext();
   const { data: group } = trpc.user.groups.me.useQuery();
   const users = group?.users ?? [];
   const [groupMessage, setGroupMessage] = useState(group?.message ?? "");
-  const { mutate: updateMessage } =
-    trpc.user.groups.updateMessage.useMutation();
+  const { mutate: updateMessage } = trpc.user.groups.updateMessage.useMutation({
+    onSuccess: () => {
+      // Invalidate and refetch the groups.me query
+      utils.user.groups.me.invalidate();
+    },
+  });
+  const { mutate: updateUserMessage } = trpc.user.groups.updateUserMessage.useMutation({
+    onSuccess: () => {
+      // Invalidate and refetch the user.me query
+      utils.user.me.invalidate();
+    },
+  });
 
   useEffect(() => {
-    setGroupMessage(group?.message ?? "");
+    if (group?.message !== undefined) {
+      setGroupMessage(group.message);
+    }
   }, [group]);
 
   const handleMessageSubmit = async () => {
     if (group?.id && curUser?.role === "DRIVER") {
       await updateMessage({ groupId: group.id, message: groupMessage });
+      await updateUserMessage({ message: groupMessage });
     }
   };
 
@@ -109,14 +178,19 @@ const GroupInfo = ({
             />
             <button
               className="ml-8 h-full w-[150px] rounded-md bg-red-700 text-white"
-              onClick={handleMessageSubmit}
+              onClick={async () => {
+                await handleMessageSubmit();
+                toast.success('Group message successfully saved!');
+              }}
             >
               Submit
             </button>
           </div>
         </div>
       ) : (
         <div className="mx-16 flex flex-col py-1">
+          <div className="text-center">Carpool Information from Driver</div>
+          <br/>
           <p className="flex-1 justify-center rounded-md border px-3 py-2 text-center text-sm shadow-sm">
             {groupMessage != ""
               ? groupMessage

src/components/Modals/ReceivedRequestModal.tsx

@@ -136,7 +136,7 @@ const ReceivedRequestModal = (props: ReceivedModalProps): JSX.Element => {
       onClose();
       addToast(
         props.otherUser.preferredName +
-          "'s request to carpool with you has been accepted.",
+          "'s request to carpool with you has been accepted. If you're a driver, do make sure you add information on the group page for your riders!",
         { appearance: "success" }
       );
     }

src/server/router/user/groups.ts

@@ -55,20 +55,22 @@ export const groupsRouter = router({
         where: { id: input.driverId },
       });
 
-      if (driver?.seatAvail === 0) {
+      if (!driver) {
         throw new TRPCError({
-          code: "BAD_REQUEST",
-          message: "Driver does not have space available in their car",
+          code: "NOT_FOUND",
+          message: "Driver not found",
         });
       }
+
       const group = await ctx.prisma.carpoolGroup.create({
         data: {
           users: {
             connect: { id: input.driverId },
           },
-          message: "",
+          message: driver.groupMessage || "",
         },
       });
+
       const nGroup = await ctx.prisma.carpoolGroup.update({
         where: { id: group.id },
         data: {
@@ -207,4 +209,19 @@ export const groupsRouter = router({
       });
       return updatedGroup;
     }),
+  updateUserMessage: protectedRouter
+    .input(
+      z.object({
+        message: z.string(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const updatedUser = await ctx.prisma.user.update({
+        where: { id: ctx.session.user?.id },
+        data: {
+          groupMessage: input.message,
+        },
+      });
+      return updatedUser;
+    }),
 });