diff --git a/src/components/App.tsx b/src/components/App.tsx index 1695390..e163f5f 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -20,6 +20,7 @@ const CarpoolPage = lazy(() => import('./Carpool/CarpoolPage')); const EventPage = lazy(() => import('./Event/EventPage')); const GroupPage = lazy(() => import('./Group/GroupPage')); const GroupSharedLinkResolver = lazy(() => import('./GroupSharedLinkResolver')); +const ProfileForSelf = lazy(() => import('./ProfileForSelf/ProfileForSelf')); const style: CSSProperties = { display: 'flex', @@ -65,6 +66,7 @@ export default function App() { + (null); const canDriveRef = useRef(false); const [note, setNote] = useState(''); @@ -48,7 +50,7 @@ export default function EventInterestForm() { const details = await getPlaceDetails(placeId); event.signups[me.id] = { - user: { id: me.id, name: me.name }, + user: me, placeId, ...details, canDrive, @@ -56,7 +58,7 @@ export default function EventInterestForm() { }; } else { event.signups[me.id] = { - user: { id: me.id, name: me.name }, + user: me, placeId: null, latitude: null, longitude: null, @@ -66,7 +68,7 @@ export default function EventInterestForm() { }; } }, - [event.id, event.signups, me.id, me.name] + [event.id, event.signups, me] ); const removeSignup = useCallback(async () => { diff --git a/src/components/Event/EventSignups.tsx b/src/components/Event/EventSignups.tsx index 9725cac..8c04cc5 100644 --- a/src/components/Event/EventSignups.tsx +++ b/src/components/Event/EventSignups.tsx @@ -59,6 +59,8 @@ function EventSignup({ signup }: { signup: IEventSignup }) { > {user.name} + {user.bio && `, ${user.bio}`} +
{extraDistance && ` +${extraDistance.toFixed(1)} miles`}{' '} {signup.canDrive && ' (can drive)'} {signup.note && ( diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 4636ed2..b87ed18 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -30,6 +30,7 @@ export default function Header() { {me.name} {me.email && ` (${me.email})`} Log out + Profile
{notifications.length > 0 ? ( { + await updateBio(temporaryBio); + refreshLocalUser(); + setEditingBio(false); + }, + [refreshLocalUser] + ) + ); + + useEffect(() => { + if (me?.bio) { + setTemporaryBio(me?.bio); + } + }, [me?.bio]); + + if (!me) { + return null; + } + + return ( +
+

{me.name}

+

{me.bio}

+ {editingBio ? ( + <> + {onClickedSaveBioStatus === AsyncCallbackStatus.REJECTED && ( +

Error saving bio.

+ )} + {onClickedSaveBioStatus !== AsyncCallbackStatus.PENDING ? ( + <> + + onClickedSaveBio(temporaryBio)} + style={{ + backgroundColor: '#f8f8f8', + width: '100%', + }} + > + Save + + + ) : ( + {}} + style={{ + backgroundColor: '#f8f8f8', + width: '100%', + }} + > + Saving... + + )} + + ) : ( + <> + setEditingBio(true)} + style={{ + backgroundColor: '#f8f8f8', + width: '100%', + }} + > + Edit Bio + + + )} +
+ ); +} diff --git a/src/components/api.ts b/src/components/api.ts index 842f5ce..90fc858 100644 --- a/src/components/api.ts +++ b/src/components/api.ts @@ -312,3 +312,7 @@ export async function sendErrorReport(error: string) { throw new Error(response.statusText); } } + +export async function updateBio(bio: string) { + return await post('/users/@me/bio', { bio }); +} diff --git a/src/components/types.ts b/src/components/types.ts index 051507c..9433716 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -101,6 +101,7 @@ export type IEventSignupBase = { user: { id: number; name: string; + bio: string; }; canDrive: boolean; note: string;