rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

only show invitations and requests if you're a member of the carpool

Browse Source
This commit is contained in:
Michael Fatemi 2021-07-13 18:56:03 -04:00
parent 41a8a57854
commit 171a82086f
2 changed files with 60 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Carpool/Carpool.tsx
View File

@ -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 }) {
<>
<h1 style={{ marginBottom: '0rem' }}>{carpool.name}</h1>
<h2 style={{ marginBottom: '0rem' }}>{carpool.event.name}</h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
margin: '0.5rem 0',
}}
>
{/* Requests */}
<UIButton
style={{
marginRight: '0.25rem',
backgroundColor: lightgrey,
display: 'flex',
alignItems: 'center',
}}
onClick={console.log}
>
<MailOutlineIcon style={{ marginRight: '0.5rem' }} /> 1 request
</UIButton>
{/* Invitations */}
<UIButton
style={{
marginLeft: '0.25rem',
backgroundColor: lightgrey,
display: 'flex',
alignItems: 'center',
}}
onClick={toggleInvitationsOpen}
>
<PersonAddIcon style={{ marginRight: '0.5rem' }} /> Invite
</UIButton>
</div>
{invitationsOpen && <InvitationList />}
{isMember && <InvitationsAndRequests />}
<CarpoolDetails carpool={carpool} />
<MemberList members={carpool.members} />
</>

49
src/components/Carpool/InvitationsAndRequests.tsx Normal file
View File

@ -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 (
<>
<div
style={{
display: 'flex',
flexDirection: 'row',
margin: '0.5rem 0',
}}
>
{/* Requests */}
<UIButton
style={{
marginRight: '0.25rem',
backgroundColor: lightgrey,
display: 'flex',
alignItems: 'center',
}}
onClick={console.log}
>
<MailOutlineIcon style={{ marginRight: '0.5rem' }} /> 1 request
</UIButton>
{/* Invitations */}
<UIButton
style={{
marginLeft: '0.25rem',
backgroundColor: lightgrey,
display: 'flex',
alignItems: 'center',
}}
onClick={toggleInvitationsOpen}
>
<PersonAddIcon style={{ marginRight: '0.5rem' }} /> Invite
</UIButton>
</div>
{invitationsOpen && <InvitationList />}
</>
);
}