handle Chips and Chip Values
This commit is contained in:
Bilal
248
client/src/chips/ListChips.js
Normal file
248
client/src/chips/ListChips.js
Normal file
@@ -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 <option key={`chip-option-${index}`} value={chip.id}>{chip.name}</option>
|
||||
}else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
return options.filter(option => option !== null);
|
||||
};
|
||||
|
||||
const chipActions = (id) => (
|
||||
<Row>
|
||||
<Col>
|
||||
<Button flat node="button" icon="add" onClick={() => setChipValueActiveIndex(id)} />
|
||||
</Col>
|
||||
<Col>
|
||||
<YesNoModal
|
||||
body={"Maan, y'a sure about this?"}
|
||||
yesAction={() => deleteChip(id)}
|
||||
triggerNode={<Button flat node="button" icon="delete" />} />
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
|
||||
const newChipValueForm = (id) => {
|
||||
if (chipValueActiveIndex !== id){
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col>
|
||||
<Select value={newChipValueSecondaryChipId} name="secondary_chip" onChange={(e) => setNewChipValueSecondaryChipId(e.target.value)}>
|
||||
<option disabled value="">Secondary chip</option>
|
||||
{secondaryChipOptions(id)}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col>
|
||||
<TextInput label="Value" type="number" value={editingChipValue} onChange={(e) => setEditingChipValue(e.target.value)} />,
|
||||
</Col>
|
||||
<Col>
|
||||
<Button flat icon="check" onClick={() => addNewChipValue(id)} />
|
||||
</Col>
|
||||
<Col>
|
||||
<Button flat icon="cancel" onClick={() => setChipValueActiveIndex(undefined)} />
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
const singleChipValueInfo = (chipValueData, index) => {
|
||||
const secondaryChipId = chipValueData && chipValueData.secondary_chip_id ? chipValueData.secondary_chip_id : undefined;
|
||||
const { name:secondaryChipName, symbol:secondaryChipSymbol } = getChipData(secondaryChipId) || {};
|
||||
return(
|
||||
<tr key={`secondary-chip-${index}`}>
|
||||
<td>{ `${secondaryChipName} [${secondaryChipSymbol}]` }</td>
|
||||
{
|
||||
chipValueActiveIndex === chipValueData.id &&
|
||||
[
|
||||
<td key={`chip-value-input-${index}`}><TextInput defaultValue={chipValueData.value} onChange={(e) => setEditingChipValue(e.target.value)} /></td>,
|
||||
<td key={`chip-value-save-${index}`}><Button flat node="button" icon="check" onClick={() => updateChipValue(chipValueData.id)} /></td>,
|
||||
<td key={`chip-value-cancel-${index}`}><Button flat node="button" icon="cancel" onClick={() => setChipValueActiveIndex(undefined)} /></td>
|
||||
]
|
||||
}
|
||||
{
|
||||
chipValueActiveIndex !== chipValueData.id &&
|
||||
[
|
||||
<td key={`chip-value-${index}`}>{ chipValueData.value }</td>,
|
||||
<td key={`chip-value-edit-${index}`}><Button flat node="button" icon="edit" onClick={() => setChipValueActiveIndex(chipValueData.id)} /></td>
|
||||
]
|
||||
}
|
||||
<td>
|
||||
<YesNoModal
|
||||
body={"Maan, y'a sure about this?"}
|
||||
yesAction={() => deleteChipValue(chipValueData.id)}
|
||||
triggerNode={<Button flat node="button" icon="delete" />} />
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
const chipValuesTable = (chip) => (
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Secondary chip</th>
|
||||
<th>Value</th>
|
||||
<th colSpan={3}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ chip.base_chip_values.map((chipValueData, index) => singleChipValueInfo(chipValueData, index)) }
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
|
||||
const singleChipInfo = (chip, index) => (
|
||||
<CollapsibleItem key={`base-chip-${index}`} expanded={false} header={`${chip.name} [${chip.symbol}]`} node="div">
|
||||
{ chipActions(chip.id) }
|
||||
{ newChipValueForm(chip.id) }
|
||||
{ chipValuesTable(chip) }
|
||||
</CollapsibleItem>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='section'>
|
||||
<h5>Chips In Tha Hood</h5>
|
||||
|
||||
<Collapsible>
|
||||
{
|
||||
chipsList.map((chip, index) => singleChipInfo(chip, index))
|
||||
}
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ListChips;
|
||||
Reference in New Issue
Block a user