theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

🎨 Configure standardJS

Browse Source
This commit is contained in:
divlo
2020-08-03 12:04:07 +02:00
parent e22e62a749
commit 58f47c7480
120 changed files with 12271 additions and 10025 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
website/pages/404.js
View File

@ -1,22 +1,21 @@
import { Fragment } from 'react';
import Link from 'next/link';
import HeadTag from '../components/HeadTag';
import '../public/css/pages/404.css';
import Link from 'next/link'
import HeadTag from '../components/HeadTag'
import '../public/css/pages/404.css'
const Error404 = () => (
<Fragment>
<HeadTag
title="Erreur 404"
description="Cette page n'existe pas!"
image="/images/error404.png"
/>
<div className="Error404__container">
<h1>Erreur <span className="important">404</span></h1>
<p className="text-center">
Cette page n'existe pas! <Link href={"/"}><a>Revenir à la page d'accueil ?</a></Link>
</p>
</div>
</Fragment>
);
<>
<HeadTag
title='Erreur 404'
description="Cette page n'existe pas!"
image='/images/error404.png'
/>
<div className='Error404__container'>
<h1>Erreur <span className='important'>404</span></h1>
<p className='text-center'>
Cette page n'existe pas! <Link href='/'><a>Revenir à la page d'accueil ?</a></Link>
</p>
</div>
</>
)
export default Error404;
export default Error404

44
website/pages/_app.js
View File

@ -1,33 +1,33 @@
/* Libraries Imports */
import Router from 'next/router'
import NProgress from 'nprogress';
import NProgress from 'nprogress'
/* Components Imports */
import Header from '../components/Header/Header';
import Footer from '../components/Footer/Footer';
import Header from '../components/Header/Header'
import Footer from '../components/Footer/Footer'
/* Contexts Imports */
import UserContextProvider from '../contexts/UserContext';
import UserContextProvider from '../contexts/UserContext'
/* CSS Imports */
import '../public/fonts/Montserrat/Montserrat.css';
import '../public/css/normalize.css';
import '../public/css/grid.css';
import '../public/css/general.css';
import '../public/css/nprogress.css';
import '../public/fonts/Montserrat/Montserrat.css'
import '../public/css/normalize.css'
import '../public/css/grid.css'
import '../public/css/general.css'
import '../public/css/nprogress.css'
Router.events.on('routeChangeStart', () => NProgress.start())
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())
Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());
const App = ({ Component, pageProps }) => (
<UserContextProvider>
<Header />
<div className="content container-fluid">
<Component {...pageProps} />
</div>
<Footer />
</UserContextProvider>
);
<UserContextProvider>
<Header />
<div className='content container-fluid'>
<Component {...pageProps} />
</div>
<Footer />
</UserContextProvider>
)
export default App;
export default App

46
website/pages/_document.js
View File

@ -1,28 +1,28 @@
import Document, { Html, Head, Main, NextScript } from "next/document";
import Loader from '../components/Loader';
import Document, { Html, Head, Main, NextScript } from 'next/document'
import Loader from '../components/Loader'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
static async getInitialProps (ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="fr">
<Head />
<body>
<div id="preloader">
<Loader />
</div>
<div className="isLoading">
<Main />
</div>
<NextScript />
</body>
</Html>
);
}
render () {
return (
<Html lang='fr'>
<Head />
<body>
<div id='preloader'>
<Loader />
</div>
<div className='isLoading'>
<Main />
</div>
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument;
export default MyDocument

81
website/pages/about.js
View File

@ -1,49 +1,48 @@
import { Fragment } from 'react';
import axios from 'axios'
import ReactMarkdown from 'react-markdown/with-html';
import HeadTag from '../components/HeadTag';
import ReactMarkdown from 'react-markdown/with-html'
import HeadTag from '../components/HeadTag'
const About = (props) => {
return (
<Fragment>
<HeadTag
title="À-propos - FunctionProject"
description="À-propos de FunctionProject."
return (
<>
<HeadTag
title='À-propos - FunctionProject'
description='À-propos de FunctionProject.'
/>
<div className='container'>
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h1 style={{ marginBottom: 0, paddingTop: '20px' }}>À-propos</h1>
<p style={{ marginTop: '5px', borderBottom: '1px solid var(--important)', paddingBottom: '30px' }}>(README.md du <a target='_blank' rel='noopener noreferrer' href='https://github.com/Divlo/FunctionProject'>GitHub</a>)</p>
</div>
</div>
<div style={{ marginBottom: '30px' }} className='row'>
<div className='col-24'>
<ReactMarkdown
source={props.data}
escapeHtml={false}
linkTarget='_blank'
transformLinkUri={(uri) => {
if (uri.startsWith('./')) {
return `https://github.com/Divlo/FunctionProject/blob/master/${uri.slice(2)}`
}
return uri
}}
/>
<div className="container">
<div className="row justify-content-center">
<div className="col-24 text-center">
<h1 style={{ marginBottom: 0, paddingTop: "20px" }}>À-propos</h1>
<p style={{ marginTop: '5px', borderBottom: '1px solid var(--important)', paddingBottom: '30px' }}>(README.md du <a target="_blank" rel="noopener noreferrer" href="https://github.com/Divlo/FunctionProject">GitHub</a>)</p>
</div>
</div>
<div style={{ marginBottom: '30px' }} className="row">
<div className="col-24">
<ReactMarkdown
source={props.data}
escapeHtml={false}
linkTarget="_blank"
transformLinkUri={(uri) => {
if (uri.startsWith('./')) {
return `https://github.com/Divlo/FunctionProject/blob/master/${uri.slice(2)}`;
}
return uri;
}}
/>
</div>
</div>
</div>
</Fragment>
);
</div>
</div>
</div>
</>
)
}
export async function getServerSideProps(_context) {
const { data } = await axios.get('https://raw.githubusercontent.com/Divlo/FunctionProject/master/README.md');
return {
props: { data }
};
export async function getServerSideProps (_context) {
const { data } = await axios.get('https://raw.githubusercontent.com/Divlo/FunctionProject/master/README.md')
return {
props: { data }
}
}
export default About;
export default About

153
website/pages/admin/[slug].js
View File

@ -1,88 +1,87 @@
import { Fragment, useState } from 'react';
import Cookies from "universal-cookie";
import SwipeableViews from 'react-swipeable-views';
import HeadTag from '../../components/HeadTag';
import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction';
import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunction';
import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction';
import redirect from '../../utils/redirect';
import api from '../../utils/api';
import { API_URL } from '../../utils/config/config';
import '../../components/FunctionPage/FunctionTabs.css';
import '../../public/css/pages/admin.css';
import { useState } from 'react'
import Cookies from 'universal-cookie'
import SwipeableViews from 'react-swipeable-views'
import HeadTag from '../../components/HeadTag'
import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction'
import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunction'
import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction'
import redirect from '../../utils/redirect'
import api from '../../utils/api'
import { API_URL } from '../../utils/config/config'
import '../../components/FunctionPage/FunctionTabs.css'
import '../../public/css/pages/admin.css'
const AdminFunctionComponent = (props) => {
const [slideIndex, setSlideIndex] = useState(0)
const [slideIndex, setSlideIndex] = useState(0);
const handleDeleteFunction = async () => {
await api.delete(`/admin/functions/${props.functionInfo.id}`, { headers: { Authorization: props.user.token } })
redirect({}, '/admin')
}
const handleDeleteFunction = async () => {
await api.delete(`/admin/functions/${props.functionInfo.id}`, { headers: { 'Authorization': props.user.token } });
redirect({}, '/admin');
}
return (
<>
<HeadTag title={props.functionInfo.title} description={props.functionInfo.description} image={API_URL + props.functionInfo.image} />
return (
<Fragment>
<HeadTag title={props.functionInfo.title} description={props.functionInfo.description} image={API_URL + props.functionInfo.image} />
<div className='container-fluid'>
<div className='container'>
<div className='row justify-content-center'>
<ul className='FunctionTabs__nav'>
<li className='FunctionTabs__nav-item'>
<a onClick={() => setSlideIndex(0)} className={`FunctionTabs__nav-link ${(slideIndex === 0) && 'FunctionTabs__nav-link-active'}`}>✒️ Modifier</a>
</li>
<li className='FunctionTabs__nav-item'>
<a onClick={() => setSlideIndex(1)} className={`FunctionTabs__nav-link ${(slideIndex === 1) && 'FunctionTabs__nav-link-active'}`}>📝 Article</a>
</li>
<li className='FunctionTabs__nav-item'>
<a onClick={() => setSlideIndex(2)} className={`FunctionTabs__nav-link ${(slideIndex === 2) && 'FunctionTabs__nav-link-active'}`}>⚙️ Utilisation</a>
</li>
</ul>
</div>
</div>
<div className="container-fluid">
<div className="container">
<div className="row justify-content-center">
<ul className="FunctionTabs__nav">
<li className="FunctionTabs__nav-item">
<a onClick={() => setSlideIndex(0)} className={`FunctionTabs__nav-link ${(slideIndex === 0) && "FunctionTabs__nav-link-active"}`}>✒️ Modifier</a>
</li>
<li className="FunctionTabs__nav-item">
<a onClick={() => setSlideIndex(1)} className={`FunctionTabs__nav-link ${(slideIndex === 1) && "FunctionTabs__nav-link-active"}`}>📝 Article</a>
</li>
<li className="FunctionTabs__nav-item">
<a onClick={() => setSlideIndex(2)} className={`FunctionTabs__nav-link ${(slideIndex === 2) && "FunctionTabs__nav-link-active"}`}>⚙️ Utilisation</a>
</li>
</ul>
</div>
</div>
<div className="container-fluid">
<SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex}>
<div className="Admin__Function-slide">
<AddEditFunction
defaultInputState={{ ...props.functionInfo }}
user={props.user}
isEditing
/>
<div style={{ marginBottom: '30px' }} className="text-center">
<button onClick={handleDeleteFunction} className="btn btn-dark">Supprimer la fonction</button>
</div>
</div>
<div className="Admin__Function-slide">
<EditArticleFunction { ...props } />
</div>
<div className="Admin__Function-slide">
<EditFormFunction { ...props } />
</div>
</SwipeableViews>
</div>
<div className='container-fluid'>
<SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex}>
<div className='Admin__Function-slide'>
<AddEditFunction
defaultInputState={{ ...props.functionInfo }}
user={props.user}
isEditing
/>
<div style={{ marginBottom: '30px' }} className='text-center'>
<button onClick={handleDeleteFunction} className='btn btn-dark'>Supprimer la fonction</button>
</div>
</div>
</Fragment>
);
<div className='Admin__Function-slide'>
<EditArticleFunction {...props} />
</div>
<div className='Admin__Function-slide'>
<EditFormFunction {...props} />
</div>
</SwipeableViews>
</div>
</div>
</>
)
}
export async function getServerSideProps(context) {
const cookies = new Cookies(context.req.headers.cookie);
const user = { ...cookies.get('user') };
const { slug } = context.params;
if (!user.isAdmin) {
return redirect(context, '/404');
}
return api.get(`/admin/functions/${slug}`, { headers: { 'Authorization': user.token } })
.then((response) => {
return {
props: {
user,
functionInfo: response.data
}
};
})
.catch(() => redirect(context, '/404'));
export async function getServerSideProps (context) {
const cookies = new Cookies(context.req.headers.cookie)
const user = { ...cookies.get('user') }
const { slug } = context.params
if (!user.isAdmin) {
return redirect(context, '/404')
}
return api.get(`/admin/functions/${slug}`, { headers: { Authorization: user.token } })
.then((response) => {
return {
props: {
user,
functionInfo: response.data
}
}
})
.catch(() => redirect(context, '/404'))
}
export default AdminFunctionComponent;
export default AdminFunctionComponent

130
website/pages/admin/index.js
View File

@ -1,76 +1,76 @@
import Link from 'next/link';
import { Fragment, useState } from 'react';
import Cookies from "universal-cookie";
import HeadTag from '../../components/HeadTag';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import Modal from '../../components/Modal';
import FunctionsList from '../../components/FunctionsList/FunctionsList';
import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction';
import redirect from '../../utils/redirect';
import '../../public/css/pages/admin.css';
import Link from 'next/link'
import { useState } from 'react'
import Cookies from 'universal-cookie'
import HeadTag from '../../components/HeadTag'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import Modal from '../../components/Modal'
import FunctionsList from '../../components/FunctionsList/FunctionsList'
import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction'
import redirect from '../../utils/redirect'
import '../../public/css/pages/admin.css'
const Admin = (props) => {
const [isOpen, setIsOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false);
const toggleModal = () => setIsOpen(!isOpen)
const toggleModal = () => setIsOpen(!isOpen);
return (
<>
<HeadTag title='Admin - FunctionProject' description="Page d'administration de FunctionProject." />
return (
<Fragment>
<HeadTag title="Admin - FunctionProject" description="Page d'administration de FunctionProject." />
{/* Création d'une fonction */}
{(isOpen)
? (
<Modal toggleModal={toggleModal}>
<div className='Admin__Modal__container container-fluid'>
<div className='Admin__Modal__row row'>
<div className='col-24'>
<div className='Admin__Modal-top-container row'>
<div className='col-24'>
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className='text-center'>Crée une nouvelle fonction</h2>
</div>
</div>
</div>
{/* Création d'une fonction */}
{(isOpen) ?
<Modal toggleModal={toggleModal}>
<div className="Admin__Modal__container container-fluid">
<div className="Admin__Modal__row row">
<div className="col-24">
<div className="Admin__Modal-top-container row">
<div className="col-24">
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className="text-center">Crée une nouvelle fonction</h2>
</div>
</div>
</div>
<div className='col-24'>
<AddEditFunction defaultInputState={{ type: 'form' }} {...props} />
</div>
</div>
</div>
</Modal>
)
<div className="col-24">
<AddEditFunction defaultInputState={{ type: 'form' }} { ...props } />
</div>
</div>
</div>
</Modal>
:
<FunctionsList isAdmin token={props.user.token}>
<div className="col-24">
<h1 className="Functions__title">Administration</h1>
<button onClick={toggleModal} style={{ margin: '0 0 40px 0' }} className="btn btn-dark">Crée une nouvelle fonction</button>
<Link href={"/admin/manageCategories"}>
<button style={{ margin: '0 0 0 20px' }} className="btn btn-dark">Gérer les catégories</button>
</Link>
<Link href={"/admin/manageQuotes"}>
<button style={{ margin: '0 0 0 20px' }} className="btn btn-dark">Gérer les citations</button>
</Link>
</div>
</FunctionsList>
}
</Fragment>
);
: (
<FunctionsList isAdmin token={props.user.token}>
<div className='col-24'>
<h1 className='Functions__title'>Administration</h1>
<button onClick={toggleModal} style={{ margin: '0 0 40px 0' }} className='btn btn-dark'>Crée une nouvelle fonction</button>
<Link href='/admin/manageCategories'>
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>Gérer les catégories</button>
</Link>
<Link href='/admin/manageQuotes'>
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>Gérer les citations</button>
</Link>
</div>
</FunctionsList>
)}
</>
)
}
export async function getServerSideProps(context) {
const cookies = new Cookies(context.req.headers.cookie);
const user = { ...cookies.get('user') };
if (!user.isAdmin) {
return redirect(context, '/404');
}
return {
props: { user }
};
export async function getServerSideProps (context) {
const cookies = new Cookies(context.req.headers.cookie)
const user = { ...cookies.get('user') }
if (!user.isAdmin) {
return redirect(context, '/404')
}
return {
props: { user }
}
}
export default Admin;
export default Admin

332
website/pages/admin/manageCategories.js
View File

@ -1,187 +1,187 @@
import { Fragment, useState } from 'react';
import Cookies from "universal-cookie";
import date from 'date-and-time';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPen, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons';
import { PhotoshopPicker } from 'react-color';
import HeadTag from '../../components/HeadTag';
import Modal from '../../components/Modal';
import redirect from '../../utils/redirect';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import useAPI from '../../hooks/useAPI';
import api from '../../utils/api';
import '../../public/css/pages/admin.css';
import { useState } from 'react'
import Cookies from 'universal-cookie'
import date from 'date-and-time'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPen, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
import { PhotoshopPicker } from 'react-color'
import HeadTag from '../../components/HeadTag'
import Modal from '../../components/Modal'
import redirect from '../../utils/redirect'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import useAPI from '../../hooks/useAPI'
import api from '../../utils/api'
import '../../public/css/pages/admin.css'
const defaultCategoryState = { name: "", color: "#ffffff" };
const defaultCategoryState = { name: '', color: '#ffffff' }
const AddEditCategory = (props) => {
const [inputState, setInputState] = useState(props.defaultInputState)
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [inputState, setInputState] = useState(props.defaultInputState);
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleChange = (event, isTypeCheck = false) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = (event.target.files != null) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value
setInputState(inputStateNew)
}
const handleChange = (event, isTypeCheck = false) => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = (event.target.files != undefined) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value;
setInputState(inputStateNew);
}
const apiCallCategory = () => {
if (props.isEditing) return api.put(`/admin/categories/${inputState.id}`, { name: inputState.name, color: inputState.color }, { headers: { Authorization: props.user.token } })
return api.post('/admin/categories', inputState, { headers: { Authorization: props.user.token } })
}
const apiCallCategory = () => {
if (props.isEditing) return api.put(`/admin/categories/${inputState.id}`, { name: inputState.name, color: inputState.color }, { headers: { 'Authorization': props.user.token } });
return api.post('/admin/categories', inputState, { headers: { 'Authorization': props.user.token } });
}
const handleSubmit = (event) => {
event.preventDefault()
setIsLoading(true)
apiCallCategory()
.then(() => {
setIsLoading(false)
window.location.reload(true)
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
const handleSubmit = (event) => {
event.preventDefault();
setIsLoading(true);
apiCallCategory()
.then(() => {
setIsLoading(false);
window.location.reload(true);
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
return (
<div className="Admin__Modal__container container-fluid">
<div className="Admin__Modal__row row">
<div className="col-24">
<div className="Admin__Modal-top-container row">
<div className="col-24">
<span onClick={props.toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className="text-center">{(props.isEditing) ? "Modifier la catégorie" : "Crée une nouvelle catégorie"}</h2>
</div>
</div>
</div>
<div className="col-24">
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Nom :</label>
<input value={inputState.name} onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="(e.g : ✨ Utilitaires)" />
</div>
<div className="form-group">
<label className="form-label" htmlFor="title">Couleur :</label>
<PhotoshopPicker color={inputState.color} onChange={(color) => handleChange({ target: { name: "color", value: color.hex } })} />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
return (
<div className='Admin__Modal__container container-fluid'>
<div className='Admin__Modal__row row'>
<div className='col-24'>
<div className='Admin__Modal-top-container row'>
<div className='col-24'>
<span onClick={props.handleToggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className='text-center'>{(props.isEditing) ? 'Modifier la catégorie' : 'Crée une nouvelle catégorie'}</h2>
</div>
</div>
</div>
);
<div className='col-24'>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Nom :</label>
<input value={inputState.name} onChange={handleChange} type='text' name='name' id='name' className='form-control' placeholder='(e.g : ✨ Utilitaires)' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='title'>Couleur :</label>
<PhotoshopPicker color={inputState.color} onChange={(color) => handleChange({ target: { name: 'color', value: color.hex } })} />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</div>
</div>
</div>
)
}
const manageCategories = (props) => {
const [, categories] = useAPI('/categories')
const [isOpen, setIsOpen] = useState(false)
const [isEditing, setIsEditing] = useState(false)
const [defaultInputState, setDefaultInputState] = useState(defaultCategoryState)
const [, categories] = useAPI('/categories');
const [isOpen, setIsOpen] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const [defaultInputState, setDefaultInputState] = useState(defaultCategoryState);
const toggleModal = () => setIsOpen(!isOpen)
const toggleModal = () => setIsOpen(!isOpen);
const handleRemoveCategory = async (categoryId) => {
try {
await api.delete(`/admin/categories/${categoryId}`, { headers: { Authorization: props.user.token } })
window.location.reload(true)
} catch {}
}
const handleRemoveCategory = async (categoryId) => {
try {
await api.delete(`/admin/categories/${categoryId}`, { headers: { 'Authorization': props.user.token } });
window.location.reload(true);
} catch {}
}
const handleEditCategory = (categoryInfo) => {
setDefaultInputState(categoryInfo)
setIsEditing(true)
toggleModal()
}
const handleEditCategory = (categoryInfo) => {
setDefaultInputState(categoryInfo);
setIsEditing(true);
toggleModal();
}
return (
<>
<HeadTag title='Admin - FunctionProject' description="Page d'administration de FunctionProject. Gérer les catégories." />
return (
<Fragment>
<HeadTag title="Admin - FunctionProject" description="Page d'administration de FunctionProject. Gérer les catégories." />
{
(isOpen) ?
<Modal>
<AddEditCategory toggleModal={toggleModal} defaultInputState={defaultInputState} { ...props } isEditing={isEditing} />
</Modal>
:
<div className="container-fluid text-center">
<div className="row justify-content-center">
<div className="col-24">
<h1>Gérer les catégories</h1>
<button onClick={() => { setDefaultInputState(defaultCategoryState); toggleModal(); setIsEditing(false); }} style={{ margin: '0 0 40px 0' }} className="btn btn-dark">Ajouter une catégorie</button>
</div>
</div>
<div className="row justify-content-center">
<div className="container-fluid">
<div className="col-24 table-column">
<table className="table">
<thead>
<tr>
<th className="table-row" scope="col">id</th>
<th className="table-row" scope="col">name</th>
<th className="table-row" scope="col">color</th>
<th className="table-row" scope="col">createdAt</th>
<th className="table-row" scope="col">updatedAt</th>
<th className="table-row" scope="col">Modifier</th>
<th className="table-row" scope="col">Supprimer</th>
</tr>
</thead>
<tbody>
{categories.map((category) => {
return (
<tr key={category.id} style={{ backgroundColor: category.color }}>
<td className="table-row">{category.id}</td>
<td className="table-row">{category.name}</td>
<td className="table-row">{category.color}</td>
<td className="table-row">{date.format(new Date(category.createdAt), 'DD/MM/YYYY à HH:mm', true)}</td>
<td className="table-row">{date.format(new Date(category.updatedAt), 'DD/MM/YYYY à HH:mm', true)}</td>
<td style={{ cursor: 'pointer' }} onClick={() => handleEditCategory({ name: category.name, color: category.color, id: category.id })}>
<FontAwesomeIcon icon={faPen} style={{ width: '1.5rem' }} />
</td>
<td style={{ cursor: 'pointer' }} onClick={() => handleRemoveCategory(category.id)}>
<FontAwesomeIcon icon={faTrash} style={{ width: '1.5rem' }} />
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
}
</Fragment>
);
{
(isOpen)
? (
<Modal>
<AddEditCategory handleToggleModal={toggleModal} defaultInputState={defaultInputState} {...props} isEditing={isEditing} />
</Modal>
)
: (
<div className='container-fluid text-center'>
<div className='row justify-content-center'>
<div className='col-24'>
<h1>Gérer les catégories</h1>
<button onClick={() => { setDefaultInputState(defaultCategoryState); toggleModal(); setIsEditing(false) }} style={{ margin: '0 0 40px 0' }} className='btn btn-dark'>Ajouter une catégorie</button>
</div>
</div>
<div className='row justify-content-center'>
<div className='container-fluid'>
<div className='col-24 table-column'>
<table className='table'>
<thead>
<tr>
<th className='table-row' scope='col'>id</th>
<th className='table-row' scope='col'>name</th>
<th className='table-row' scope='col'>color</th>
<th className='table-row' scope='col'>createdAt</th>
<th className='table-row' scope='col'>updatedAt</th>
<th className='table-row' scope='col'>Modifier</th>
<th className='table-row' scope='col'>Supprimer</th>
</tr>
</thead>
<tbody>
{categories.map((category) => {
return (
<tr key={category.id} style={{ backgroundColor: category.color }}>
<td className='table-row'>{category.id}</td>
<td className='table-row'>{category.name}</td>
<td className='table-row'>{category.color}</td>
<td className='table-row'>{date.format(new Date(category.createdAt), 'DD/MM/YYYY à HH:mm', true)}</td>
<td className='table-row'>{date.format(new Date(category.updatedAt), 'DD/MM/YYYY à HH:mm', true)}</td>
<td style={{ cursor: 'pointer' }} onClick={() => handleEditCategory({ name: category.name, color: category.color, id: category.id })}>
<FontAwesomeIcon icon={faPen} style={{ width: '1.5rem' }} />
</td>
<td style={{ cursor: 'pointer' }} onClick={() => handleRemoveCategory(category.id)}>
<FontAwesomeIcon icon={faTrash} style={{ width: '1.5rem' }} />
</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
</>
)
}
export async function getServerSideProps(context) {
const cookies = new Cookies(context.req.headers.cookie);
const user = { ...cookies.get('user') };
if (!user.isAdmin) {
return redirect(context, '/404');
}
return {
props: { user }
};
export async function getServerSideProps (context) {
const cookies = new Cookies(context.req.headers.cookie)
const user = { ...cookies.get('user') }
if (!user.isAdmin) {
return redirect(context, '/404')
}
return {
props: { user }
}
}
export default manageCategories;
export default manageCategories

217
website/pages/admin/manageQuotes.js
View File

@ -1,122 +1,121 @@
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
import Cookies from "universal-cookie";
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck, faTrash } from '@fortawesome/free-solid-svg-icons';
import redirect from '../../utils/redirect';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import '../../public/css/pages/admin.css';
import { useState, useEffect, useRef, useCallback } from 'react'
import Cookies from 'universal-cookie'
import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheck, faTrash } from '@fortawesome/free-solid-svg-icons'
import redirect from '../../utils/redirect'
import HeadTag from '../../components/HeadTag'
import api from '../../utils/api'
import '../../public/css/pages/admin.css'
const manageQuotes = (props) => {
const [quotesData, setQuotesData] = useState({ hasMore: true, rows: [], totalItems: 0 })
const [isLoadingQuotes, setLoadingQuotes] = useState(true)
const [pageQuotes, setPageQuotes] = useState(1)
const [quotesData, setQuotesData] = useState({ hasMore: true, rows: [], totalItems: 0 });
const [isLoadingQuotes, setLoadingQuotes] = useState(true);
const [pageQuotes, setPageQuotes] = useState(1);
// Récupère les citations si la page change
useEffect(() => {
getQuotesData()
}, [pageQuotes])
// Récupère les citations si la page change
useEffect(() => {
getQuotesData();
}, [pageQuotes]);
const getQuotesData = async () => {
setLoadingQuotes(true)
const { data } = await api.get(`/admin/quotes?limit=20page=${pageQuotes}`, { headers: { Authorization: props.user.token } })
setQuotesData({
hasMore: data.hasMore,
rows: [...quotesData.rows, ...data.rows],
totalItems: data.totalItems
})
setLoadingQuotes(false)
}
const getQuotesData = async () => {
setLoadingQuotes(true);
const { data } = await api.get(`/admin/quotes?limit=20page=${pageQuotes}`, { headers: { 'Authorization': props.user.token } });
setQuotesData({
hasMore: data.hasMore,
rows: [...quotesData.rows, ...data.rows],
totalItems: data.totalItems
});
setLoadingQuotes(false);
}
// 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) {
setPageQuotes(pageQuotes + 1)
}
}, { threshold: 1 })
if (node) observer.current.observe(node)
}, [isLoadingQuotes, quotesData.hasMore])
// 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) {
setPageQuotes(pageQuotes + 1);
}
}, { threshold: 1 });
if (node) observer.current.observe(node);
}, [isLoadingQuotes, quotesData.hasMore]);
const handleValidationQuote = async (id, isValid) => {
try {
await api.put(`/admin/quotes/${id}`, { isValid }, { headers: { Authorization: props.user.token } })
window.location.reload(true)
} catch {}
}
const handleValidationQuote = async (id, isValid) => {
try {
await api.put(`/admin/quotes/${id}`, { isValid }, { headers: { 'Authorization': props.user.token } });
window.location.reload(true);
} catch {}
}
return (
<>
<HeadTag title='Admin - FunctionProject' description="Page d'administration de FunctionProject. Gérer les citations." />
return (
<Fragment>
<HeadTag title="Admin - FunctionProject" description="Page d'administration de FunctionProject. Gérer les citations." />
<div className='container-fluid'>
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>Liste des citations (non validées) : </h2>
<p style={{ marginTop: '5px' }}>Total de {quotesData.totalItems} citations.</p>
</div>
</div>
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2>Liste des citations (non validées) : </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 className="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>
<th className="table-row" scope="col">Valider</th>
<th className="table-row" scope="col">Supprimer</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>
<td onClick={() => handleValidationQuote(currentQuote.id, true)} className="table-row text-center" style={{ cursor: 'pointer' }}>
<FontAwesomeIcon icon={faCheck} style={{ width: '1.5rem' }} />
</td>
<td onClick={() => handleValidationQuote(currentQuote.id, false)} className="table-row text-center" style={{ cursor: 'pointer' }}>
<FontAwesomeIcon icon={faTrash} style={{ width: '1.5rem' }} />
</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>
</div>
</Fragment>
);
<div className='row' style={{ marginBottom: '30px' }}>
<div className='col-24 table-column'>
<table className='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>
<th className='table-row' scope='col'>Valider</th>
<th className='table-row' scope='col'>Supprimer</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>
<td onClick={() => handleValidationQuote(currentQuote.id, true)} className='table-row text-center' style={{ cursor: 'pointer' }}>
<FontAwesomeIcon icon={faCheck} style={{ width: '1.5rem' }} />
</td>
<td onClick={() => handleValidationQuote(currentQuote.id, false)} className='table-row text-center' style={{ cursor: 'pointer' }}>
<FontAwesomeIcon icon={faTrash} style={{ width: '1.5rem' }} />
</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>
</>
)
}
export async function getServerSideProps(context) {
const cookies = new Cookies(context.req.headers.cookie);
const user = { ...cookies.get('user') };
if (!user.isAdmin) {
return redirect(context, '/404');
}
return {
props: { user }
};
export async function getServerSideProps (context) {
const cookies = new Cookies(context.req.headers.cookie)
const user = { ...cookies.get('user') }
if (!user.isAdmin) {
return redirect(context, '/404')
}
return {
props: { user }
}
}
export default manageQuotes;
export default manageQuotes

90
website/pages/functions/[slug].js
View File

@ -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

199
website/pages/functions/chronometerTimer.js
View File

@ -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

32
website/pages/functions/index.js
View File

@ -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

466
website/pages/functions/randomQuote.js
View File

@ -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

274
website/pages/functions/rightPrice.js
View File

@ -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

250
website/pages/functions/toDoList.js
View File

@ -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

121
website/pages/index.js
View File

@ -1,70 +1,69 @@
import { Fragment, useEffect } from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import Link from 'next/link';
import HeadTag from '../components/HeadTag';
import Loader from '../components/Loader';
import '../public/css/pages/index.css';
import { useEffect } from 'react'
import SwipeableViews from 'react-swipeable-views'
import { autoPlay } from 'react-swipeable-views-utils'
import Link from 'next/link'
import HeadTag from '../components/HeadTag'
import Loader from '../components/Loader'
import '../public/css/pages/index.css'
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const AutoPlaySwipeableViews = autoPlay(SwipeableViews)
const Home = () => {
useEffect(() => {
console.log(
'%c ⚙️ FunctionProject',
'color: #ffd800; font-weight: bold; background-color: #181818;padding: 10px;border-radius: 10px;font-size: 20px'
)
}, [])
useEffect(() => {
console.log(
'%c ⚙️ FunctionProject',
'color: #ffd800; font-weight: bold; background-color: #181818;padding: 10px;border-radius: 10px;font-size: 20px'
);
}, []);
return (
<>
<HeadTag />
<div className='Home__container container-fluid text-center'>
return (
<Fragment>
<HeadTag />
<div className="Home__container container-fluid text-center">
<AutoPlaySwipeableViews enableMouseEvents interval={15000}>
{/* Slide 1 */}
<div className="row align-items-center justify-content-center">
<div className="col-24">
<h1 className="title-important">FunctionProject</h1>
<p className="Home__description">
Apprenez la programmation grâce à l'apprentissage par projet alias fonction (en <span className="important">JavaScript</span>).
<br/>
<Link href={"/about"}>
<a>En savoir plus ? (à-propos)</a>
</Link>
<br/>
Découvrez la liste des fonctions disponibles :
</p>
</div>
<div className="col-24 Home__logo-spin">
<Link href={"/functions"}>
<a><Loader width="100%" height="13em" speed="5s" /></a>
</Link>
</div>
</div>
{/* Slide 2 */}
<div className="row align-items-center justify-content-center">
<div className="col-24">
<h1 className="title-important">Code Source</h1>
<p className="Home__description">
Le partage est essentiel afin de progresser. <br/>
Par conséquent chaque fonction a un article expliquant comment elle fonctionne et <br/>
le code source du projet est disponible sur mon profil GitHub :
</p>
</div>
<div className="col-24">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Divlo/FunctionProject"><img className="Home__image-width" src="/images/GitHub.png" alt="GitHub" /></a>
</div>
</div>
</AutoPlaySwipeableViews>
<AutoPlaySwipeableViews enableMouseEvents interval={15000}>
{/* Slide 1 */}
<div className='row align-items-center justify-content-center'>
<div className='col-24'>
<h1 className='title-important'>FunctionProject</h1>
<p className='Home__description'>
Apprenez la programmation grâce à l'apprentissage par projet alias fonction (en <span className='important'>JavaScript</span>).
<br />
<Link href='/about'>
<a>En savoir plus ? (à-propos)</a>
</Link>
<br />
Découvrez la liste des fonctions disponibles :
</p>
</div>
</Fragment>
);
<div className='col-24 Home__logo-spin'>
<Link href='/functions'>
<a><Loader width='100%' height='13em' speed='5s' /></a>
</Link>
</div>
</div>
{/* Slide 2 */}
<div className='row align-items-center justify-content-center'>
<div className='col-24'>
<h1 className='title-important'>Code Source</h1>
<p className='Home__description'>
Le partage est essentiel afin de progresser. <br />
Par conséquent chaque fonction a un article expliquant comment elle fonctionne et <br />
le code source du projet est disponible sur mon profil GitHub :
</p>
</div>
<div className='col-24'>
<a target='_blank' rel='noopener noreferrer' href='https://github.com/Divlo/FunctionProject'><img className='Home__image-width' src='/images/GitHub.png' alt='GitHub' /></a>
</div>
</div>
</AutoPlaySwipeableViews>
</div>
</>
)
}
export default Home;
export default Home

455
website/pages/users/[name].js
View File

@ -1,245 +1,238 @@
import Link from 'next/link';
import { Fragment, useContext, useState, useEffect } from 'react';
import { UserContext } from '../../contexts/UserContext';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPen, faTimes } from '@fortawesome/free-solid-svg-icons';
import date from 'date-and-time';
import HeadTag from '../../components/HeadTag';
import FunctionCard from '../../components/FunctionCard/FunctionCard';
import Modal from '../../components/Modal';
import redirect from '../../utils/redirect';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import ReactMarkdown from 'react-markdown';
import CodeBlock from "../../components/CodeBlock";
import api from '../../utils/api';
import { API_URL } from '../../utils/config/config';
import '../../public/css/pages/profile.css';
import Link from 'next/link'
import { useContext, useState, useEffect } from 'react'
import { UserContext } from '../../contexts/UserContext'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPen, faTimes } from '@fortawesome/free-solid-svg-icons'
import date from 'date-and-time'
import HeadTag from '../../components/HeadTag'
import FunctionCard from '../../components/FunctionCard/FunctionCard'
import Modal from '../../components/Modal'
import redirect from '../../utils/redirect'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import ReactMarkdown from 'react-markdown'
import CodeBlock from '../../components/CodeBlock'
import api from '../../utils/api'
import { API_URL } from '../../utils/config/config'
import '../../public/css/pages/profile.css'
const Profile = (props) => {
const { isAuth, user, logoutUser } = useContext(UserContext)
const [isOpen, setIsOpen] = useState(false)
const [inputState, setInputState] = useState({})
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const { isAuth, user, logoutUser } = useContext(UserContext);
const [isOpen, setIsOpen] = useState(false);
const [inputState, setInputState] = useState({});
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (isAuth) {
setInputState({ name: user.name, email: user.email, biography: user.biography, isPublicEmail: user.isPublicEmail });
}
}, [isAuth]);
const toggleModal = () => setIsOpen(!isOpen);
const handleChange = (event, isTypeCheck = false) => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = (event.target.files != undefined) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value;
setInputState(inputStateNew);
useEffect(() => {
if (isAuth) {
setInputState({ name: user.name, email: user.email, biography: user.biography, isPublicEmail: user.isPublicEmail })
}
}, [isAuth])
const handleSubmit = (event) => {
event.preventDefault();
const token = user.token;
if (isAuth && token != undefined) {
setIsLoading(true);
const formData = new FormData();
formData.append('name', inputState.name);
formData.append('email', inputState.email);
formData.append('biography', inputState.biography);
formData.append('isPublicEmail', inputState.isPublicEmail);
formData.append('logo', inputState.logo);
api.put('/users/', formData, { headers: { 'Authorization': token } })
.then(() => {
setIsLoading(false);
logoutUser();
redirect({}, '/users/login?isSuccessEdit=true');
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
const toggleModal = () => setIsOpen(!isOpen)
const handleChange = (event, isTypeCheck = false) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = (event.target.files != null) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value
setInputState(inputStateNew)
}
const handleSubmit = (event) => {
event.preventDefault()
const token = user.token
if (isAuth && token != null) {
setIsLoading(true)
const formData = new window.FormData()
formData.append('name', inputState.name)
formData.append('email', inputState.email)
formData.append('biography', inputState.biography)
formData.append('isPublicEmail', inputState.isPublicEmail)
formData.append('logo', inputState.logo)
api.put('/users/', formData, { headers: { Authorization: token } })
.then(() => {
setIsLoading(false)
logoutUser()
redirect({}, '/users/login?isSuccessEdit=true')
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
}
return (
<Fragment>
<HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != undefined) ? props.biography : ""}`} />
return (
<>
<HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != null) ? props.biography : ''}`} />
{/* Édition du profil */}
{(isOpen) ?
<Modal toggleModal={toggleModal}>
<div className="Profile__container container-fluid">
<div className="Profile__row row">
<div className="col-24">
<div className="Profile__Modal-top-container row">
<div className="col-24">
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className="text-center">Éditer le profil</h2>
<p className="text-center"><em>(Vous devrez vous reconnecter après la sauvegarde) <br/> Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).</em></p>
</div>
</div>
</div>
<div className="col-24">
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Nom :</label>
<input value={inputState.name} onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
</div>
<div className="form-group">
<label className="form-label" htmlFor="email">Email :</label>
<input value={inputState.email} onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className="form-group custom-control custom-switch">
<input onChange={(event) => handleChange(event, true)} type="checkbox" name="isPublicEmail" checked={inputState.isPublicEmail} className="custom-control-input" id="isPublicEmail" />
<label className="custom-control-label" htmlFor="isPublicEmail">Email Public</label>
</div>
<div className="form-group">
<label className="form-label" htmlFor="biography">Biographie :</label>
<textarea style={{ height: 'auto' }} value={inputState.biography} onChange={handleChange} name="biography" id="biography" className="form-control" rows="5"></textarea>
</div>
<div className="form-group">
<label className="form-label" htmlFor="logo">Logo <em>(400x400 recommandé)</em> :</label>
<p style={{ margin: 0 }}><em>Si aucun fichier est choisi, le logo ne sera pas modifié.</em></p>
<input onChange={handleChange} accept="image/jpeg,image/jpg,image/png,image/gif" type="file" name="logo" id="logo" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Sauvegarder</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
</div>
</Modal>
:
<div className="container-fluid Profile__container">
<div className="row Profile__row">
<div className="col-20">
<div className="text-center">
<h1>Profil de <span className="important">{props.name}</span></h1>
</div>
<div className="row justify-content-center">
<div className="col-24 text-center">
<img className="Profile__logo" src={API_URL + props.logo} alt={props.name} />
</div>
<div className="col-24 text-center">
{(props.biography != undefined) && <p>{props.biography}</p>}
{(props.email != undefined) && <p><span className="important">Email :</span> {props.email}</p>}
<p><span className="important">Date de création du compte :</span> {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}</p>
</div>
{(isAuth && user.name === props.name) &&
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className="btn btn-dark">
<FontAwesomeIcon icon={faPen} style={{cursor: 'pointer', width: '1rem'}} />
&nbsp; Éditez le profil
</button>
}
</div>
</div>
</div>
{(props.favoritesArray.length > 0) &&
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2>Dernières fonctions ajoutées aux <span className="important">favoris</span> :</h2>
</div>
<div className="col-24">
<div className="row justify-content-center">
{props.favoritesArray.map((favorite) => {
return (
<FunctionCard key={favorite.id} { ...favorite } />
);
})}
</div>
</div>
</div>
}
{(props.commentsArray.length > 0) &&
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2>Derniers <span className="important">commentaires</span> :</h2>
</div>
<div className="col-24">
{props.commentsArray.map((comment) => (
<div key={comment.id} className="row Profile__row Profile__comment">
<div className="col-20">
<p style={{ textAlign: 'center', marginTop: '30px' }}>
Posté sur la fonction&nbsp;
<Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? "/functions/[slug]" : `/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}>
<a>{comment.function.title}</a>
</Link>
&nbsp;le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}
</p>
<ReactMarkdown source={comment.message} renderers={{ code: CodeBlock }} />
</div>
</div>
))}
</div>
</div>
}
{(props.quotesArray.length > 0) &&
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2>Dernières <span className="important">citations</span> proposées (et validées) :</h2>
<p>Citations pour la fonction <Link href="/functions/randomQuote"><a>Générateur de citations</a></Link>.</p>
</div>
<div className="col-24 table-column">
<table style={{ marginBottom: '50px' }}>
<thead>
<tr>
<th className="table-row" scope="col">Citation/Proverbe</th>
<th className="table-row" scope="col">Auteur</th>
</tr>
</thead>
<tbody>
{props.quotesArray.map((currentQuote, index) => {
return (
<tr key={index}>
<td className="table-row text-center">{currentQuote.quote}</td>
<td className="table-row text-center">{currentQuote.author}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
}
{/* Édition du profil */}
{(isOpen)
? (
<Modal toggleModal={toggleModal}>
<div className='Profile__container container-fluid'>
<div className='Profile__row row'>
<div className='col-24'>
<div className='Profile__Modal-top-container row'>
<div className='col-24'>
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className='text-center'>Éditer le profil</h2>
<p className='text-center'><em>(Vous devrez vous reconnecter après la sauvegarde) <br /> Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).</em></p>
</div>
}
</div>
</div>
</Fragment>
);
<div className='col-24'>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Nom :</label>
<input value={inputState.name} onChange={handleChange} type='text' name='name' id='name' className='form-control' placeholder='Divlo' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='email'>Email :</label>
<input value={inputState.email} onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
<div className='form-group custom-control custom-switch'>
<input onChange={(event) => handleChange(event, true)} type='checkbox' name='isPublicEmail' checked={inputState.isPublicEmail} className='custom-control-input' id='isPublicEmail' />
<label className='custom-control-label' htmlFor='isPublicEmail'>Email Public</label>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='biography'>Biographie :</label>
<textarea style={{ height: 'auto' }} value={inputState.biography} onChange={handleChange} name='biography' id='biography' className='form-control' rows='5' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='logo'>Logo <em>(400x400 recommandé)</em> :</label>
<p style={{ margin: 0 }}><em>Si aucun fichier est choisi, le logo ne sera pas modifié.</em></p>
<input onChange={handleChange} accept='image/jpeg,image/jpg,image/png,image/gif' type='file' name='logo' id='logo' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Sauvegarder</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</div>
</div>
</div>
</Modal>
)
: (
<div className='container-fluid Profile__container'>
<div className='row Profile__row'>
<div className='col-20'>
<div className='text-center'>
<h1>Profil de <span className='important'>{props.name}</span></h1>
</div>
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<img className='Profile__logo' src={API_URL + props.logo} alt={props.name} />
</div>
<div className='col-24 text-center'>
{(props.biography != null) && <p>{props.biography}</p>}
{(props.email != null) && <p><span className='important'>Email :</span> {props.email}</p>}
<p><span className='important'>Date de création du compte :</span> {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}</p>
</div>
{(isAuth && user.name === props.name) &&
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className='btn btn-dark'>
<FontAwesomeIcon icon={faPen} style={{ cursor: 'pointer', width: '1rem' }} />
&nbsp; Éditez le profil
</button>}
</div>
</div>
</div>
{(props.favoritesArray.length > 0) &&
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>Dernières fonctions ajoutées aux <span className='important'>favoris</span> :</h2>
</div>
<div className='col-24'>
<div className='row justify-content-center'>
{props.favoritesArray.map((favorite) => {
return (
<FunctionCard key={favorite.id} {...favorite} />
)
})}
</div>
</div>
</div>}
{(props.commentsArray.length > 0) &&
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>Derniers <span className='important'>commentaires</span> :</h2>
</div>
<div className='col-24'>
{props.commentsArray.map((comment) => (
<div key={comment.id} className='row Profile__row Profile__comment'>
<div className='col-20'>
<p style={{ textAlign: 'center', marginTop: '30px' }}>
Posté sur la fonction&nbsp;
<Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? '/functions/[slug]' : `/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}>
<a>{comment.function.title}</a>
</Link>
&nbsp;le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}
</p>
<ReactMarkdown source={comment.message} renderers={{ code: CodeBlock }} />
</div>
</div>
))}
</div>
</div>}
{(props.quotesArray.length > 0) &&
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>Dernières <span className='important'>citations</span> proposées (et validées) :</h2>
<p>Citations pour la fonction <Link href='/functions/randomQuote'><a>Générateur de citations</a></Link>.</p>
</div>
<div className='col-24 table-column'>
<table style={{ marginBottom: '50px' }}>
<thead>
<tr>
<th className='table-row' scope='col'>Citation/Proverbe</th>
<th className='table-row' scope='col'>Auteur</th>
</tr>
</thead>
<tbody>
{props.quotesArray.map((currentQuote, index) => {
return (
<tr key={index}>
<td className='table-row text-center'>{currentQuote.quote}</td>
<td className='table-row text-center'>{currentQuote.author}</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>}
</div>
)}
</>
)
}
export async function getServerSideProps(context) {
const { name } = context.params;
return api.get(`/users/${name}`)
.then((response) => ({ props: response.data }))
.catch(() => redirect(context, '/404'));
export async function getServerSideProps (context) {
const { name } = context.params
return api.get(`/users/${name}`)
.then((response) => ({ props: response.data }))
.catch(() => redirect(context, '/404'))
}
export default Profile;
export default Profile

129
website/pages/users/forgotPassword.js
View File

@ -1,74 +1,71 @@
import { Fragment, useState } from 'react';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useState } from 'react'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import api from '../../utils/api'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const forgotPassword = () => {
const [inputState, setInputState] = useState({})
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [inputState, setInputState] = useState({});
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 = () => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
setInputState(inputStateNew);
}
const handleSubmit = (event) => {
setIsLoading(true)
event.preventDefault()
api.post('/users/reset-password', inputState)
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`)
setIsLoading(false)
setInputState({})
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
const handleSubmit = (event) => {
setIsLoading(true);
event.preventDefault();
api.post('/users/reset-password', inputState)
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
setIsLoading(false);
setInputState({});
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
return (
<Fragment>
<HeadTag
title="Mot de passe oublié - FunctionProject"
description="Vous vous ne souvenez pas de votre mot de passe ? Demandez une demande de réinitialisation de mot de passe par email."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">Mot de passe oublié ?</h1>
<div className="text-center">
<p>Demandez une demande de réinitialisation de mot de passe par email.</p>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Email :</label>
<input onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
return (
<>
<HeadTag
title='Mot de passe oublié - FunctionProject'
description='Vous vous ne souvenez pas de votre mot de passe ? Demandez une demande de réinitialisation de mot de passe par email.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>Mot de passe oublié ?</h1>
<div className='text-center'>
<p>Demandez une demande de réinitialisation de mot de passe par email.</p>
</div>
</Fragment>
);
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Email :</label>
<input onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</div>
</div>
</div>
</>
)
}
export default withoutAuth(forgotPassword);
export default withoutAuth(forgotPassword)

187
website/pages/users/index.js
View File

@ -1,109 +1,108 @@
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import HeadTag from '../../components/HeadTag';
import Loader from '../../components/Loader';
import api from '../../utils/api';
import '../../public/css/pages/users.css';
import { API_URL } from '../../utils/config/config';
import { useState, useEffect, useRef, useCallback } from 'react'
import Link from 'next/link'
import HeadTag from '../../components/HeadTag'
import Loader from '../../components/Loader'
import api from '../../utils/api'
import '../../public/css/pages/users.css'
import { API_URL } from '../../utils/config/config'
const Users = () => {
let pageUsers = 1
let pageUsers = 1;
const [inputSearch, setInputSearch] = useState("");
const [usersData, setUsersData] = useState({ totalItems: 0, hasMore: true, rows: [] });
const [isLoadingUsers, setLoadingUsers] = useState(true);
const [inputSearch, setInputSearch] = useState('')
const [usersData, setUsersData] = useState({ totalItems: 0, hasMore: true, rows: [] })
const [isLoadingUsers, setLoadingUsers] = useState(true)
// Récupère les users si la recherche change
useEffect(() => {
pageUsers = 1;
getUsersData().then((data) => setUsersData(data));
}, [inputSearch]);
// Récupère les users si la recherche change
useEffect(() => {
pageUsers = 1
getUsersData().then((data) => setUsersData(data))
}, [inputSearch])
const getUsersData = async () => {
setLoadingUsers(true);
const { data } = await api.get(`/users?page=${pageUsers}&limit=15&search=${inputSearch}`);
setLoadingUsers(false);
return data;
}
const getUsersData = async () => {
setLoadingUsers(true)
const { data } = await api.get(`/users?page=${pageUsers}&limit=15&search=${inputSearch}`)
setLoadingUsers(false)
return data
}
const handleSearchChange = (event) => {
setInputSearch(event.target.value);
}
const handleSearchChange = (event) => {
setInputSearch(event.target.value)
}
// Permet la pagination au scroll
const observer = useRef();
const lastUserCardRef = useCallback((node) => {
if (isLoadingUsers) return;
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && usersData.hasMore) {
pageUsers += 1;
getUsersData().then((data) => {
setUsersData((oldData) => {
return {
totalItems: data.totalItems,
hasMore: data.hasMore,
rows: [...oldData.rows, ...data.rows]
}
});
});
// Permet la pagination au scroll
const observer = useRef()
const lastUserCardRef = useCallback((node) => {
if (isLoadingUsers) return
if (observer.current) observer.current.disconnect()
observer.current = new window.IntersectionObserver((entries) => {
if (entries[0].isIntersecting && usersData.hasMore) {
pageUsers += 1
getUsersData().then((data) => {
setUsersData((oldData) => {
return {
totalItems: data.totalItems,
hasMore: data.hasMore,
rows: [...oldData.rows, ...data.rows]
}
}, { threshold: 1 });
if (node) observer.current.observe(node);
}, [isLoadingUsers, usersData.hasMore]);
})
})
}
}, { threshold: 1 })
if (node) observer.current.observe(node)
}, [isLoadingUsers, usersData.hasMore])
return (
<Fragment>
<HeadTag
title="Utilisateurs"
description="Liste des utilisateurs."
/>
return (
<>
<HeadTag
title='Utilisateurs'
description='Liste des utilisateurs.'
/>
<div className="container text-center">
<div className="row justify-content-center">
<div className="col-24">
<h1 style={{ marginBottom: 0, paddingTop: "20px" }}>Utilisateurs</h1>
<p style={{ marginTop: '5px' }}>La liste des utilisateurs - Total de {usersData.totalItems} utilisateurs :</p>
<div className='container text-center'>
<div className='row justify-content-center'>
<div className='col-24'>
<h1 style={{ marginBottom: 0, paddingTop: '20px' }}>Utilisateurs</h1>
<p style={{ marginTop: '5px' }}>La liste des utilisateurs - Total de {usersData.totalItems} utilisateurs :</p>
</div>
</div>
<div className='Users__search-container row justify-content-center'>
<input value={inputSearch} onChange={handleSearchChange} type='search' className='Users__form-control Users__search-input' name='search' id='search' placeholder='🔎 Rechercher...' />
</div>
<div className='row justify-content-center'>
{usersData.rows.map((user, index) => {
// Si c'est le dernier élément
if (usersData.rows.length === index + 1) {
return (
<div ref={lastUserCardRef} key={user.id} className='UserCard col-sm-24 col-md-10 col-xl-7'>
<Link href='/users/[name]' as={`/users/${user.name}`}>
<div className='UserCard__container'>
<img className='UserCard__logo' src={API_URL + user.logo} alt={user.name} />
<h2 className='UserCard__name'>{user.name}</h2>
</div>
</Link>
</div>
)
}
return (
<div key={user.id} className='UserCard col-sm-24 col-md-10 col-xl-7'>
<Link href='/users/[name]' as={`/users/${user.name}`}>
<div className='UserCard__container'>
<img className='UserCard__logo' src={API_URL + user.logo} alt={user.name} />
<h2 className='UserCard__name'>{user.name}</h2>
</div>
</Link>
</div>
)
})}
</div>
<div className="Users__search-container row justify-content-center">
<input value={inputSearch} onChange={handleSearchChange} type="search" className="Users__form-control Users__search-input" name="search" id="search" placeholder="🔎 Rechercher..." />
</div>
<div className="row justify-content-center">
{usersData.rows.map((user, index) => {
// Si c'est le dernier élément
if (usersData.rows.length === index + 1) {
return (
<div ref={lastUserCardRef} key={user.id} className="UserCard col-sm-24 col-md-10 col-xl-7">
<Link href={"/users/[name]"} as={`/users/${user.name}`}>
<div className="UserCard__container">
<img className="UserCard__logo" src={API_URL + user.logo} alt={user.name} />
<h2 className="UserCard__name">{user.name}</h2>
</div>
</Link>
</div>
);
}
return (
<div key={user.id} className="UserCard col-sm-24 col-md-10 col-xl-7">
<Link href={"/users/[name]"} as={`/users/${user.name}`}>
<div className="UserCard__container">
<img className="UserCard__logo" src={API_URL + user.logo} alt={user.name} />
<h2 className="UserCard__name">{user.name}</h2>
</div>
</Link>
</div>
);
})}
</div>
{isLoadingUsers && <Loader />}
</div>
</Fragment>
);
{isLoadingUsers && <Loader />}
</div>
</>
)
}
export default Users;
export default Users

130
website/pages/users/login.js
View File

@ -1,77 +1,75 @@
import { Fragment, useContext, useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import { UserContext } from '../../contexts/UserContext';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useContext, useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import { UserContext } from '../../contexts/UserContext'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const Login = () => {
const router = useRouter()
const [inputState, setInputState] = useState({})
const { loginUser, messageLogin, loginLoading, isAuth } = useContext(UserContext)
const router = useRouter();
const [inputState, setInputState] = useState({});
const { loginUser, messageLogin, loginLoading, isAuth } = useContext(UserContext);
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 = async (event) => {
event.preventDefault()
if (!isAuth) {
await loginUser(inputState)
}
}
const handleSubmit = async (event) => {
event.preventDefault();
if (!isAuth) {
await loginUser(inputState);
}
}
return (
<>
<HeadTag
title='Se connecter - FunctionProject'
description='Connexion à FunctionProject.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>Se connecter</h1>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='email'>Email :</label>
<input onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
return (
<Fragment>
<HeadTag
title="Se connecter - FunctionProject"
description="Connexion à FunctionProject."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">Se connecter</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="email">Email :</label>
<input onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='password'>Mot de passe :</label>
<input onChange={handleChange} type='password' name='password' id='password' className='form-control' placeholder='******' />
<p>
<Link href='/users/forgotPassword'>
<a className='Register-Login__Forgot-password'>Mot de passe oublié ?</a>
</Link>
</p>
</div>
<div className="form-group">
<label className="form-label" htmlFor="password">Mot de passe :</label>
<input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
<p>
<Link href={"/users/forgotPassword"}>
<a className="Register-Login__Forgot-password">Mot de passe oublié ?</a>
</Link>
</p>
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{(router.query.isConfirmed !== undefined && messageLogin === "") && <p className="form-success"><b>Succès:</b> Votre compte a bien été confirmé, vous pouvez maintenant vous connectez!</p>}
{(router.query.isSuccessEdit !== undefined && messageLogin === "") && <p className="form-success"><b>Succès:</b> Votre profil a bien été modifié, vous pouvez maintenant vous connectez!</p>}
{
(loginLoading) ?
<Loader />
:
htmlParser(messageLogin)
}
</div>
</div>
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{(router.query.isConfirmed !== undefined && messageLogin === '') && <p className='form-success'><b>Succès:</b> Votre compte a bien été confirmé, vous pouvez maintenant vous connectez!</p>}
{(router.query.isSuccessEdit !== undefined && messageLogin === '') && <p className='form-success'><b>Succès:</b> Votre profil a bien été modifié, vous pouvez maintenant vous connectez!</p>}
{
(loginLoading)
? <Loader />
: htmlParser(messageLogin)
}
</div>
</Fragment>
);
</div>
</div>
</div>
</>
)
}
export default withoutAuth(Login);
export default withoutAuth(Login)

140
website/pages/users/newPassword.js
View File

@ -1,82 +1,80 @@
import { Fragment, useState } from 'react';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import redirect from '../../utils/redirect';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useState } from 'react'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import api from '../../utils/api'
import redirect from '../../utils/redirect'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const newPassword = (props) => {
const [inputState, setInputState] = useState({})
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [inputState, setInputState] = useState({});
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 = () => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
setInputState(inputStateNew);
}
const handleSubmit = (event) => {
setIsLoading(true)
event.preventDefault()
api.put('/users/reset-password', { ...inputState, tempToken: props.token })
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`)
setIsLoading(false)
setInputState({})
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
const handleSubmit = (event) => {
setIsLoading(true);
event.preventDefault();
api.put('/users/reset-password', { ...inputState, tempToken: props.token })
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
setIsLoading(false);
setInputState({});
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
return (
<Fragment>
<HeadTag
title="Nouveau mot de passe - FunctionProject"
description="Mise à jour du mot de passe."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">Nouveau mot de passe</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="password">Mot de passe :</label>
<input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
return (
<>
<HeadTag
title='Nouveau mot de passe - FunctionProject'
description='Mise à jour du mot de passe.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>Nouveau mot de passe</h1>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='password'>Mot de passe :</label>
<input onChange={handleChange} type='password' name='password' id='password' className='form-control' placeholder='******' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</Fragment>
);
</div>
</div>
</div>
</>
)
}
export async function getServerSideProps(context) {
if (context.query.token != undefined) {
return {
props: {
token: context.query.token
}
};
export async function getServerSideProps (context) {
if (context.query.token != null) {
return {
props: {
token: context.query.token
}
}
return redirect(context, '/404');
}
return redirect(context, '/404')
}
export default withoutAuth(newPassword);
export default withoutAuth(newPassword)

150
website/pages/users/register.js
View File

@ -1,83 +1,81 @@
import { Fragment, useState } from 'react';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useState } from 'react'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import api from '../../utils/api'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const Register = () => {
const [inputState, setInputState] = useState({ name: "", email: "", password: "" });
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 [inputState, setInputState] = useState({ name: '', email: '', password: '' })
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const handleSubmit = (event) => {
setIsLoading(true);
event.preventDefault();
api.post('/users/register', inputState)
.then(({ data }) => {
setInputState({ name: "", email: "", password: "" });
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
setIsLoading(false);
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
const handleChange = (event) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = event.target.value
setInputState(inputStateNew)
}
return (
<Fragment>
<HeadTag
title="S'inscrire - FunctionProject"
description="Créer un compte."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">S'inscrire</h1>
<div className="text-center">
<p>En vous inscrivant, vous accéderez à de nombreuses fonctionnalités : publier des commentaires, ajouter des fonctions aux favoris, utiliser certaines fonctions disponibles qu'aux membres (exemple: La To Do list) etc.</p>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Nom :</label>
<input value={inputState.name} onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
</div>
const handleSubmit = (event) => {
setIsLoading(true)
event.preventDefault()
api.post('/users/register', inputState)
.then(({ data }) => {
setInputState({ name: '', email: '', password: '' })
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`)
setIsLoading(false)
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
<div className="form-group">
<label className="form-label" htmlFor="name">Email :</label>
<input value={inputState.email} onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className="form-group">
<label className="form-label" htmlFor="name">Mot de passe :</label>
<input value={inputState.password} onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
return (
<>
<HeadTag
title="S'inscrire - FunctionProject"
description='Créer un compte.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>S'inscrire</h1>
<div className='text-center'>
<p>En vous inscrivant, vous accéderez à de nombreuses fonctionnalités : publier des commentaires, ajouter des fonctions aux favoris, utiliser certaines fonctions disponibles qu'aux membres (exemple: La To Do list) etc.</p>
</div>
</Fragment>
);
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Nom :</label>
<input value={inputState.name} onChange={handleChange} type='text' name='name' id='name' className='form-control' placeholder='Divlo' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Email :</label>
<input value={inputState.email} onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Mot de passe :</label>
<input value={inputState.password} onChange={handleChange} type='password' name='password' id='password' className='form-control' placeholder='******' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</div>
</div>
</div>
</>
)
}
export default withoutAuth(Register);
export default withoutAuth(Register)