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

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