feat: onwards

public-convenience-ltd · Jul 10, 2021 · e41cb44 · e41cb44
1 parent c08b760
commit e41cb44
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 239 deletions.
diff --git a/graphql.d.ts b/graphql.d.ts
@@ -0,0 +1,6 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql';
+  const Schema: DocumentNode;
+
+  export = Schema;
+}
diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,11 @@
 module.exports = {
     webpack: (config, { isServer }) => {
-      if (!isServer) {
-        config.resolve.fallback.fs = false;
-      }
+      config.module.rules.push({
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: 'graphql-tag/loader',
+      });
       return config;
     },
 
-  }
+  }
diff --git a/package.json b/package.json
@@ -116,7 +116,6 @@
     "msw": "0.29.0",
     "nodemon": "2.0.7",
     "prettier": "2.3.1",
-    "puppeteer": "10.0.0",
     "react-styleguidist": "11.1.7",
     "serve": "12.0.0",
     "source-map-explorer": "2.5.2",

diff --git a/src/explorer/HeadlineStats/Counter.tsx b/src/explorer/HeadlineStats/Counter.tsx
@@ -3,7 +3,13 @@ import propTypes from 'prop-types';
 import Paper from '@material-ui/core/Paper';
 import AnimatedNumber from 'react-animated-number';
 
-function Counter({ icon, value, label }) {
+interface CounterProps {
+    icon?: React.ReactElement;
+    value?: number;
+    label?: string;
+}
+
+function Counter({ icon, value, label }: CounterProps) {
   var iconCopy = React.cloneElement(icon, {
     style: {
       height: 140,

diff --git a/src/pages/EditPage.tsx b/src/pages/EditPage.tsx
@@ -150,66 +150,68 @@ const EditPage = (props) => {
 
   return (
     <PageLayout>
-      <Helmet>
-        <title>{config.getTitle('Edit Toilet')}</title>
-      </Helmet>
-
-      <Box display="flex" height="40vh">
-        <LooMap
-          loos={getLoosToDisplay()}
-          center={mapState.center}
-          zoom={mapState.zoom}
-          minZoom={config.editMinZoom}
-          showCenter
-          showContributor
-          showLocateControl
-          showCrosshair
-          controlsOffset={20}
-          withAccessibilityOverlays={false}
-          onViewportChanged={(mapPosition) => {
-            setMapCenter(mapPosition.center);
-          }}
-        />
-      </Box>
-
-      <Spacer mt={4} />
-
-      <EntryForm
-        title="Edit This Toilet"
-        loo={initialData.loo}
-        center={mapCenter}
-        saveLoading={saveLoading}
-        saveError={saveError}
-        onSubmit={save}
-      >
-        {({ isDirty }) => (
-          <Box display="flex" flexDirection="column" alignItems="center">
-            <Button
-              type="submit"
-              disabled={!isDirty}
-              css={{
-                width: '100%',
-              }}
-              data-testid="update-toilet-button"
-            >
-              Update the toilet
-            </Button>
-
-            <Spacer mt={2} />
-
-            <Button
-              as={Link}
-              to={`/loos/${props.match.params.id}/remove`}
-              css={{
-                width: '100%',
-              }}
-              data-testid="remove-toilet-button"
-            >
-              Remove the toilet
-            </Button>
-          </Box>
-        )}
-      </EntryForm>
+      <>
+        <Helmet>
+          <title>{config.getTitle('Edit Toilet')}</title>
+        </Helmet>
+
+        <Box display="flex" height="40vh">
+          <LooMap
+            loos={getLoosToDisplay()}
+            center={mapState.center}
+            zoom={mapState.zoom}
+            minZoom={config.editMinZoom}
+            showCenter
+            showContributor
+            showLocateControl
+            showCrosshair
+            controlsOffset={20}
+            withAccessibilityOverlays={false}
+            onViewportChanged={(mapPosition) => {
+              setMapCenter(mapPosition.center);
+            }}
+          />
+        </Box>
+
+        <Spacer mt={4} />
+
+        <EntryForm
+          title="Edit This Toilet"
+          loo={initialData.loo}
+          center={mapCenter}
+          saveLoading={saveLoading}
+          saveError={saveError}
+          onSubmit={save}
+        >
+          {({ isDirty }) => (
+            <Box display="flex" flexDirection="column" alignItems="center">
+              <Button
+                type="submit"
+                disabled={!isDirty}
+                css={{
+                  width: '100%',
+                }}
+                data-testid="update-toilet-button"
+              >
+                Update the toilet
+              </Button>
+
+              <Spacer mt={2} />
+
+              <Button
+                as={Link}
+                to={`/loos/${props.match.params.id}/remove`}
+                css={{
+                  width: '100%',
+                }}
+                data-testid="remove-toilet-button"
+              >
+                Remove the toilet
+              </Button>
+            </Box>
+          )}
+        </EntryForm>
+      </>
     </PageLayout>
   );
 };

diff --git a/src/pages/RemovePage.tsx b/src/pages/RemovePage.tsx
@@ -29,10 +29,8 @@ const RemovePage = function (props) {
     error: looError,
   } = useSWR([GET_LOO_BY_ID_QUERY, JSON.stringify({ id: params.id })]);
 
-  const [
-    doRemove,
-    { loading: loadingRemove, error: removeError },
-  ] = useMutation(REMOVE_LOO_MUTATION);
+  const [doRemove, { loading: loadingRemove, error: removeError }] =
+    useMutation(REMOVE_LOO_MUTATION);
 
   const updateReason = (evt) => {
     setReason(evt.currentTarget.value);
@@ -69,55 +67,57 @@ const RemovePage = function (props) {
 
   return (
     <PageLayout layoutMode="blog">
-      <Helmet>
-        <title>{config.getTitle('Remove Toilet')}</title>
-      </Helmet>
-
-      <Container maxWidth={845}>
-        <Text fontSize={6} fontWeight="bold" textAlign="center">
-          <h1>Toilet Remover</h1>
-        </Text>
-
-        <Spacer mb={5} />
-
-        <p>
-          Please let us know why you're removing this toilet from the map using
-          the form below.
-        </p>
-
-        <Spacer mb={3} />
-
-        <form onSubmit={onSubmit}>
-          <label>
-            <b>Reason for removal</b>
-            <textarea
-              type="text"
-              name="reason"
-              value={reason}
-              onChange={updateReason}
-              required
-              css={{
-                height: '100px',
-                width: '100%',
-              }}
-            />
-          </label>
+      <>
+        <Helmet>
+          <title>{config.getTitle('Remove Toilet')}</title>
+        </Helmet>
 
-          <Spacer mb={3} />
+        <Container maxWidth={845}>
+          <Text fontSize={6} fontWeight="bold" textAlign="center">
+            <h1>Toilet Remover</h1>
+          </Text>
+
+          <Spacer mb={5} />
 
-          <Button type="submit">Remove</Button>
-        </form>
+          <p>
+            Please let us know why you're removing this toilet from the map
+            using the form below.
+          </p>
 
-        {loadingRemove && (
-          <Notification>Submitting removal report&hellip;</Notification>
-        )}
+          <Spacer mb={3} />
 
-        {removeError && (
-          <Notification>
-            Oops. We can't submit your report at this time. Try again later.
-          </Notification>
-        )}
-      </Container>
+          <form onSubmit={onSubmit}>
+            <label>
+              <b>Reason for removal</b>
+              <textarea
+                type="text"
+                name="reason"
+                value={reason}
+                onChange={updateReason}
+                required
+                css={{
+                  height: '100px',
+                  width: '100%',
+                }}
+              />
+            </label>
+
+            <Spacer mb={3} />
+
+            <Button type="submit">Remove</Button>
+          </form>
+
+          {loadingRemove && (
+            <Notification>Submitting removal report&hellip;</Notification>
+          )}
+
+          {removeError && (
+            <Notification>
+              Oops. We can't submit your report at this time. Try again later.
+            </Notification>
+          )}
+        </Container>
+      </>
     </PageLayout>
   );
 };

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -90,6 +90,9 @@ const App = ({Component, pageProps}) => (
               href="/explorer"
               render={(props) => <Explorer {...props} />}
             />
+
+
+            // TODO: Protected routes need auth in nextJS world.
             <ProtectedRoute href="/loos/:id/edit" component={EditPage} />
             <ProtectedRoute href="/loos/:id/remove" component={RemovePage} />
             <Link component={NotFound} /> */}

diff --git a/src/styleguide/Wrapper.tsx b/src/styleguide/Wrapper.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 
 import globalStyles from '../globalStyles';
 import theme from '../theme';

diff --git a/typestat.json b/typestat.json
@@ -0,0 +1,10 @@
+{
+    "fixes": {
+        "incompleteTypes": true,
+        "noInferableTypes": true
+    },
+    "include": [
+        "src/**/*.{ts,tsx}"
+    ],
+    "projectPath": "./tsconfig.json"
+}