+
+
+ );
+};
+
+export default Chart;
diff --git a/components/ChartWrapper.js b/components/ChartWrapper.js
new file mode 100644
index 0000000..de849cd
--- /dev/null
+++ b/components/ChartWrapper.js
@@ -0,0 +1,21 @@
+import React, { useRef, useState, useEffect } from 'react';
+import D3Chart from './D3Chart';
+
+const ChartWrapper = () => {
+
+ const chartArea = useRef(null);
+ const [chart, setChart] = useState(null);
+
+ useEffect(() => {
+ if (!chart) {
+ setChart(new D3Chart(chartArea.current));
+ }
+ }, [chart]);
+
+ return (
+
+ );
+
+}
+
+export default ChartWrapper;
\ No newline at end of file
diff --git a/components/CopyField.jsx b/components/CopyField.jsx
new file mode 100644
index 0000000..bc37856
--- /dev/null
+++ b/components/CopyField.jsx
@@ -0,0 +1,69 @@
+/* eslint react/prop-types: 0 */
+import React from "react";
+import { Button } from "reactstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faCopy,
+ faVoteYea,
+ faExclamationTriangle,
+ faExternalLinkAlt,
+} from "@fortawesome/free-solid-svg-icons";
+
+const CopyField = (props) => {
+ const ref = React.createRef();
+ const handleClickOnField = (event) => {
+ event.target.focus();
+ event.target.select();
+ };
+ const handleClickOnButton = () => {
+ const input = ref.current;
+ input.focus();
+ input.select();
+ document.execCommand("copy");
+ };
+
+ const { t, value, iconCopy, iconOpen } = props;
+
+ return (
+
+
+
+
+ );
+};
+
+CopyField.defaultProps = {
+ iconCopy: faCopy,
+ iconOpen: faExternalLinkAlt,
+};
+
+export default CopyField;
diff --git a/components/D3Chart.js b/components/D3Chart.js
new file mode 100644
index 0000000..dd62855
--- /dev/null
+++ b/components/D3Chart.js
@@ -0,0 +1,38 @@
+import * as d3 from 'd3';
+
+const url = "https://udemy-react-d3.firebaseio.com/tallest_men.json";
+
+const WIDTH = 800;
+const HEIGHT = 500;
+
+export default class D3Chart {
+ constructor(element) {
+ const svg = d3.select(element)
+ .append("svg")
+ .attr("width", 800)
+ .attr("height", 500)
+
+ d3.json(url).then(data => {
+ const max = d3.max(data, d => d.height)
+ const y = d3.scaleLinear()
+ .domain([0, max])
+ .range([0, HEIGHT])
+
+ const x = d3.scaleBand()
+ .domain(data.map(d => d.name))
+ .range([0, WIDTH])
+ .padding(0.4)
+
+ const rects = svg.selectAll("rect")
+ .data(data)
+
+ rects.enter()
+ .append("rect")
+ .attr("x", d => x(d.name))
+ .attr("y", d => HEIGHT - y(d.height))
+ .attr("width", x.bandwidth)
+ .attr("height", d => y(d.height))
+ .attr("fill", "grey")
+ })
+ }
+}
\ No newline at end of file
diff --git a/components/Error.jsx b/components/Error.jsx
new file mode 100644
index 0000000..dc855db
--- /dev/null
+++ b/components/Error.jsx
@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { Container, Row, Col } from "reactstrap";
+import { useTranslation } from "next-i18next";
+
+const Error = (props) => {
+ const { t } = useTranslation();
+ return (
+
+ {/*
+
+ */}
+
+
+ 
+
+
+ {props.value}
+ +Le total des votes est de {totalVotes}.
+ +
+
+
+ );
+};
+
+export default Paypal;
diff --git a/components/flag.js b/components/flag.js
new file mode 100644
index 0000000..df68eaf
--- /dev/null
+++ b/components/flag.js
@@ -0,0 +1,4 @@
+import * as React from "react";
+import FlagIconFactory from "react-flag-icon-css";
+
+export const FlagIcon = FlagIconFactory(React, { useCssModules: false });
diff --git a/components/form/AddPicture.jsx b/components/form/AddPicture.jsx
new file mode 100644
index 0000000..b858e18
--- /dev/null
+++ b/components/form/AddPicture.jsx
@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+
+
+export default function AddPicture(props) {
+ const [image, setImage] = useState(null);
+ const [createObjectURL, setCreateObjectURL] = useState(null);
+
+ const uploadToClient = (event) => {
+ if (event.target.files && event.target.files[0]) {
+ const i = event.target.files[0];
+
+ setImage(i);
+ setCreateObjectURL(URL.createObjectURL(i));
+ }
+ };
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/form/AlertButton.jsx b/components/form/AlertButton.jsx
new file mode 100644
index 0000000..10c1e0a
--- /dev/null
+++ b/components/form/AlertButton.jsx
@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { Alert, Button } from 'react-bootstrap';
+import { faTimes, faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export default function AlertDismissibleExample() {
+ const [show, setShow] = useState(true);
+
+ if (show) {
+ return (
+
+
+
+ 
+
+
+
+ Photo (facultatif)
+ +Importer une photo.
format : jpg, png, pdf
+
+
+
+
+
+
+
+
+ {t("Delete?")}
+
+ {t("Are you sure to delete")}{" "}
+ {label && label !== "" ? (
+ "{label}"
+ ) : (
+ <>{t("the row")}
+ )}{" "}
+ ?
+
+
+
+
+
+
+
+ );
+}
+
+export default ButtonWithConfirm;
diff --git a/components/form/CandidateField.jsx b/components/form/CandidateField.jsx
new file mode 100644
index 0000000..08b3c78
--- /dev/null
+++ b/components/form/CandidateField.jsx
@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import ButtonWithConfirm from "./ButtonWithConfirm";
+import {
+ Row,
+ Col,
+ Label,
+ Input,
+ InputGroup,
+ InputGroupAddon,
+ Button, Modal, ModalHeader, ModalBody, ModalFooter
+} from "reactstrap";
+import { useTranslation } from "react-i18next";
+import {
+ sortableHandle
+} from "react-sortable-hoc";
+import HelpButton from "@components/form/HelpButton";
+import AddPicture from "@components/form/AddPicture";
+import {
+ faPlus, faCogs, faCheck
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+const DragHandle = sortableHandle(({ children }) => (
+ {children}
+));
+
+const CandidateField = ({ label, description, candIndex, onDelete, onAdd, ...inputProps }) => {
+ const { t } = useTranslation();
+ const [visibled, setVisibility] = useState(false);
+ const toggle = () => setVisibility(!visibled)
+ const test = () => {
+ toggle();
+ onAdd();
+ }
+ const [image, setImage] = useState(null);
+ const [createObjectURL, setCreateObjectURL] = useState(null);
+
+ const uploadToClient = (event) => {
+ if (event.target.files && event.target.files[0]) {
+ const i = event.target.files[0];
+
+ setImage(i);
+ setCreateObjectURL(URL.createObjectURL(i));
+ }
+ };
+ return (
+
+
+
+
+
+ Ajouter un candidat
+
+
+ Ajouter un participant
+Ajoutez une photo, le nom et une description au candidat.
+
+
+
+
+
+
+
+
+
+ Photo (facultatif)
+ +Importer une photo.
format : jpg, png, pdf
+
+
+
+ 
+ - {children}
- {children}
+
+ );
+
+}
+
+
+export default CandidatesField
+
diff --git a/components/form/ConfirmModal.jsx b/components/form/ConfirmModal.jsx
new file mode 100644
index 0000000..fcc23fd
--- /dev/null
+++ b/components/form/ConfirmModal.jsx
@@ -0,0 +1,164 @@
+import {useTranslation} from "next-i18next";
+import {useState} from "react";
+import {
+ faExclamationTriangle,
+ faCheck,
+} from "@fortawesome/free-solid-svg-icons";
+import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from "reactstrap";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+
+const ConfirmModal = ({tabIndex, title, candidates, grades, isTimeLimited, start, finish, emails, restrictResult, className, confirmCallback}) => {
+ const [visibled, setVisibility] = useState(false);
+ const {t} = useTranslation();
+ const toggle = () => setVisibility(!visibled)
+
+ return (
+
+
+ {candidates.map((candidate, index) => {
+ const className = "sortable"
+ return (
+ removeCandidate(index)}
+ onChange={(e) => editCandidate(index, e.target.value)}
+ onKeyPress={(e) => handleKeyPress(e, index)}
+ onAdd={addCandidate}
+ innerRef={candidate.fieldRef}
+ />
+ )
+ })}
+
+
+ Saisissez ici le nom de vos candidats.
+
+
+
+
+ {t("Confirm your vote")}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ConfirmModal
diff --git a/components/form/HelpButton.jsx b/components/form/HelpButton.jsx
new file mode 100644
index 0000000..1d87b53
--- /dev/null
+++ b/components/form/HelpButton.jsx
@@ -0,0 +1,75 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+
+class HelpButton extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ tooltipOpen: false
+ };
+ }
+
+ showTooltip = () => {
+ this.setState({
+ tooltipOpen: true
+ });
+ };
+
+ hideTooltip = () => {
+ this.setState({
+ tooltipOpen: false
+ });
+ };
+
+ render() {
+ return (
+
+
+ {this.state.tooltipOpen ? (
+
+
+ {this.props.children}
+
+ ) : (
+
+ )}
+
+
+
+
+ {t("Question of the election")}
+
+ {title}
+
+ {t("Candidates/Proposals")}
+
+
+
+ -
+ {candidates.map((candidate, i) => {
+ if (candidate.label !== "") {
+ return (
+
- + {candidate.label} + + ); + } else { + return ; + } + })} +
+
+
+ {t("Dates")}
+
+
+ {t("The election will take place from")}{" "}
+
+ {start.toLocaleDateString()}, {t("at")}{" "}
+ {start.toLocaleTimeString()}
+ {" "}
+ {t("to")}{" "}
+
+ {finish.toLocaleDateString()}, {t("at")}{" "}
+ {finish.toLocaleTimeString()}
+
+
+
+ {t("Grades")}
+
+
+ {grades.map((mention, i) => {
+ return i < grades.length ? (
+
+ {mention.label}
+
+ ) : (
+
+ );
+ })}
+
+
+ {t("Voters' list")}
+
+
+ {emails.length > 0 ? (
+ emails.join(", ")
+ ) : (
+
+ {restrictResult ? (
+
+ {t("The form contains no address.")}
+
+
+ {t(
+ "The election will be opened to anyone with the link"
+ )}
+
+
+
+ ) : (
+
+
+
+
+
+
+ + + {t( + "The results page will not be accessible until the end date is reached." + )}{" "} + ({finish.toLocaleDateString()} {t("at")}{" "} + {finish.toLocaleTimeString()}) + +
+
+
+ )}
+
+
+ + {t("Results available at any time")} +
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ + {t("Voting platform")} + {t("Majority Judgment")} +
+
+ Clos il y a 2 jours
+
+ 14 votants
+Quel est le meilleur candidat pour les éléctions présidentielle ?
+ + +
Télécharger les résultats
+
Partagez les résultats
+Quel est le meilleur candidat pour les éléctions présidentielle ?
+
+ Clos il y a 2 jours
+ + +
+ 14 votants
+ +
+ 
+
+
+
+ );
+};
+
+export default Loader;
diff --git a/components/plot.js b/components/plot.js
new file mode 100644
index 0000000..8b326e2
--- /dev/null
+++ b/components/plot.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import plotly from 'plotly.js/dist/plotly';
+import createPlotComponent from 'react-plotly.js/factory';
+
+// const Plot = createPlotComponent(plotly);
+const Plot = require('react-plotly.js').default;
+export default () => (
+
+
+
+