From a9730dd69aae80a601653ba23bb3d189b990fcdc Mon Sep 17 00:00:00 2001 From: Bilal Date: Fri, 18 Sep 2020 19:12:05 +0300 Subject: [PATCH] take user to the onboard page if chip is not set --- client/src/App.css | 6 ++ client/src/App.js | 60 ++++++++++++++++++- client/src/RouteNames.js | 2 - client/src/cash/Cash.js | 3 +- client/src/common/formatting.js | 10 +++- client/src/homies/Flow.js | 47 ++++++++++++++- client/src/homies/NewHomieForm.js | 2 +- client/src/ogOnboarding/ChipSelection.js | 74 +++++++++++++++++++++++- 8 files changed, 193 insertions(+), 11 deletions(-) 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 9fe889c..fa11d1a 100644 --- a/client/src/App.js +++ b/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 = ([ + } />, + } />, + } />, + } /> + ] + ); + + const onboarded = () => og.chip_name && og.chip_name.length > 0; + + const preloaderCircle = ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); + return (
@@ -45,6 +98,9 @@ function App() { + { loading && preloaderCircle } + { !loading && !onboarded() && } + { !loading && onboarded() && routes }
); diff --git a/client/src/RouteNames.js b/client/src/RouteNames.js index 373711b..446919b 100644 --- a/client/src/RouteNames.js +++ b/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'; diff --git a/client/src/cash/Cash.js b/client/src/cash/Cash.js index 6f22627..9df9502 100644 --- a/client/src/cash/Cash.js +++ b/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) => { { homieLine.homie.name } - { formatMoney(homieLine.amount) } + { formatMoney(homieLine.amount, og) } [ diff --git a/client/src/common/formatting.js b/client/src/common/formatting.js index 1f64e6c..ca600ee 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, 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) => { diff --git a/client/src/homies/Flow.js b/client/src/homies/Flow.js index 87a82d9..edfa015 100644 --- a/client/src/homies/Flow.js +++ b/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) => { timestampToDate(timestamp) } + + + const flowData = flow.map( (singleFlowData, index) => ( +
  • +
    +
    +
    +
    { singleFlowData.description }
    +
    { dateBlock(singleFlowData['created_at']) }
    +
    + +
    0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount, og) }
    +
    { flowType === 'cash' && } { flowType === 'work' && } + return ( +
    +
    +
    +
    + {`${totalCount} Records`}{` • ${fromDate} - ${toDate}`} +
    +
    + Total flow: {formatMoney(totalFlow, og)} +
    +
    +
    + ) + }
    • ); } -export default withRouter(Flow); \ No newline at end of file +export default withRouter(Flow); diff --git a/client/src/homies/NewHomieForm.js b/client/src/homies/NewHomieForm.js index 47d04d6..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"; diff --git a/client/src/ogOnboarding/ChipSelection.js b/client/src/ogOnboarding/ChipSelection.js index 800be81..4810b0d 100644 --- a/client/src/ogOnboarding/ChipSelection.js +++ b/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) => ); + + 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 ( +
    + + + setChipScale(e.target.value)} + /> + + +
    + ) } export default ChipSelection; \ No newline at end of file