make carpool notes editable

src/components/Carpool/Carpool.tsx

@@ -27,6 +27,7 @@ type CarpoolState = {
 	members: { id: number; name: string }[];
 	invitations: Record<number, ICarpool['invitations'][0]>;
 	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,

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 (
 		<div>
 			<div
@@ -28,6 +40,7 @@ export default function CarpoolDetails() {
 				<EventIcon style={{ marginRight: '1rem' }} />
 				DAWN - DUSK
 			</div>
+			<CarpoolNote note={carpool.note} setNote={onSaveCarpoolNote} />
 		</div>
 	);
 }

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 (
+		<div style={{ marginTop: '0.5rem', padding: '1rem' }}>
+			<b>Note</b>
+			<br />
+			<br />
+			{editing ? (
+				<div>
+					<UITextInput
+						onChangeText={setEditText}
+						value={editText}
+						style={{ marginTop: 0 }}
+					/>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							marginTop: '1rem',
+						}}
+					>
+						<DoneIcon
+							onClick={onSaveNote}
+							style={{ marginRight: '1rem', cursor: 'pointer' }}
+						/>
+						<CancelIcon
+							onClick={onCancelNote}
+							style={{ marginRight: '1rem', cursor: 'pointer' }}
+						/>
+					</div>
+				</div>
+			) : (
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<span>{note}</span>
+					{isCreator && (
+						<EditIcon
+							onClick={() => setEditing(true)}
+							style={{ marginTop: '1rem', cursor: 'pointer' }}
+						/>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}

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 });
 }

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;