frontend: manageCategories et Hotfix date-and-time

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) => {
                         <FontAwesomeIcon onClick={toggleFavorite} { ...(isFavorite) ? { icon: faStar } : { icon: farStar } } title={(isFavorite) ? "Retirer la fonction des favoris" : "Ajouter la fonction aux favoris"} className="FunctionComponent__star-favorite" />
                     }
 
-                    <img className="FunctionComponent__image" src={props.API_URL + props.image} alt={props.title} />
+                    <img className="FunctionComponent__image" src={API_URL + props.image} alt={props.title} />
                     <h1 className="FunctionComponent__title title-important">{props.title}</h1>
                     <p className="FunctionComponent__description">{props.description}</p>
                     <div className="FunctionCard__info">
                         <Link href={`/functions?categoryId=${props.categorieId}`}>
                             <a className="FunctionCard__category" style={{ backgroundColor: props.categorie.color, color: 'inherit' }}>{props.categorie.name}</a>
                         </Link>
-                        <p className="FunctionCard__publication-date">{props.publicationDate}</p>
+                        <p className="FunctionCard__publication-date">{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
                     </div>
                 </div>
             </div>

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 (
-            <FunctionTabs type={props.functionInfo.type}>
+            <FunctionTabs type={props.type}>
                 <div className="FunctionComponent__slide">
-                    <FunctionForm inputArray={ [...props.functionInfo.utilizationForm || []] } slug={props.functionInfo.slug} />
+                    <FunctionForm inputArray={ [...props.utilizationForm || []] } slug={props.slug} />
                 </div>
                 <div className="FunctionComponent__slide text-center">Article</div>
                 <div className="FunctionComponent__slide">
-                    <FunctionComments functionId={props.functionInfo.id} />
+                    <FunctionComments functionId={props.id} />
                 </div>
             </FunctionTabs>
         );
@@ -21,7 +21,7 @@ const FunctionTabManager = (props) => {
         <FunctionTabs type={props.type}>
             <div className="FunctionComponent__slide text-center">Article</div>
             <div className="FunctionComponent__slide">
-                <FunctionComments functionId={props.functionInfo.id} />
+                <FunctionComments functionId={props.id} />
             </div>
         </FunctionTabs>
     );

website/contexts/UserContext.js

@@ -47,13 +47,13 @@ function UserContextProvider(props) {
                 setIsAuth(true);
                 setMessageLogin('<p class="form-success"><b>Succès:</b> Connexion réussi!</p>');
                 setLoginLoading(false);
-                return next({ isSuccess: true, newUser });
+                return next();
             } catch (error) {
                 setMessageLogin(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
                 setLoginLoading(false);
                 setIsAuth(false);
                 setUser(null);
-                return next({ isSuccess: false });
+                return next();
             }
         });
     }

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) => {
                         <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>
                         </div>
                     </FunctionsList>
             }

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 (
+        <Fragment>
+            <HeadTag title="Admin - FunctionProject" description="Page d'administration de FunctionProject. Gérer les catégories." />
+
+            <div className="container-fluid text-center">
+                <div className="row justify-content-center">
+                    <div className="col-24">
+                        <h1>Gérer les catégories</h1>
+                        <button 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 Admin__table-column">
+                            <table className="Admin__table">
+                                <thead>
+                                    <tr>
+                                        <th className="Admin__table-row Admin__table-head-row" scope="col">id</th>
+                                        <th className="Admin__table-row Admin__table-head-row" scope="col">name</th>
+                                        <th className="Admin__table-row Admin__table-head-row" scope="col">color</th>
+                                        <th className="Admin__table-row Admin__table-head-row" scope="col">createdAt</th>
+                                        <th className="Admin__table-row Admin__table-head-row" scope="col">updatedAt</th>
+                                        <th className="Admin__table-row Admin__table-head-row" scope="col">Modifier</th>
+                                        <th className="Admin__table-row Admin__table-head-row" scope="col">Supprimer</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {categories.map((category) => {
+                                        return (
+                                            <tr key={category.id} style={{ backgroundColor: category.color }}>
+                                                <td className="Admin__table-row">{category.id}</td>
+                                                <td className="Admin__table-row">{category.name}</td>
+                                                <td className="Admin__table-row">{category.color}</td>
+                                                <td className="Admin__table-row">{date.format(new Date(category.createdAt), 'DD/MM/YYYY à HH:mm', true)}</td>
+                                                <td className="Admin__table-row">{date.format(new Date(category.updatedAt), 'DD/MM/YYYY à HH:mm', true)}</td>
+                                                <td style={{ cursor: 'pointer' }}>
+                                                    <FontAwesomeIcon icon={faPen} style={{ width: '1.5rem' }} />
+                                                </td>
+                                                <td style={{ cursor: 'pointer' }}>
+                                                    <FontAwesomeIcon icon={faTrash} style={{ width: '1.5rem' }} />
+                                                </td>
+                                            </tr>
+                                        );
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Fragment>
+    );
+}
+
+export async function getServerSideProps({ req }) {
+    const cookies = new Cookies(req.headers.cookie);
+    return {
+        props: { 
+            user: { ...cookies.get('user') }
+        }
+    };
+}
+
+export default manageCategories;

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;
+export default withoutAuth(forgotPassword);

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 (
         <FunctionTabsContextProvider>
             <HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
             <div className="container-fluid">
                 <FunctionTabsTop type={props.type} />
-                <FunctionComponentTop { ...props } API_URL={API_URL} publicationDate={publicationDate} />
+                <FunctionComponentTop { ...props } />
-                <FunctionTabManager functionInfo={props} />
+                <FunctionTabManager { ...props } />
             </div>
         </FunctionTabsContextProvider>
     );

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); 
+            await loginUser(inputState); 
-            if (loginObject.isSuccess) {
-                redirect({}, `/profile/${loginObject.newUser.name}`);
-            }
         }
     }
 
@@ -77,4 +74,4 @@ const Login = () => {
     );
 }
 
-export default Login;
+export default withoutAuth(Login);

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;
+export default withoutAuth(newPassword);

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) => {
                                     <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 :</span> {publicationDate}</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) &&                            

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;
 }