From 51d8a369a96cd291e251a18c0a900e508e8bafbc Mon Sep 17 00:00:00 2001 From: Bilal Date: Thu, 8 Oct 2020 01:06:51 +0300 Subject: [PATCH] implement adding new gang, show only homies for selected gang --- client/src/App.js | 19 ++++-- client/src/RouteNames.js | 1 + client/src/cash/Cash.js | 4 +- client/src/cash/MakeMoneyMove.js | 5 +- client/src/cash/PutInWork.js | 4 +- client/src/gangs/Gangs.js | 59 ++++++++++++++++ client/src/gangs/NewGangForm.js | 110 ++++++++++++++++++++++++++++++ client/src/homies/Homies.js | 6 +- client/src/homies/NewHomieForm.js | 6 +- 9 files changed, 198 insertions(+), 16 deletions(-) create mode 100644 client/src/gangs/Gangs.js create mode 100644 client/src/gangs/NewGangForm.js diff --git a/client/src/App.js b/client/src/App.js index 8d7bb75..8f50db0 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -10,6 +10,7 @@ import RoutableNavItem from './common/RoutableNavItem'; import axios from 'axios'; import { CRIB, + GANGS, MAKE_MONEY_MOVE, HOMIE_FLOW, HOMIES, @@ -17,6 +18,7 @@ import { } from './RouteNames'; import PutInWork from "./cash/PutInWork"; import GangOnboarding from "./gangOnboarding/GangOnboarding"; +import Gangs from './gangs/Gangs'; import {errorToast} from "./common/errorHelpers"; @@ -45,10 +47,11 @@ const App = (props) => { const routes = ([ } />, - } />, - } />, - } />, - } /> + } />, + } />, + } />, + } />, + } /> ] ); @@ -85,14 +88,14 @@ const App = (props) => { autoTrigger: true, closeOnClick: true, constrainWidth: true, - coverTrigger: true, + coverTrigger: false, hover: false, inDuration: 150, outDuration: 250 }} trigger={{selectedGang && selectedGang.name && selectedGang.name.length > 0 ? `${selectedGang.name} gang` : '[No name gang]'}arrow_drop_down} > - {gangs.map(gang => {`${gang.name} gang`})} + {gangs.map(gang => setSelectedGang(gang)}>{gang.name})} ); @@ -106,6 +109,10 @@ const App = (props) => { Crib + + Gangs + + Homies diff --git a/client/src/RouteNames.js b/client/src/RouteNames.js index 446919b..98ccb73 100644 --- a/client/src/RouteNames.js +++ b/client/src/RouteNames.js @@ -3,3 +3,4 @@ export const HOMIES = '/homies'; 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 GANGS = '/gangs'; diff --git a/client/src/cash/Cash.js b/client/src/cash/Cash.js index 22f53ca..c3848b0 100644 --- a/client/src/cash/Cash.js +++ b/client/src/cash/Cash.js @@ -16,7 +16,7 @@ const Cash = (props) => { useEffect( () => { const getCashForHomies = async () => { try { - const cash = await axios.get(`/api/homies/info`); + const cash = await axios.get(`/api/gangs/${gang.id}/homies/info`); setHomiesCash(cash.data); } catch (e) { console.log("Error fetching", e); @@ -27,7 +27,7 @@ const Cash = (props) => { const settleFlowForHomie = async (id, amountToSettle) => { try { - const response = await axios.post(`/api/homies/${id}/settle`, { amount: amountToSettle }); + const response = await axios.post(`/api/gangs/${gang.id}/homies/${id}/settle`, { amount: amountToSettle }); if (response.status === 200 && response.data) { M.toast({ html: 'Settled' }); setHomiesCash(response.data); diff --git a/client/src/cash/MakeMoneyMove.js b/client/src/cash/MakeMoneyMove.js index 8b8ccd5..6f47c03 100644 --- a/client/src/cash/MakeMoneyMove.js +++ b/client/src/cash/MakeMoneyMove.js @@ -5,7 +5,6 @@ import './Cash.css'; import axios from 'axios'; const MakeMoneyMove = (props) => { - const [selectedFrom, setSelectedFrom] = useState(""); const [selectedTo, setSelectedTo] = useState("-1"); const [homiesCash, setHomiesCash] = useState([]); @@ -13,10 +12,12 @@ const MakeMoneyMove = (props) => { const [moveDescription, setMoveDescription] = useState(""); const [submitInProgress, setSubmitInProgress] = useState(false); + const gang = props.gang; + useEffect(() => { const getCashForHomies = async () => { try { - const cash = await axios.get(`/api/homies/info`); + const cash = await axios.get(`/api/gangs/${gang.id}/homies/info`); setHomiesCash(cash.data); } catch (e) { console.log("Error fetching", e); diff --git a/client/src/cash/PutInWork.js b/client/src/cash/PutInWork.js index 62f9c1b..f864f82 100644 --- a/client/src/cash/PutInWork.js +++ b/client/src/cash/PutInWork.js @@ -12,10 +12,12 @@ const PutInWork = (props) => { const [workDescription, setWorkDescription] = useState(''); const [submitInProgress, setSubmitInProgress] = useState(false); + const gang = props.gang; + useEffect(() => { (async () => { try { - const response = await axios.get('/api/homies'); + const response = await axios.get(`/api/gangs/${gang.id}/homies`); if (response.status === 200 && response.data){ setHomies(response.data); } diff --git a/client/src/gangs/Gangs.js b/client/src/gangs/Gangs.js new file mode 100644 index 0000000..b36fe6d --- /dev/null +++ b/client/src/gangs/Gangs.js @@ -0,0 +1,59 @@ +import React, { useEffect, useState } from 'react'; +import NewGangForm from "./NewGangForm"; +import axios from "axios"; +import {errorToast} from "../common/errorHelpers"; +import YesNoModal from "../common/YesNoModal"; +import {Button} from "react-materialize"; +import M from "materialize-css"; + +const Gangs = (props) => { + const gangs = props.gangs; + const setGangs = props.gangsSetter; + + const deleteGang = async (id) => { + try { + const response = await axios.delete(`/api/gangs/${id}`); + if (response.status === 200 && response.data){ + setGangs(response.data); + M.toast({ html: "See y'a on the other side" }); + }else{ + errorToast(); + } + }catch (e) { + console.log(e); + errorToast(); + } + } + + const gangsData = gangs.map((gang, index) => { + return ( +
  • +
    +
    +
    +
    { gang.name }
    +
    { `${gang.about || '[no about]'} • ${gang.chip_name} (${gang.chip_code})`}
    +
    + + deleteGang(gang.id)} + triggerNode={
    +
    +
    • + ) + }); + + return ( +
    + + +
      + { gangsData } +
    +
    + ) +} + +export default Gangs; \ No newline at end of file diff --git a/client/src/gangs/NewGangForm.js b/client/src/gangs/NewGangForm.js new file mode 100644 index 0000000..23baf23 --- /dev/null +++ b/client/src/gangs/NewGangForm.js @@ -0,0 +1,110 @@ +import React, { useEffect, useState } from 'react'; +import { Button, Collapsible, CollapsibleItem, Select, TextInput } from 'react-materialize'; +import axios from 'axios'; +import { errorToast } from "../common/errorHelpers"; +import M from 'materialize-css'; + +const NewGangForm = (props) => { + const [gangName, setGangName] = useState(""); + const [aboutGang, setAboutGang] = useState(""); + const [chips, setChips] = useState([]); + const [selectedChip, setSelectedChip] = useState('1'); + 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 chipsToOptions = chips.map( (chip, index) => ); + + const disableAddButton = () => { + return gangName.length === 0 || busy; + } + + const clearForm = () => { + setGangName(""); + setAboutGang(""); + + const collapsible = document.getElementById('new-gang-form-container'); + const collapsibleInstance = M.Collapsible.getInstance(collapsible); + + collapsibleInstance.close(0); + } + + const addNewGang = async () => { + const chipData = chips.find(chip => chip.id === parseInt(selectedChip)); + if (chipData) { + setBusy(true); + const newGang = { + chip_name: chipData.name, + chip_code: chipData.code, + chip_symbol: chipData.symbol, + chip_prefixed: chipData.prefixed, + chip_scale: chipData.scale, + name: gangName, + about: aboutGang + } + + try { + const response = await axios.post('/api/gangs', {gang: newGang}); + if (response.status === 200 && response.data) { + props.newGangsSetter(response.data); + M.toast({html: 'Welcome to the Hood'}); + clearForm(); + } else { + errorToast(); + } + } catch (e) { + console.log(e.message); + errorToast(); + } + + setBusy(false); + }else{ + errorToast(); + } + } + + return ( +
    + + {`Introduce new gang to the Hood`}}> +
    + setGangName(e.target.value)} /> + + +
    + + setAboutGang(e.target.value)} + /> + + + +
    + + + +     +     +
    + ) +} + +export default NewGangForm; \ No newline at end of file diff --git a/client/src/homies/Homies.js b/client/src/homies/Homies.js index a68f8d0..646cbcc 100644 --- a/client/src/homies/Homies.js +++ b/client/src/homies/Homies.js @@ -10,10 +10,12 @@ import YesNoModal from "../common/YesNoModal"; const Homies = (props) => { const [homies, setHomies] = useState([]); + const gang = props.gang; + useEffect(() => { (async() => { try { - const response = await axios.get(`/api/homies`); + const response = await axios.get(`/api/gangs/${gang.id}/homies`); if (response.status === 200 && response.data){ setHomies(response.data); }else{ @@ -27,7 +29,7 @@ const Homies = (props) => { const deleteHomie = async (id) => { try { - const response = await axios.delete(`/api/homies/${id}`); + const response = await axios.delete(`/api/gangs/${gang.id}/homies/${id}`); if (response.status === 200 && response.data){ setHomies(response.data); M.toast({ html: "See y'a on the other side Homie" }); diff --git a/client/src/homies/NewHomieForm.js b/client/src/homies/NewHomieForm.js index cf30f2b..187265e 100644 --- a/client/src/homies/NewHomieForm.js +++ b/client/src/homies/NewHomieForm.js @@ -41,10 +41,10 @@ const NewHomieForm = (props) => { } try{ - const response = await axios.post('/api/homies', newHomie); + const response = await axios.post(`/api/gangs/${gang.id}/homies`, newHomie); if (response.status === 200 && response.data) { props.newHomiesSetter(response.data); - M.toast({ html: 'Welcome to the hood' }); + M.toast({ html: 'Welcome to the Gang' }); clearForm(); }else{ errorToast(); @@ -86,7 +86,7 @@ const NewHomieForm = (props) => {
    - +