diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx index 30ec6c8..ede0650 100644 --- a/src/components/Carpool/Carpool.tsx +++ b/src/components/Carpool/Carpool.tsx @@ -1,5 +1,4 @@ -import MailOutlineIcon from '@material-ui/icons/MailOutline'; -import PersonAddIcon from '@material-ui/icons/PersonAdd'; +import { useMemo } from 'react'; import { createContext, useCallback, useEffect, useState } from 'react'; import { cancelCarpoolInvite, @@ -7,13 +6,11 @@ import { leaveCarpool, sendCarpoolInvite, } from '../api'; -import { lightgrey } from '../colors'; +import { useMe } from '../hooks'; import { ICarpool } from '../types'; -import UIButton from '../UI/UIButton'; import UISecondaryBox from '../UI/UISecondaryBox'; -import useToggle from '../useToggle'; import CarpoolDetails from './CarpoolDetails'; -import InvitationList from './InvitationList'; +import InvitationsAndRequests from './InvitationsAndRequests'; import MemberList from './MemberList'; export const CarpoolContext = createContext({ @@ -36,8 +33,6 @@ export default function Carpool({ id }: { id: number }) { getCarpool(id).then(setCarpool); }, [id]); - const [invitationsOpen, toggleInvitationsOpen] = useToggle(false); - const sendInvite = useCallback( (user: { id: number; name: string }) => { if (carpool) { @@ -95,6 +90,13 @@ export default function Carpool({ id }: { id: number }) { } }, [eventId, id]); + const me = useMe(); + + const isMember = useMemo( + () => carpool?.members.some((m) => m.id === me?.id), + [carpool?.members, me?.id] + ); + if (!carpool) { return <>Loading...; } @@ -113,39 +115,7 @@ export default function Carpool({ id }: { id: number }) { <>

{carpool.name}

{carpool.event.name}

-
- {/* Requests */} - - 1 request - - {/* Invitations */} - - Invite - -
- {invitationsOpen && } + {isMember && } diff --git a/src/components/Carpool/InvitationsAndRequests.tsx b/src/components/Carpool/InvitationsAndRequests.tsx new file mode 100644 index 0000000..f18b301 --- /dev/null +++ b/src/components/Carpool/InvitationsAndRequests.tsx @@ -0,0 +1,49 @@ +import { lightgrey } from '../colors'; +import UIButton from '../UI/UIButton'; +import InvitationList from './InvitationList'; +import MailOutlineIcon from '@material-ui/icons/MailOutline'; +import PersonAddIcon from '@material-ui/icons/PersonAdd'; +import useToggle from '../useToggle'; + +export default function InvitationsAndRequests() { + const [invitationsOpen, toggleInvitationsOpen] = useToggle(false); + + return ( + <> +
+ {/* Requests */} + + 1 request + + {/* Invitations */} + + Invite + +
+ + {invitationsOpen && } + + ); +}