parent
15183fe3d4
commit
318cc306d1
@ -1,41 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import * as d3 from 'd3';
|
||||
|
||||
function drawChart(svgRef: React.RefObject<SVGSVGElement>) {
|
||||
const data = [12, 5, 6, 6, 9, 10];
|
||||
const h = 120;
|
||||
const w = 250;
|
||||
const svg = d3.select(svgRef.current);
|
||||
|
||||
svg
|
||||
.attr('width', w)
|
||||
.attr('height', h)
|
||||
.style('margin-top', 50)
|
||||
.style('margin-left', 50);
|
||||
|
||||
svg
|
||||
.selectAll('rect')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('x', (d, i) => i * 40)
|
||||
.attr('y', (d, i) => h - 10 * d)
|
||||
.attr('width', 20)
|
||||
.attr('height', (d, i) => d * 10)
|
||||
.attr('fill', 'steelblue');
|
||||
}
|
||||
|
||||
const Chart: React.FunctionComponent = () => {
|
||||
const svg = React.useRef<SVGSVGElement>(null);
|
||||
React.useEffect(() => {
|
||||
drawChart(svg);
|
||||
}, [svg]);
|
||||
|
||||
return (
|
||||
<div id="chart">
|
||||
<svg ref={svg} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chart;
|
||||
@ -1,17 +0,0 @@
|
||||
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 <div ref={chartArea}></div>;
|
||||
};
|
||||
|
||||
export default ChartWrapper;
|
||||
@ -1,21 +1,12 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import Image from 'next/image';
|
||||
import logoWithText from '../public/logos/logo.svg';
|
||||
import logo from '../public/logos/logo-footer.svg';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
const Logo = ({ title, ...props }) => {
|
||||
const Logo = ({ title = undefined, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const src = title ? logoWithText : logo;
|
||||
return <Image src={src} alt={t('logo.alt')} className="d-block" {...props} />;
|
||||
};
|
||||
|
||||
Logo.propTypes = {
|
||||
title: PropTypes.bool,
|
||||
};
|
||||
|
||||
Logo.defaultProps = {
|
||||
title: true,
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
/**
|
||||
* A toggle button using bootstrap
|
||||
*/
|
||||
|
||||
const Toggle = ({ active, children }) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-toggle ${active ? 'active' : ''}`}
|
||||
data-toggle="button"
|
||||
aria-pressed="false"
|
||||
autocomplete="off"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Toggle.defaultProps = {
|
||||
active: false,
|
||||
};
|
||||
|
||||
export default Toggle;
|
||||
@ -1,26 +0,0 @@
|
||||
/**
|
||||
* This component manages the date for ending the election
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import { Row } from 'reactstrap';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useElection, useElectionDispatch } from './ElectionContext';
|
||||
import Toggle from '@components/Toggle';
|
||||
|
||||
const DateField = () => {
|
||||
const election = useElection();
|
||||
const dispatch = useElectionDispatch();
|
||||
const [toggle, setToggle] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col className="col-auto me-auto">{t('admin.date-limit')}</Col>
|
||||
<Col className="col-auto">
|
||||
<Toggle onChange={setToggle((t) => !t)} />
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default DateField;
|
||||
@ -1,75 +0,0 @@
|
||||
/* 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 (
|
||||
<span className={this.props.className}>
|
||||
<span>
|
||||
{this.state.tooltipOpen ? (
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
zIndex: 10,
|
||||
fontSize: '12px',
|
||||
color: '#000',
|
||||
backgroundColor: '#fff',
|
||||
display: 'inline-block',
|
||||
borderRadius: '0.25rem',
|
||||
boxShadow: '-5px 0 5px rgba(0,0,0,0.5)',
|
||||
maxWidth: '200px',
|
||||
padding: '10px',
|
||||
marginLeft: '-215px',
|
||||
marginTop: '-25px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderTop: '10px solid transparent',
|
||||
borderBottom: '10px solid transparent',
|
||||
borderLeft: '10px solid #fff',
|
||||
marginLeft: '190px',
|
||||
marginTop: '15px',
|
||||
}}
|
||||
></span>
|
||||
{this.props.children}
|
||||
</span>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
</span>
|
||||
<FontAwesomeIcon
|
||||
icon={faQuestionCircle}
|
||||
onMouseOver={this.showTooltip}
|
||||
onMouseOut={this.hideTooltip}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default HelpButton;
|
||||
@ -1,24 +0,0 @@
|
||||
/* eslint react/prop-types: 0 */
|
||||
import React from 'react';
|
||||
import i18n from '../../i18n';
|
||||
|
||||
const Helloasso = (props) => {
|
||||
const locale =
|
||||
i18n.language.substring(0, 2).toLowerCase() === 'fr' ? 'fr' : 'en';
|
||||
const linkHelloAssoBanner =
|
||||
locale === 'fr'
|
||||
? 'https://www.helloasso.com/associations/mieux-voter/formulaires/1/widget'
|
||||
: 'https://www.helloasso.com/associations/mieux-voter/formulaires/1/widget/en';
|
||||
|
||||
return (
|
||||
<a href={linkHelloAssoBanner} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src={'/banner/' + locale + '/helloasso.png'}
|
||||
alt="support us on helloasso"
|
||||
style={{ width: props.width }}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default Helloasso;
|
||||
@ -1,43 +0,0 @@
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
import { faPaypal } from '@fortawesome/free-brands-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
const Paypal = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// FIXME generate a xx_XX string for locale version
|
||||
const { locale } = useRouter();
|
||||
let localeShort = locale.substring(0, 2);
|
||||
let localeComplete =
|
||||
localeShort.toLowerCase() + '_' + localeShort.toUpperCase();
|
||||
if (localeComplete === 'en_EN') {
|
||||
localeComplete = 'en_US';
|
||||
}
|
||||
const pixelLink = `https://www.paypal.com/${localeComplete}/i/scr/pixel.gif`;
|
||||
|
||||
return (
|
||||
<div className="d-inline-block m-auto">
|
||||
<form
|
||||
action="https://www.paypal.com/cgi-bin/webscr"
|
||||
method="post"
|
||||
target="_top"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
title={t('PayPal - The safer, easier way to pay online!')}
|
||||
>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faPaypal} className="mr-2" />
|
||||
{t('Support us !')}
|
||||
</button>
|
||||
<input type="hidden" name="cmd" value="_s-xclick" />
|
||||
<input type="hidden" name="hosted_button_id" value="KB2Z7L9KARS7C" />
|
||||
<img alt="" border="0" src={pixelLink} width="1" height="1" />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Paypal;
|
||||
@ -1,42 +0,0 @@
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
import { faPaypal } from '@fortawesome/free-brands-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
const PaypalNoLogo = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// FIXME generate a xx_XX string for locale version
|
||||
const { locale } = useRouter();
|
||||
let localeShort = locale.substring(0, 2);
|
||||
let localeComplete =
|
||||
localeShort.toLowerCase() + '_' + localeShort.toUpperCase();
|
||||
if (localeComplete === 'en_EN') {
|
||||
localeComplete = 'en_US';
|
||||
}
|
||||
const pixelLink = `https://www.paypal.com/${localeComplete}/i/scr/pixel.gif`;
|
||||
|
||||
return (
|
||||
<div className="d-inline-block m-auto">
|
||||
<form
|
||||
action="https://www.paypal.com/cgi-bin/webscr"
|
||||
method="post"
|
||||
target="_top"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className="addButton"
|
||||
title={t('PayPal - The safer, easier way to pay online!')}
|
||||
>
|
||||
{t('Support us !')}
|
||||
<img src="/arrow-blue.svg" className="mr-2" />
|
||||
</button>
|
||||
<input type="hidden" name="cmd" value="_s-xclick" />
|
||||
<input type="hidden" name="hosted_button_id" value="KB2Z7L9KARS7C" />
|
||||
<img alt="" border="0" src={pixelLink} width="1" height="1" />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaypalNoLogo;
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import HeaderDesktopResult from './HeaderDesktopResult';
|
||||
import HeaderMobileResult from './HeaderMobileResult';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
// import { useMediaQuery } from 'react-responsive';
|
||||
|
||||
export default function HeaderResult() {
|
||||
const isMobile = useMediaQuery({ query: '(max-width: 800px)' });
|
||||
|
||||
if (isMobile) return <HeaderMobileResult />;
|
||||
else return <HeaderDesktopResult />;
|
||||
// const isMobile = useMediaQuery({ query: '(max-width: 800px)' });
|
||||
//
|
||||
// if (isMobile) return <HeaderMobileResult />;
|
||||
return <HeaderDesktopResult />;
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
/* eslint react/prop-types: 0 */
|
||||
import { useState } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export const useBbox = () => {
|
||||
const ref = useRef();
|
||||
const [bbox, setBbox] = useState({});
|
||||
|
||||
const set = () =>
|
||||
setBbox(ref && ref.current ? ref.current.getBoundingClientRect() : {});
|
||||
|
||||
useEffect(() => {
|
||||
set();
|
||||
window.addEventListener('resize', set);
|
||||
return () => window.removeEventListener('resize', set);
|
||||
}, []);
|
||||
|
||||
return [bbox, ref];
|
||||
};
|
||||
@ -1,37 +0,0 @@
|
||||
|
||||
const isValidDate = (date) => date instanceof Date && !isNaN(date);
|
||||
const getOnlyValidDate = (date) => (isValidDate(date) ? date : new Date());
|
||||
|
||||
// Convert a Date object into YYYY-MM-DD
|
||||
const dateToISO = (date) =>
|
||||
getOnlyValidDate(date).toISOString().substring(0, 10);
|
||||
|
||||
/**
|
||||
* Extract only the time from a date.
|
||||
* Date can be a string or a Date.
|
||||
* Return result in timestamp seconds.
|
||||
*/
|
||||
const extractTime = (date) => {
|
||||
if (typeof date === "string") {
|
||||
date = Date.parse(date);
|
||||
}
|
||||
if (!isValidDate) {
|
||||
throw Error("The date is not valid.")
|
||||
}
|
||||
return date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Extract only the day from a date.
|
||||
* Return result in timestamp seconds.
|
||||
*/
|
||||
const extractDay = (date) => {
|
||||
if (typeof date === "string") {
|
||||
date = Date.parse(date);
|
||||
}
|
||||
if (!isValidDate) {
|
||||
throw Error("The date is not valid.")
|
||||
}
|
||||
return date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
|
||||
}
|
||||
Loading…
Reference in new issue