use new API

src/App.tsx

@@ -30,8 +30,8 @@ function App() {
 					<Route component={Groups} path="/groups" />
 					<Route component={MyGroups} path="/mygroups" />
 					<Route component={UpdatePool} path="/update_pool" />
-					<Route component={Group} path="/group/:id" />
+					<Route component={Group} path="/groups/:id" />
-					<Route component={Pool} path="/pool/:id" />
+					<Route component={Pool} path="/pools/:id" />
 					<Route component={Profile} path="/profile" />
 					<Route component={Home} path="/" />
 				</Switch>

src/api/api.ts

@@ -32,11 +32,11 @@ export async function createSession(
 }
 
 export async function getMe(): Promise<Carpool.User> {
-	let result = await makeAPIGetCall('/user', { userID: '@me' });
+	let result = await makeAPIGetCall('/users/@me');
 	return result.data.data;
 }
 
 export async function getPublicUser(id: string): Promise<Carpool.PublicUser> {
-	let result = await makeAPIGetCall('/user', { userID: id });
+	let result = await makeAPIGetCall(`/users/${id}`);
 	return result.data.data;
 }

src/components/CreateGroup.tsx

@@ -22,14 +22,9 @@ const useStyles = makeStyles((theme) => ({
 const CreateGroup = () => {
 	const [title, setTitle] = useState('No Title');
 	const classes = useStyles();
-	useEffect(() => {}, []);
+
 	const onClick = () => {
-		console.log({
+		makeAPIPostCall('/groups/', { title });
-			title: title,
-		});
-		makeAPIPostCall('/group', {
-			title,
-		});
 	};
 
 	return (

src/components/CreatePool.tsx

@@ -30,7 +30,7 @@ const CreatePool = () => {
 	const [group, setGroup] = useState('');
 
 	const onClick = () => {
-		makeAPIPostCall('/pool', {
+		makeAPIPostCall('/pools/', {
 			title,
 			description,
 			start_time: start,

src/components/Group.tsx

@@ -43,7 +43,7 @@ export default function Group() {
 	const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
 
 	useEffect(() => {
-		makeAPIGetCall('/group', { groupID: id }).then((res) => {
+		makeAPIGetCall(`/groups/${id}`).then((res) => {
 			if ('error' in res.data) {
 				setError(true);
 			} else {
@@ -51,7 +51,7 @@ export default function Group() {
 			}
 		});
 
-		makeAPIGetCall('/group_pools', { groupID: id }).then((res) => {
+		makeAPIGetCall(`/groups/${id}/pools`).then((res) => {
 			setPools(res.data.data);
 		});
 	}, [id]);
@@ -90,7 +90,7 @@ export default function Group() {
 				{pools.map((pool, index) => {
 					return (
 						<Card style={{ margin: '0.5em' }} key={index}>
-							<a href={'/pool/' + pool._id} className="card-title">
+							<a href={'/pools/' + pool._id} className="card-title">
 								{pool.title}
 							</a>
 							<p className="text-left">

src/components/Groups.tsx

@@ -12,7 +12,7 @@ const Groups = () => {
 	]);
 
 	useEffect(() => {
-		makeAPIGetCall('/groups').then((res) => {
+		makeAPIGetCall('/browse/groups').then((res) => {
 			if (res.data.data) {
 				setGroups(res.data.data);
 			}

src/components/MyGroups.tsx

@@ -12,7 +12,7 @@ const MyGroups = () => {
 	]);
 
 	useEffect(() => {
-		makeAPIGetCall('/groups').then((res) => {
+		makeAPIGetCall('/browse/groups').then((res) => {
 			if (res.data.data) {
 				setGroups(res.data.data);
 			}
@@ -48,7 +48,7 @@ const MyGroups = () => {
 							className="card card-body text-left"
 							style={{ backgroundColor: background }}
 						>
-							<a href={'/group/' + group._id} className="card-title">
+							<a href={'/groups/' + group._id} className="card-title">
 								{group.name}
 							</a>
 						</div>

src/components/MyPools.tsx

@@ -56,7 +56,7 @@ const MyPools = () => {
 	]);
 
 	useEffect(() => {
-		makeAPIGetCall('/my_pools').then((res) => {
+		makeAPIGetCall('/users/@me/pools').then((res) => {
 			if (res.data.data) {
 				setPools(res.data.data);
 			}
@@ -94,7 +94,7 @@ const MyPools = () => {
 							className="card card-body text-left"
 							style={{ backgroundColor: background }}
 						>
-							<a href={'/Pool/' + pool.id} className="card-title">
+							<a href={'/pools/' + pool.id} className="card-title">
 								{pool.pool_title}
 							</a>
 							<p className="text-left">

src/components/Pool.tsx

@@ -77,7 +77,7 @@ export default function Pool() {
 	const onRegister = useCallback(() => {
 		if (user) {
 			let userID = user._id;
-			makeAPIPostCall('/join_pool', { id }).then(() => {
+			makeAPIPostCall(`/pools/${id}/join`).then(() => {
 				if (pool) {
 					setPool({
 						...pool,
@@ -89,7 +89,7 @@ export default function Pool() {
 	}, [user, id, pool]);
 
 	useEffect(() => {
-		makeAPIGetCall('/pool', { poolID: id }).then((response) => {
+		makeAPIGetCall(`/pools/${id}`).then((response) => {
 			if (response.data.data) {
 				setPool(response.data.data);
 			}

src/components/Pools.tsx

@@ -59,7 +59,7 @@ const Pools = () => {
 	]);
 
 	useEffect(() => {
-		makeAPIGetCall('/my_pools').then((res) => {
+		makeAPIGetCall(`/users/@me/pools`).then((res) => {
 			if (res.data.data) {
 				setPools(res.data.data);
 			}
@@ -95,7 +95,7 @@ const Pools = () => {
 							className="card card-body text-left"
 							style={{ backgroundColor: background }}
 						>
-							<a href={'/pool/' + pool._id} className="card-title">
+							<a href={'/pools/' + pool._id} className="card-title">
 								{pool.title}
 							</a>
 							<p className="text-left">

src/components/Profile.tsx

@@ -25,7 +25,7 @@ const Profile = () => {
 	const classes = useStyles();
 
 	useEffect(() => {
-		makeAPIGetCall('/my_pools').then((res) => {
+		makeAPIGetCall('/users/@me/pools').then((res) => {
 			if (res.data.data) setPools(res.data.data);
 		});
 	}, []);
@@ -56,7 +56,7 @@ const Profile = () => {
 								className={classes.root + 'd-inline-flex'}
 								style={{ margin: '0.5rem' }}
 							>
-								<CardActionArea href={'/pool/' + pool._id}>
+								<CardActionArea href={'/pools/' + pool._id}>
 									<CardContent>
 										<Typography gutterBottom variant="h5" component="h2">
 											{pool.title}
@@ -75,14 +75,14 @@ const Profile = () => {
 										size="small"
 										color="primary"
 										onClick={() => {
-											let link: string = 'localhost:3000/pool/' + pool._id;
+											let link: string = 'localhost:3000/pools/' + pool._id;
 											navigator.clipboard.writeText(link);
 										}}
 									>
 										Share
 									</Button>
 									<Button
-										href={'/pool/' + pool._id}
+										href={'/pools/' + pool._id}
 										size="small"
 										color="primary"
 									>

src/components/UpdatePool.tsx

@@ -24,12 +24,12 @@ const UpdatePool = () => {
 
 	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
 		e.preventDefault();
-		makeAPIGetCall('/update_pool').then((res) => {
+		makeAPIGetCall(`/pools/${id}`).then((res) => {
 			console.log(res);
 		});
 	};
 	useEffect(() => {
-		makeAPIGetCall('/pool', { poolID: id }).then((res) => {
+		makeAPIGetCall(`/pools/${id}`).then((res) => {
 			if (res.data.data) setPool(res.data.data);
 		});
 	}, [id]);