take user to the onboard page if chip is not set

client/src/App.css

@@ -48,4 +48,10 @@
 .required:before {
   color: red;
   content: "* ";
+}
+
+.preloader-circle {
+  position: absolute;
+  height: 90%;
+  margin-left: 40%;
 }

client/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.css';
 import { Navbar } from 'react-materialize';
 import MakeMoneyMove from './cash/MakeMoneyMove';
@@ -7,6 +7,7 @@ import Cash from './cash/Cash';
 import Homies from './homies/Homies';
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import RoutableNavItem from './common/RoutableNavItem';
+import axios from 'axios';
 import {
   CRIB,
   MAKE_MONEY_MOVE,
@@ -14,9 +15,61 @@ import {
   HOMIES, PUT_IN_WORK
 } from './RouteNames';
 import PutInWork from "./cash/PutInWork";
+import ChipSelection from "./ogOnboarding/ChipSelection";
+import {errorToast} from "./common/errorHelpers";
 
 
-function App() {
+const App = (props) => {
+  const [loading, setLoading] = useState(true);
+  const [og, setOg] = useState({});
+
+  useEffect(() => {
+    (async() => {
+      try {
+        setLoading(true);
+        const response = await axios.get(`/api/og`);
+        if (response.status === 200 && response.data){
+          setOg(response.data);
+        }else{
+          errorToast();
+        }
+      } catch (e) {
+        errorToast();
+      }
+      setLoading(false);
+    })();
+  }, []);
+
+  const routes = ([
+    <Route key='1' exact path={CRIB} component={() => <Cash og={og} />} />,
+    <Route key='2' exact path={HOMIES} component={() => <Homies og={og} />} />,
+    <Route key='3' path={HOMIE_FLOW} component={() => <Flow og={og} />} />,
+    <Route key='4' path={MAKE_MONEY_MOVE} component={() => <MakeMoneyMove og={og} />} />
+    ]
+  );
+
+  const onboarded = () => og.chip_name && og.chip_name.length > 0;
+
+  const preloaderCircle = (
+    <div className="container">
+      <div className="valign-wrapper center-align preloader-circle">
+        <div className="preloader-wrapper big active">
+          <div className="spinner-layer spinner-blue-only">
+            <div className="circle-clipper left">
+              <div className="circle" />
+            </div>
+            <div className="gap-patch">
+              <div className="circle" />
+            </div>
+            <div className="circle-clipper right">
+              <div className="circle" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <Router>
       <div className="navbar-fixed">
@@ -45,6 +98,9 @@ function App() {
         <Route path={HOMIE_FLOW} component={Flow} />
         <Route path={MAKE_MONEY_MOVE} component={MakeMoneyMove} />
         <Route path={PUT_IN_WORK} component={PutInWork} />
+        { loading && preloaderCircle }
+        { !loading && !onboarded() && <ChipSelection /> }
+        { !loading && onboarded() && routes }
       </div>
     </Router>
   );

client/src/RouteNames.js

@@ -1,7 +1,5 @@
 export const CRIB = '/';
 export const HOMIES = '/homies';
-export const CHIPS = '/chips';
 export const MAKE_MONEY_MOVE = '/make-money-move';
 export const PUT_IN_WORK = '/put-in-work';
 export const HOMIE_FLOW = '/homie/:homie_id/flow';
-export const ONBOARDING = '/og/onboarding';

client/src/cash/Cash.js

@@ -13,6 +13,7 @@ const Cash = (props) => {
   const [homiesCash, setHomiesCash] = useState([]);
   const [, forceUpdate] = useReducer(x => x + 1, 0);
   //const [importance, setImportance] = useState(10);
+  const og = props.og;
 
   useEffect( () => { 
     const getCashForHomies = async () => {
@@ -47,7 +48,7 @@ const Cash = (props) => {
           <a href={`/homie/${homieLine.homie.id}/flow`}>{ homieLine.homie.name }</a>
         </td>
         <td className="cash-cell-right">
-          { formatMoney(homieLine.amount) }
+          { formatMoney(homieLine.amount, og) }
         </td>
         <td className="cash-cell-left">
           [

client/src/common/formatting.js

@@ -1,6 +1,10 @@
-const formatMoney = (amount) => {
-  const formatted = Number.parseFloat(amount).toFixed(2);
-  return `${formatted} KM`;
+const formatMoney = (amount, og) => {
+  const decimalPlaces = parseInt(og['chip_scale']);
+  const symbol = og['chip_symbol'];
+  const prefixed = og['chip_prefixed'];
+
+  const formatted = Number.parseFloat(amount).toFixed(decimalPlaces);
+  return prefixed ? `${symbol} ${formatted}` : `${formatted} ${symbol}`;
 }
 
 const formatTime = (amount) => {

client/src/homies/Flow.js

@@ -16,13 +16,58 @@ const Flow = (props) => {
           onChange={(e) => setFlowType(e.target.checked === true ? 'work' : 'cash')}
           onLabel="Work"
         />
+  const [flow, setFlow] = useState([]);
+
+  const og = props.og;
+
+  useEffect( () => {
+    (async () => {
+      try {
+        const response = await axios.get(`/api/money_moves?homie_id=${parseInt(homie_id)}`);
+        if (response.status === 200 && response.data){
+          setFlow(response.data);
+        }
+      } catch (e) {
+        M.toast({ html: "Yo! It ain't workin'" });
+      }
+    })();
+  }, [homie_id]);
+
+  const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>
+
+
+  const flowData = flow.map( (singleFlowData, index) => (
+    <li key={index}>
+      <div className="collapsible-header record">
+        <div className="flex-row opposite-sides-content">
+          <div className="flex-col">
+            <div>{ singleFlowData.description }</div>
+            <div>{ dateBlock(singleFlowData['created_at']) }</div>
+          </div>
+
+          <div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount, og) }</div>
+        </div>
       </div>
 
       { flowType === 'cash' && <CashFlow /> }
       { flowType === 'work' && <WorkFlow /> }
+    return (
+      <div>
+        <br />
+        <div className="row">
+          <div className="col s6">
+            <strong>{`${totalCount} Records`}</strong><span className="grey-text">{` • ${fromDate} - ${toDate}`}</span>
+          </div>
+          <div className="col s6 right-align">
+            <span className="grey-text">Total flow:</span> <strong>{formatMoney(totalFlow, og)}</strong>
+          </div>
+        </div>
+      </div>
+    )
+  }
 
     </div>
   );
 }
 
-export default withRouter(Flow);
+export default withRouter(Flow);

client/src/homies/NewHomieForm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Button, Collapsible, CollapsibleItem, Select, TextInput } from 'react-materialize';
 import axios from 'axios';
 import { errorToast } from "../common/errorHelpers";

client/src/ogOnboarding/ChipSelection.js

@@ -1,7 +1,79 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from "axios";
+import { errorToast } from "../common/errorHelpers";
+import {Button, Select, TextInput} from "react-materialize";
 
 const ChipSelection = (props) => {
+  const [chips, setChips] = useState([]);
+  const [selectedChip, setSelectedChip] = useState('1');
+  const [chipScale, setChipScale] = useState('2');
 
+  useEffect(() => {
+    (async() => {
+      try {
+        const response = await axios.get(`/api/chips`);
+        if (response.status === 200 && response.data){
+          setChips(response.data);
+        }else{
+          errorToast();
+        }
+      } catch (e) {
+        errorToast();
+      }
+    })();
+  }, []);
+
+  const chipsToOptions = chips.map( (chip, index) => <option key={index} value={chip.id}>{`${chip.code} • ${chip.name}`}</option>);
+
+  const disableSubmit = () => {
+    return !((parseInt(selectedChip) > 0) && (parseInt(chipScale) > 0));
+  }
+
+  const handleSubmit = async () => {
+    const chipData = chips.find(chip => chip.id === parseInt(selectedChip));
+    if (chipData){
+      const og = {
+        chip_name: chipData.name,
+        chip_code: chipData.code,
+        chip_symbol: chipData.symbol,
+        chip_prefixed: chipData.prefixed,
+        chip_scale: parseInt(chipScale)
+      }
+
+      try{
+        const response = await axios.put('/api/og', { og });
+        if (response.status === 200 && response.data && response.data.onboarded) {
+          window.location.reload();
+        }else{
+          errorToast();
+        }
+      }catch (e) {
+        errorToast();
+      }
+    }else{
+      errorToast();
+    }
+  }
+
+  return (
+    <div className='container'>
+      <Select value={selectedChip} onChange={(e) => setSelectedChip(e.target.value)} name="selected-chip">
+        { chipsToOptions }
+      </Select>
+
+      <TextInput
+        id='chipScale'
+        label="Chip scale"
+        value={chipScale}
+        type='number'
+        onChange={(e) => setChipScale(e.target.value)}
+      />
+
+      <Button disabled={disableSubmit()} waves="light" onClick={handleSubmit}>
+        Do It
+      </Button>
+    </div>
+  )
 }
 
 export default ChipSelection;