spinner works locally

src/App.tsx

@@ -1,16 +1,20 @@
-import React from 'react';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { Router, Link } from "@reach/router"
-import { Home } from './pages/home';
-
+import React from "react";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import { Router, Link } from "@reach/router";
+import { Home } from "./pages/home";
+import { Room } from "./pages/room";
 
 function App() {
   return (
     <>
       <CssBaseline />
-      <Router>
-        <Home path="/" />
-      </Router>
+      <Container >
+        <Router>
+          <Home path="/" />
+          <Room path="/room/:id" />
+        </Router>
+      </Container>
     </>
   );
 }

src/components/Spinner.module.css

@@ -0,0 +1,5 @@
+.center {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}

src/components/Spinner.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import Box from "@material-ui/core/Box";
+import styles from "./Spinner.module.css";
+
+export const Spinner: React.SFC<{ value?: String; onClick: () => void; isSpinning: boolean}> = ({ onClick, isSpinning, value }) => {
+  const spinText = isSpinning ? "Spinning" : value;
+  return (
+    <Box className={styles.center}>
+      <Typography variant="h3" align="center">
+        Spinner: {spinText}
+      </Typography>
+      <Button disabled={isSpinning} variant="contained" color="primary" onClick={onClick}>
+        Spin
+      </Button>
+    </Box>
+  );
+}

src/models/Spinner.tsx

@@ -1,23 +1,37 @@
 export interface ISpinnerItem {
     value: Number,
     color: "Black" | "Red",
-    isMoneyCard?: Boolean
+    isMoneyCard?: Boolean;
+    toString: () => String;
+}
+
+export class SpinnerItem implements ISpinnerItem {
+  value: Number;
+  color: "Black" | "Red";
+  isMoneyCard?: Boolean | undefined;
+  constructor(value: Number, color: "Black" | "Red", isMoneyCard?: Boolean) {
+    this.value = value;
+    this.color = color;
+  }
+  toString() {
+    return this.isMoneyCard ? `Money Card!` : `${this.value} ${this.color}`;
+  }
 }
 
 export class Spinner {
     spinnerOptions: Array<ISpinnerItem> = [
-        { value: 4, color: "Black", },
-        { value: 2, color: "Red", },
-        { value: 1, color: "Black", },
-        { value: 3, color: "Red", },
-        { value: 5, color: "Black", },
-        { value: 2, color: "Red", },
-        { value: 4, color: "Black", },
-        { value: 3, color: "Red", },
-        { value: 1, color: "Black", },
-        { value: 5, color: "Red", isMoneyCard: true }
+        new SpinnerItem(4, "Black"),
+        new SpinnerItem(2, "Red"),
+        new SpinnerItem(1, "Black"),
+        new SpinnerItem(3, "Red"),
+        new SpinnerItem(5, "Black"),
+        new SpinnerItem(2, "Red"),
+        new SpinnerItem(4, "Black"),
+        new SpinnerItem(3, "Red"),
+        new SpinnerItem(1, "Black"),
+        new SpinnerItem(5, "Red", true)
     ]
     spin () {
         return this.spinnerOptions[Math.floor(Math.random() * this.spinnerOptions.length)];
     }
-}
+}

src/pages/room.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { RouteComponentProps } from "@reach/router"
+import Typography from '@material-ui/core/Typography';
+import { Spinner } from '../components/Spinner';
+import { Spinner as SpinnerModel, ISpinnerItem } from "../models/Spinner";
+
+const spinnerSingleton = new SpinnerModel();
+
+export function Room (props: RouteComponentProps<{id: Number}>) {
+    const [isSpinning, setIsSpinning] = useState<boolean>(false);
+    const [spinValue, setSpinValue] = useState<ISpinnerItem | null>(null);
+    return (
+      <Spinner value={spinValue?.toString() || ""} isSpinning={isSpinning} onClick={ () => {
+        setIsSpinning(true);
+        setTimeout(() => {
+          setIsSpinning(false);
+          setSpinValue(spinnerSingleton.spin())
+        },1500);
+      }} />
+    );
+}