Conditionally hide delete button

app/routes/events-team.tsx

@@ -78,6 +78,7 @@ export async function loader({ context }: { context: RequestContext }) {
     ),
     events: monthEventList.results,
     members: membersList.results as { id: string; name: string }[],
+    user_id: context.data.current_user.id as string,
   };
 }
 
@@ -86,10 +87,12 @@ export default function () {
     can_approve,
     events,
     members,
+    user_id,
   }: {
     can_approve: boolean;
     events: { [k: string]: any }[];
     members: { id: string; name: string }[];
+    user_id: string;
   } = useLoaderData<typeof loader>();
   const [eventData, setEventData] = useState(events);
   const { isOpen, onClose, onOpen } = useDisclosure();
@@ -601,12 +604,17 @@ export default function () {
                   </Text>
                   <Button
                     alignSelf="center"
+                    display={
+                      event.created_by === user_id || can_approve
+                        ? undefined
+                        : "none"
+                    }
+                    marginLeft="auto"
+                    marginRight={0}
                     onClick={() => {
                       setSelectedEvent(event.id);
                       onDeleteOpen();
                     }}
-                    marginLeft="auto"
-                    marginRight={0}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"