Migrate rest of app and tests to typescript

app/.storybook/config.js → app/.storybook/config.ts

@@ -2,7 +2,7 @@ import { configure } from '@storybook/react';
 import requireContext from 'require-context.macro';
 import '../node_modules/bootstrap/dist/css/bootstrap.css'
 
-const req = requireContext('../tests', true, /\.stories\.js$/);
+const req = requireContext('../tests', true, /\.stories\.tsx?$/);
 
 function loadStories() {
   req.keys().forEach(filename => req(filename));

app/containers/Forms/FormEditUser.js → app/containers/Forms/FormEditUser.tsx

@@ -4,7 +4,7 @@ import {createFragmentContainer, graphql} from 'react-relay';
 import updateUserMutation from '../../mutations/user/updateUserMutation';
 import {useInput} from '../../components/Forms/InputHook';
 
-export const FormEditUser = props => {
+export const FormEditUserComponent = props => {
   const {user, submitAction, submitBtnName} = props;
 
   const handleChange = e => {
@@ -95,7 +95,7 @@ export const FormEditUser = props => {
   );
 };
 
-export default createFragmentContainer(FormEditUser, {
+export default createFragmentContainer(FormEditUserComponent, {
   user: graphql`
     fragment FormEditUser_user on User {
       id

app/containers/Incentives/IncentiveCalculatorContainer.tsx

@@ -55,7 +55,7 @@ export const IncentiveCalculator = props => {
               <LoadingSpinner />
             )}
             <tr>
-              <td colSpan="2">
+              <td colSpan={2}>
                 <strong>Total Incentive</strong>
               </td>
               <td>

app/containers/Products/ProductCreatorContainer.tsx

@@ -3,7 +3,7 @@ import {graphql, createFragmentContainer, commitMutation} from 'react-relay';
 import {Form, Button, Col} from 'react-bootstrap';
 
 export const ProductCreator = props => {
-  const createProductFromRef = React.createRef();
+  const createProductFromRef = React.createRef<Form & HTMLFormElement>();
   const createProduct = graphql`
     mutation ProductCreatorContainerMutation($input: CreateProductInput!) {
       createProduct(input: $input) {
@@ -54,11 +54,11 @@ export const ProductCreator = props => {
           <Form.Row>
             <Form.Group as={Col} md="4" controlId="product_name">
               <Form.Label>Product Name</Form.Label>
-              <Form.Control required="required" type="text" placeholder="" />
+              <Form.Control required type="text" placeholder="" />
             </Form.Group>
             <Form.Group as={Col} md="8" controlId="product_description">
               <Form.Label>Product Description</Form.Label>
-              <Form.Control required="required" type="textbox" placeholder="" />
+              <Form.Control required type="textbox" placeholder="" />
             </Form.Group>
           </Form.Row>
           <Button type="submit">Create Product</Button>

app/containers/Products/ProductListContainer.tsx

@@ -1,25 +1,41 @@
 import React from 'react';
 import {graphql, createFragmentContainer} from 'react-relay';
+import {ProductListContainer_query} from '__generated__/ProductListContainer_query.graphql';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import ProductRowItemContainer from './ProductRowItemContainer';
 
-export const ProductList = props => {
-  const {query} = props;
+interface Props {
+  query: ProductListContainer_query;
+  mode?: string;
+  confirmationModalOpen?: boolean;
+  productRowActions?: any;
+}
+
+export const ProductList: React.FunctionComponent<Props> = ({
+  query,
+  mode,
+  confirmationModalOpen,
+  productRowActions
+}) => {
   if (
     query &&
     (query.active || query.archived) &&
     (query.active.edges || query.archived.edges)
   ) {
     const allProducts = [...query.active.edges, ...query.archived.edges];
-    return allProducts.map(({node}) => (
-      <ProductRowItemContainer
-        key={node.id}
-        product={node}
-        mode={props.mode}
-        confirmationModalOpen={props.confirmationModalOpen}
-        productRowActions={props.productRowActions}
-      />
-    ));
+    return (
+      <>
+        {allProducts.map(({node}) => (
+          <ProductRowItemContainer
+            key={node.id}
+            product={node}
+            mode={mode}
+            confirmationModalOpen={confirmationModalOpen}
+            productRowActions={productRowActions}
+          />
+        ))}
+      </>
+    );
   }
 
   return <LoadingSpinner />;

app/containers/pageContainers/ApplicationDetails.tsx

@@ -7,7 +7,7 @@ import ApplicationStatusContainer from '../Applications/ApplicationStatusContain
 import DefaultLayout from '../../layouts/default-layout';
 
 interface Props {
-  query?: ApplicationDetailsQueryResponse['query'];
+  query: ApplicationDetailsQueryResponse['query'];
   router: NextRouter;
 }
 

app/containers/pageContainers/Applications.tsx

@@ -5,7 +5,7 @@ import DefaultLayout from '../../layouts/default-layout';
 import ApplicationListContainer from '../Applications/ApplicationListContainer';
 
 interface Props {
-  query?: ApplicationsQueryResponse['query'];
+  query: ApplicationsQueryResponse['query'];
 }
 
 class Applications extends Component<Props> {

app/containers/pageContainers/CiipApplication.tsx

@@ -5,7 +5,7 @@ import DefaultLayout from '../../layouts/default-layout';
 import ApplicationWizard from '../Applications/ApplicationWizard';
 
 interface Props {
-  query?: CiipApplicationQueryResponse['query'];
+  query: CiipApplicationQueryResponse['query'];
 }
 class CiipApplication extends Component<Props> {
   static query = graphql`

app/containers/pageContainers/Index.tsx

@@ -2,9 +2,14 @@ import React, {Component} from 'react';
 import {Button, Row, Col, Card, Jumbotron, Table} from 'react-bootstrap';
 import Link from 'next/link';
 import {graphql} from 'react-relay';
+import {IndexQueryResponse} from '__generated__/IndexQuery.graphql';
 import DefaultLayout from '../../layouts/default-layout';
 
-export default class Index extends Component {
+interface Props {
+  query: IndexQueryResponse['query'];
+}
+
+export default class Index extends Component<Props> {
   static query = graphql`
     query IndexQuery {
       query {

app/containers/pageContainers/Registration.tsx

@@ -1,12 +1,20 @@
 import React, {Component} from 'react';
 import {graphql} from 'react-relay';
+import {RegistrationQueryResponse} from '__generated__/RegistrationQuery.graphql';
 import FormEditUser from '../Forms/FormEditUser';
 import DefaultLayout from '../../layouts/default-layout';
 
-class Registration extends Component {
+interface Props {
+  query: RegistrationQueryResponse['query'];
+}
+
+class Registration extends Component<Props> {
   static query = graphql`
     query RegistrationQuery {
       query {
+        session {
+          ...Header_session
+        }
         user(id: "WyJ1c2VycyIsMV0=") {
           ...FormEditUser_user
         }
@@ -15,10 +23,10 @@ class Registration extends Component {
   `;
 
   render() {
-    const {user} = this.props.query;
+    const {user, session} = this.props.query;
 
     return (
-      <DefaultLayout title="Registration">
+      <DefaultLayout title="Registration" session={session}>
         <h4 className="mb-5">Please verify or update your information</h4>
         <FormEditUser user={user} />
       </DefaultLayout>

app/containers/pageContainers/UserOrganisationFacilities.tsx

@@ -5,7 +5,7 @@ import DefaultLayout from '../../layouts/default-layout';
 import OrganisationFacilities from '../Organisations/OrganisationFacilities';
 
 interface Props {
-  query?: UserOrganisationFacilitiesQueryResponse['query'];
+  query: UserOrganisationFacilitiesQueryResponse['query'];
 }
 export default class UserOrganisationFacilities extends Component<Props> {
   static query = graphql`

app/containers/pageContainers/UserProfile.tsx

@@ -5,7 +5,7 @@ import DefaultLayout from '../../layouts/default-layout';
 import UserDetailContainer from '../Industry/UserDetailContainer';
 
 interface Props {
-  query?: UserProfileQueryResponse['query'];
+  query: UserProfileQueryResponse['query'];
 }
 class UserProfile extends Component<Props> {
   static query = graphql`

app/layouts/default-layout.tsx

@@ -5,9 +5,10 @@ import Footer from '../components/Layout/Footer';
 import Subheader from '../components/Layout/Subheader';
 
 interface Props {
-  title?: string;
+  title?: string | JSX.Element;
   showSubheader?: boolean;
   isLoggedIn?: boolean;
+  session?: any;
 }
 
 class DefaultLayout extends Component<Props> {

app/lib/setupTests.ts

@@ -1,24 +1,23 @@
 // Enzyme setup file
-import React from 'react';
-import Enzyme, {shallow, render, mount} from 'enzyme';
+import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import {createSerializer} from 'enzyme-to-json';
-import sinon from 'sinon';
 import {queryMock} from './relayQueryMock';
 
 // Set the default serializer for Jest to be the from enzyme-to-json
 // This produces an easier to read (for humans) serialized format.
+// @ts-ignore
 expect.addSnapshotSerializer(createSerializer({mode: 'deep'}));
 
 // React 16 Enzyme adapter
 Enzyme.configure({adapter: new Adapter()});
 
 // Define globals to cut down on imports in test files
-global.React = React;
-global.shallow = shallow;
-global.render = render;
-global.mount = mount;
-global.sinon = sinon;
+// global.React = React;
+// global.shallow = shallow;
+// global.render = render;
+// global.mount = mount;
+// global.sinon = sinon;
 
 jest.setTimeout(30000);
 
@@ -34,4 +33,4 @@ beforeEach(() => {
 
 /**
  * Jest has no fetch implementation by default. We make sure fetch exists in our tests by using node-fetch here. */
-global.fetch = require('node-fetch');
+// global.fetch = require('node-fetch');

app/mutations/BaseMutation.ts

@@ -25,14 +25,25 @@ export default class BaseMutation<
   async performMutation(
     environment: RelayModernEnvironment,
     mutation: GraphQLTaggedNode,
-    variables: T['variables']
+    variables: T['variables'],
+    optimisticResponse?: any
   ) {
-    variables.input.clientMutationId = `${this.mutationName}-${this.counter}`;
+    const clientMutationId = `${this.mutationName}-${this.counter}`;
+    variables.input.clientMutationId = clientMutationId;
+    if (optimisticResponse) {
+      const key = Object.keys(optimisticResponse)[0];
+      optimisticResponse[key].clientMutationId = clientMutationId;
+    }
+
     this.counter++;
     const {configs} = this;
     async function commitMutation(
       environment,
-      options: {mutation: GraphQLTaggedNode; variables: T['variables']}
+      options: {
+        mutation: GraphQLTaggedNode;
+        variables: T['variables'];
+        optimisticResponse: any;
+      }
     ) {
       return new Promise<T['response']>((resolve, reject) => {
         commitMutationDefault<T>(environment, {
@@ -49,6 +60,10 @@ export default class BaseMutation<
       });
     }
 
-    return commitMutation(environment, {mutation, variables});
+    return commitMutation(environment, {
+      mutation,
+      variables,
+      optimisticResponse
+    });
   }
 }

app/mutations/user/createUserMutation.js → app/mutations/user/createUserMutation.ts

@@ -15,7 +15,7 @@ const mutation = graphql`
   }
 `;
 
-const createUserMutation = (environment, user) => {
+const createUserMutation = async (environment, user) => {
   const variables = {
     input: {user}
   };

app/mutations/user/updateUserMutation.js → app/mutations/user/updateUserMutation.ts

@@ -17,7 +17,7 @@ const mutation = graphql`
   }
 `;
 
-const updateUserMutation = (environment, user, userPatch) => {
+const updateUserMutation = async (environment, user, userPatch) => {
   // Optimistic response
   const updateUserPayload = {
     updateUser: {

app/mutations/user_organisation/UserOrganisation.ts

@@ -1,4 +1,4 @@
-import {graphql} from 'react-relay';
+import {graphql, DeclarativeMutationConfig} from 'react-relay';
 import BaseMutation from '../BaseMutation';
 
 const mutation = graphql`
@@ -18,7 +18,7 @@ export const userOrganisationMutation = async (
   variables,
   user
 ) => {
-  const configs = [
+  const configs: DeclarativeMutationConfig[] = [
     {
       type: 'RANGE_ADD',
       parentID: user,

app/next.config.js → app/next.config.ts

@@ -1,8 +1,8 @@
-require('dotenv').config();
-
-const path = require('path');
-const Dotenv = require('dotenv-webpack');
-const withCSS = require('@zeit/next-css');
+import path from 'path';
+import dotenv from 'dotenv';
+dotenv.config();
+import Dotenv from 'dotenv-webpack';
+import withCSS from '@zeit/next-css';
 
 module.exports = withCSS({
   cssModules: true,