From d902d40e6e242d20dde462de24a0d21f2232cc64 Mon Sep 17 00:00:00 2001 From: Divlo Date: Sun, 12 Apr 2020 12:40:56 +0200 Subject: [PATCH] frontend: manageCategories et Hotfix date-and-time --- website/components/FunctionComponentTop.js | 6 +- website/components/FunctionTabManager.js | 10 +-- website/contexts/UserContext.js | 4 +- website/pages/admin/index.js | 6 +- website/pages/admin/manageCategories.js | 82 ++++++++++++++++++++++ website/pages/forgotPassword.js | 5 +- website/pages/functions/[slug].js | 9 +-- website/pages/login.js | 9 +-- website/pages/newPassword.js | 5 +- website/pages/profile/[name].js | 6 +- website/public/css/pages/admin.css | 10 +++ 11 files changed, 120 insertions(+), 32 deletions(-) create mode 100644 website/pages/admin/manageCategories.js diff --git a/website/components/FunctionComponentTop.js b/website/components/FunctionComponentTop.js index 9ece2a2..8f236df 100644 --- a/website/components/FunctionComponentTop.js +++ b/website/components/FunctionComponentTop.js @@ -3,8 +3,10 @@ import Link from 'next/link'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faStar } from '@fortawesome/free-solid-svg-icons'; import { faStar as farStar } from '@fortawesome/free-regular-svg-icons'; +import date from 'date-and-time'; import { UserContext } from '../contexts/UserContext'; import api from '../utils/api'; +import { API_URL } from '../utils/config'; import './FunctionCard/FunctionCard.css'; const FunctionComponentTop = (props) => { @@ -47,14 +49,14 @@ const FunctionComponentTop = (props) => { } - {props.title} + {props.title}

{props.title}

{props.description}

{props.categorie.name} -

{props.publicationDate}

+

{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}

diff --git a/website/components/FunctionTabManager.js b/website/components/FunctionTabManager.js index c572192..b766399 100644 --- a/website/components/FunctionTabManager.js +++ b/website/components/FunctionTabManager.js @@ -3,15 +3,15 @@ import FunctionForm from './FunctionForm'; import FunctionComments from './FunctionComments/FunctionComments'; const FunctionTabManager = (props) => { - if (props.functionInfo.type === "form") { + if (props.type === "form") { return ( - +
- +
Article
- +
); @@ -21,7 +21,7 @@ const FunctionTabManager = (props) => {
Article
- +
); diff --git a/website/contexts/UserContext.js b/website/contexts/UserContext.js index af978d3..180f662 100644 --- a/website/contexts/UserContext.js +++ b/website/contexts/UserContext.js @@ -47,13 +47,13 @@ function UserContextProvider(props) { setIsAuth(true); setMessageLogin('

Succès: Connexion réussi!

'); setLoginLoading(false); - return next({ isSuccess: true, newUser }); + return next(); } catch (error) { setMessageLogin(`

Erreur: ${error.response.data.message}

`); setLoginLoading(false); setIsAuth(false); setUser(null); - return next({ isSuccess: false }); + return next(); } }); } diff --git a/website/pages/admin/index.js b/website/pages/admin/index.js index cc22b3b..f31588a 100644 --- a/website/pages/admin/index.js +++ b/website/pages/admin/index.js @@ -1,3 +1,4 @@ +import Link from 'next/link'; import { Fragment, useState, useEffect } from 'react'; import Cookies from "universal-cookie"; import HeadTag from '../../components/HeadTag'; @@ -9,8 +10,8 @@ import redirect from '../../utils/redirect'; import htmlParser from 'html-react-parser'; import Loader from '../../components/Loader'; import useAPI from '../../hooks/useAPI'; -import '../../public/css/pages/admin.css'; import api from '../../utils/api'; +import '../../public/css/pages/admin.css'; const Admin = (props) => { @@ -149,6 +150,9 @@ const Admin = (props) => {

Administration

+ + +
} diff --git a/website/pages/admin/manageCategories.js b/website/pages/admin/manageCategories.js new file mode 100644 index 0000000..bea05c8 --- /dev/null +++ b/website/pages/admin/manageCategories.js @@ -0,0 +1,82 @@ +import { Fragment } from 'react'; +import Cookies from "universal-cookie"; +import date from 'date-and-time'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons'; +import HeadTag from '../../components/HeadTag'; +import redirect from '../../utils/redirect'; +import useAPI from '../../hooks/useAPI'; +import '../../public/css/pages/admin.css'; + +const manageCategories = (props) => { + + const [, categories] = useAPI('/categories'); + + if (!props.user.isAdmin && typeof window != 'undefined') { + return redirect({}, '/404'); + } + + return ( + + + +
+
+
+

Gérer les catégories

+ +
+
+
+
+
+ + + + + + + + + + + + + + {categories.map((category) => { + return ( + + + + + + + + + + ); + })} + +
idnamecolorcreatedAtupdatedAtModifierSupprimer
{category.id}{category.name}{category.color}{date.format(new Date(category.createdAt), 'DD/MM/YYYY à HH:mm', true)}{date.format(new Date(category.updatedAt), 'DD/MM/YYYY à HH:mm', true)} + + + +
+
+
+
+
+ + ); +} + +export async function getServerSideProps({ req }) { + const cookies = new Cookies(req.headers.cookie); + return { + props: { + user: { ...cookies.get('user') } + } + }; +} + +export default manageCategories; \ No newline at end of file diff --git a/website/pages/forgotPassword.js b/website/pages/forgotPassword.js index 3ead3da..5a36652 100644 --- a/website/pages/forgotPassword.js +++ b/website/pages/forgotPassword.js @@ -2,8 +2,9 @@ import { Fragment, useState } from 'react'; import htmlParser from 'html-react-parser'; import Loader from '../components/Loader'; import HeadTag from '../components/HeadTag'; -import '../public/css/pages/register-login.css'; import api from '../utils/api'; +import withoutAuth from '../hoc/withoutAuth'; +import '../public/css/pages/register-login.css'; const forgotPassword = () => { @@ -70,4 +71,4 @@ const forgotPassword = () => { } -export default forgotPassword; \ No newline at end of file +export default withoutAuth(forgotPassword); \ No newline at end of file diff --git a/website/pages/functions/[slug].js b/website/pages/functions/[slug].js index 9771df8..ac142d3 100644 --- a/website/pages/functions/[slug].js +++ b/website/pages/functions/[slug].js @@ -9,18 +9,13 @@ import { API_URL } from '../../utils/config'; import '../../public/css/pages/FunctionComponent.css'; const FunctionComponent = (props) => { - - // Constantes - const createdAt = new Date(props.createdAt); - const publicationDate = `${('0'+createdAt.getDate()).slice(-2)}/${('0'+(createdAt.getMonth()+1)).slice(-2)}/${createdAt.getFullYear()}`; - return (
- - + +
); diff --git a/website/pages/login.js b/website/pages/login.js index f03341f..1edeb44 100644 --- a/website/pages/login.js +++ b/website/pages/login.js @@ -5,7 +5,7 @@ import htmlParser from 'html-react-parser'; import Loader from '../components/Loader'; import HeadTag from '../components/HeadTag'; import { UserContext } from '../contexts/UserContext'; -import redirect from '../utils/redirect'; +import withoutAuth from '../hoc/withoutAuth'; import '../public/css/pages/register-login.css'; const Login = () => { @@ -23,10 +23,7 @@ const Login = () => { const handleSubmit = async (event) => { event.preventDefault(); if (!isAuth) { - const loginObject = await loginUser(inputState); - if (loginObject.isSuccess) { - redirect({}, `/profile/${loginObject.newUser.name}`); - } + await loginUser(inputState); } } @@ -77,4 +74,4 @@ const Login = () => { ); } -export default Login; \ No newline at end of file +export default withoutAuth(Login); \ No newline at end of file diff --git a/website/pages/newPassword.js b/website/pages/newPassword.js index 704d0a9..1d5f1d7 100644 --- a/website/pages/newPassword.js +++ b/website/pages/newPassword.js @@ -2,9 +2,10 @@ import { Fragment, useState } from 'react'; import htmlParser from 'html-react-parser'; import Loader from '../components/Loader'; import HeadTag from '../components/HeadTag'; -import '../public/css/pages/register-login.css'; 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) => { @@ -74,4 +75,4 @@ newPassword.getInitialProps = (context) => { return redirect(context, '/404'); } -export default newPassword; \ No newline at end of file +export default withoutAuth(newPassword); \ No newline at end of file diff --git a/website/pages/profile/[name].js b/website/pages/profile/[name].js index 96211aa..609f363 100644 --- a/website/pages/profile/[name].js +++ b/website/pages/profile/[name].js @@ -16,10 +16,6 @@ import '../../public/css/pages/profile.css'; const Profile = (props) => { - // Constantes - const createdAt = new Date(props.createdAt); - const publicationDate = `${('0'+createdAt.getDate()).slice(-2)}/${('0'+(createdAt.getMonth()+1)).slice(-2)}/${createdAt.getFullYear()}`; - const { isAuth, user, logoutUser } = useContext(UserContext); const [isOpen, setIsOpen] = useState(false); const [inputState, setInputState] = useState({}); @@ -148,7 +144,7 @@ const Profile = (props) => {
{(props.biography != undefined) &&

{props.biography}

} {(props.email != undefined) &&

Email : {props.email}

} -

Date de création : {publicationDate}

+

Date de création du compte : {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}

{(isAuth && user.name === props.name) && diff --git a/website/public/css/pages/admin.css b/website/public/css/pages/admin.css index fb9aa9b..2ee2c2b 100644 --- a/website/public/css/pages/admin.css +++ b/website/public/css/pages/admin.css @@ -19,4 +19,14 @@ } .Admin__Modal-select-option { color: rgb(221, 220, 220); +} +.Admin__table-column { + display: grid; +} +.Admin__table, th, td { + border: 1px solid var(--text-color); + border-collapse: collapse; +} +.Admin__table-row { + padding: 15px; } \ No newline at end of file