Added new ruleset for prettier and updated global state object to ref…

…lect the actual project

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   "extends": [
       "airbnb",
       "prettier",
+      "prettier/react",
       "plugin:prettier/recommended",
       "plugin:@typescript-eslint/recommended",
       "plugin:react/recommended"

src/components/app/index.tsx

@@ -42,7 +42,7 @@ const Column: AnyStyledComponent = styled.div`
 `;
 
 const TutorialApp: React.FC = (): JSX.Element => {
-  const [step, setStep] = useGlobal("step");
+  const [tutorialStep, setTutorialStep] = useGlobal("tutorialStep");
 
   return (
     <StyledTutorialPage>
@@ -58,9 +58,11 @@ const TutorialApp: React.FC = (): JSX.Element => {
           <h3 className="text-center">Output will go here</h3>
           <button
             type="button"
-            onClick={(): Promise<{ step: number }> => setStep(step + 1)}
+            onClick={(): Promise<{ tutorialStep: number }> =>
+              setTutorialStep(tutorialStep + 1)
+            }
           >
-            {step}: Click to increase
+            {tutorialStep}: Click to increase
           </button>
         </Column>
       </MainWrapper>

src/global.d.ts

@@ -1,9 +1,13 @@
 import "reactn";
 
-// This sets the shape of our global state since we want our global
-// state to be typed.
+/*
+  This sets the shape of our global state since we want our global
+  state to be typed. Should be the same shape as the global object
+  initialized in src/pages/index.tsx
+*/
 declare module "reactn/default" {
   export interface State {
-    step: number;
+    tutorialName: string;
+    tutorialStep: number;
   }
 }

src/pages/index.tsx

@@ -1,9 +1,15 @@
 import React, { setGlobal } from "reactn";
-
 import { TutorialApp } from "../components/app";
 
+/*
+  Initialize global state here. If you change the object's structure, such
+  as adding new key value pairs pairs in the object, you will also have to
+  modify the types/shape for the global object in src/global.d.ts to 
+  reflect the global state object you have here.
+*/
 setGlobal({
-  step: 1
+  tutorialName: "Hello Data",
+  tutorialStep: 1
 });
 
 const IndexPage = (): JSX.Element => <TutorialApp />;