From 6fb30209daa36661d5a66c68721fce7da4ff3d15 Mon Sep 17 00:00:00 2001
From: Bilal <bilal@saburly.com>
Date: Tue, 6 Oct 2020 14:15:35 +0300
Subject: [PATCH] Show onboarding page if currency is not set

---
 client/src/App.css                            |  6 ++
 client/src/App.js                             | 77 ++++++++++++++----
 client/src/RouteNames.js                      |  1 -
 client/src/cash/Cash.js                       |  4 +-
 client/src/common/formatting.js               | 10 ++-
 client/src/homies/CashFlow.js                 |  5 +-
 client/src/homies/Flow.js                     |  3 +-
 client/src/homies/NewHomieForm.js             | 32 +-------
 .../ChipSelection.js                          | 79 +++++++++++++++++++
 9 files changed, 163 insertions(+), 54 deletions(-)
 create mode 100644 client/src/originalGangstaOnboarding/ChipSelection.js

diff --git a/client/src/App.css b/client/src/App.css
index 4a6d56e..d5bdbce 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -48,4 +48,10 @@
 .required:before {
   color: red;
   content: "* ";
+}
+
+.preloader-circle {
+  position: absolute;
+  height: 90%;
+  margin-left: 40%;
 }
\ No newline at end of file
diff --git a/client/src/App.js b/client/src/App.js
index e831832..2c8d82b 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,24 +1,78 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.css';
 import { Navbar } from 'react-materialize';
 import MakeMoneyMove from './cash/MakeMoneyMove';
 import Flow from "./homies/Flow";
 import Cash from './cash/Cash';
-import Chips from './chips/Chips';
 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,
-  CHIPS,
   MAKE_MONEY_MOVE,
   HOMIE_FLOW,
-  HOMIES, PUT_IN_WORK
+  HOMIES,
+  PUT_IN_WORK
 } from './RouteNames';
 import PutInWork from "./cash/PutInWork";
+import ChipSelection from "./originalGangstaOnboarding/ChipSelection";
+import {errorToast} from "./common/errorHelpers";
+
+
+const App = (props) => {
+  const [loading, setLoading] = useState(true);
+  const [originalGangsta, setOriginalGangsta] = useState({});
+
+  useEffect(() => {
+    (async() => {
+      try {
+        setLoading(true);
+        const response = await axios.get(`/api/original_gangstas/0`);
+        if (response.status === 200 && response.data){
+          setOriginalGangsta(response.data);
+        }else{
+          errorToast();
+        }
+      } catch (e) {
+        errorToast();
+      }
+      setLoading(false);
+    })();
+  }, []);
+
+  const routes = ([
+      <Route key='1' exact path={CRIB} component={() => <Cash originalGangsta={originalGangsta} />} />,
+      <Route key='2' exact path={HOMIES} component={() => <Homies originalGangsta={originalGangsta} />} />,
+      <Route key='3' path={HOMIE_FLOW} component={() => <Flow originalGangsta={originalGangsta} />} />,
+      <Route key='4' path={MAKE_MONEY_MOVE} component={() => <MakeMoneyMove originalGangsta={originalGangsta} />} />,
+      <Route key='5' path={PUT_IN_WORK} component={() => <PutInWork originalGangsta={originalGangsta} />} />
+    ]
+  );
+
+  const onboarded = () => originalGangsta.chip_name && originalGangsta.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>
+  );
 
 
-function App() {
   return (
     <Router>
       <div className="navbar-fixed">
@@ -31,10 +85,6 @@ function App() {
             Homies
           </RoutableNavItem>
 
-          <RoutableNavItem href={CHIPS}>
-            Chips
-          </RoutableNavItem>
-
           <RoutableNavItem href={MAKE_MONEY_MOVE}>
             Make Money Move
           </RoutableNavItem>
@@ -46,12 +96,9 @@ function App() {
       </div>
 
       <div className="autoscrolling">
-        <Route exact path={CRIB} component={Cash} />
-        <Route exact path={HOMIES} component={Homies} />
-        <Route path={HOMIE_FLOW} component={Flow} />
-        <Route path={CHIPS} component={Chips} />
-        <Route path={MAKE_MONEY_MOVE} component={MakeMoneyMove} />
-        <Route path={PUT_IN_WORK} component={PutInWork} />
+        { loading && preloaderCircle }
+        { !loading && !onboarded() && <ChipSelection /> }
+        { !loading && onboarded() && routes }
       </div>
     </Router>
   );
diff --git a/client/src/RouteNames.js b/client/src/RouteNames.js
index ae706c3..446919b 100644
--- a/client/src/RouteNames.js
+++ b/client/src/RouteNames.js
@@ -1,6 +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';
diff --git a/client/src/cash/Cash.js b/client/src/cash/Cash.js
index a59ccd3..331591e 100644
--- a/client/src/cash/Cash.js
+++ b/client/src/cash/Cash.js
@@ -11,7 +11,7 @@ import M from 'materialize-css';
 
 const Cash = (props) => {
   const [homiesCash, setHomiesCash] = useState([]);
-  //const [importance, setImportance] = useState(10);
+  const originalGangsta = props.originalGangsta;
 
   useEffect( () => { 
     const getCashForHomies = async () => {
@@ -49,7 +49,7 @@ const Cash = (props) => {
           { formatTime(homieLine.work) }
         </td>
         <td className="cash-cell-right">
-          { formatMoney(homieLine.amount) }
+          { formatMoney(homieLine.amount, originalGangsta) }
         </td>
         <td className="cash-cell-left">
           [
diff --git a/client/src/common/formatting.js b/client/src/common/formatting.js
index 1f64e6c..56fdbc7 100644
--- a/client/src/common/formatting.js
+++ b/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, originalGangsta) => {
+  const decimalPlaces = parseInt(originalGangsta['chip_scale']);
+  const symbol = originalGangsta['chip_symbol'];
+  const prefixed = originalGangsta['chip_prefixed'];
+
+  const formatted = Number.parseFloat(amount).toFixed(decimalPlaces);
+  return prefixed ? `${symbol} ${formatted}` : `${formatted} ${symbol}`;
 }
 
 const formatTime = (amount) => {
diff --git a/client/src/homies/CashFlow.js b/client/src/homies/CashFlow.js
index b09f62c..4694011 100644
--- a/client/src/homies/CashFlow.js
+++ b/client/src/homies/CashFlow.js
@@ -7,6 +7,7 @@ import {errorToast} from "../common/errorHelpers";
 
 const CashFlow = (props) => {
   const { homie_id } = useParams();
+  const originalGangsta = props.originalGangsta;
 
   const [cashFlow, setCashFlow] = useState([]);
 
@@ -34,7 +35,7 @@ const CashFlow = (props) => {
             <div>{ dateBlock(singleFlowData['created_at']) }</div>
           </div>
 
-          <div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount) }</div>
+          <div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount, originalGangsta) }</div>
         </div>
       </div>
     </li>
@@ -57,7 +58,7 @@ const CashFlow = (props) => {
             <strong>{`${totalCount} Records`}</strong><span className="grey-text">{` • ${fromDate} - ${toDate}`}</span>
           </div>
           <div className="col s6 right-align">
-            <span className="grey-text">Total cash flow:</span> <strong>{formatMoney(totalFlow)}</strong>
+            <span className="grey-text">Total cash flow:</span> <strong>{formatMoney(totalFlow, originalGangsta)}</strong>
           </div>
         </div>
       </div>
diff --git a/client/src/homies/Flow.js b/client/src/homies/Flow.js
index 87a82d9..78eb8f5 100644
--- a/client/src/homies/Flow.js
+++ b/client/src/homies/Flow.js
@@ -7,6 +7,7 @@ import WorkFlow from "./WorkFlow";
 
 const Flow = (props) => {
   const [flowType, setFlowType] = useState('cash');
+  const originalGangsta = props.originalGangsta;
 
   return (
     <div className="container">
@@ -18,7 +19,7 @@ const Flow = (props) => {
         />
       </div>
 
-      { flowType === 'cash' && <CashFlow /> }
+      { flowType === 'cash' && <CashFlow originalGangsta={originalGangsta} /> }
       { flowType === 'work' && <WorkFlow /> }
 
     </div>
diff --git a/client/src/homies/NewHomieForm.js b/client/src/homies/NewHomieForm.js
index 2e9d9f9..04fcec3 100644
--- a/client/src/homies/NewHomieForm.js
+++ b/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";
@@ -8,31 +8,11 @@ const NewHomieForm = (props) => {
   const [homieName, setHomieName] = useState("");
   const [aboutHomie, setAboutHomie] = useState("");
   const [homieImportance, setHomieImportance] = useState("");
-  const [homieDefaultChip, setHomieDefaultChip] = useState("");
-  const [chips, setChips] = useState([]);
   const [busy, setBusy] = useState(false);
 
-  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 chipOptions = chips.map((chip, index) => <option key={index} value={chip.id}>{ chip.name }</option>);
-
   const disableAddButton = () => {
     return homieName.length === 0 ||
       homieImportance === "" ||
-      homieDefaultChip === "" ||
       busy;
   }
 
@@ -40,7 +20,6 @@ const NewHomieForm = (props) => {
     setHomieName("");
     setAboutHomie("");
     setHomieImportance("");
-    setHomieDefaultChip("");
 
     const collapsible = document.getElementById('new-homie-form-container');
     const collapsibleInstance = M.Collapsible.getInstance(collapsible);
@@ -54,8 +33,7 @@ const NewHomieForm = (props) => {
       homie: {
         name: homieName,
         about: aboutHomie,
-        importance: parseInt(homieImportance),
-        chip_id: parseInt(homieDefaultChip)
+        importance: parseInt(homieImportance)
       }
     }
 
@@ -103,12 +81,6 @@ const NewHomieForm = (props) => {
             <option value={0}>Guy from the hood</option>
           </Select>
 
-          <label className="required">Homie default chip: </label>
-          <Select value={homieDefaultChip} onChange={(e) => setHomieDefaultChip(e.target.value)} name="defaultChip">
-            <option disabled value="">Set default chip</option>
-            { chipOptions }
-          </Select>
-
           <br/>
 
           <Button disabled={disableAddButton()} onClick={addNewHomie}>Add to the hood</Button>
diff --git a/client/src/originalGangstaOnboarding/ChipSelection.js b/client/src/originalGangstaOnboarding/ChipSelection.js
new file mode 100644
index 0000000..e503415
--- /dev/null
+++ b/client/src/originalGangstaOnboarding/ChipSelection.js
@@ -0,0 +1,79 @@
+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 originalGangsta = {
+        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/original_gangstas/0', { 'original_gangsta': originalGangsta });
+        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;
\ No newline at end of file