92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { withRouter } from 'react-router-dom';
|
|
import axios from 'axios';
|
|
import { errorToast } from "../common/errorHelpers";
|
|
import NewHomieForm from './NewHomieForm';
|
|
import { Button, Icon } from 'react-materialize';
|
|
import M from 'materialize-css';
|
|
import YesNoModal from "../common/YesNoModal";
|
|
import RoutableNavItem from "../common/RoutableNavItem";
|
|
|
|
const Homies = (props) => {
|
|
const [homies, setHomies] = useState([]);
|
|
|
|
const gang = props.gang;
|
|
|
|
useEffect(() => {
|
|
(async() => {
|
|
try {
|
|
const response = await axios.get(`/api/gangs/${gang.id}/homies`);
|
|
if (response.status === 200 && response.data){
|
|
setHomies(response.data);
|
|
}else{
|
|
errorToast();
|
|
}
|
|
} catch (e) {
|
|
errorToast();
|
|
}
|
|
})();
|
|
}, [gang]);
|
|
|
|
const deleteHomie = async (id) => {
|
|
try {
|
|
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" });
|
|
}else{
|
|
errorToast();
|
|
}
|
|
}catch (e) {
|
|
console.log(e);
|
|
errorToast();
|
|
}
|
|
}
|
|
|
|
const homiesData = homies.map((homie, index) => {
|
|
return (
|
|
<li key={index}>
|
|
<div className="collapsible-header">
|
|
<div className="flex-row opposite-sides-content">
|
|
<div className="flex-col">
|
|
<a href={`/homie/${homie.id}/flow`}>{ homie.name }</a>
|
|
<div className="grey-text">{ homie.about }</div>
|
|
</div>
|
|
|
|
<RoutableNavItem additionalClasses="push" href={`/homie/${homie.id}/move-money`}>
|
|
<Button>
|
|
+
|
|
<Icon left>monetization_on</Icon>
|
|
</Button>
|
|
</RoutableNavItem>
|
|
|
|
<RoutableNavItem href={`/homie/${homie.id}/put-in-work`}>
|
|
<Button className="bump">
|
|
+
|
|
<Icon left>query_builder</Icon>
|
|
</Button>
|
|
</RoutableNavItem>
|
|
|
|
<YesNoModal
|
|
body={"Maan, y'a sure about this?"}
|
|
yesAction={() => deleteHomie(homie.id)}
|
|
triggerNode={<Button flat node="button" icon="delete" />} />
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)
|
|
});
|
|
|
|
return (
|
|
<div className="container">
|
|
<NewHomieForm newHomiesSetter={setHomies} gang={props.gang} />
|
|
|
|
<ul className="collapsible">
|
|
{ homiesData }
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default withRouter(Homies);
|