Merge pull request #1128 from givepraise/feat/username-urls

WIP: Transform userpage Urls

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- **Frontend**: User pages can now be accessed with the username instead of the user id. #1128
 - **Frontend**: Upgraded to the latest version of RainbowKit. This should fix some issues with the WalletConnect login flow.
 - **API**: Backup restore script now supports specifying which database to import from and restore to
 - **API**: Refactors the API to use request scoped services and simplifies the database connection logic. We no longer attempt to cache db connections ourselves but instead rely on the MongoDb node.js package #1103

packages/frontend/src/components/praise/Praise.tsx

@@ -73,7 +73,7 @@ export const Praise = ({
 
       if (userAccount && userAccount.user) {
         if (typeof userAccount.user === 'object') {
-          history.push(`/users/${userAccount.user._id}`);
+          history.push(`/${userAccount.user.username}`);
         } else {
           history.push(`/users/${userAccount.user}`);
         }

packages/frontend/src/components/user/UserPopover.tsx

@@ -58,7 +58,7 @@ const WrappedUserPopover = ({
     event.stopPropagation();
 
     if (user) {
-      history.push(`/users/${user._id}`);
+      history.push(`/${user.username}`);
       return;
     }
   };

packages/frontend/src/model/user/users.ts

@@ -122,6 +122,11 @@ export const PseudonymForUser = selectorFamily({
 export type SingleUserParams = {
   userId: string;
 };
+
+export type SingleUserByUsernameParams = {
+  userName: string;
+};
+
 /**
  * Selector that returns one individual User by id.
  */
@@ -284,8 +289,9 @@ export const useUserProfile = (): useUserProfileReturn => {
 const DetailedSingleUserQuery = selectorFamily({
   key: 'DetailedSingleUserQuery',
   get:
-    (userId: string) =>
-    ({ get }): AxiosResponse<User> | AxiosError => {
+    (userId: string | undefined) =>
+    ({ get }): AxiosResponse<User> | AxiosError | undefined => {
+      if (!userId) return undefined;
       return get(
         ApiGet({
           url: `/users/${userId}`,
@@ -299,8 +305,10 @@ const DetailedSingleUserQuery = selectorFamily({
  * Update user cached in global state.
  */
 export const useLoadSingleUserDetails = (
-  userId: string
-): AxiosResponse<User> | AxiosError => {
+  username: string
+): AxiosResponse<User> | AxiosError | undefined => {
+  const userId = useRecoilValue(SingleUser(username))?._id;
+
   const response = useRecoilValue(DetailedSingleUserQuery(userId));
   const user = useRecoilValue(SingleUser(userId));
   const setUser = useSetRecoilState(SingleUser(userId));

packages/frontend/src/navigation/MainRoutes.tsx

@@ -8,6 +8,9 @@ const SettingsPage = React.lazy(() => import('@/pages/Settings/SettingsPage'));
 const UserDetailsPage = React.lazy(
   () => import('@/pages/UserDetails/UserDetailsPage')
 );
+const UserDetailsPageRedirect = React.lazy(
+  () => import('@/pages/UserDetails/UserDetailsPageRedirect')
+);
 const UsersPage = React.lazy(() => import('@/pages/Users/UsersPage'));
 
 const AnalyticsPage = React.lazy(
@@ -120,7 +123,7 @@ export const MainRoutes = ({ userRoles }: Props): JSX.Element | null => {
       </Route>
 
       <Route path={'/users/:userId'}>
-        <UserDetailsPage />
+        <UserDetailsPageRedirect />
       </Route>
 
       <Route exact path={'/periods'}>
@@ -191,6 +194,10 @@ export const MainRoutes = ({ userRoles }: Props): JSX.Element | null => {
         <StartPage />
       </Route>
 
+      <Route path={'/:userName'}>
+        <UserDetailsPage />
+      </Route>
+
       <Route path="/*">
         <Redirect
           to={{

packages/frontend/src/pages/UserDetails/UserDetailsPage.tsx

@@ -13,8 +13,8 @@ import { Page } from '@/components/ui/Page';
 import { Box } from '@/components/ui/Box';
 import { Button } from '@/components/ui/Button';
 import {
-  SingleUser,
-  SingleUserParams,
+  SingleUserByUsername,
+  SingleUserByUsernameParams,
   useLoadSingleUserDetails,
 } from '@/model/user/users';
 import { BackLink } from '@/navigation/BackLink';
@@ -27,10 +27,10 @@ import { EditProfileDialog } from './components/EditProfileDialog';
 
 const UserDetailsPage = (): JSX.Element | null => {
   const dialogRef = React.useRef(null);
-  const { userId } = useParams<SingleUserParams>();
+  const { userName } = useParams<SingleUserByUsernameParams>();
 
-  useLoadSingleUserDetails(userId);
-  const user = useRecoilValue(SingleUser(userId));
+  useLoadSingleUserDetails(userName);
+  const user = useRecoilValue(SingleUserByUsername(userName));
 
   const [isDialogOpen, setIsDialogOpen] = React.useState<boolean>(false);
 

packages/frontend/src/pages/UserDetails/UserDetailsPageRedirect.tsx

@@ -0,0 +1,20 @@
+import { useRecoilValue } from 'recoil';
+import { Redirect, useParams } from 'react-router-dom';
+import {
+  SingleUser,
+  SingleUserParams,
+  useLoadSingleUserDetails,
+} from '@/model/user/users';
+
+const UserDetailsPageRedirect = (): JSX.Element | null => {
+  const { userId } = useParams<SingleUserParams>();
+
+  useLoadSingleUserDetails(userId);
+  const user = useRecoilValue(SingleUser(userId));
+
+  if (!user) return null;
+
+  return <Redirect to={`/${user.username}`} />;
+};
+
+export default UserDetailsPageRedirect;

packages/frontend/src/pages/Users/components/UsersTableRow.tsx

@@ -14,7 +14,7 @@ export const UsersTableRow = ({ data }: IUsersTableRow): JSX.Element | null => {
   return (
     <div
       className="flex items-center w-full px-5 py-3 cursor-pointer hover:bg-warm-gray-100 dark:hover:bg-slate-500"
-      onClickCapture={(): void => history.push(`users/${data._id}`)}
+      onClickCapture={(): void => history.push(`${data.username}`)}
     >
       <div className="flex items-center w-full ">
         <div className="flex items-center w-1/2 pr-3">