feat: typescript

next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

package.json

@@ -83,7 +83,6 @@
     "react-hook-form": "6.15.8",
     "react-leaflet": "2.8.0",
     "react-leaflet-control": "2.1.2",
-    "react-router-hash-link": "2.4.3",
     "react-simple-maps": "2.3.0",
     "react-tooltip": "4.2.21",
     "resize-observer-polyfill": "1.5.1",
@@ -98,7 +97,11 @@
     "@mapbox/geojson-area": "0.2.2",
     "@mapbox/geojson-rewind": "0.5.1",
     "@shelf/jest-mongodb": "1.2.5",
+    "@types/jest": "26.0.23",
+    "@types/node": "15.12.4",
     "@types/puppeteer": "5.4.3",
+    "@types/react": "17.0.11",
+    "@types/react-dom": "17.0.8",
     "apollo-server-testing": "2.24.1",
     "cli-progress": "3.9.0",
     "customize-cra": "1.0.0",
@@ -121,6 +124,7 @@
     "stylelint-config-standard": "22.0.0",
     "topojson-server": "3.0.1",
     "topojson-simplify": "3.0.3",
+    "typescript": "4.3.4",
     "uuid": "8.3.2"
   },
   "browserslist": {

src/components/EntryForm.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { useForm, Controller } from 'react-hook-form';
-import { Link } from 'react-router-dom';
+import { Link } from 'next/link';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';

src/components/Footer.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { HashLink } from 'react-router-hash-link';
+import { Link } from 'next/link';
 import styled from '@emotion/styled';
 
 import Box from './Box';
@@ -34,7 +33,7 @@ const Footer = ({ children }) => (
     color="primary"
     height={['auto', 60]}
   >
-    <HashLink
+    <Link
       to="/use-our-loos"
       title="Domestos: Use Our Loos Campaign"
       scroll={(el) => el.scrollIntoView(true)}
@@ -51,7 +50,7 @@ const Footer = ({ children }) => (
           </Box>
         </Box>
       </Box>
-    </HashLink>
+    </Link>
 
     <Box order={[-1, 0]} mb={[4, 0]}>
       <Text fontSize={[12, 16]}>

src/components/Header/Header.js → src/components/Header/Header.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import Link from 'next/link';
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import Box from '../Box';
@@ -70,7 +70,7 @@ const Header = ({ mapCenter, children }) => {
         minHeight={60}
       >
         <Box flexShrink={0}>
-          <Link to="/">
+          <Link href="/">
             <Logo />
           </Link>
         </Box>

src/components/Header/MainMenu.js → src/components/Header/MainMenu.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NavLink, useHistory } from 'react-router-dom';
+import NavLink from 'next/link';
+import {useRouter} from 'next/router';
 import styled from '@emotion/styled';
 
 import Box from '../Box';
@@ -18,16 +19,16 @@ const StyledNavLink = styled(NavLink)`
 // Todo: Contact link
 const MainMenu = ({
   mapCenter,
-  onMenuItemClick = Function.prototype,
+  onMenuItemClick,
   children,
 }) => {
   const { isAuthenticated, logout } = useAuth();
-  const history = useHistory();
+  const router = useRouter();
 
   const handleLogout = () => {
     logout();
     onMenuItemClick();
-    history.push('/');
+    router.push('/');
   };
 
   return (
@@ -58,7 +59,7 @@ const MainMenu = ({
           </Box>
           <Box as="li" mt={[3, 0]} ml={[0, 4]}>
             <StyledNavLink
-              to={
+              href={
                 mapCenter
                   ? `/loos/add?lat=${mapCenter.lat}&lng=${mapCenter.lng}`
                   : `/loos/add`

src/components/LooMap/LooMap.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useHistory } from 'next/link';
 import { css } from '@emotion/core';
 import { Map, TileLayer, ZoomControl } from 'react-leaflet';
 import 'focus-visible';

src/components/ProtectedRoute.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
+import { Route, Redirect } from 'next/link';
 
 import { useAuth } from '../Auth';
 

src/components/Sidebar.js

@@ -9,7 +9,7 @@ import {
   faPlusCircle,
   faMapMarkerAlt,
 } from '@fortawesome/free-solid-svg-icons';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'next/link';
 
 import { Media } from '../components/Media';
 import VisuallyHidden from './VisuallyHidden';

src/components/ToiletDetailsPanel.js

@@ -23,7 +23,7 @@ import lightFormat from 'date-fns/lightFormat';
 import getISODay from 'date-fns/getISODay';
 import parseISO from 'date-fns/parseISO';
 import add from 'date-fns/add';
-import { Link } from 'react-router-dom';
+import { Link } from 'next/link';
 import useComponentSize from '@rehooks/component-size';
 import L from 'leaflet';
 import { mutate } from 'swr';

src/explorer/Areas/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import useSWR from 'swr';
-import { Link } from 'react-router-dom';
+import { Link } from 'next/link';
 import get from 'lodash/get';
 import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';

src/explorer/Home/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link as InternalLink, useRouteMatch } from 'react-router-dom';
+import { Link as InternalLink, useRouteMatch } from 'next/link';
 import Paper from '@material-ui/core/Paper';
 import ExternalLink from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';

src/explorer/Layout.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link, useRouteMatch, useHistory } from 'react-router-dom';
+import { Link, useRouteMatch, useHistory } from 'next/link';
 
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';

src/explorer/Loo/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import useSWR from 'swr';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'next/link';
 import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 

src/explorer/Search/Results/Row.js

@@ -2,7 +2,7 @@ import React from 'react';
 import uniq from 'lodash/uniq';
 import TableRow from '@material-ui/core/TableRow';
 import TableCell from '@material-ui/core/TableCell';
-import { Link } from 'react-router-dom';
+import { Link } from 'next/link';
 import Chip from '@material-ui/core/Chip';
 import Avatar from '@material-ui/core/Avatar';
 

src/explorer/Search/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import useSWR from 'swr';
-import { useLocation, useHistory, useRouteMatch } from 'react-router-dom';
+import { useLocation, useHistory, useRouteMatch } from 'next/link';
 import { parse, stringify } from 'query-string';
 import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';

src/explorer/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import { Switch, Route, useRouteMatch } from 'next/link';
 
 import Layout from './Layout';
 import Home from './Home';

src/index.js → src/index.ts

@@ -5,7 +5,7 @@ import 'resize-observer-polyfill';
 
 import React, { Suspense, lazy } from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, Switch, Redirect } from 'react-router-dom';
+import { Router, Route, Switch, Redirect } from 'next/link';
 import { createBrowserHistory } from 'history';
 import { SWRConfig } from 'swr';
 

src/pages/404.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'next/link';
 
 import PageLayout from '../components/PageLayout';
 import Box from '../components/Box';

src/pages/AboutPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'next/link';
 import { Helmet } from 'react-helmet';
 import styled from '@emotion/styled';
 

src/pages/AddPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import queryString from 'query-string';
-import { Redirect } from 'react-router-dom';
+import { Redirect } from 'next/link';
 import { mutate } from 'swr';
 import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';

src/pages/AuthCallback.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory, useLocation } from 'next/link';
 
 import { useAuth } from '../Auth';
 import PageLayout from '../components/PageLayout';

src/pages/CookiesPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'next/link';
 import { Helmet } from 'react-helmet';
 
 import PageLayout from '../components/PageLayout';

src/pages/EditPage.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'next/link';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';

src/pages/HomePage.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useParams, useRouteMatch } from 'react-router-dom';
+import { useParams, useRouteMatch } from 'next/link';
 import queryString from 'query-string';
 import { Helmet } from 'react-helmet';
 import useSWR from 'swr';

src/pages/RemovePage.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import useSWR from 'swr';
-import { Redirect, useParams, useHistory } from 'react-router-dom';
+import { Redirect, useParams, useHistory } from 'next/link';
 import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}