140 lines
4.2 KiB
JavaScript
140 lines
4.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import './App.css';
|
|
import { Navbar, Dropdown, Icon } from 'react-materialize';
|
|
import MakeMoneyMove from './cash/MakeMoneyMove';
|
|
import Flow from "./homies/Flow";
|
|
import Cash from './cash/Cash';
|
|
import Homies from './homies/Homies';
|
|
import { BrowserRouter as Router, Route } from "react-router-dom";
|
|
import RoutableNavItem from './common/RoutableNavItem';
|
|
import axios from 'axios';
|
|
import {
|
|
CRIB,
|
|
GANGS,
|
|
MAKE_MONEY_MOVE,
|
|
HOMIE_FLOW,
|
|
HOMIES,
|
|
PUT_IN_WORK
|
|
} from './RouteNames';
|
|
import PutInWork from "./cash/PutInWork";
|
|
import GangOnboarding from "./gangOnboarding/GangOnboarding";
|
|
import Gangs from './gangs/Gangs';
|
|
import {errorToast} from "./common/errorHelpers";
|
|
|
|
|
|
const App = (props) => {
|
|
const [loading, setLoading] = useState(true);
|
|
const [gangs, setGangs] = useState([]);
|
|
const [selectedGang, setSelectedGang] = useState({});
|
|
|
|
useEffect(() => {
|
|
(async() => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await axios.get(`/api/gangs`);
|
|
if (response.status === 200 && response.data){
|
|
setGangs(response.data);
|
|
setSelectedGang(response.data[0]);
|
|
}else{
|
|
errorToast();
|
|
}
|
|
} catch (e) {
|
|
errorToast();
|
|
}
|
|
setLoading(false);
|
|
})();
|
|
}, []);
|
|
|
|
const routes = ([
|
|
<Route key='1' exact path={CRIB} component={() => <Cash gang={selectedGang} />} />,
|
|
<Route key='2' exact path={GANGS} component={() => <Gangs gangs={gangs} gangsSetter={setGangs} />} />,
|
|
<Route key='3' exact path={HOMIES} component={() => <Homies gang={selectedGang} />} />,
|
|
<Route key='4' path={HOMIE_FLOW} component={() => <Flow gang={selectedGang} />} />,
|
|
<Route key='5' path={MAKE_MONEY_MOVE} component={() => <MakeMoneyMove gang={selectedGang} />} />,
|
|
<Route key='6' path={PUT_IN_WORK} component={() => <PutInWork gang={selectedGang} />} />
|
|
]
|
|
);
|
|
|
|
const onboarded = () => selectedGang.chip_name && selectedGang.chip_name.length > 0;
|
|
|
|
const preloaderCircle = (
|
|
<div className="container">
|
|
<div className="valign-wrapper center-align preloader-circle">
|
|
<div className="preloader-wrapper big active">
|
|
<div className="spinner-layer spinner-blue-only">
|
|
<div className="circle-clipper left">
|
|
<div className="circle" />
|
|
</div>
|
|
<div className="gap-patch">
|
|
<div className="circle" />
|
|
</div>
|
|
<div className="circle-clipper right">
|
|
<div className="circle" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const navbarLogoWithGang = (
|
|
<div>
|
|
<a href='/'>GKS</a>
|
|
|
|
<Dropdown
|
|
id="gang_dropdown"
|
|
options={{
|
|
alignment: 'left',
|
|
autoTrigger: true,
|
|
closeOnClick: true,
|
|
constrainWidth: true,
|
|
coverTrigger: false,
|
|
hover: false,
|
|
inDuration: 150,
|
|
outDuration: 250
|
|
}}
|
|
trigger={<a className="bump">{selectedGang && selectedGang.name && selectedGang.name.length > 0 ? `${selectedGang.name} gang` : '[No name gang]'}<Icon right>arrow_drop_down</Icon></a>}
|
|
>
|
|
{gangs.map(gang => <a key={`gang-${gang.id}`} onClick={() => setSelectedGang(gang)}>{gang.name}</a>)}
|
|
</Dropdown>
|
|
</div>
|
|
);
|
|
|
|
|
|
return (
|
|
<Router>
|
|
<div className="navbar-fixed">
|
|
<Navbar brand={navbarLogoWithGang} alignLinks="right">
|
|
<RoutableNavItem href={CRIB}>
|
|
Crib
|
|
</RoutableNavItem>
|
|
|
|
<RoutableNavItem href={GANGS}>
|
|
Gangs
|
|
</RoutableNavItem>
|
|
|
|
<RoutableNavItem href={HOMIES}>
|
|
Homies
|
|
</RoutableNavItem>
|
|
|
|
<RoutableNavItem href={MAKE_MONEY_MOVE}>
|
|
Make Money Move
|
|
</RoutableNavItem>
|
|
|
|
<RoutableNavItem href={PUT_IN_WORK}>
|
|
Put in Work
|
|
</RoutableNavItem>
|
|
</Navbar>
|
|
</div>
|
|
|
|
<div className="autoscrolling">
|
|
{ loading && preloaderCircle }
|
|
{ !loading && !onboarded() && <GangOnboarding gang={selectedGang} /> }
|
|
{ !loading && onboarded() && routes }
|
|
</div>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App;
|