stop

src/models/Rooms.tsx

@@ -0,0 +1,10 @@
+import { ISpinnerItem } from "./Spinner";
+
+export interface IRoom {
+  spinnerState: ISpinnerState
+}
+
+export interface ISpinnerState {
+  spinnerValue?: ISpinnerItem,
+  isSpinning: boolean
+}

src/models/Spinner.tsx

@@ -1,35 +1,25 @@
 export interface ISpinnerItem {
-    value: Number,
-    color: "Black" | "Red",
-    isMoneyCard?: Boolean;
-    toString: () => String;
+  value: Number,
+  color: "Black" | "Red",
+  isMoneyCard?: boolean
 }
 
-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 function spinnerItemToString(item: ISpinnerItem) {
+  return item.isMoneyCard ? `Money Card!` : `${item.value} ${item.color}`
 }
 
 export class Spinner {
     spinnerOptions: Array<ISpinnerItem> = [
-        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)
+        { 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 }
     ]
     spin () {
         return this.spinnerOptions[Math.floor(Math.random() * this.spinnerOptions.length)];

src/pages/home.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { RouteComponentProps } from "@reach/router"
-
+import { RouteComponentProps, Link } from "@reach/router";
 
 export function Home (props: RouteComponentProps) {
-    return <h1>Home</h1>
-}
+    return (
+    <>
+      <h1>Home</h1>
+      <Link to="/room/1">Enter Game</Link>
+    </>
+    );
+}

src/pages/room.tsx

@@ -2,19 +2,33 @@ 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";
+import { Spinner as SpinnerModel, spinnerItemToString } from '../models/Spinner';
+import { useDatabase } from '../store/firebase';
+import { IRoom, ISpinnerState } from '../models/Rooms';
 
 const spinnerSingleton = new SpinnerModel();
 
-export function Room (props: RouteComponentProps<{id: Number}>) {
-    const [isSpinning, setIsSpinning] = useState<boolean>(false);
-    const [spinValue, setSpinValue] = useState<ISpinnerItem | null>(null);
+export function Room ({ id }: RouteComponentProps<{id: Number}>) {
+    // const [isSpinning, setIsSpinning] = useState<boolean>(false);
+    // const [spinValue, setSpinValue] = useState<ISpinnerItem | undefined>();
+    const [spinnerState, setSpinnerState] = useState<ISpinnerState>();
+    const ref = useDatabase<ISpinnerState>(`rooms/${id}/spinnerState`, (a) => {
+      if(!a) {
+        return;
+      }
+      setSpinnerState(a);
+    }, { isSpinning: false });
+    if(!id){
+      return <Typography variant="h1">Room not found 🔥</Typography>;
+    }
+    if(!spinnerState) {
+      return <Typography variant="h1">Loading...</Typography>;
+    }
     return (
-      <Spinner value={spinValue?.toString() || ""} isSpinning={isSpinning} onClick={ () => {
-        setIsSpinning(true);
+      <Spinner value={spinnerState?.spinnerValue ? spinnerItemToString(spinnerState.spinnerValue) : "Spin me"} isSpinning={!!spinnerState?.isSpinning} onClick={ () => {
+        ref.set({ ...spinnerState, isSpinning: true  });
         setTimeout(() => {
-          setIsSpinning(false);
-          setSpinValue(spinnerSingleton.spin())
+          ref.set({ isSpinning: false, spinnerValue: spinnerSingleton.spin() });
         },1500);
       }} />
     );

src/store/firebase.tsx

@@ -1,8 +1,26 @@
 import * as firebase from 'firebase';
+import React, { useState, useEffect, useMemo } from 'react';
+
 const config = {
     apiKey: "AIzaSyD3Oh6tRozOmQg9pTc2-9UB4bwB1SQqUrY",
     // authDomain: "retrod-7e2cd.firebaseapp.com",
     databaseURL: "https://moneycard-b2d1c.firebaseio.com/",
   }
   firebase.initializeApp(config);
-  export const databaseRef = firebase.database();
+  export const databaseRef = firebase.database();
+
+  export function useDatabase<T>(ref: string, cb: (arg0: T | undefined) => void, defaultValue?: T ) {
+    const connectedRef = useMemo(() => databaseRef.ref(ref), [ref]);
+    useEffect(() => {
+      connectedRef.on('value', (snapshot) => {
+        const exists = snapshot.exists();
+        if(!exists && defaultValue) {
+          connectedRef.set(defaultValue);
+        }
+        cb(snapshot.val() as T);
+      });
+      return () => connectedRef.off('value');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [connectedRef]);
+    return connectedRef;
+  }