😤 Match paths of existing website (#345)

See #246.

* Use about paths that match existing website

- /about/project -> /about
- /about/press -> /press
- /about/share -> /sharing
- /about/data -> /data + /datasets (combines both pages)
  Deprecated alternate paths /maps and /inventories are ignored.
- /about/dataset/:id -> /imports/:id

* Replace /entry path with existing /locations

- /entry/:id -> /locations/:id
- /entry/new -> /locations/new
- /entry/edit -> /locations/edit

* Use auth paths that match existing website

- /account -> /users/edit
- /login -> /users/sign_in
- /signup -> /users/sign_up
- /password -> /users/password
- /password/reset -> /users/password/new
- /password/set -> /users/password/edit (API update required)
- /confirmation/new -> /users/confirmation/new
- /confirmation -> /users/confirmation (API update required)

* Use /reviews to match style of other paths

- /review/:id/edit -> /reviews/:id/edit

src/components/about/ProjectPage.js

@@ -84,21 +84,21 @@ const Project = () => (
           world's most comprehensive. While our users contribute locations of
           their own, we comb the internet for pre-existing knowledge, seeking to
           unite the efforts of foragers, foresters, and freegans everywhere. The{' '}
-          <a href="/about/data">imported datasets</a> range from small
-          neighborhood foraging maps to vast professionally-compiled tree
-          inventories. This so far amounts to thousands of different types of
-          edibles (most, but not all, plant species) distributed over millions
-          of locations. Beyond the cultivated and commonplace to the exotic
-          flavors of foreign plants and long-forgotten native plants, foraging
-          in your neighborhood is a journey through time and across cultures.
+          <a href="/data">imported datasets</a> range from small neighborhood
+          foraging maps to vast professionally-compiled tree inventories. This
+          so far amounts to thousands of different types of edibles (most, but
+          not all, plant species) distributed over millions of locations. Beyond
+          the cultivated and commonplace to the exotic flavors of foreign plants
+          and long-forgotten native plants, foraging in your neighborhood is a
+          journey through time and across cultures.
         </p>
         <p>
           Join us in celebrating hyper-local food! The <a href="/map">map</a> is
           open for anyone to edit, the database can be{' '}
-          <a href="/about/data">downloaded</a> with just one click, and the{' '}
+          <a href="/data">downloaded</a> with just one click, and the{' '}
           <a href="https://github.com/falling-fruit">code</a> is open-source.
           You are likewise encouraged to share the bounty with your fellow
-          humans. Our <a href="/about/share">sharing page</a> lists hundreds of
+          humans. Our <a href="/sharing">sharing page</a> lists hundreds of
           local organizations - planting public orchards and food forests,
           picking otherwise-wasted fruits and vegetables from city trees and
           farmers' fields, and sharing with neighbors and the needy.

src/components/about/aboutRoutes.js

@@ -8,26 +8,28 @@ import ShareTheHarvestPage from './ShareTheHarvestPage'
 
 const pages = [
   {
-    path: '/about/project',
+    path: ['/about'],
     component: ProjectPage,
   },
   {
-    path: '/about/dataset/:id',
+    path: ['/imports/:id'],
     component: AboutDatasetPage,
   },
   {
-    path: '/about/data',
+    path: ['/data', '/datasets'],
     component: DataPage,
   },
   {
-    path: '/about/press',
+    path: ['/press'],
     component: InThePressPage,
   },
   {
-    path: '/about/share',
+    path: ['/sharing'],
     component: ShareTheHarvestPage,
   },
 ]
 
-const aboutRoutes = pages.map((props) => <Route key={props.path} {...props} />)
+const aboutRoutes = pages.map((props) => (
+  <Route key={props.path[0]} {...props} />
+))
 export default aboutRoutes

src/components/auth/AccountPage.js

@@ -56,7 +56,7 @@ const AccountPage = () => {
   }, [])
 
   if (!isLoading && !isLoggedIn) {
-    return <Redirect to={getPathWithMapState('/login')} />
+    return <Redirect to={getPathWithMapState('/users/sign_in')} />
   }
 
   const handleSubmit = async (values) => {

src/components/auth/ConfirmationPage.js

@@ -13,15 +13,15 @@ const ConfirmationPage = () => {
 
       if (!token) {
         toast.error("Confirmation token can't be blank", { autoClose: 5000 })
-        history.push('/confirmation/new')
+        history.push('/users/confirmation/new')
       } else {
         try {
           const { email } = await confirmUser(token)
           toast.success('Your email has been confirmed.')
-          history.push({ pathname: '/login', state: { email } })
+          history.push({ pathname: '/users/sign_in', state: { email } })
         } catch (e) {
           toast.error(e.response?.data.error, { autoClose: 5000 })
-          history.push('/confirmation/new')
+          history.push('/users/confirmation/new')
         }
       }
     }

src/components/auth/ConfirmationResendPage.js

@@ -27,7 +27,7 @@ const ConfirmationResendPage = () => {
         'You will receive an email with instructions for how to confirm your email address in a few minutes',
         { autoClose: 5000 },
       )
-      history.push('/login')
+      history.push('/users/sign_in')
     } catch (e) {
       toast.error(e.response?.data.error)
       console.error(e.response)
@@ -40,9 +40,11 @@ const ConfirmationResendPage = () => {
       <h1>Resend confirmation instructions</h1>
       <EmailForm onSubmit={handleSubmit} recaptchaRef={recaptchaRef} />
       <Column>
-        <Link to="/login">Login</Link>
-        <Link to="/signup">Sign up</Link>
-        <Link to="/confirmation/new">Resend confirmation instructions</Link>
+        <Link to="/users/sign_in">Login</Link>
+        <Link to="/users/sign_up">Sign up</Link>
+        <Link to="/users/confirmation/new">
+          Resend confirmation instructions
+        </Link>
       </Column>
     </PageTemplate>
   )

src/components/auth/LoginPage.js

@@ -75,9 +75,11 @@ const LoginPage = () => {
           )}
         </Formik>
         <Column>
-          <Link to="/signup">Sign up</Link>
-          <Link to="/password/reset">Reset your password</Link>
-          <Link to="/confirmation/new">Resend confirmation instructions</Link>
+          <Link to="/users/sign_up">Sign up</Link>
+          <Link to="/users/password/new">Reset your password</Link>
+          <Link to="/users/confirmation/new">
+            Resend confirmation instructions
+          </Link>
         </Column>
       </PageTemplate>
     </PageScrollWrapper>

src/components/auth/PasswordResetPage.js

@@ -27,7 +27,7 @@ const PasswordResetPage = () => {
         'You will receive an email with instructions on how to reset your password in a few minutes',
         { autoClose: 5000 },
       )
-      history.push('/login')
+      history.push('/users/sign_in')
     } catch (e) {
       toast.error('Email not found')
       console.error(e.response)
@@ -40,9 +40,11 @@ const PasswordResetPage = () => {
       <h1>Send password reset instructions</h1>
       <EmailForm onSubmit={handleSubmit} recaptchaRef={recaptchaRef} />
       <Column>
-        <Link to="/login">Login</Link>
-        <Link to="/signup">Sign up</Link>
-        <Link to="/confirmation/new">Resend confirmation instructions</Link>
+        <Link to="/users/sign_in">Login</Link>
+        <Link to="/users/sign_up">Sign up</Link>
+        <Link to="/users/confirmation/new">
+          Resend confirmation instructions
+        </Link>
       </Column>
     </PageTemplate>
   )

src/components/auth/PasswordSetPage.js

@@ -27,7 +27,7 @@ const PasswordSetPage = () => {
         "You can't access this page without coming from a password reset email. If you do come from a password reset email, please make sure you used the full URL provided.",
         { autoClose: 5000 },
       )
-      history.push('/login')
+      history.push('/users/sign_in')
     }
   }, [history])
 
@@ -44,11 +44,11 @@ const PasswordSetPage = () => {
       toast.success('Your password has been changed successfully.', {
         autoClose: 5000,
       })
-      history.push({ pathname: '/login', state: { email } })
+      history.push({ pathname: '/users/sign_in', state: { email } })
     } catch (e) {
       toast.error('Invalid password reset link')
       console.error(e.response)
-      history.push('/login')
+      history.push('/users/sign_in')
     }
   }
 
@@ -91,9 +91,11 @@ const PasswordSetPage = () => {
         )}
       </Formik>
       <Column>
-        <Link to="/login">Login</Link>
-        <Link to="/signup">Sign up</Link>
-        <Link to="/confirmation/new">Resend confirmation instructions</Link>
+        <Link to="/users/sign_in">Login</Link>
+        <Link to="/users/sign_up">Sign up</Link>
+        <Link to="/users/confirmation/new">
+          Resend confirmation instructions
+        </Link>
       </Column>
     </PageTemplate>
   )

src/components/auth/SignupPage.js

@@ -53,7 +53,7 @@ const SignupPage = () => {
       <PageTemplate>
         <h1>Sign up</h1>
         <LoginNotice>
-          Have an account? <Link to="/login">Login</Link>
+          Have an account? <Link to="/users/sign_in">Login</Link>
         </LoginNotice>
 
         <Formik

src/components/auth/authRoutes.js

@@ -10,31 +10,31 @@ import SignupPage from './SignupPage'
 
 const pages = [
   {
-    path: '/account',
+    path: '/users/edit',
     component: AccountPage,
   },
   {
-    path: '/login',
+    path: '/users/sign_in',
     component: LoginPage,
   },
   {
-    path: '/signup',
+    path: '/users/sign_up',
     component: SignupPage,
   },
   {
-    path: '/password/reset',
+    path: '/users/password/new',
     component: PasswordResetPage,
   },
   {
-    path: '/password/set',
+    path: '/users/password/edit',
     component: PasswordSetPage,
   },
   {
-    path: '/confirmation/new',
+    path: '/users/confirmation/new',
     component: ConfirmationResendPage,
   },
   {
-    path: '/confirmation',
+    path: '/users/confirmation',
     component: ConfirmationPage,
   },
 ]

src/components/desktop/Header.js

@@ -2,10 +2,12 @@ import { CaretDown } from '@styled-icons/boxicons-regular'
 import { User } from '@styled-icons/boxicons-solid'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { Link, NavLink, useRouteMatch } from 'react-router-dom'
+import { matchPath } from 'react-router'
+import { Link, NavLink, useLocation, useRouteMatch } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 import { logout } from '../../redux/authSlice'
+import aboutRoutes from '../about/aboutRoutes'
 import Button from '../ui/Button'
 import ResetButton from '../ui/ResetButton'
 
@@ -184,8 +186,11 @@ const Header = () => {
     dispatch(logout())
   }
 
-  const isAboutPage = useRouteMatch('/about/:slug') !== null
-  const isAccountPage = useRouteMatch('/account') !== null
+  const isAboutPage =
+    matchPath(useLocation().pathname, {
+      path: aboutRoutes.map((route) => route.props.path).flat(),
+    }) !== null
+  const isAccountPage = useRouteMatch('/users/edit') !== null
 
   return (
     <StyledHeader>
@@ -201,16 +206,16 @@ const Header = () => {
           </li>
           <li>
             <StyledDropdown label={t('About')} isMatch={isAboutPage}>
-              <NavLink to="/about/project" activeClassName="active">
+              <NavLink to="/about" activeClassName="active">
                 {t('The project')}
               </NavLink>
-              <NavLink to="/about/data" activeClassName="active">
+              <NavLink to="/data" activeClassName="active">
                 {t('The data')}
               </NavLink>
-              <NavLink to="/about/share" activeClassName="active">
+              <NavLink to="/sharing" activeClassName="active">
                 {t('Sharing the harvest')}
               </NavLink>
-              <NavLink to="/about/press" activeClassName="active">
+              <NavLink to="/press" activeClassName="active">
                 {t('In the press')}
               </NavLink>
             </StyledDropdown>
@@ -227,7 +232,7 @@ const Header = () => {
                 }
                 isMatch={isAccountPage}
               >
-                <NavLink to="/account" activeClassName="active">
+                <NavLink to="/users/edit" activeClassName="active">
                   {t('My Account')}
                 </NavLink>
                 <ResetButton onClick={handleLogout}>Logout</ResetButton>
@@ -236,12 +241,12 @@ const Header = () => {
           ) : (
             <>
               <li>
-                <NavLink to="/login" activeClassName="active">
+                <NavLink to="/users/sign_in" activeClassName="active">
                   {t('Login')}
                 </NavLink>
               </li>
               <li>
-                <NavLink to="/signup" activeClassName="active">
+                <NavLink to="/users/sign_up" activeClassName="active">
                   <SignupButton>{t('Sign up')}</SignupButton>
                 </NavLink>
               </li>

src/components/desktop/MainPane.js

@@ -36,7 +36,7 @@ const MainPane = () => {
         secondary
         onClick={() =>
           history.push({
-            pathname: '/entry/new',
+            pathname: '/locations/new',
             state: { fromPage: '/map' },
           })
         }

src/components/desktop/NavBack.js

@@ -25,13 +25,13 @@ const NavBack = ({ isEntry }) => {
   const history = useAppHistory()
   const { state } = useLocation()
   const { t } = useTranslation()
-  const match = useRouteMatch('/entry/:id')
+  const match = useRouteMatch('/locations/:id')
   const entryId = match?.params.id
 
-  const isEditingEntry = useRouteMatch('/entry/:id/edit')
+  const isEditingEntry = useRouteMatch('/locations/:id/edit')
 
   const handleBackButtonClick = () => {
-    // Default to going back to the map. This occurs when the user opens /entry/{typeId} directly
+    // Default to going back to the map. This occurs when the user opens /locations/:id directly
     if (isEditingEntry) {
       history.push(match.url)
     } else {
@@ -46,7 +46,7 @@ const NavBack = ({ isEntry }) => {
         {t('Back')}
       </BackButton>
       {isEntry && match && !isEditingEntry && (
-        <BackButton onClick={() => history.push(`/entry/${entryId}/edit`)}>
+        <BackButton onClick={() => history.push(`/locations/${entryId}/edit`)}>
           <Pencil />
           Edit
         </BackButton>

src/components/desktop/SidePaneSwitch.js

@@ -15,19 +15,19 @@ const SidePaneSwitch = () => (
     <Route>
       <NavPane>
         <Switch>
-          <Route path="/entry/:id/edit">
+          <Route path="/locations/:id/edit">
             <EditLocationPage />
           </Route>
-          <Route path="/review/:id/edit">
+          <Route path="/reviews/:id/edit">
             <EditReviewPage />
           </Route>
-          <Route path="/entry/new">
+          <Route path="/locations/new">
             <LocationForm />
           </Route>
           <Route path="/settings">
             <SettingsPage desktop />
           </Route>
-          <Route path={['/entry/:id', '/entry/:id']}>
+          <Route path={['/locations/:id', '/locations/:id']}>
             <EntryWrapper desktop />
           </Route>
           <Route>

src/components/entry/EntryMobile.js

@@ -299,7 +299,7 @@ const EntryMobile = ({
             {!isInDrawer && (
               <EntryButton
                 onClick={() =>
-                  history.push(`/entry/${locationData.id}`, {
+                  history.push(`/locations/${locationData.id}`, {
                     fromPage: '/map',
                   })
                 }
@@ -308,7 +308,7 @@ const EntryMobile = ({
               />
             )}
             <EntryButton
-              onClick={() => history.push(`/entry/${locationData.id}/edit`)}
+              onClick={() => history.push(`/locations/${locationData.id}/edit`)}
               icon={<PencilIcon />}
               label="edit-button"
             />