Merge pull request #16 from 12/typescript

Typescript Refactoring

.babelrc

@@ -1,11 +1,21 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react",
-        "@babel/preset-typescript"
-    ],
     "env": {
         "production": {
+            "presets": [
+                [
+                    "@babel/preset-env",
+                    {
+                        "modules": false,
+                        "targets": {
+                            "browsers": [
+                                "last 2 chrome versions"
+                            ]
+                        }
+                    }
+                ],
+                "@babel/preset-react",
+                "@babel/preset-typescript"
+            ],
             "plugins": [
                 "emotion",
                 [
@@ -17,14 +27,24 @@
             ]
         },
         "development": {
-            "plugins": [
+            "presets": [
                 [
-                    "emotion",
+                    "@babel/preset-env",
                     {
-                        "sourceMap": true
+                        "modules": false,
+                        "targets": {
+                            "browsers": [
+                                "last 2 chrome versions"
+                            ]
+                        }
                     }
                 ],
+                "@babel/preset-react",
+                "@babel/preset-typescript"
+            ],
+            "plugins": [
                 "react-hot-loader/babel",
+                "emotion",
                 [
                     "@babel/plugin-transform-runtime",
                     {

package.json

@@ -33,6 +33,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.2",
+    "fork-ts-checker-webpack-plugin": "^4.1.6",
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^4.3.0",
     "prettier": "^2.0.5",
@@ -46,7 +47,6 @@
     "@babel/runtime": "^7.10.2",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   }

src/Components/Line/index.jsx → src/Components/Line/index.tsx

@@ -1,50 +1,52 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Roundel from '../Roundel';
 import {
   LineStyled,
   HeadingStyled,
   TitleStyled,
   DetailsStyled,
-  LineNameStyled
+  LineNameStyled,
 } from '../../Helpers/styles';
-import {
-  SPECIAL_SERVICE,
-  CLOSED,
-  PART_SUSPENDED,
-  PLANNED_CLOSURE,
-  PART_CLOSURE,
-  REDUCED_SERVICE,
-  PART_CLOSED,
-  SERVICE_CLOSED
-} from '../../Helpers/modes';
+import MODES from '../../Helpers/modes';
 
-const article = status => {
+const article = (status: number) => {
   switch (status) {
     default:
       return 'has';
-    case SPECIAL_SERVICE:
-    case PLANNED_CLOSURE:
-    case PART_CLOSURE:
-    case REDUCED_SERVICE:
+    case MODES.SPECIAL_SERVICE:
+    case MODES.PLANNED_CLOSURE:
+    case MODES.PART_CLOSURE:
+    case MODES.REDUCED_SERVICE:
       return 'has a';
-    case CLOSED:
-    case PART_SUSPENDED:
-    case PART_CLOSED:
-    case 16:
+    case MODES.CLOSED:
+    case MODES.PART_SUSPENDED:
+    case MODES.PART_CLOSED:
+    case MODES.NOT_RUNNING:
       return 'is';
-    case SERVICE_CLOSED:
+    case MODES.SERVICE_CLOSED:
       return '-';
   }
 };
 
-const Line = ({ line }) => {
+export interface LineProps {
+  name: string;
+  key: string;
+  lineStatuses: [
+    {
+      statusSeverity: number;
+      statusSeverityDescription: string;
+      reason: string;
+    }
+  ];
+}
+
+const Line: React.FunctionComponent<LineProps> = (line) => {
   const { name, lineStatuses } = line;
   const [{ statusSeverity, statusSeverityDescription, reason }] = lineStatuses;
   const description = ` ${article(statusSeverity)} ${statusSeverityDescription.toLowerCase()}`;
 
   return (
-    <LineStyled key={name} name={name}>
+    <LineStyled key={name}>
       <HeadingStyled key={name} name={name}>
         <Roundel />
         <TitleStyled>
@@ -57,8 +59,4 @@ const Line = ({ line }) => {
   );
 };
 
-Line.propTypes = {
-  line: PropTypes.shape().isRequired
-};
-
 export default Line;

src/Components/Roundel/index.jsx

@@ -1,5 +1,21 @@
 import React from 'react';
-import { RoundelStyled } from '../../Helpers/styles';
+import styled from '@emotion/styled';
+
+const RoundelStyled = styled.svg`
+  position: absolute;
+
+  circle {
+    fill: none;
+    stroke: #fefefe;
+    stroke-width: 70;
+  }
+
+  path {
+    fill: none;
+    stroke: #fefefe;
+    stroke-width: 77;
+  }
+`;
 
 const Roundel = () => {
   return (

src/Containers/App/index.tsx

@@ -1,34 +1,35 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Global } from '@emotion/core';
-import Line from '../../Components/Line';
-import dataBroker from '../../Helpers/dataBroker';
-import sortData from '../../Helpers/sortData';
+import useFetch from '../../Helpers/useFetch';
+import Line, { LineProps } from '../../Components/Line/index';
+import sortData from '../../Helpers/sortData'; // @TODO: Re-enable sorting of lines by status
 import { globalStyles, WrapperStyled, GithubLinkStyled } from '../../Helpers/styles';
 
 const endpoint =
   'https://api.tfl.gov.uk/line/mode/tube%2Cdlr%2Coverground%2Ctflrail%2Ctram%2Ccable-car/status';
 
-const App = () => {
-  const [lines, setLines] = useState([]);
-  const updateData = () => {
-    dataBroker(endpoint).then(sortData).then(setLines);
-  };
+interface ResponseType {
+  response: Array<LineProps> | null;
+  error: object | null;
+}
 
-  useEffect(() => {
-    if (!lines.length) {
-      updateData();
-    }
+const App = () => {
+  const res: ResponseType = useFetch(endpoint);
 
-    setInterval(() => updateData(), 30000);
-  }, []);
+  if (!res.response) {
+    return <h1>Loading</h1>;
+  }
 
   return (
     <>
       <Global styles={globalStyles} />
       <WrapperStyled>
-        {lines && lines.map((line) => <Line key={line.name} line={line} />)}
+        {res.response &&
+          res.response.map(({ name, lineStatuses }: LineProps) => (
+            <Line key={name} name={name} lineStatuses={lineStatuses} />
+          ))}
       </WrapperStyled>
-      {!!lines.length && (
+      {!!res.response && (
         <GithubLinkStyled href="https://github.com/12/tube-status">
           Open source on Github!
         </GithubLinkStyled>

src/Helpers/modes.ts

@@ -0,0 +1,18 @@
+enum MODES {
+  SPECIAL_SERVICE = 0,
+  CLOSED = 1,
+  SUSPENDED = 2,
+  PART_SUSPENDED = 3,
+  PLANNED_CLOSURE = 4,
+  PART_CLOSURE = 5,
+  SEVERE_DELAYS = 6,
+  REDUCED_SERVICE = 7,
+  BUS_SERVICE = 8,
+  MINOR_DELAYS = 9,
+  GOOD_SERVICE = 10,
+  PART_CLOSED = 11,
+  NOT_RUNNING = 16,
+  SERVICE_CLOSED = 20,
+}
+
+export default MODES;

src/Helpers/styles.jsx → src/Helpers/styles.tsx

@@ -20,7 +20,7 @@ const LINE_COLOURS = {
   london: '#FF6600',
   emirates: '#E21836',
   tram: '#66CC00',
-  tfl: '#0007ab'
+  tfl: '#0007ab',
 };
 
 export const globalStyles = css`
@@ -40,10 +40,18 @@ export const globalStyles = css`
   }
 `;
 
-const lineBackgroundColour = ({ name }) => {
-  const convertedName = name.split(' ')[0];
+type HeadingProps = {
+  name: string;
+};
+
+function hasKey<O>(obj: O, key: keyof any): key is keyof O {
+  return key in obj;
+}
+
+const lineBackgroundColour = ({ name }: HeadingProps) => {
+  const convertedName = name.split(' ')[0].toLowerCase();
 
-  return LINE_COLOURS[convertedName.toLowerCase()] || WHITE;
+  return hasKey(LINE_COLOURS, convertedName) ? LINE_COLOURS[convertedName] : WHITE;
 };
 
 export const WrapperStyled = styled.div`
@@ -61,6 +69,7 @@ export const WrapperStyled = styled.div`
 export const LineStyled = styled.div`
   width: 100%;
 `;
+
 export const HeadingStyled = styled.div`
   padding: 10px;
   color: ${WHITE};
@@ -69,7 +78,7 @@ export const HeadingStyled = styled.div`
   flex-wrap: wrap;
   align-items: center;
   font-size: 1rem;
-  background: ${props => lineBackgroundColour(props)};
+  background: ${(props: HeadingProps) => lineBackgroundColour(props)};
 
   @media only screen and (max-width: ${DEVICE_BREAKPOINT_PX}px) {
     font-size: 0.875rem;
@@ -90,22 +99,6 @@ export const DetailsStyled = styled.div`
   padding: 15px 10px;
 `;
 
-export const RoundelStyled = styled.svg`
-  position: absolute;
-
-  circle {
-    fill: none;
-    stroke: ${WHITE};
-    stroke-width: 70;
-  }
-
-  path {
-    fill: none;
-    stroke: ${WHITE};
-    stroke-width: 77;
-  }
-`;
-
 export const GithubLinkStyled = styled.a`
   color: ${WHITE};
   padding: 10px 0;

src/Helpers/useFetch.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+const useFetch = (url: string, options: object = {}) => {
+  const [response, setResponse] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const data = async () => {
+      try {
+        const res = await fetch(url, options);
+        const json = await res.json();
+
+        setResponse(json);
+      } catch (error) {
+        setError(error);
+      }
+    };
+
+    data();
+  }, []);
+
+  return { response, error };
+};
+
+export default useFetch;

tsconfig.json

@@ -12,7 +12,7 @@
     "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     "declaration": true,                      /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     "outDir": "dist",                         /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
@@ -41,7 +41,7 @@
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */