Add typescript (#34)

Author: chadian

.eslintrc.js

@@ -1,23 +1,31 @@
 module.exports = {
+  parser: '@typescript-eslint/parser',
   env: {
     browser: true,
     es2021: true,
     node: true,
     jest: true,
   },
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
+  extends: [
+    'next',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'prettier',
+    'plugin:@typescript-eslint/recommended',
+  ],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: ['react', 'prettier'],
+  plugins: ['react', 'prettier', '@typescript-eslint'],
   rules: {
     'prettier/prettier': 'error',
     'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
     'react/prop-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
   },
   settings: {
     react: {

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript (tsc)
+tsconfig.tsbuildinfo

components/button.js renamed to components/button.tsx

@@ -1,13 +1,20 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { useTheme } from '../hooks/theme/index';
+import { ReactChildrenProps } from '../types';
+
+type ButtonProps = {
+  onClick?: MouseEventHandler;
+  attrs?: Record<string, string> & { type?: 'button' | 'submit' };
+  size?: 'small' | 'large';
+};
 
 export default function Button({
   children,
   onClick = () => {},
   attrs = {},
   size = 'large',
-}) {
+}: ReactChildrenProps & ButtonProps) {
   const [theme] = useTheme();
   const { buttonTextColor, buttonBgColor } = theme;
 

components/content/section.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ReactChildrenProps } from '../../types';
+
+export function SectionHeading({ children }: ReactChildrenProps) {
+  return <h3 className="text-3xl text-gray-800 font-bold mb-4">{children}</h3>;
+}
+
+export function SectionParagraph({ children }: ReactChildrenProps) {
+  return <p className="text-2xl text-gray-700">{children}</p>;
+}

components/content/section.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { default as NextLink } from 'next/link';
 import { useTheme } from '../hooks/theme/index';
 
@@ -8,18 +8,27 @@ const underlineClassNames = {
   md: 'underline-offset-md',
 };
 
-export default function Link({
+type LinkProps = {
+  attrs?: { [attrName: string]: string };
+  href: string;
+  underline?: boolean;
+  underlineOffset?: keyof typeof underlineClassNames;
+};
+
+const Link: FunctionComponent<LinkProps> = ({
   attrs,
   href,
   underline,
   underlineOffset,
   children,
-}) {
+}) => {
   const [theme] = useTheme();
 
   attrs = attrs ?? {};
   underline = underline ?? true;
   href = href ?? attrs.href;
+  const underlineOffsetClassName =
+    underlineClassNames[underlineOffset] ?? underlineClassNames.sm;
 
   const classNames = (attrs.className ?? '').split(' ');
 
@@ -31,8 +40,6 @@ export default function Link({
 
   if (underline) {
     classNames.push('underline');
-    const underlineOffsetClassName =
-      underlineClassNames[underlineOffset] ?? underlineClassNames.sm;
     classNames.push(underlineOffsetClassName);
   }
 
@@ -45,4 +52,6 @@ export default function Link({
       </a>
     </NextLink>
   );
-}
+};
+
+export default Link;

components/link.js renamed to components/link.tsx

@@ -1,8 +1,15 @@
-import React from 'react';
+import React, { KeyboardEventHandler } from 'react';
 import FocusLock from 'react-focus-lock';
+import { ReactChildrenProps } from '../types';
 
-// eslint-disable-next-line react/prop-types
-export default function Modal({ children, onClose }) {
+type ModalProps = {
+  onClose: () => void;
+};
+
+export default function Modal({
+  children,
+  onClose,
+}: ReactChildrenProps & ModalProps) {
   const classNames = [
     'fixed',
     'top-0',
@@ -17,7 +24,7 @@ export default function Modal({ children, onClose }) {
     'bg-filter-blur-modal',
   ];
 
-  const onKeyDown = (e) => {
+  const onKeyDown: KeyboardEventHandler = (e) => {
     const ESCAPE = 27;
 
     if (e.keyCode === ESCAPE) {

components/modal.js renamed to components/modal.tsx

@@ -16,7 +16,6 @@ function setup({ rhythm } = {}) {
   cleanup();
 
   rhythm = {
-    id: 'some-rhythm-id',
     action: 'I want to run',
     frequency: [2, 3],
     reason: 'I want to train for a marathon',
@@ -36,13 +35,14 @@ function setup({ rhythm } = {}) {
   denominatorSelect = screen.getByLabelText('Rhythm action count time span');
   reasonInput = screen.getByDisplayValue('I want to train for a marathon');
 
-  submitButton = rhythm.id
-    ? screen.getByRole('button', { name: 'Update' })
-    : screen.getByRole('button', { name: 'Create' });
+  submitButton =
+    'id' in rhythm
+      ? screen.getByRole('button', { name: 'Update' })
+      : screen.getByRole('button', { name: 'Create' });
 }
 
 beforeEach(() => {
-  setup();
+  setup({ rhythm: { id: 'some-rhythm-id' } });
 });
 
 test("it renders the rhythm's editable properties", () => {
@@ -90,7 +90,7 @@ test('it evens out equal numerator and denominator values to once every day', ()
 
 describe('submit button label', () => {
   it('shows a button with a label of "Create" when the rhythm model ** does not ** have an id', () => {
-    setup({ rhythm: { id: undefined } });
+    setup({ rhythm: {} });
     expect(submitButton).toHaveTextContent('Create');
     expect(submitButton).toBeInTheDocument();
   });

components/rhythm-edit/rhythm-edit.test.js

@@ -1,10 +1,9 @@
-/* eslint-disable react/prop-types */
-
-import React, { useState } from 'react';
+import React, { ChangeEventHandler, FormEventHandler, useState } from 'react';
 import Button from '../button';
 import { denominatorTerm } from '../../utils/denominator-term';
 import { numeratorTerm } from '../../utils/numerator-term';
 import { ValidationWrapper } from './validated-wrapper';
+import { Rhythm, UnsavedRhythm } from '../../types';
 
 const sharedSelectAndInputClassNames = [
   'text-gray-800',
@@ -28,7 +27,10 @@ const selectClassNames = [
   'w-48',
 ].join(' ');
 
-const generateNumeratorSelect = (selected, onChange) => {
+const generateNumeratorSelect = (
+  selected: string,
+  onChange: ChangeEventHandler<HTMLSelectElement>
+) => {
   const options = [1, 2, 3, 4, 5, 6, 7].map((number) => {
     return (
       <option key={number} value={number}>
@@ -49,7 +51,10 @@ const generateNumeratorSelect = (selected, onChange) => {
   );
 };
 
-const generateDenominatorSelect = (selected, onChange) => {
+const generateDenominatorSelect = (
+  selected: string,
+  onChange: ChangeEventHandler<HTMLSelectElement>
+) => {
   const options = [1, 2, 3, 4, 5, 6, 7].map((number) => {
     return (
       <option key={number} value={number}>
@@ -70,7 +75,7 @@ const generateDenominatorSelect = (selected, onChange) => {
   );
 };
 
-function validate(rhythm) {
+function validate(rhythm: Rhythm | UnsavedRhythm) {
   const [numerator, denominator] = rhythm.frequency;
 
   const result = {
@@ -104,7 +109,15 @@ function validate(rhythm) {
   return result;
 }
 
-export default function RhythmEdit({ rhythm, onClose, onSubmit }) {
+export default function RhythmEdit({
+  rhythm,
+  onClose,
+  onSubmit,
+}: {
+  rhythm: Rhythm | UnsavedRhythm;
+  onClose: () => void;
+  onSubmit: (rhythm: Rhythm | UnsavedRhythm) => void;
+}) {
   const [rhythmAction, setRhythmAction] = useState(rhythm.action);
   const [rhythmFrequency, setRhythmFrequency] = useState(rhythm.frequency);
   const [rhythmNumerator, rhythmDenominator] = rhythmFrequency;
@@ -120,7 +133,7 @@ export default function RhythmEdit({ rhythm, onClose, onSubmit }) {
 
   const validationResult = validate(editedRhythm);
 
-  const submitHandler = (e) => {
+  const submitHandler: FormEventHandler = (e) => {
     e.preventDefault();
     setHasSubmitted(true);
 
@@ -129,20 +142,23 @@ export default function RhythmEdit({ rhythm, onClose, onSubmit }) {
     }
   };
 
-  const numeratorSelect = generateNumeratorSelect(rhythmNumerator, (e) => {
-    let numeratorValue = Number(e.target.value);
-    let denominatorValue = rhythmDenominator;
+  const numeratorSelect = generateNumeratorSelect(
+    rhythmNumerator.toString(),
+    (e) => {
+      let numeratorValue = Number(e.target.value);
+      let denominatorValue = rhythmDenominator;
 
-    if (numeratorValue === denominatorValue) {
-      numeratorValue = 1;
-      denominatorValue = 1;
-    }
+      if (numeratorValue === denominatorValue) {
+        numeratorValue = 1;
+        denominatorValue = 1;
+      }
 
-    setRhythmFrequency([numeratorValue, denominatorValue]);
-  });
+      setRhythmFrequency([numeratorValue, denominatorValue]);
+    }
+  );
 
   const denominatorSelect = generateDenominatorSelect(
-    rhythmDenominator,
+    rhythmDenominator.toString(),
     (e) => {
       let numeratorValue = rhythmNumerator;
       let denominatorValue = Number(e.target.value);
@@ -210,7 +226,7 @@ export default function RhythmEdit({ rhythm, onClose, onSubmit }) {
           </ValidationWrapper>
         </div>
         <Button attrs={{ type: 'submit', className: '' }}>
-          {rhythm.id ? 'Update' : 'Create'}
+          {'id' in rhythm && rhythm ? 'Update' : 'Create'}
         </Button>
       </div>
     </form>