59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
|
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 (
|
||
|
|
<li key={index}>
|
||
|
|
<div className="collapsible-header">
|
||
|
|
<div className="flex-row opposite-sides-content">
|
||
|
|
<div className="flex-col">
|
||
|
|
<div>{ gang.name }</div>
|
||
|
|
<div className="grey-text">{ `${gang.about || '[no about]'} • ${gang.chip_name} (${gang.chip_code})`}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<YesNoModal
|
||
|
|
body={"Maan, y'a sure about this?"}
|
||
|
|
yesAction={() => deleteGang(gang.id)}
|
||
|
|
triggerNode={<Button disabled flat node="button" icon="delete" />} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container">
|
||
|
|
<NewGangForm newGangsSetter={setGangs} />
|
||
|
|
|
||
|
|
<ul className="collapsible">
|
||
|
|
{ gangsData }
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Gangs;
|