refactor(routes): trying to clarify and centralize the management of API routes #12

pull/73/head
Clement G 4 years ago committed by guhur
parent b4628d729f
commit 220ccacdfe

@ -11,17 +11,95 @@ import CreateSuccess from "./components/views/CreateSuccess";
import VoteSuccess from "./components/views/VoteSuccess";
function Routes() {
const params = new URLSearchParams(window.location.search);
const urlServer = process.env.REACT_APP_SERVER_URL;
const routesServer = {
setElection: "election/",
getElection: "election/get/:slug",
getResultsElection: "election/results/:slug",
voteElection: "election/vote/:slug"
};
return (
<main className="d-flex flex-column justify-content-center">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/create-election" component={CreateElection} />
<Route path="/vote/:handle" component={Vote} />
<Route path="/result/:handle" component={Result} />
<Route path="/create-success/:handle" component={CreateSuccess} />
<Route path="/vote-success/:handle" component={VoteSuccess} />
<Route path="/unknown-election/:handle" component={UnknownElection} />
<Route component={UnknownView} />
<Route
path="/create-election"
render={props => (
<CreateElection
{...props}
title={params.get("title") ? params.get("title") : ""}
urlServer={urlServer}
routesServer={routesServer}
/>
)}
/>
<Route
path="/vote/:slug"
render={props => (
<Vote
{...props}
slug={props.match.params.slug}
urlServer={urlServer}
routesServer={routesServer}
/>
)}
/>
<Route
path="/result/:handle"
render={props => (
<Result
{...props}
slug={props.match.params.slug}
urlServer={urlServer}
routesServer={routesServer}
/>
)}
/>
<Route
path="/create-success/:handle"
render={props => (
<CreateSuccess
{...props}
slug={props.match.params.slug}
urlServer={urlServer}
routesServer={routesServer}
/>
)}
/>
<Route
path="/vote-success/:handle"
render={props => (
<VoteSuccess
{...props}
slug={props.match.params.slug}
urlServer={urlServer}
routesServer={routesServer}
/>
)}
/>
<Route
path="/unknown-election/:handle"
render={props => (
<UnknownElection
{...props}
slug={props.match.params.slug}
urlServer={urlServer}
routesServer={routesServer}
/>
)}
/>
/>
<Route
render={props => (
<UnknownView
{...props}
urlServer={urlServer}
routesServer={routesServer}
/>
)}
/>
</Switch>
</main>
);

@ -126,7 +126,7 @@ class CreateElection extends Component {
this.state = {
candidates: [{ label: "" }, { label: "" }],
numCandidatesWithLabel: 0,
title: null,
title: this.props.title,
isVisibleTipsDragAndDropCandidate: true,
numGrades: 7,
successCreate: false,
@ -211,15 +211,13 @@ class CreateElection extends Component {
this.setState({ isAdvancedOptionsOpen: !this.state.isAdvancedOptionsOpen });
};
componentWillMount() {
const params = new URLSearchParams(this.props.location.search);
this.setState({ title: params.get("title") ? params.get("title") : "" });
}
handleSubmit() {
const { candidates, title, numGrades } = this.state;
const endpoint = resolve(process.env.REACT_APP_SERVER_URL, "election/");
const endpoint = resolve(
this.props.urlServer,
this.props.routesServer.setElection
);
fetch(endpoint, {
method: "POST",
@ -310,7 +308,7 @@ class CreateElection extends Component {
id="title"
innerRef={this.focusInput}
autoFocus
defaultValue={params.get("title") ? params.get("title") : ""}
defaultValue={this.props.title}
onChange={this.handleChangeTitle}
maxLength="250"
/>

@ -8,7 +8,7 @@ import logoLine from "../../logos/logo-line-white.svg";
class UnknownView extends Component {
constructor(props) {
super(props);
const electionSlug = this.props.match.params.handle;
const electionSlug = this.props.slug;
this.state = {
urlOfVote:
"https://" + window.location.hostname + "/vote/" + electionSlug,
@ -118,10 +118,7 @@ class UnknownView extends Component {
<Row className="mt-4 mb-4">
<Col className="text-center">
<Link
to={"/vote/" + this.props.match.params.handle}
className="btn btn-success"
>
<Link to={"/vote/" + this.props.slug} className="btn btn-success">
<FontAwesomeIcon icon={faUsers} className="mr-2" />
Participer maintenant !
</Link>

@ -94,12 +94,10 @@ class Result extends Component {
componentDidMount() {
// FIXME we should better handling logs
const electionSlug = this.props.match.params.handle;
// get details of the election
const detailsEndpoint = resolve(
process.env.REACT_APP_SERVER_URL,
"election/get/".concat(electionSlug)
this.props.urlServer,
this.props.routesServer.getElection.replace(new RegExp(":slug","g"),(this.props.slug))
);
fetch(detailsEndpoint)
@ -110,8 +108,8 @@ class Result extends Component {
// get results of the election
const resultsEndpoint = resolve(
process.env.REACT_APP_SERVER_URL,
"election/results/".concat(electionSlug)
this.props.urlServer,
this.props.routesServer.getResultsElection.replace(new RegExp(":slug","g"),(this.props.slug))
);
fetch(resultsEndpoint)

@ -89,13 +89,10 @@ class Vote extends Component {
componentDidMount() {
// FIXME we should better handling logs
const electionSlug = this.props.match.params.handle;
const detailsEndpoint = resolve(
process.env.REACT_APP_SERVER_URL,
"election/get/".concat(electionSlug)
this.props.urlServer,
this.props.routesServer.getElection.replace(new RegExp(":slug","g"),(this.props.slug))
);
fetch(detailsEndpoint)
.then(this.handleErrors)
.then(response => response.json())
@ -126,10 +123,10 @@ class Vote extends Component {
event.preventDefault();
const { ratedCandidates } = this.state;
const electionSlug = this.props.match.params.handle;
const electionSlug = this.props.slug;
const endpoint = resolve(
process.env.REACT_APP_SERVER_URL,
"election/vote/"
this.props.urlServer,
this.props.routesServer.voteElection.replace(new RegExp(":slug","g"),(this.props.slug))
);
const gradesById = {};

Loading…
Cancel
Save