diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx index 2cc279c..89c153d 100644 --- a/src/components/Carpool/Carpool.tsx +++ b/src/components/Carpool/Carpool.tsx @@ -27,6 +27,7 @@ type CarpoolState = { members: { id: number; name: string }[]; invitations: Record; creatorId: number; + note: string; }; export const CarpoolContext = createContext({ @@ -66,6 +67,7 @@ export default function Carpool({ id }: { id: number }) { }); setCarpool({ id: carpool.id, + note: carpool.note, name: carpool.name, event: carpool.event, members: carpool.members, diff --git a/src/components/Carpool/CarpoolDetails.tsx b/src/components/Carpool/CarpoolDetails.tsx index 6c34117..e0cdcf8 100644 --- a/src/components/Carpool/CarpoolDetails.tsx +++ b/src/components/Carpool/CarpoolDetails.tsx @@ -1,11 +1,23 @@ import EventIcon from '@material-ui/icons/Event'; import LocationOnIcon from '@material-ui/icons/LocationOn'; +import { useCallback } from 'react'; import { useContext } from 'react'; +import { setCarpoolNote } from '../api'; import { CarpoolContext } from './Carpool'; +import CarpoolNote from './CarpoolNote'; export default function CarpoolDetails() { const { carpool } = useContext(CarpoolContext); + const onSaveCarpoolNote = useCallback( + (note) => { + setCarpoolNote(carpool.id, note).then(() => { + carpool.note = note; + }); + }, + [carpool] + ); + return (
DAWN - DUSK
+
); } diff --git a/src/components/Carpool/CarpoolNote.tsx b/src/components/Carpool/CarpoolNote.tsx new file mode 100644 index 0000000..b8f0b1e --- /dev/null +++ b/src/components/Carpool/CarpoolNote.tsx @@ -0,0 +1,76 @@ +import { useCallback, useEffect, useState } from 'react'; +import UIPressable from '../UI/UIPressable'; +import UITextInput from '../UI/UITextInput'; +import useIsCreator from './useIsCreator'; +import EditIcon from '@material-ui/icons/Edit'; +import DoneIcon from '@material-ui/icons/Done'; +import CancelIcon from '@material-ui/icons/Clear'; + +export default function CarpoolNote({ + note, + setNote, +}: { + note: string; + setNote: (note: string) => void; +}) { + const isCreator = useIsCreator(); + const [editing, setEditing] = useState(false); + const [editText, setEditText] = useState(note); + + useEffect(() => { + setEditText(note); + }, [note]); + + const onCancelNote = useCallback(() => { + setEditing(false); + setEditText(note); + }, [note]); + + const onSaveNote = useCallback(() => { + setEditing(false); + setNote(editText); + }, [editText, setNote]); + + return ( +
+ Note +
+
+ {editing ? ( +
+ +
+ + +
+
+ ) : ( +
+ {note} + {isCreator && ( + setEditing(true)} + style={{ marginTop: '1rem', cursor: 'pointer' }} + /> + )} +
+ )} +
+ ); +} diff --git a/src/components/api.ts b/src/components/api.ts index 9f41b14..ec0cd40 100644 --- a/src/components/api.ts +++ b/src/components/api.ts @@ -248,6 +248,10 @@ export async function createCarpool({ return { id }; } +export async function setCarpoolNote(carpoolId: number, note: string) { + return await post(`/carpools/${carpoolId}/set_note`, { note }); +} + export async function sendCarpoolInvite(carpoolId: number, userId: number) { await post(`/carpools/${carpoolId}/invite`, { userId }); } diff --git a/src/components/types.ts b/src/components/types.ts index e00c037..d3f463d 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -15,6 +15,7 @@ export type IUser = { export type ICarpool = { id: number; name: string; + note: string; eventId: number | null; event: { id: number;