([]);
+ const [username, setUsername] = useState();
+
+ const loadData = async () => {
+ setIsTunesLoading(true);
+ try {
+ const { items, totalItems } = await getUserTunes(route?.params.userId!, page, pageSize);
+ setTotal(totalItems);
+ setUsername((items[0].expand.author as UsersRecordFull).username);
+ const mapped = items.map((tune) => ({
+ ...tune,
+ key: tune.tuneId,
+ year: tune.year,
+ displacement: `${tune.displacement}l`,
+ aspiration: aspirationMapper[tune.aspiration],
+ published: formatTime(tune.updated),
+ }));
+ setTunesDataSource(mapped as any);
+ } catch (error) {
+ // request cancelled
+ } finally {
+ setIsTunesLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadData();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [page]);
+
+ return (
+
+
{username ? `${username}'s tunes` : 'No tunes yet'}
+
(
+ } onClick={() => navigate(tunePath(tune.tuneId))} />,
+ ]}
+ className={tune.visibility}
+ >
+
+ {tune.vehicleName} {tune.signature}
+ >}
+ description={<>
+ {tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.aspiration}
+ >}
+ />
+
+ {tune.published}
+
+
+ )}
+ footer={
+
+
{
+ setIsTunesLoading(true);
+ setPage(newPage);
+ setPageSize(newPageSize);
+ }}
+ />
+
+ }
+ />
+
+ );
+};
+
+export default Profile;
diff --git a/src/pages/auth/Profile.tsx b/src/pages/auth/Profile.tsx
index c37a04d..ac5f8e6 100644
--- a/src/pages/auth/Profile.tsx
+++ b/src/pages/auth/Profile.tsx
@@ -217,10 +217,7 @@ const Profile = () => {
{tune.vehicleName} {tune.signature}
>}
description={<>
- {tune.engineMake},
- {tune.engineCode},
- {tune.displacement},
- {tune.aspiration}
+ {tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.aspiration}
>}
/>
diff --git a/src/routes.ts b/src/routes.ts
index 08b5022..5705c85 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -26,6 +26,7 @@ export enum Routes {
OAUTH_CALLBACK = '/auth/oauth-callback/:provider',
ABOUT = '/about',
+ USER_ROOT = '/user/:userId',
REDIRECT_PAGE_OAUTH_CALLBACK = 'oauth',
}