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

See #246.

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/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,7 +186,10 @@ const Header = () => {
     dispatch(logout())
   }
 
-  const isAboutPage = useRouteMatch('/about/:slug') !== null
+  const isAboutPage =
+    matchPath(useLocation().pathname, {
+      path: aboutRoutes.map((route) => route.props.path).flat(),
+    }) !== null
   const isAccountPage = useRouteMatch('/account') !== null
 
   return (
@@ -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>

src/components/entry/EntryOverview.js

@@ -157,7 +157,7 @@ const EntryOverview = ({ locationData, className }) => {
                 {t('Imported from')}{' '}
                 <Link
                   to={{
-                    pathname: `/about/dataset/${locationData.import_id}`,
+                    pathname: `/imports/${locationData.import_id}`,
                     state: { fromPage: `/entry/${locationData.id}` },
                   }}
                 >

src/components/settings/SettingsPage.js

@@ -274,22 +274,22 @@ const SettingsPage = ({ desktop }) => {
           <StyledListEntry
             rightIcons={<ChevronRight size="16" color={theme.blue} />}
             primaryText={'The project'}
-            onClick={() => history.push('/about/project')}
+            onClick={() => history.push('/about')}
           />
           <StyledListEntry
             rightIcons={<ChevronRight size="16" color={theme.blue} />}
             primaryText={'The data'}
-            onClick={() => history.push('/about/data')}
+            onClick={() => history.push('/data')}
           />
           <StyledListEntry
             rightIcons={<ChevronRight size="16" color={theme.blue} />}
             primaryText={'Sharing the harvest'}
-            onClick={() => history.push('/about/share')}
+            onClick={() => history.push('/sharing')}
           />
           <StyledListEntry
             rightIcons={<ChevronRight size="16" color={theme.blue} />}
             primaryText={'In the press'}
-            onClick={() => history.push('/about/press')}
+            onClick={() => history.push('/press')}
           />
         </>
       )}

src/components/table/ImportsTable.jsx

@@ -95,8 +95,8 @@ const ImportsTable = () => {
       persistTableHead
       onRowClicked={(row) => {
         history.push({
-          pathname: `/about/dataset/${row.id}`,
-          state: { fromPage: '/about/datasets' },
+          pathname: `/imports/${row.id}`,
+          state: { fromPage: '/data' },
         })
       }}
     />