Merge branch 'main' of github.com:hcp-uw/societas into cicd

client/src/App.tsx

@@ -19,7 +19,7 @@ export default function App({ queryClient }: { queryClient: QueryClient }) {
     trpc.createClient({
       links: [
         httpBatchLink({
-          url: 'http://localhost:3001',
+          url: import.meta.env?.VITE_BACKEND_URL ?? 'http://localhost:3001',
           // You can pass any HTTP headers you wish here
           async headers() {
             const token = await getToken();

client/src/env.d.ts

@@ -9,6 +9,7 @@ interface ImportMetaEnv {
   readonly VITE_PROJECT_ID: string;
   readonly VITE_AUTH_DOMAIN: string;
   readonly VITE_API_KEY: string;
+  readonly VITE_BACKEND_URL: string;
   // more env variables...
 }
 

client/src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 import { ClerkProvider } from '@clerk/clerk-react';
 import { QueryClient } from '@tanstack/react-query';
 import Home from './pages/Home.tsx';
@@ -12,7 +12,6 @@ import Project, {
   ProjectPost,
   MemberList,
 } from './pages/Project.jsx';
-import ProfileLayout from './pages/ProfileLayout.tsx';
 import CreateProj from './pages/CreateProj.tsx';
 import Requests from './pages/Requests.tsx';
 import Intro from './pages/Intro.jsx';
@@ -103,7 +102,7 @@ const router = createBrowserRouter([
       },
       {
         path: 'account',
-        element: <ProfileLayout />,
+        element: <Outlet />,
         children: [
           {
             index: true,
@@ -113,14 +112,6 @@ const router = createBrowserRouter([
             path: 'edit',
             element: <EditProfile />,
           },
-          {
-            path: 'requests/acceptReq',
-            element: <Requests />,
-          },
-          {
-            path: 'requests/rejectReq',
-            element: <Requests />,
-          },
         ],
       },
       {

client/src/pages/Home.tsx

@@ -28,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/Profile.tsx

@@ -1,4 +1,4 @@
-import { useUser } from '@clerk/clerk-react';
+import { SignOutButton, useUser } from '@clerk/clerk-react';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Input, StyledInput } from '../components/inputs';
@@ -13,6 +13,7 @@ import { trpc } from '../utils/trpc';
  */
 export default function Profile() {
   const { user } = useUser();
+  const navigate = useNavigate();
   // const { data, isError, isLoading } = useQuery(
   //   myProjsQuery(user ? user.id : "")
   // )
@@ -40,9 +41,15 @@ export default function Profile() {
   if (isLoading) return <div>loading</div>;
 
   if (!data) return <div>There was an issue fetching your projects</div>;
+
+  function handleSignout() {
+    navigate('/');
+    toast.success('Successfully Signout');
+  }
+
   return (
-    <div className="flex w-full gap-6 flex-col">
-      <div className="flex gap-6 items-center">
+    <div className="flex w-full gap-6 flex-col mt-8">
+      <div className="flex gap-6 items-center flex-wrap">
         <img
           src={user.imageUrl}
           alt={`Your profile picture`}
@@ -54,13 +61,21 @@ export default function Profile() {
           <h1 className="text-3xl font-medium">{user.fullName}</h1>
           <p>{(user.unsafeMetadata.bio as string) ?? 'No bio'}</p>
         </div>
-
-        <Link
-          to="edit"
-          className="py-2 px-6 bg-blue-400 text-zinc-100 w-fit rounded-lg transition-colors hover:bg-blue-500"
-        >
-          Edit Profile
-        </Link>
+        <div className="flex flex-row">
+          <Link
+            to="edit"
+            className="py-2 px-6 bg-blue-400 text-zinc-100 w-fit rounded-lg transition-colors hover:bg-blue-500 whitespace-nowrap mr-6"
+          >
+            Edit Profile
+          </Link>
+
+          <SignOutButton signOutCallback={handleSignout}>
+            <div className="flex p-2 rounded gap-2 items-center hover:bg-red-400 hover:text-zinc-100 transition-colors cursor-pointer whitespace-nowrap">
+              <span className="material-symbols-outlined">logout</span>
+              Sign out
+            </div>
+          </SignOutButton>
+        </div>
       </div>
 
       <h1 className="font-medium text-2xl">My Projects</h1>
@@ -125,7 +140,10 @@ export function EditProfile() {
 
   return (
     //form to submit.
-    <form onSubmit={handleSubmit(onSubmit)} className="flex gap-4 flex-col">
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex gap-4 flex-col mt-8 w-3/4"
+    >
       <div className="relative w-fit">
         <img
           src={typeof image === 'string' ? image : URL.createObjectURL(image)}

client/src/pages/Project.tsx

@@ -593,21 +593,21 @@ export function ProjectPost() {
 export function MemberList() {
   const params = useParams();
   const { user } = useUser();
-  const { data } = trpc.projects.getUserList.useQuery({
+  const { data } = trpc.projects.getMembers.useQuery({
     userId: user?.id ?? '',
     projectId: params.projectId ?? '',
   });
   const utils = trpc.useUtils();
   const kickUserMutation = trpc.projects.kickUser.useMutation({
     onSuccess() {
-      toast.success("Successfully kicked out user")
-      utils.projects.getUserList.invalidate();
+      utils.projects.getMembers.invalidate();
     },
   });
 
   if (!data) return <div>Error Fetching Members</div>;
 
-  if (!data || data.length == 0) return <div> No Members</div>;
+  if (!data || data.length == 0)
+    return <div> No Members</div>;
 
   const handleKickUser = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();

client/src/utils/utils.ts

@@ -1,6 +1,5 @@
-import { clsx, type ClassValue } from "clsx" 
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 export default function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-
+  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(),