From d4c998fa1a4661150741e896bb95c3c48381339d Mon Sep 17 00:00:00 2001 From: Bilal Date: Fri, 4 Sep 2020 06:02:33 +0300 Subject: [PATCH] handle Chips and Chip Values --- client/src/App.css | 4 + client/src/App.js | 44 ++--- client/src/RouteNames.js | 1 + client/src/cash/Cash.js | 1 - client/src/chips/AddChip.js | 86 ++++++++++ client/src/chips/Chips.js | 14 ++ client/src/chips/ListChips.js | 248 +++++++++++++++++++++++++++ client/src/common/RoutableNavItem.js | 2 +- client/src/common/YesNoModal.js | 43 +++++ 9 files changed, 421 insertions(+), 22 deletions(-) create mode 100644 client/src/chips/AddChip.js create mode 100644 client/src/chips/Chips.js create mode 100644 client/src/chips/ListChips.js create mode 100644 client/src/common/YesNoModal.js diff --git a/client/src/App.css b/client/src/App.css index 5f58b0b..cc1ca1d 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -41,3 +41,7 @@ z-index: 996; } +.mr-10 { + margin-right: 100px; +} + diff --git a/client/src/App.js b/client/src/App.js index c8032fe..0dc8f4e 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,39 +1,43 @@ import React from 'react'; import './App.css'; -import { Tabs, Tab, Navbar } from 'react-materialize'; +import { Navbar } from 'react-materialize'; import MakeMoneyMove from './cash/MakeMoneyMove'; import Cash from './cash/Cash'; -import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import Chips from './chips/Chips'; +import { BrowserRouter as Router, Route } from "react-router-dom"; import RoutableNavItem from './common/RoutableNavItem'; import { - CRIB, + CRIB, + CHIPS, MAKE_MONEY_MOVE } from './RouteNames'; function App() { - return ( + +
+ GKS
} alignLinks="right"> + + Crib + - -
- GKS
} alignLinks="right"> - - Crib - - - - Homies - + + Chips + - - Make Money Move - + + Homies + - + + Make Money Move + + + - -
+
+
diff --git a/client/src/RouteNames.js b/client/src/RouteNames.js index 0c997a0..d84b419 100644 --- a/client/src/RouteNames.js +++ b/client/src/RouteNames.js @@ -1,2 +1,3 @@ export const CRIB = '/'; +export const CHIPS = '/chips'; export const MAKE_MONEY_MOVE = '/make-money-move'; diff --git a/client/src/cash/Cash.js b/client/src/cash/Cash.js index 9502c82..4d938f2 100644 --- a/client/src/cash/Cash.js +++ b/client/src/cash/Cash.js @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; import { Button, Table } from 'react-materialize'; import './Cash.css'; import axios from 'axios'; -import { Link } from 'react-router-dom'; import { MAKE_MONEY_MOVE } from '../RouteNames'; import { withRouter } from 'react-router-dom'; diff --git a/client/src/chips/AddChip.js b/client/src/chips/AddChip.js new file mode 100644 index 0000000..b2c7218 --- /dev/null +++ b/client/src/chips/AddChip.js @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; +import { TextInput, Button } from "react-materialize"; +import axios from "axios"; +import M from "materialize-css"; + +const AddChip = (props) => { + const [chipName, setChipName] = useState(''); + const [chipSymbol, setChipSymbol] = useState(''); + const [submitInProgress, setSubmitInProgress] = useState(false); + + const handleInputChange = (e) => { + const newValue = e.target.value; + switch (e.target.id){ + case 'chipName': + setChipName(newValue); + break; + case 'chipSymbol': + setChipSymbol(newValue); + break; + default: + break; + } + } + + const disableSubmit = () => { + return submitInProgress || chipName.length === 0 || chipSymbol.length === 0; + } + + const clearForm = () => { + setChipName(''); + setChipSymbol(''); + } + + const errorToast = () => M.toast({ html: "Yo! It ain't workin'" }); + + const handleSubmit = async () => { + setSubmitInProgress(true); + const chipRequest = { + chip: { + name: chipName, + symbol: chipSymbol, + } + } + + try{ + const submitResponse = await axios.post('/chips', chipRequest); + + if (submitResponse && submitResponse.status === 200 && submitResponse.data) { + M.toast({ html: "Chipped In" }); + clearForm(); + } else { + errorToast(); + } + }catch (e) { + errorToast(); + } + + setSubmitInProgress(false); + } + + return ( +
+
Add New Chip
+ + + + + + +
+ ); +} + +export default AddChip; \ No newline at end of file diff --git a/client/src/chips/Chips.js b/client/src/chips/Chips.js new file mode 100644 index 0000000..86196bb --- /dev/null +++ b/client/src/chips/Chips.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { withRouter } from 'react-router-dom'; +import AddChip from "./AddChip"; +import ListChips from "./ListChips"; + +const Chips = (props) => ( +
+ + + +
+); + +export default withRouter(Chips); \ No newline at end of file diff --git a/client/src/chips/ListChips.js b/client/src/chips/ListChips.js new file mode 100644 index 0000000..d912efa --- /dev/null +++ b/client/src/chips/ListChips.js @@ -0,0 +1,248 @@ +import React, { useState, useEffect } from 'react'; +import axios from "axios"; +import { Table, Collapsible, CollapsibleItem, Button, TextInput, Row, Col, Select } from "react-materialize"; +import M from "materialize-css"; +import YesNoModal from "../common/YesNoModal"; + +const ListChips = (props) => { + const [chipsList, setChipsList] = useState([]); + const [chipValuePairs, setChipValuePairs] = useState([]); + const [chipValueActiveIndex, setChipValueActiveIndex] = useState(undefined); + const [editingChipValue, setEditingChipValue] = useState(""); + const [newChipValueSecondaryChipId, setNewChipValueSecondaryChipId] = useState(""); + + const reloadChipsListEffect = () => { + (async() => { + try { + const chipsResponse = await axios.get(`/chips`); + + if (chipsResponse && chipsResponse.status === 200 && Array.isArray(chipsResponse.data)) { + setChipsList(chipsResponse.data); + } + + } catch (e) { + errorToast(); + } + })(); + } + + const updateChipValuePairsEffect = () => { + const result = []; + chipsList.forEach(chip => { + const chipValues = chip['base_chip_values']; + chipValues.forEach(chipValue => { + result.push({ + baseChipId: chip.id, + secondaryChipId: chipValue['secondary_chip_id'] + }); + }); + }); + setChipValuePairs(result); + } + + useEffect(reloadChipsListEffect, []); + useEffect(updateChipValuePairsEffect, [chipsList]); + + const deleteChip = async (chipId) => { + try { + const chipsResponse = await axios.delete(`/chips/${chipId}`); + + if (chipsResponse && chipsResponse.status === 200 && Array.isArray(chipsResponse.data)){ + setChipsList(chipsResponse.data); + M.toast({ html: 'Chip destroyed!' }); + } + + } catch (e) { + errorToast(); + } + } + + const addNewChipValue = async (baseChipId) => { + try{ + const newChipValueObject = { + 'chip_value': { + base_chip_id: baseChipId, + secondary_chip_id: newChipValueSecondaryChipId, + value: editingChipValue + } + } + const chipsResponse = await axios.post(`/chip_values`, newChipValueObject); + + if (chipsResponse && chipsResponse.status === 200){ + setChipsList(chipsResponse.data); + setNewChipValueSecondaryChipId(""); + setChipValueActiveIndex(undefined); + setEditingChipValue(""); + M.toast({ html: 'I smell money $$$' }); + } + } catch (e) { + errorToast(); + } + } + + const updateChipValue = async (chipValueId) => { + try{ + const updatedChipValue = { + 'chip_value': { + id: chipValueId, + value: editingChipValue + } + } + const chipsResponse = await axios.put(`/chip_values/${chipValueId}`, updatedChipValue); + + if (chipsResponse && chipsResponse.status === 200){ + setChipsList(chipsResponse.data); + setChipValueActiveIndex(undefined); + setEditingChipValue(""); + } + } catch (e) { + errorToast(); + } + } + + const deleteChipValue = async (chipValueId) => { + try { + const chipsResponse = await axios.delete(`/chip_values/${chipValueId}`); + + if (chipsResponse && chipsResponse.status === 200){ + setChipsList(chipsResponse.data); + M.toast({ html: 'Destroyed!' }); + } + + } catch (e) { + errorToast(); + } + } + + + + const errorToast = () => M.toast({ html: "Yo! It ain't workin'" }); + + const getChipData = (chipId) => chipsList.find(chip => chip.id === chipId); + + const checkIfPairExists = (baseChipId, secondaryChipId) => { + return chipValuePairs.find(chipValuePair => + chipValuePair.baseChipId === baseChipId && + chipValuePair.secondaryChipId === secondaryChipId); + } + + const secondaryChipOptions = (baseChipId) => { + const options = chipsList.map((chip, index) => { + if (chip.id !== baseChipId && !checkIfPairExists(baseChipId, chip.id)) { + return + }else { + return null; + } + }); + + return options.filter(option => option !== null); + }; + + const chipActions = (id) => ( + + + + + + + + + ]} + bottomSheet + fixedFooter={false} + header={title} + id="Modal-0" + open={false} + options={{ + dismissible: true, + endingTop: '10%', + inDuration: 250, + onCloseEnd: null, + onCloseStart: null, + onOpenEnd: null, + onOpenStart: null, + opacity: 0.5, + outDuration: 250, + preventScrolling: true, + startingTop: '4%' + }} + trigger={triggerNode} + > +

{body}

+ + ) +} + +export default YesNoModal; \ No newline at end of file