View user profiles

example.env

@@ -2,4 +2,4 @@ REACT_APP_API_URL=https://fallingfruit.org/api/0.3
 REACT_APP_API_KEY=AKDJGHSD
 REACT_APP_RECAPTCHA_SITE_KEY=6Ld99kUdAAAAAAB5nCofKrQB6Vp-e5wR42u5TNZZ
 REACT_APP_GOOGLE_MAPS_API_KEY=
-REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID=
+REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID=

src/components/desktop/DesktopLayout.js

@@ -7,6 +7,7 @@ import aboutRoutes from '../about/aboutRoutes'
 import authRoutes from '../auth/authRoutes'
 import connectRoutes from '../connect/connectRoutes'
 import MapPage from '../map/MapPage'
+import profileRoutes from '../profile/profileRoutes'
 import Header from './Header'
 import SidePane from './SidePane'
 
@@ -52,6 +53,7 @@ const DesktopLayout = () => (
     <Switch>
       {aboutRoutes}
       {authRoutes}
+      {profileRoutes}
       <Route>
         {connectRoutes}
         <WindowSize>

src/components/entry/EntryOverview.js

@@ -179,9 +179,16 @@ const EntryOverview = () => {
                   <User size={20} />
                 )}
                 <p>
-                  {locationData.author && locationData.import_id
-                    ? t('imported_from', { name: locationData.author })
-                    : t('added_by', { name: locationData.author })}
+                  {locationData.author && locationData.import_id ? (
+                    t('imported_from', { name: locationData.author })
+                  ) : (
+                    <>
+                      {t('added_by', { name: '' })}{' '}
+                      <Link to={`/users/${locationData.user_id}`}>
+                        {locationData.author}
+                      </Link>
+                    </>
+                  )}
                   {locationData.import_id && (
                     <>
                       {locationData.author && ' ('}

src/components/entry/Review.js

@@ -1,4 +1,5 @@
 import { Pencil as PencilIcon } from '@styled-icons/boxicons-solid'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 import { FRUITING_RATINGS, RATINGS } from '../../constants/ratings'
@@ -146,7 +147,16 @@ const Review = ({
       {!editable && (
         <cite>
           Reviewed on {formatISOString(review.created_at)}
-          {review.author && <> by {review.author}</>}
+          {review.author && (
+            <>
+              {' by '}
+              {review.user_id ? (
+                <Link to={`/users/${review.user_id}`}>{review.author}</Link>
+              ) : (
+                review.author
+              )}
+            </>
+          )}
           {review.observed_on && (
             <> (visited {formatISOString(review.observed_on)})</>
           )}

src/components/profile/UserProfile.js

@@ -0,0 +1,70 @@
+import { ArrowBack } from '@styled-icons/boxicons-regular'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+import { getUserById } from '../../utils/api'
+import { useAppHistory } from '../../utils/useAppHistory'
+import { PageScrollWrapper, PageTemplate } from '../about/PageTemplate'
+import BackButton from '../ui/BackButton'
+import { LoadingOverlay } from '../ui/LoadingIndicator'
+
+const StyledNavBack = styled.div`
+  svg {
+    height: 20px;
+    margin-right: 5px;
+  }
+`
+const UserProfile = () => {
+  const { id } = useParams()
+  const history = useAppHistory()
+  const { t } = useTranslation()
+  const [userData, setUserData] = useState({})
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchUserData() {
+      setIsLoading(true)
+      const data = await getUserById(id)
+      setUserData(data)
+
+      // Log the fetched data
+      console.log('Fetched User Data:', data)
+
+      setIsLoading(false)
+    }
+
+    fetchUserData()
+  }, [id])
+
+  if (isLoading) {
+    return <LoadingOverlay />
+  }
+
+  const { created_at, name, bio } = userData
+
+  return (
+    <PageScrollWrapper>
+      <PageTemplate>
+        <StyledNavBack>
+          <BackButton
+            onClick={(event) => {
+              event.stopPropagation()
+              history.goBack()
+            }}
+          >
+            <ArrowBack />
+            {t('back')}
+          </BackButton>
+        </StyledNavBack>
+
+        <h1>Name: {name}</h1>
+        <h3>Joined: {new Date(created_at).toISOString().slice(0, 10)}</h3>
+        <h3>Bio: {bio}</h3>
+      </PageTemplate>
+    </PageScrollWrapper>
+  )
+}
+
+export default UserProfile

src/components/profile/profileRoutes.js

@@ -0,0 +1,16 @@
+import { Route } from 'react-router-dom'
+
+import UserProfile from './UserProfile'
+
+const pages = [
+  {
+    path: ['/users/:id'],
+    component: UserProfile,
+  },
+]
+
+const profileRoutes = pages.map((props) => (
+  <Route key={props.path[0]} path={props.path} component={props.component} />
+))
+
+export default profileRoutes

src/utils/api.ts

@@ -30,6 +30,7 @@ instance.interceptors.request.use((config) => {
     '/clusters',
     '/imports',
     '/imports/:id',
+    '/users/:id',
   ]
   const isAnonymous =
     config.method === 'get' &&
@@ -184,3 +185,7 @@ export const getImports = () => instance.get(`/imports`)
 export const getImportById = (
   id: paths['/imports/{id}']['get']['parameters']['path']['id'],
 ) => instance.get(`/imports/${id}`)
+
+export const getUserById = (
+  id: paths['/users/{id}']['get']['parameters']['path']['id'],
+) => instance.get(`/users/${id}`)

src/utils/apiSchema.ts

@@ -58,6 +58,24 @@ export interface paths {
       };
     };
   };
+  "/users/{id}": {
+    get: {
+      parameters: {
+        path: {
+          /** User ID. */
+          id: components["parameters"]["user_id"];
+        };
+      };
+      responses: {
+        /** Success */
+        200: {
+          content: {
+            "application/json": components["schemas"]["User"];
+          };
+        };
+      };
+    };
+  };
   "/locations": {
     get: {
       parameters: {