From cca03563f224e30380b359d14366bf132189795e Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 22 Aug 2021 19:09:56 -0400
Subject: [PATCH 1/2] add bio/profile

---
 src/components/App.tsx                        |  2 +
 .../Authentication/AuthenticationContext.ts   |  1 +
 src/components/Header/Header.tsx              |  1 +
 .../ProfileForSelf/ProfileForSelf.tsx         | 93 +++++++++++++++++++
 src/components/api.ts                         |  4 +
 5 files changed, 101 insertions(+)
 create mode 100644 src/components/ProfileForSelf/ProfileForSelf.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9314c31..d5c28b5 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -19,6 +19,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',
@@ -63,6 +64,7 @@ export default function App() {
 							<BrowserRouter>
 								<Switch>
 									<Route path="/" exact component={WheelShare} />
+									<Route path="/me" exact component={ProfileForSelf} />
 									<Route
 										path="/join/:code"
 										component={GroupSharedLinkResolver}
diff --git a/src/components/Authentication/AuthenticationContext.ts b/src/components/Authentication/AuthenticationContext.ts
index cf62a1f..d01ef2f 100644
--- a/src/components/Authentication/AuthenticationContext.ts
+++ b/src/components/Authentication/AuthenticationContext.ts
@@ -3,6 +3,7 @@ import { createContext } from 'react';
 export type User = {
 	name: string;
 	id: number;
+	bio: string;
 	email?: string;
 };
 
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})`}
 					<UIPressable onClick={logout}>Log out</UIPressable>
+					<a href="/me">Profile</a>
 					<br />
 					{notifications.length > 0 ? (
 						<Notifications
diff --git a/src/components/ProfileForSelf/ProfileForSelf.tsx b/src/components/ProfileForSelf/ProfileForSelf.tsx
new file mode 100644
index 0000000..d49a169
--- /dev/null
+++ b/src/components/ProfileForSelf/ProfileForSelf.tsx
@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from 'react';
+import { updateBio } from '../api';
+import {
+	AsyncCallbackStatus,
+	useAsyncCallback,
+} from '../Event/EventAdminControls';
+import { useAuth } from '../hooks';
+import UIButton from '../UI/UIButton';
+import UITextInput from '../UI/UITextInput';
+
+export default function ProfileForSelf() {
+	const [editingBio, setEditingBio] = useState(false);
+	const [temporaryBio, setTemporaryBio] = useState('');
+	const { user: me, refresh: refreshLocalUser } = useAuth();
+
+	const [onClickedSaveBio, onClickedSaveBioStatus] = useAsyncCallback(
+		useCallback(
+			async (temporaryBio: string) => {
+				await updateBio(temporaryBio);
+				refreshLocalUser();
+				setEditingBio(false);
+			},
+			[refreshLocalUser]
+		)
+	);
+
+	useEffect(() => {
+		if (me?.bio) {
+			setTemporaryBio(me?.bio);
+		}
+	}, [me?.bio]);
+
+	if (!me) {
+		return null;
+	}
+
+	return (
+		<div style={{ minWidth: '16rem', width: '20rem' }}>
+			<h1>{me.name}</h1>
+			<p>{me.bio}</p>
+			{editingBio ? (
+				<>
+					{onClickedSaveBioStatus === AsyncCallbackStatus.REJECTED && (
+						<p>Error saving bio.</p>
+					)}
+					{onClickedSaveBioStatus !== AsyncCallbackStatus.PENDING ? (
+						<>
+							<UITextInput
+								onChangeText={setTemporaryBio}
+								value={temporaryBio}
+								style={{
+									border: '2px solid grey',
+									width: '100%',
+								}}
+							/>
+							<UIButton
+								onClick={() => onClickedSaveBio(temporaryBio)}
+								style={{
+									backgroundColor: '#f8f8f8',
+									width: '100%',
+								}}
+							>
+								Save
+							</UIButton>
+						</>
+					) : (
+						<UIButton
+							onClick={() => {}}
+							style={{
+								backgroundColor: '#f8f8f8',
+								width: '100%',
+							}}
+						>
+							Saving...
+						</UIButton>
+					)}
+				</>
+			) : (
+				<>
+					<UIButton
+						onClick={() => setEditingBio(true)}
+						style={{
+							backgroundColor: '#f8f8f8',
+							width: '100%',
+						}}
+					>
+						Edit Bio
+					</UIButton>
+				</>
+			)}
+		</div>
+	);
+}
diff --git a/src/components/api.ts b/src/components/api.ts
index ec0cd40..135fd4e 100644
--- a/src/components/api.ts
+++ b/src/components/api.ts
@@ -298,3 +298,7 @@ export async function getPotentialInvitees(
 ): Promise<PotentialInvitee[]> {
 	return await get(`/carpools/${carpoolId}/potential_invitees`);
 }
+
+export async function updateBio(bio: string) {
+	return await post('/users/@me/bio', { bio });
+}

From 0955d5dd1162f69edfbbe20f04f3ada9981ab27f Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 22 Aug 2021 19:16:35 -0400
Subject: [PATCH 2/2] show user bio in event signups

---
 src/components/Event/EventInterestForm.tsx | 10 ++++++----
 src/components/Event/EventSignups.tsx      |  2 ++
 src/components/types.ts                    |  1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Event/EventInterestForm.tsx b/src/components/Event/EventInterestForm.tsx
index 3c62779..43a29e8 100644
--- a/src/components/Event/EventInterestForm.tsx
+++ b/src/components/Event/EventInterestForm.tsx
@@ -10,9 +10,11 @@ import EventCarpools from './EventCarpools';
 import { useMutableEvent } from './EventHooks';
 import EventSignups from './EventSignups';
 
+const defaultMe = { id: 0, name: '', bio: '' };
+
 export default function EventInterestForm() {
 	const event = useMutableEvent();
-	const me = useMe() || { id: 0, name: '' };
+	const me = useMe() || defaultMe;
 	const placeIdRef = useRef<string | null>(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 }) {
 		>
 			<span>
 				<b>{user.name}</b>
+				{user.bio && `, ${user.bio}`}
+				<br />
 				{extraDistance && ` +${extraDistance.toFixed(1)} miles`}{' '}
 				{signup.canDrive && ' (can drive)'}
 				{signup.note && (
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;