🎨 Configure standardJS
This commit is contained in:
divlo
@ -1,54 +1,54 @@
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
|
||||
import FunctionForm from '../../components/FunctionPage/FunctionForm';
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage';
|
||||
import redirect from '../../utils/redirect';
|
||||
import api from '../../utils/api';
|
||||
import '../../public/css/pages/FunctionComponent.css';
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
|
||||
import FunctionForm from '../../components/FunctionPage/FunctionForm'
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage'
|
||||
import redirect from '../../utils/redirect'
|
||||
import api from '../../utils/api'
|
||||
import '../../public/css/pages/FunctionComponent.css'
|
||||
|
||||
const FunctionTabManager = (props) => {
|
||||
if (props.type === "form") {
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionForm inputsArray={ [...props.utilizationForm || []] } slug={props.slug} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
}
|
||||
|
||||
if (props.type === 'form') {
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionForm inputsArray={[...props.utilizationForm || []]} slug={props.slug} />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionComponent = (props) => (
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{ ...props }
|
||||
tabNames={(props.type === "form") ? ["⚙️ Utilisation", "📝 Article", "📬 Commentaires"] : ["📝 Article", "📬 Commentaires"]}
|
||||
/>
|
||||
);
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{...props}
|
||||
tabNames={(props.type === 'form') ? ['⚙️ Utilisation', '📝 Article', '📬 Commentaires'] : ['📝 Article', '📬 Commentaires']}
|
||||
/>
|
||||
)
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
const { slug } = context.params;
|
||||
return api.get(`/functions/${slug}`)
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'));
|
||||
export async function getServerSideProps (context) {
|
||||
const { slug } = context.params
|
||||
return api.get(`/functions/${slug}`)
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'))
|
||||
}
|
||||
|
||||
export default FunctionComponent;
|
||||
export default FunctionComponent
|
||||
|
||||
@ -1,124 +1,123 @@
|
||||
import { useState } from 'react';
|
||||
import Codepen from "react-codepen-embed";
|
||||
import redirect from '../../utils/redirect';
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage';
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
|
||||
import Loader from '../../components/Loader';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faPlay, faPause, faSync } from '@fortawesome/free-solid-svg-icons';
|
||||
import api from '../../utils/api';
|
||||
import '../../public/css/pages/FunctionComponent.css';
|
||||
import '../../public/css/pages/functions/chronometerTimer.css';
|
||||
import { useState } from 'react'
|
||||
import Codepen from 'react-codepen-embed'
|
||||
import redirect from '../../utils/redirect'
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage'
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
|
||||
import Loader from '../../components/Loader'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faPlay, faPause, faSync } from '@fortawesome/free-solid-svg-icons'
|
||||
import api from '../../utils/api'
|
||||
import '../../public/css/pages/FunctionComponent.css'
|
||||
import '../../public/css/pages/functions/chronometerTimer.css'
|
||||
|
||||
let interval;
|
||||
function convertSeconds(seconds) {
|
||||
return {
|
||||
minutes: Math.floor(seconds / 60),
|
||||
seconds: seconds % 60
|
||||
};
|
||||
let interval
|
||||
function convertSeconds (seconds) {
|
||||
return {
|
||||
minutes: Math.floor(seconds / 60),
|
||||
seconds: seconds % 60
|
||||
}
|
||||
}
|
||||
|
||||
const Chronometer = () => {
|
||||
const [timeLength, setTimeLength] = useState(0) // seconds
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
|
||||
const [timeLength, setTimeLength] = useState(0); // seconds
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
const handlePlayPause = () => {
|
||||
if (isPlaying) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
if (interval) clearInterval(interval);
|
||||
interval = setInterval(() => {
|
||||
setTimeLength((time) => time + 1);
|
||||
}, 1000);
|
||||
}
|
||||
setIsPlaying(!isPlaying);
|
||||
const handlePlayPause = () => {
|
||||
if (isPlaying) {
|
||||
clearInterval(interval)
|
||||
} else {
|
||||
if (interval) clearInterval(interval)
|
||||
interval = setInterval(() => {
|
||||
setTimeLength((time) => time + 1)
|
||||
}, 1000)
|
||||
}
|
||||
setIsPlaying(!isPlaying)
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
if (interval) clearInterval(interval);
|
||||
setIsPlaying(false);
|
||||
setTimeLength(0);
|
||||
}
|
||||
const handleReset = () => {
|
||||
if (interval) clearInterval(interval)
|
||||
setIsPlaying(false)
|
||||
setTimeLength(0)
|
||||
}
|
||||
|
||||
const getFormattedValue = () => {
|
||||
const minutesAndSeconds = convertSeconds(timeLength);
|
||||
const minutes = (minutesAndSeconds.minutes < 100) ? (('0'+minutesAndSeconds.minutes).slice(-2)) : minutesAndSeconds.minutes;
|
||||
const seconds = ('0'+minutesAndSeconds.seconds).slice(-2);
|
||||
return `${minutes}:${seconds}`;
|
||||
}
|
||||
const getFormattedValue = () => {
|
||||
const minutesAndSeconds = convertSeconds(timeLength)
|
||||
const minutes = (minutesAndSeconds.minutes < 100) ? (('0' + minutesAndSeconds.minutes).slice(-2)) : minutesAndSeconds.minutes
|
||||
const seconds = ('0' + minutesAndSeconds.seconds).slice(-2)
|
||||
return `${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="container-fluid">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-sm-24 col-md-12">
|
||||
<div className="Chronometer__container">
|
||||
<div className="Chronometer__item">
|
||||
<div className="Chronomter__row">
|
||||
<div className="Chronometer__time-left">
|
||||
{getFormattedValue()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="Chronometer__item Chronometer__buttons">
|
||||
<div className="Chronomter__row Chronometer__row-button">
|
||||
<button onClick={handlePlayPause} className="Chronometer-btn">
|
||||
<FontAwesomeIcon { ...(isPlaying) ? { icon: faPause } : { icon: faPlay } } />
|
||||
</button>
|
||||
<button onClick={handleReset} className="Chronometer-btn" title="Remettre à zéro ?">
|
||||
<FontAwesomeIcon icon={faSync} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-sm-24 col-md-12'>
|
||||
<div className='Chronometer__container'>
|
||||
<div className='Chronometer__item'>
|
||||
<div className='Chronomter__row'>
|
||||
<div className='Chronometer__time-left'>
|
||||
{getFormattedValue()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='Chronometer__item Chronometer__buttons'>
|
||||
<div className='Chronomter__row Chronometer__row-button'>
|
||||
<button onClick={handlePlayPause} className='Chronometer-btn'>
|
||||
<FontAwesomeIcon {...(isPlaying) ? { icon: faPause } : { icon: faPlay }} />
|
||||
</button>
|
||||
<button onClick={handleReset} className='Chronometer-btn' title='Remettre à zéro ?'>
|
||||
<FontAwesomeIcon icon={faSync} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Pomodoro = () => {
|
||||
return (
|
||||
<div style={{ marginBottom: '50px' }} className="container-fluid">
|
||||
<Codepen hash="vYEbPoB" user="Divlo" height={800} defaultTab="result" preview={false} loader={() => <Loader />} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div style={{ marginBottom: '50px' }} className='container-fluid'>
|
||||
<Codepen hash='vYEbPoB' user='Divlo' height={800} defaultTab='result' preview={false} loader={() => <Loader />} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionTabManager = (props) => {
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<Chronometer />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<Pomodoro />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<Chronometer />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<Pomodoro />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
)
|
||||
}
|
||||
|
||||
const chronometerTimer = (props) => (
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{ ...props }
|
||||
tabNames={["⏰ Chronomètre", "⌛ Pomodoro", "📝 Article", "📬 Commentaires"]}
|
||||
/>
|
||||
);
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{...props}
|
||||
tabNames={['⏰ Chronomètre', '⌛ Pomodoro', '📝 Article', '📬 Commentaires']}
|
||||
/>
|
||||
)
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
return api.get(`/functions/chronometerTimer`)
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'));
|
||||
export async function getServerSideProps (context) {
|
||||
return api.get('/functions/chronometerTimer')
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'))
|
||||
}
|
||||
|
||||
export default chronometerTimer;
|
||||
export default chronometerTimer
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
import { Fragment } from 'react';
|
||||
import HeadTag from '../../components/HeadTag';
|
||||
import FunctionsList from '../../components/FunctionsList/FunctionsList';
|
||||
import HeadTag from '../../components/HeadTag'
|
||||
import FunctionsList from '../../components/FunctionsList/FunctionsList'
|
||||
|
||||
const Functions = () => {
|
||||
return (
|
||||
<>
|
||||
<HeadTag
|
||||
title='Fonctions'
|
||||
description='Liste des fonctions.'
|
||||
image='/images/FunctionProject_icon_small.png'
|
||||
/>
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<HeadTag
|
||||
title="Fonctions"
|
||||
description="Liste des fonctions."
|
||||
image="/images/FunctionProject_icon_small.png"
|
||||
/>
|
||||
|
||||
<FunctionsList>
|
||||
<h1 className="Functions__title">Fonctions</h1>
|
||||
</FunctionsList>
|
||||
</Fragment>
|
||||
);
|
||||
<FunctionsList>
|
||||
<h1 className='Functions__title'>Fonctions</h1>
|
||||
</FunctionsList>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Functions;
|
||||
export default Functions
|
||||
|
||||
@ -1,271 +1,267 @@
|
||||
import { Fragment, useState, useEffect, useContext, useRef, useCallback } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { UserContext } from '../../contexts/UserContext';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
|
||||
import redirect from '../../utils/redirect';
|
||||
import htmlParser from 'html-react-parser';
|
||||
import Loader from '../../components/Loader';
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage';
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
|
||||
import api from '../../utils/api';
|
||||
import copyToClipboard from '../../utils/copyToClipboard';
|
||||
import 'notyf/notyf.min.css';
|
||||
import '../../public/css/pages/FunctionComponent.css';
|
||||
import { useState, useEffect, useContext, useRef, useCallback } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { UserContext } from '../../contexts/UserContext'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||
import redirect from '../../utils/redirect'
|
||||
import htmlParser from 'html-react-parser'
|
||||
import Loader from '../../components/Loader'
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage'
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
|
||||
import api from '../../utils/api'
|
||||
import copyToClipboard from '../../utils/copyToClipboard'
|
||||
import 'notyf/notyf.min.css'
|
||||
import '../../public/css/pages/FunctionComponent.css'
|
||||
|
||||
const GenerateQuote = () => {
|
||||
const [quote, setQuote] = useState({ quote: '', author: '' })
|
||||
|
||||
const [quote, setQuote] = useState({ quote: "", author: "" });
|
||||
useEffect(() => {
|
||||
getRandomQuote()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
getRandomQuote();
|
||||
}, []);
|
||||
const getRandomQuote = async () => {
|
||||
const { data } = await api.post('/functions/randomQuote')
|
||||
setQuote(data)
|
||||
}
|
||||
|
||||
const getRandomQuote = async () => {
|
||||
const { data } = await api.post("/functions/randomQuote");
|
||||
setQuote(data);
|
||||
const handleCopyQuote = () => {
|
||||
let Notyf
|
||||
if (typeof window !== 'undefined') {
|
||||
Notyf = require('notyf')
|
||||
}
|
||||
const notyf = new Notyf.Notyf({
|
||||
duration: 5000
|
||||
})
|
||||
copyToClipboard(`"${quote?.quote}" - ${quote?.author}`)
|
||||
notyf.success('Citation copiée dans le presse-papier!')
|
||||
}
|
||||
|
||||
const handleCopyQuote = () => {
|
||||
let Notyf;
|
||||
if (typeof window != 'undefined') {
|
||||
Notyf = require('notyf');
|
||||
}
|
||||
const notyf = new Notyf.Notyf({
|
||||
duration: 5000
|
||||
});
|
||||
copyToClipboard(`"${quote?.quote}" - ${quote?.author}`);
|
||||
notyf.success('Citation copiée dans le presse-papier!');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<button onClick={getRandomQuote} className="btn btn-dark">Générer une nouvelle citation</button>
|
||||
<button style={{ marginLeft: '15px' }} onClick={handleCopyQuote} className="btn btn-dark">Copier la citation</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: '20px' }} className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<p>" {quote?.quote} "</p>
|
||||
<p>- {quote?.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: '20px' }} className="row justify-content-center">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={`https://twitter.com/intent/tweet?text="${quote?.quote}" - ${quote?.author}&via=Divlo_FR&hashtags=citation,FunctionProject&url=https://function.divlo.fr/functions/randomQuote`}
|
||||
className="btn btn-lg btn-primary"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} style={{ width: '1em' }} /> Twitter
|
||||
</a>
|
||||
</div>
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<button onClick={getRandomQuote} className='btn btn-dark'>Générer une nouvelle citation</button>
|
||||
<button style={{ marginLeft: '15px' }} onClick={handleCopyQuote} className='btn btn-dark'>Copier la citation</button>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
<div style={{ marginTop: '20px' }} className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<p>" {quote?.quote} "</p>
|
||||
<p>- {quote?.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: '20px' }} className='row justify-content-center'>
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href={`https://twitter.com/intent/tweet?text="${quote?.quote}" - ${quote?.author}&via=Divlo_FR&hashtags=citation,FunctionProject&url=https://function.divlo.fr/functions/randomQuote`}
|
||||
className='btn btn-lg btn-primary'
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} style={{ width: '1em' }} /> Twitter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
let pageQuotes = 1;
|
||||
let pageQuotes = 1
|
||||
const QuoteList = () => {
|
||||
const [quotesData, setQuotesData] = useState({ hasMore: true, rows: [], totalItems: 0 })
|
||||
const [isLoadingQuotes, setLoadingQuotes] = useState(true)
|
||||
|
||||
const [quotesData, setQuotesData] = useState({ hasMore: true, rows: [], totalItems: 0 });
|
||||
const [isLoadingQuotes, setLoadingQuotes] = useState(true);
|
||||
// Récupère les citations initiales
|
||||
useEffect(() => {
|
||||
getQuotesData().then((data) => setQuotesData(data))
|
||||
}, [])
|
||||
|
||||
// Récupère les citations initiales
|
||||
useEffect(() => {
|
||||
getQuotesData().then((data) => setQuotesData(data));
|
||||
}, []);
|
||||
const getQuotesData = async () => {
|
||||
setLoadingQuotes(true)
|
||||
const { data } = await api.get(`/quotes?page=${pageQuotes}&limit=20`)
|
||||
setLoadingQuotes(false)
|
||||
return data
|
||||
}
|
||||
|
||||
const getQuotesData = async () => {
|
||||
setLoadingQuotes(true);
|
||||
const { data } = await api.get(`/quotes?page=${pageQuotes}&limit=20`);
|
||||
setLoadingQuotes(false);
|
||||
return data;
|
||||
}
|
||||
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef();
|
||||
const lastQuoteRef = useCallback((node) => {
|
||||
if (isLoadingQuotes) return;
|
||||
if (observer.current) observer.current.disconnect();
|
||||
observer.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && quotesData.hasMore) {
|
||||
pageQuotes += 1;
|
||||
getQuotesData().then((data) => {
|
||||
setQuotesData((oldData) => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows],
|
||||
totalItems: data.totalItems
|
||||
};
|
||||
});
|
||||
});
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef()
|
||||
const lastQuoteRef = useCallback((node) => {
|
||||
if (isLoadingQuotes) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && quotesData.hasMore) {
|
||||
pageQuotes += 1
|
||||
getQuotesData().then((data) => {
|
||||
setQuotesData((oldData) => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows],
|
||||
totalItems: data.totalItems
|
||||
}
|
||||
}, { threshold: 1 });
|
||||
if (node) observer.current.observe(node);
|
||||
}, [isLoadingQuotes, quotesData.hasMore]);
|
||||
})
|
||||
})
|
||||
}
|
||||
}, { threshold: 1 })
|
||||
if (node) observer.current.observe(node)
|
||||
}, [isLoadingQuotes, quotesData.hasMore])
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<h2 style={{ margin: 0 }}>Liste des citations : </h2>
|
||||
<p style={{ marginTop: '5px' }}>Total de {quotesData.totalItems} citations.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row" style={{ marginBottom: '30px' }}>
|
||||
<div className="col-24 table-column">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="table-row" scope="col">Citation/Proverbe</th>
|
||||
<th className="table-row" scope="col">Auteur</th>
|
||||
<th className="table-row" scope="col">Proposée par</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{quotesData.rows.map((currentQuote, index) => {
|
||||
const quoteJSX = (
|
||||
<Fragment>
|
||||
<td className="table-row text-center">{currentQuote.quote}</td>
|
||||
<td className="table-row text-center">{currentQuote.author}</td>
|
||||
<td className="table-row text-center">
|
||||
<Link href={"/users/[name]"} as={`/users/${currentQuote.user.name}`}>
|
||||
<a>{currentQuote.user.name}</a>
|
||||
</Link>
|
||||
</td>
|
||||
</Fragment>
|
||||
);
|
||||
// Si c'est le dernier élément
|
||||
if (quotesData.rows.length === index + 1) {
|
||||
return <tr key={index} ref={lastQuoteRef}>{quoteJSX}</tr>
|
||||
}
|
||||
return <tr key={index}>{quoteJSX}</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<h2 style={{ margin: 0 }}>Liste des citations : </h2>
|
||||
<p style={{ marginTop: '5px' }}>Total de {quotesData.totalItems} citations.</p>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
|
||||
<div className='row' style={{ marginBottom: '30px' }}>
|
||||
<div className='col-24 table-column'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='table-row' scope='col'>Citation/Proverbe</th>
|
||||
<th className='table-row' scope='col'>Auteur</th>
|
||||
<th className='table-row' scope='col'>Proposée par</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{quotesData.rows.map((currentQuote, index) => {
|
||||
const quoteJSX = (
|
||||
<>
|
||||
<td className='table-row text-center'>{currentQuote.quote}</td>
|
||||
<td className='table-row text-center'>{currentQuote.author}</td>
|
||||
<td className='table-row text-center'>
|
||||
<Link href='/users/[name]' as={`/users/${currentQuote.user.name}`}>
|
||||
<a>{currentQuote.user.name}</a>
|
||||
</Link>
|
||||
</td>
|
||||
</>
|
||||
)
|
||||
// Si c'est le dernier élément
|
||||
if (quotesData.rows.length === index + 1) {
|
||||
return <tr key={index} ref={lastQuoteRef}>{quoteJSX}</tr>
|
||||
}
|
||||
return <tr key={index}>{quoteJSX}</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const SuggestQuote = () => {
|
||||
const { isAuth, user } = useContext(UserContext)
|
||||
const [inputState, setInputState] = useState({ quote: '', author: '' })
|
||||
const [message, setMessage] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const { isAuth, user } = useContext(UserContext);
|
||||
const [inputState, setInputState] = useState({ quote: "", author: "" });
|
||||
const [message, setMessage] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const handleChange = (event) => {
|
||||
const inputStateNew = { ...inputState }
|
||||
inputStateNew[event.target.name] = event.target.value
|
||||
setInputState(inputStateNew)
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
const inputStateNew = { ...inputState };
|
||||
inputStateNew[event.target.name] = event.target.value;
|
||||
setInputState(inputStateNew);
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
setIsLoading(true);
|
||||
event.preventDefault();
|
||||
const token = user.token;
|
||||
if (isAuth && token != undefined) {
|
||||
api.post('/quotes', inputState, { headers: { 'Authorization': token } })
|
||||
.then(({ data }) => {
|
||||
setInputState({ quote: "", author: "" });
|
||||
setMessage(`<p class="form-success"><b>Succès:</b> ${data.message}</p>`);
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!isAuth) {
|
||||
return (
|
||||
<p className="text-center">
|
||||
Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour proposer une citation.
|
||||
</p>
|
||||
);
|
||||
const handleSubmit = (event) => {
|
||||
setIsLoading(true)
|
||||
event.preventDefault()
|
||||
const token = user.token
|
||||
if (isAuth && token != null) {
|
||||
api.post('/quotes', inputState, { headers: { Authorization: token } })
|
||||
.then(({ data }) => {
|
||||
setInputState({ quote: '', author: '' })
|
||||
setMessage(`<p class="form-success"><b>Succès:</b> ${data.message}</p>`)
|
||||
setIsLoading(false)
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (!isAuth) {
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<h2 style={{ margin: 0 }}>Proposer une citation : </h2>
|
||||
<p style={{ marginTop: '5px' }}>Vous pouvez proposer des citations, et une fois validé elles seront rajoutés à la liste des citations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: '40px' }} className="row">
|
||||
<div className="col-24">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="quote" className="form-label">Citation :</label>
|
||||
<textarea value={inputState.quote} onChange={handleChange} style={{ height: 'auto' }} id="quote" name="quote" type="text" className="form-control" rows="4" placeholder="La citation..." />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="author" className="form-label">Auteur :</label>
|
||||
<input value={inputState.author} onChange={handleChange} name="author" id="author" type="text" className="form-control" placeholder="L'auteur de la citation..." />
|
||||
</div>
|
||||
<p className='text-center'>
|
||||
Vous devez être <Link href='/users/login'><a>connecté</a></Link> pour proposer une citation.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="form-group text-center">
|
||||
<button type="submit" className="btn btn-dark">Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-result text-center">
|
||||
{
|
||||
(isLoading) ?
|
||||
<Loader />
|
||||
:
|
||||
htmlParser(message)
|
||||
}
|
||||
</div>
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<h2 style={{ margin: 0 }}>Proposer une citation : </h2>
|
||||
<p style={{ marginTop: '5px' }}>Vous pouvez proposer des citations, et une fois validé elles seront rajoutés à la liste des citations.</p>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
<div style={{ marginBottom: '40px' }} className='row'>
|
||||
<div className='col-24'>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label htmlFor='quote' className='form-label'>Citation :</label>
|
||||
<textarea value={inputState.quote} onChange={handleChange} style={{ height: 'auto' }} id='quote' name='quote' type='text' className='form-control' rows='4' placeholder='La citation...' />
|
||||
</div>
|
||||
|
||||
<div className='form-group'>
|
||||
<label htmlFor='author' className='form-label'>Auteur :</label>
|
||||
<input value={inputState.author} onChange={handleChange} name='author' id='author' type='text' className='form-control' placeholder="L'auteur de la citation..." />
|
||||
</div>
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className='form-result text-center'>
|
||||
{
|
||||
(isLoading)
|
||||
? <Loader />
|
||||
: htmlParser(message)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionTabManager = (props) => {
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<GenerateQuote />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<QuoteList />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<SuggestQuote />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<GenerateQuote />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<QuoteList />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<SuggestQuote />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
)
|
||||
}
|
||||
|
||||
const randomQuote = (props) => (
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{ ...props }
|
||||
tabNames={["⚙️ Utilisation", "📜 Liste", "✒️ Proposer", "📝 Article", "📬 Commentaires"]}
|
||||
/>
|
||||
);
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{...props}
|
||||
tabNames={['⚙️ Utilisation', '📜 Liste', '✒️ Proposer', '📝 Article', '📬 Commentaires']}
|
||||
/>
|
||||
)
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
return api.get(`/functions/randomQuote`)
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'));
|
||||
export async function getServerSideProps (context) {
|
||||
return api.get('/functions/randomQuote')
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'))
|
||||
}
|
||||
|
||||
export default randomQuote;
|
||||
export default randomQuote
|
||||
|
||||
@ -1,152 +1,158 @@
|
||||
import { useState, Fragment } from 'react';
|
||||
import redirect from '../../utils/redirect';
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage';
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
|
||||
import Loader from '../../components/Loader';
|
||||
import api from '../../utils/api';
|
||||
import '../../public/css/pages/FunctionComponent.css';
|
||||
import '../../public/css/pages/functions/rightPrice.css';
|
||||
import { useState } from 'react'
|
||||
import redirect from '../../utils/redirect'
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage'
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
|
||||
import Loader from '../../components/Loader'
|
||||
import api from '../../utils/api'
|
||||
import '../../public/css/pages/FunctionComponent.css'
|
||||
import '../../public/css/pages/functions/rightPrice.css'
|
||||
|
||||
const PlayRightPrice = () => {
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [productToGuess, setProductToGuess] = useState({})
|
||||
const [isLoadingProduct, setIsLoadingProduct] = useState(false)
|
||||
const [enteredPrice, setEnteredPrice] = useState('')
|
||||
const [attemptsArray, setAttemptsArray] = useState([])
|
||||
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [productToGuess, setProductToGuess] = useState({});
|
||||
const [isLoadingProduct, setIsLoadingProduct] = useState(false);
|
||||
const [enteredPrice, setEnteredPrice] = useState("");
|
||||
const [attemptsArray, setAttemptsArray] = useState([]);
|
||||
const handlePlaying = () => {
|
||||
setIsPlaying(true)
|
||||
setAttemptsArray([])
|
||||
fetchRandomAmazonProduct()
|
||||
}
|
||||
|
||||
const handlePlaying = () => {
|
||||
setIsPlaying(true);
|
||||
setAttemptsArray([]);
|
||||
fetchRandomAmazonProduct();
|
||||
const fetchRandomAmazonProduct = async () => {
|
||||
setIsLoadingProduct(true)
|
||||
const { data } = await api.post('/functions/rightPrice')
|
||||
setProductToGuess(data)
|
||||
setIsLoadingProduct(false)
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
setEnteredPrice(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const objectTry = {}
|
||||
const guessedPrice = Number((enteredPrice).replace(',', '.').replace(' ', ''))
|
||||
if (!isNaN(guessedPrice)) {
|
||||
objectTry.guessedPrice = guessedPrice
|
||||
objectTry.numberTry = attemptsArray.length + 1
|
||||
if (guessedPrice > productToGuess.price) {
|
||||
objectTry.message = "C'est moins !"
|
||||
} else if (guessedPrice < productToGuess.price) {
|
||||
objectTry.message = "C'est plus !"
|
||||
} else {
|
||||
objectTry.message = 'Bravo, vous avez trouvé le juste prix !'
|
||||
}
|
||||
setAttemptsArray([objectTry, ...attemptsArray])
|
||||
}
|
||||
setEnteredPrice('')
|
||||
}
|
||||
|
||||
const fetchRandomAmazonProduct = async () => {
|
||||
setIsLoadingProduct(true);
|
||||
const { data } = await api.post('/functions/rightPrice');
|
||||
setProductToGuess(data);
|
||||
setIsLoadingProduct(false);
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
setEnteredPrice(event.target.value);
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
const objectTry = {};
|
||||
const guessedPrice = Number((enteredPrice).replace(",", ".").replace(" ", ""));
|
||||
if (!isNaN(guessedPrice)) {
|
||||
objectTry.guessedPrice = guessedPrice;
|
||||
objectTry.numberTry = attemptsArray.length + 1;
|
||||
if (guessedPrice > productToGuess.price) {
|
||||
objectTry.message = "C'est moins !";
|
||||
} else if (guessedPrice < productToGuess.price) {
|
||||
objectTry.message = "C'est plus !";
|
||||
} else {
|
||||
objectTry.message = "Bravo, vous avez trouvé le juste prix !";
|
||||
}
|
||||
setAttemptsArray([objectTry, ...attemptsArray]);
|
||||
}
|
||||
setEnteredPrice("");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
{
|
||||
(!isPlaying) ?
|
||||
<div className="row justify-content-center">
|
||||
<div className="form-group text-center">
|
||||
<button onClick={handlePlaying} type="submit" className="btn btn-dark">Jouer</button>
|
||||
</div>
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
{
|
||||
(!isPlaying)
|
||||
? (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='form-group text-center'>
|
||||
<button onClick={handlePlaying} type='submit' className='btn btn-dark'>Jouer</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
: (isLoadingProduct)
|
||||
? (
|
||||
<div className='row justify-content-center'>
|
||||
<Loader />
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
<div className='row justify-content-center'>
|
||||
<div style={{ marginBottom: '20px' }} className='col-24 text-center'>
|
||||
<h4>{productToGuess.name}</h4>
|
||||
<img src={productToGuess.image} alt={productToGuess.name} className='Product__image' />
|
||||
</div>
|
||||
</div>
|
||||
: (isLoadingProduct) ?
|
||||
<div className="row justify-content-center">
|
||||
<Loader />
|
||||
|
||||
<div className='row justify-content-center'>
|
||||
<div style={{ marginBottom: '25px' }} className='col-24'>
|
||||
{((attemptsArray.length > 0) && attemptsArray[0].message === 'Bravo, vous avez trouvé le juste prix !')
|
||||
? (
|
||||
<div className='form-group text-center'>
|
||||
<button onClick={handlePlaying} type='submit' className='btn btn-dark'>Rejouer ?</button>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='text-center'>
|
||||
<input value={enteredPrice} onChange={handleChange} name='enteredPrice' id='enteredPrice' type='number' step='0.01' className='form-control' autoComplete='off' placeholder='Devinez le prix (prix à virgule possible!)' />
|
||||
</div>
|
||||
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>Deviner</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<Fragment>
|
||||
<div className="row justify-content-center">
|
||||
<div style={{ marginBottom: '20px' }} className="col-24 text-center">
|
||||
<h4>{productToGuess.name}</h4>
|
||||
<img src={productToGuess.image} alt={productToGuess.name} className="Product__image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center">
|
||||
<div style={{ marginBottom: '25px' }} className="col-24">
|
||||
{((attemptsArray.length > 0) && attemptsArray[0].message === "Bravo, vous avez trouvé le juste prix !") ?
|
||||
<div className="form-group text-center">
|
||||
<button onClick={handlePlaying} type="submit" className="btn btn-dark">Rejouer ?</button>
|
||||
</div>
|
||||
:
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="text-center">
|
||||
<input value={enteredPrice} onChange={handleChange} name="enteredPrice" id="enteredPrice" type="number" step="0.01" className="form-control" autoComplete="off" placeholder="Devinez le prix (prix à virgule possible!)" />
|
||||
</div>
|
||||
|
||||
<div className="form-group text-center">
|
||||
<button type="submit" className="btn btn-dark">Deviner</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '30px' }} className="row justify-content-center">
|
||||
{attemptsArray.map((attempt, index) => {
|
||||
const { message } = attempt;
|
||||
let priceResultClass;
|
||||
if (message === "C'est moins !") {
|
||||
priceResultClass = "Price__result-moins";
|
||||
} else if (message === "C'est plus !") {
|
||||
priceResultClass = "Price__result-plus";
|
||||
} else {
|
||||
priceResultClass = "Price__result-success";
|
||||
}
|
||||
return (
|
||||
<div key={index} className={`col-24 Price__result ${priceResultClass}`}>
|
||||
# {attempt.numberTry} ({attempt.guessedPrice}) {message}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
<div style={{ marginBottom: '30px' }} className='row justify-content-center'>
|
||||
{attemptsArray.map((attempt, index) => {
|
||||
const { message } = attempt
|
||||
let priceResultClass
|
||||
if (message === "C'est moins !") {
|
||||
priceResultClass = 'Price__result-moins'
|
||||
} else if (message === "C'est plus !") {
|
||||
priceResultClass = 'Price__result-plus'
|
||||
} else {
|
||||
priceResultClass = 'Price__result-success'
|
||||
}
|
||||
return (
|
||||
<div key={index} className={`col-24 Price__result ${priceResultClass}`}>
|
||||
# {attempt.numberTry} ({attempt.guessedPrice}) {message}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionTabManager = (props) => {
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<PlayRightPrice />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<PlayRightPrice />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
)
|
||||
}
|
||||
|
||||
const rightPrice = (props) => (
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{ ...props }
|
||||
tabNames={["🕹️ Jouer", "📝 Article", "📬 Commentaires"]}
|
||||
/>
|
||||
);
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{...props}
|
||||
tabNames={['🕹️ Jouer', '📝 Article', '📬 Commentaires']}
|
||||
/>
|
||||
)
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
return api.get(`/functions/rightPrice`)
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'));
|
||||
export async function getServerSideProps (context) {
|
||||
return api.get('/functions/rightPrice')
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'))
|
||||
}
|
||||
|
||||
export default rightPrice;
|
||||
export default rightPrice
|
||||
|
||||
@ -1,149 +1,147 @@
|
||||
import { useState, useEffect, useContext } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faTrash, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
import { UserContext } from '../../contexts/UserContext';
|
||||
import redirect from '../../utils/redirect';
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage';
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
|
||||
import api from '../../utils/api';
|
||||
import '../../public/css/pages/FunctionComponent.css';
|
||||
import '../../public/css/pages/functions/toDoList.css';
|
||||
import { useState, useEffect, useContext } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faTrash, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
|
||||
import { UserContext } from '../../contexts/UserContext'
|
||||
import redirect from '../../utils/redirect'
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage'
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
|
||||
import api from '../../utils/api'
|
||||
import '../../public/css/pages/FunctionComponent.css'
|
||||
import '../../public/css/pages/functions/toDoList.css'
|
||||
|
||||
const ManageToDo = () => {
|
||||
const { isAuth, user } = useContext(UserContext)
|
||||
const [inputState, setInputState] = useState({ task: '' })
|
||||
const [tasks, setTasks] = useState([])
|
||||
|
||||
const { isAuth, user } = useContext(UserContext);
|
||||
const [inputState, setInputState] = useState({ task: "" });
|
||||
const [tasks, setTasks] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const getTasks = async () => {
|
||||
const { data } = await api.get('/tasks', { headers: { 'Authorization': user.token } });
|
||||
setTasks(data);
|
||||
}
|
||||
if (isAuth && user.token != undefined) {
|
||||
getTasks();
|
||||
}
|
||||
}, [isAuth]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const inputStateNew = { ...inputState };
|
||||
inputStateNew[event.target.name] = event.target.value;
|
||||
setInputState(inputStateNew);
|
||||
useEffect(() => {
|
||||
const getTasks = async () => {
|
||||
const { data } = await api.get('/tasks', { headers: { Authorization: user.token } })
|
||||
setTasks(data)
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
const { data } = await api.post('/tasks', inputState, { headers: { 'Authorization': user.token } });
|
||||
const newTasks = [...tasks];
|
||||
newTasks.push(data);
|
||||
setTasks(newTasks);
|
||||
setInputState({ task: "" });
|
||||
} catch {}
|
||||
if (isAuth && user.token != null) {
|
||||
getTasks()
|
||||
}
|
||||
}, [isAuth])
|
||||
|
||||
const handleRemoveTask = async (id, index) => {
|
||||
const newTasks = [...tasks];
|
||||
try {
|
||||
await api.delete(`/tasks/${id}`, { headers: { 'Authorization': user.token } });
|
||||
newTasks.splice(index, 1);
|
||||
setTasks(newTasks);
|
||||
} catch {}
|
||||
}
|
||||
const handleChange = (event) => {
|
||||
const inputStateNew = { ...inputState }
|
||||
inputStateNew[event.target.name] = event.target.value
|
||||
setInputState(inputStateNew)
|
||||
}
|
||||
|
||||
const handleEditTask = async (id, index, isCompleted) => {
|
||||
try {
|
||||
await api.put(`/tasks/${id}`, { isCompleted: !isCompleted }, { headers: { 'Authorization': user.token } });
|
||||
const newTasks = [...tasks];
|
||||
const taskObject = newTasks[index];
|
||||
taskObject.isCompleted = !isCompleted;
|
||||
setTasks(newTasks);
|
||||
} catch {}
|
||||
}
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
try {
|
||||
const { data } = await api.post('/tasks', inputState, { headers: { Authorization: user.token } })
|
||||
const newTasks = [...tasks]
|
||||
newTasks.push(data)
|
||||
setTasks(newTasks)
|
||||
setInputState({ task: '' })
|
||||
} catch {}
|
||||
}
|
||||
|
||||
if (!isAuth) {
|
||||
return (
|
||||
<p className="text-center">
|
||||
Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour gérer des "tâches à faire".
|
||||
</p>
|
||||
);
|
||||
}
|
||||
const handleRemoveTask = async (id, index) => {
|
||||
const newTasks = [...tasks]
|
||||
try {
|
||||
await api.delete(`/tasks/${id}`, { headers: { Authorization: user.token } })
|
||||
newTasks.splice(index, 1)
|
||||
setTasks(newTasks)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const handleEditTask = async (id, index, isCompleted) => {
|
||||
try {
|
||||
await api.put(`/tasks/${id}`, { isCompleted: !isCompleted }, { headers: { Authorization: user.token } })
|
||||
const newTasks = [...tasks]
|
||||
const taskObject = newTasks[index]
|
||||
taskObject.isCompleted = !isCompleted
|
||||
setTasks(newTasks)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
if (!isAuth) {
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="text-center">
|
||||
<label htmlFor="task" className="form-label">Ajouter une tâche à faire :</label>
|
||||
<input value={inputState.task} onChange={handleChange} name="task" id="task" type="text" className="form-control" placeholder="(e.g : Apprendre à coder)" />
|
||||
</div>
|
||||
<p className='text-center'>
|
||||
Vous devez être <Link href='/users/login'><a>connecté</a></Link> pour gérer des "tâches à faire".
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="form-group text-center">
|
||||
<button type="submit" className="btn btn-dark">Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
return (
|
||||
<div className='container-fluid'>
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24'>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='text-center'>
|
||||
<label htmlFor='task' className='form-label'>Ajouter une tâche à faire :</label>
|
||||
<input value={inputState.task} onChange={handleChange} name='task' id='task' type='text' className='form-control' placeholder='(e.g : Apprendre à coder)' />
|
||||
</div>
|
||||
|
||||
{(tasks.length > 0) &&
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24 ManageToDo__container">
|
||||
<ul className="ManageToDo__list">
|
||||
{tasks.map((task, index) => {
|
||||
return (
|
||||
<li key={task.id} className={`ManageToDo__list-item ${(task.isCompleted) ? "isCompleted" : ""}`}>
|
||||
<span className="ManageToDo__list-item-span">{task.task}</span>
|
||||
<div>
|
||||
<button className="ManageToDo__task-btn" title="Supprimer de la liste" onClick={() => handleRemoveTask(task.id, index)}>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</button>
|
||||
<button className="ManageToDo__task-btn" onClick={() => handleEditTask(task.id, index, task.isCompleted)}>
|
||||
<FontAwesomeIcon { ...(task.isCompleted) ? { icon: faTimes } : { icon: faCheck } } />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div className='form-group text-center'>
|
||||
<button type='submit' className='btn btn-dark'>Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
|
||||
{(tasks.length > 0) &&
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 ManageToDo__container'>
|
||||
<ul className='ManageToDo__list'>
|
||||
{tasks.map((task, index) => {
|
||||
return (
|
||||
<li key={task.id} className={`ManageToDo__list-item ${(task.isCompleted) ? 'isCompleted' : ''}`}>
|
||||
<span className='ManageToDo__list-item-span'>{task.task}</span>
|
||||
<div>
|
||||
<button className='ManageToDo__task-btn' title='Supprimer de la liste' onClick={() => handleRemoveTask(task.id, index)}>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</button>
|
||||
<button className='ManageToDo__task-btn' onClick={() => handleEditTask(task.id, index, task.isCompleted)}>
|
||||
<FontAwesomeIcon {...(task.isCompleted) ? { icon: faTimes } : { icon: faCheck }} />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionTabManager = (props) => {
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<ManageToDo />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<ManageToDo />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className='FunctionComponent__slide'>
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
)
|
||||
}
|
||||
|
||||
const toDoList = (props) => (
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{ ...props }
|
||||
tabNames={["⚙️ Utilisation", "📝 Article", "📬 Commentaires"]}
|
||||
/>
|
||||
);
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{...props}
|
||||
tabNames={['⚙️ Utilisation', '📝 Article', '📬 Commentaires']}
|
||||
/>
|
||||
)
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
return api.get(`/functions/toDoList`)
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'));
|
||||
export async function getServerSideProps (context) {
|
||||
return api.get('/functions/toDoList')
|
||||
.then((response) => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'))
|
||||
}
|
||||
|
||||
export default toDoList;
|
||||
export default toDoList
|
||||
|
||||
Reference in New Issue
Block a user