Documentation revision

package.json

@@ -30,7 +30,7 @@
     "redux": "^4.0.5",
     "slugify": "^1.3.6",
     "styled-components": "^5.2.1",
-    "yup": "^0.27.0"
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",

src/example/StartHere.js

@@ -0,0 +1,27 @@
+///  ____ _____  _    ____ _____   _   _ _____ ____  _____
+/// / ___|_   _|/ \  |  _ \_   _| | | | | ____|  _ \| ____|
+/// \___ \ | | / _ \ | |_) || |   | |_| |  _| | |_) |  _|
+///  ___) || |/ ___ \|  _ < | |   |  _  | |___|  _ <| |___
+/// |____/ |_/_/   \_\_| \_\|_|   |_| |_|_____|_| \_\_____|
+///
+/// We will be using the Model-View-Controller (MVC) architecture pattern for the
+/// CLEANEST codebase ever (knock on wood). This guide will take you through
+/// each segment of example implementation to give you a better
+/// understanding of how the M, V, and C work cohesively.
+///
+/// There is a number on the screen and the user presses a button that
+/// increments it, this is what happens behind the scenes:
+///   1. The View's Button tells the Controller that the button has been pressed.
+///   2. The Controller increments the number that is contained in the Model.
+///   3. The Controller tells the View that the number in the Model has changed.
+///   4. The View then shows the incremented number.
+///
+/// Visually, it looks like this:
+///   View <--> Presenter <--> Model
+///
+/// The MVC is best used for classed based programming but here we can see the pattern for functional programming
+/// by breaking down the component and abstratcing the logic from the view from the model.
+///
+/// To start please head to TimerController.js!
+
+/// SO to Adin for writing this, tweaked it a bit from the mobile BizTech app

src/example/TimerController.js

@@ -0,0 +1,67 @@
+/// This is a TimerController example!
+/// To see this in action, please initialize a new react app with this component along with the associated files
+/// Here we see that the TimerController model does not see anything within what the controller is doing, it just contains the data
+
+import { useState } from 'react'
+import TimerView from './TimerView'
+
+/// TIMERCONTROLLER MODEL START ---------------------------------------------------------------------------------------------------------------------------------------------
+
+const TimerController = () => {
+  // Timer Controller: does not see anything in the controller - completely separate
+  const [time, setTime] = useState(new Date(0))
+  const [timerInterval, setTimerInterval] = useState(null)
+
+  /// TIMERCONTROLLER MODEL END ---------------------------------------------------------------------------------------------------------------------------------------------
+
+  /// Here, the controller contains all the logic for the component, it decides what to change in the model and in the view
+  /// note that the model does not know anything going on in the controller and we will see this likewise with the view and the controlller
+
+  /// TIMERCONTROLLER CONTROLLER START ---------------------------------------------------------------------------------------------------------------------------------------------
+
+  // Timer Controller: contains all the functions that relates to the model and the view
+  function startClicked () {
+    const step = 10
+    if (!timerInterval) {
+      setTimerInterval(setInterval(() => {
+        setTime((oldState) => {
+          const newMs = oldState.getTime() + step
+          return new Date(newMs)
+        })
+      }, step))
+    }
+  }
+
+  function pauseClicked () {
+    clearInterval(timerInterval)
+    setTimerInterval(null)
+  }
+
+  function resetClicked () {
+    setTime(new Date(0))
+  }
+
+  /// TIMERCONTROLLER CONTROLLER END ---------------------------------------------------------------------------------------------------------------------------------------------
+
+  /// Here we have the View and note that the view does not know anything of the model, the controller tells what the view should be and the view's job is to just
+  /// display the time
+  /// There is a helper for the View in TimerView.js file
+
+  /// TIMERCONTROLLER VIEW START ---------------------------------------------------------------------------------------------------------------------------------------------
+  // Timer View
+  return (
+    // eslint-disable-next-line react/react-in-jsx-scope
+    <TimerView
+      minutes={time.getMinutes()}
+      seconds={time.getSeconds()}
+      milliseconds={Math.floor(time.getMilliseconds() / 10).toFixed(0)}
+      startClicked={startClicked}
+      pauseClicked={pauseClicked}
+      resetClicked={resetClicked}
+    />
+  )
+}
+
+/// TIMERCONTROLLER VIEW END ---------------------------------------------------------------------------------------------------------------------------------------------
+
+export default TimerController