Dont remember lol

client/package.json

@@ -17,6 +17,7 @@
     "@trpc/client": "^10.44.1",
     "@trpc/react-query": "^10.44.1",
     "@trpc/server": "^10.44.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.9",
     "firebase": "^10.1.0",
     "react": "^18.2.0",
@@ -27,6 +28,7 @@
     "react-masonry-css": "^1.0.16",
     "react-router-dom": "^6.14.2",
     "styled-components": "^6.1.0",
+    "tailwind-merge": "^2.5.2",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"
   },

client/src/App.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react';
 import { trpc } from './utils/trpc';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { httpBatchLink } from '@trpc/client';
+import ActivityWrapper from './components/ActivityWrapper';
 
 export default function App({ queryClient }: { queryClient: QueryClient }) {
   const { getToken, userId } = useAuth();
@@ -40,10 +41,10 @@ export default function App({ queryClient }: { queryClient: QueryClient }) {
             <GlobalStyles />
             <Nav />
             <Toaster position="bottom-center" />
-            <main className="flex-grow-1 overflow-auto overscroll-y-contain">
-              <div className="m-auto max-w-[80%]">
+            <main className="flex-grow-1 overflow-auto overscroll-y-contain sm:px-10">
+              <ActivityWrapper>
                 <Outlet />
-              </div>
+              </ActivityWrapper>
             </main>
           </ThemeProvider>
         </div>

client/src/components/ActivityWrapper.tsx

@@ -0,0 +1,11 @@
+import cn from '../utils/utils';
+
+export default function ActivityWrapper({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn('w-full lg:max-w-7xl m-auto', className)}>{children}</div>;
+}

client/src/components/Nav.tsx

@@ -9,8 +9,8 @@ export default function Nav() {
 
   //returns header of logo and profile button or "sign in/sign up" if user is not registered.
   return (
-    <header className="border-b-2 py-1">
-      <nav className="flex max-w-[80%] justify-between items-center m-auto">
+    <header className="border-b-2 sm:px-10">
+      <nav className="flex w-full justify-between lg:max-w-7xl items-center m-auto">
         <div className="flex items-center gap-4 text-zinc-400">
           <NavLink to="/">
             <img
@@ -75,14 +75,14 @@ export default function Nav() {
             </NavLink>
           </div>
         ) : (
-          <div className="flex gap-4">
+          <div className="flex gap-1">
             <SignInButton mode="modal">
-              <div className="bg-blue-400 hover:bg-blue-500 transition-colors cursor-pointer py-2 px-6 text-zinc-100 rounded-lg">
+              <div className="border border-zinc-900 py-2 cursor-pointer px-6 rounded-lg hover:bg-zinc-200 transition-colors">
                 Login
               </div>
             </SignInButton>
             <SignUpButton mode="modal">
-              <div className="border border-zinc-900 py-2 cursor-pointer px-6 rounded-lg hover:bg-zinc-200 transition-colors">
+              <div className="bg-blue-400 hover:bg-blue-500 transition-colors cursor-pointer py-2 px-6 text-zinc-100 rounded-lg">
                 Sign up
               </div>
             </SignUpButton>

client/src/components/ProjectsView.tsx

@@ -60,8 +60,8 @@ export default function ProjectsView(props: {
               {proj.meetType}
             </Blob>
             {proj.tags.map((tag) => (
-              <Blob>
-                <p>{tag}</p>
+              <Blob key={tag}>
+                {tag}
               </Blob>
             ))}
           </div>

client/src/index.css

@@ -12,7 +12,7 @@ body {
   display: -ms-flexbox; /* Not needed if autoprefixing */
   display: flex; /* gutter size offset */
   width: auto;
-  gap: 4rem;
+  gap: 2.25rem;
 }
 
 .masonryCol {

client/src/pages/Home.tsx

@@ -5,12 +5,6 @@ import { trpc } from '../utils/trpc';
 
 export default function Home() {
   const { user } = useUser();
-  const { data } = trpc.projects.getAll.useQuery();
-
-  if (data) {
-    console.log(data);
-  }
-
   //home page with "welcome" and projects shown.
   return (
     <div className="pb-24">
@@ -34,8 +28,6 @@ export default function Home() {
  */
 
 function Projects() {
-  //const { data, isLoading } = useQuery(projectsQuery())
-
   const { data, isLoading } = trpc.projects.getAll.useQuery();
 
   if (isLoading)

client/src/pages/Project.tsx

@@ -11,6 +11,7 @@ import { NavLink, Outlet, Form } from 'react-router-dom';
 import Markdown from 'react-markdown';
 import { RouterOutputs, trpc } from '../utils/trpc';
 import { z } from 'zod';
+import ActivityWrapper from '../components/ActivityWrapper';
 
 dayjjs.extend(relativeTime);
 
@@ -188,7 +189,7 @@ export default function Project() {
           </div>
         )}
 
-        <div className="w-full max-w-6xl m-auto flex flex-col gap-4">
+        <ActivityWrapper className="flex flex-col gap-4">
           <h2 className="text-3xl font-bold text-zinc-800 flex items-center">
             {data.name}
           </h2>
@@ -239,7 +240,7 @@ export default function Project() {
             </div>
           </nav>
           <Outlet />
-        </div>
+        </ActivityWrapper>
       </div>
     </>
   );
@@ -302,7 +303,7 @@ function StatusChip({
           to="edit"
           className="inline-block bg-green-600 transition-colors hover:bg-green-700 py-1 px-6 rounded-lg text-zinc-100 font-medium"
         >
-          Edit Project Info
+          Edit Project InfoProje
         </NavLink>
       </div>
     );
@@ -591,19 +592,21 @@ export function ProjectPost() {
 
 export function MemberList() {
   const params = useParams();
-  const { data } = trpc.projects.getMembers.useQuery(params.projectId ?? '');
+  const { user } = useUser();
+  const { data } = trpc.projects.getMembers.useQuery({
+    userId: user?.id ?? '',
+    projectId: params.projectId ?? '',
+  });
   const utils = trpc.useUtils();
-  // if (isLoading) return <div>loading...</div>
   const kickUserMutation = trpc.projects.kickUser.useMutation({
     onSuccess() {
-      console.log('User Removed');
       utils.projects.getMembers.invalidate();
     },
   });
 
   if (!data) return <div>Error Fetching Members</div>;
 
-  if (!data.memberships || data.memberships.length == 0)
+  if (!data || data.length == 0)
     return <div> No Members</div>;
 
   const handleKickUser = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -620,17 +623,24 @@ export function MemberList() {
 
   return (
     <div className="w-full flex flex-col gap-4 ml-8">
-      {data.memberships.map((member) => (
+      {data.map((member) => (
         <div
-          key={member.userId}
+          key={member.id}
           className="flex justify-between w-full border-2 py-5 px-4 rounded-xl"
         >
-          {member.userId}
+          {member.name}
 
           <div className="flex gap-4 items-center">
+            <img
+              src={member.imageUrl}
+              alt={`${member.name} profile image`}
+              width={60}
+              height={60}
+              className="rounded-full h-12 w-12 object-cover"
+            />
             <button
               onClick={handleKickUser}
-              value={member.userId}
+              value={member.id}
               className="bg-blue-600 p-2 h-fit text-zinc-100 rounded-xl"
             >
               Kick Member

client/src/pages/Requests.tsx

@@ -10,18 +10,14 @@ dayjjs.extend(relativeTime);
 //request page to be shown.
 export default function Requests() {
   const { user } = useUser();
-  // const { data, isLoading, isError } = useQuery(
-  //   requestsQuery(user ? user.id : "")
-  // )
-
   const { data, isLoading, isError } =
     trpc.memberships.getAllIncomingRequests.useQuery(user?.id ?? '');
   const utils = trpc.useUtils();
 
   const acceptRequestMutation = trpc.memberships.acceptRequest.useMutation({
     onSuccess() {
-      console.log('Request Accepted');
       utils.memberships.getAllIncomingRequests.invalidate();
+      utils.projects.getMembers.invalidate();
       toast.success('Request Accepted');
     },
   });

client/src/utils/utils.ts

@@ -0,0 +1,5 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export default function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

server/src/routers/projectsRouter.ts

@@ -28,29 +28,7 @@ export const projectsRouter = router({
     return data;
   }),
 
-  getMembers: publicProcedure
-    .input(z.string())
-    .query(async ({ ctx, input }) => {
-      const data = await ctx.db.project.findFirst({
-        where: {
-          id: input,
-        },
-        select: {
-          memberships: {
-            where: {
-              status: 'ACCEPTED',
-            },
-            select: {
-              id: true,
-              userId: true,
-            },
-          },
-        },
-      });
-
-      return data;
-    }),
-  getUserList: authedProcedure
+  getMembers: authedProcedure
     .input(
       z.object({
         projectId: z.string(),
@@ -61,20 +39,26 @@ export const projectsRouter = router({
       const projectMemberships = await ctx.db.memberships.findMany({
         where: {
           projectId: input.projectId,
+          status: 'ACCEPTED',
         },
       });
 
       const userList = projectMemberships.map(
         (membership) => membership.userId,
       );
 
+      if (userList.length === 0) {
+        return []
+      }
       const users = await clerkClient.users.getUserList({ userId: userList });
-      users.map((user) => ({
+      const filteredUser = users.map((user) => ({
+        id: user.id,
         imageUrl: user.imageUrl,
         email: user.emailAddresses,
         name: `${user.firstName} ${user.lastName}`,
       }));
-      return users;
+
+      return filteredUser;
     }),
 
   getByUserId: authedProcedure
@@ -96,9 +80,10 @@ export const projectsRouter = router({
       }),
     )
     .mutation(async ({ ctx, input }) => {
+      console.log(input)
       await ctx.db.memberships.delete({
         where: {
-          projectId_userId: input,
+          projectId_userId: input
         },
       });
     }),