frontend et backend : Profil Public

website/components/Header/Header.js

@@ -6,8 +6,8 @@ import './Header.css';
 
 export default function Header() {
 
-    const { isAuth, logoutUser }  = useContext(UserContext);
-    const [isActive, setIsActive] = useState(false);
+    const { isAuth, logoutUser, user } = useContext(UserContext);
+    const [isActive, setIsActive]      = useState(false);
 
     const toggleNavbar = () => {
         setIsActive(!isActive);
@@ -44,7 +44,12 @@ export default function Header() {
                                 </Fragment>
                             :
                                 <Fragment>
-                                    <NavigationLink name="Profil" path="/profile" />
+                                    {/* <NavigationLink name="Mon Profil" path={`/profile/${user.name}`} /> */}
+                                    <li className="navbar-item">
+                                        <Link href={"/profile/[name]"} as={`/profile/${user.name}`}>
+                                            <a className={"navbar-link"}>Mon Profil</a>
+                                        </Link>
+                                    </li>
                                     <li className="navbar-item">
                                         <Link href={"/"}>
                                             <a onClick={logoutUser} className="navbar-link">Se déconnecter</a>

website/package-lock.json

@@ -3229,6 +3229,11 @@
         "type": "^1.0.1"
       }
     },
+    "date-and-time": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.13.1.tgz",
+      "integrity": "sha512-/Uge9DJAT+s+oAcDxtBhyR8+sKjUnZbYmyhbmWjTHNtX7B7oWD8YyYdeXcBRbwSj6hVvj+IQegJam7m7czhbFw=="
+    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",

website/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@zeit/next-css": "^1.0.1",
     "axios": "^0.19.2",
+    "date-and-time": "^0.13.1",
     "html-react-parser": "^0.10.2",
     "next": "9.3.2",
     "next-fonts": "^1.0.3",

website/pages/profile/[name].js

@@ -0,0 +1,92 @@
+import Link from 'next/link';
+import { Fragment } from 'react';
+import date from 'date-and-time';
+import HeadTag from '../../components/HeadTag';
+import FunctionCard from '../../components/FunctionCard/FunctionCard';
+import redirect from '../../utils/redirect';
+import api from '../../utils/api';
+import { API_URL } from '../../utils/config';
+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()}`;
+
+    return (
+        <Fragment>
+            <HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != undefined) ? props.biography : ""}`} />
+
+            <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 :</span> {publicationDate}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                {(props.favoritesArray.length > 0) &&
+                    <div className="row justify-content-center">
+                        <div className="col-24 text-center">
+                            <h2>Fonctions en <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} slug={favorite.slug} image={favorite.image} title={favorite.title} description={favorite.description} type={favorite.type} category={favorite.categorie} publicationDate={date.format(new Date(favorite.createdAt), 'DD/MM/YYYY', true)} />
+                                    );
+                                })}
+                            </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-18 text-center">
+                            {props.commentsArray.map((comment) => (
+                                <div key={comment.id} className="row Profile__row Profile__comment">
+                                    <div className="col-20">
+                                        <p>
+                                            Posté sur la fonction&nbsp; 
+                                            <Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? "/functions/[slug]" : `/functions/${props.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>
+                                        <p>"{comment.message}"</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                }
+            </div>
+        </Fragment>
+    );
+}
+
+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;

website/pages/register.js

@@ -24,6 +24,7 @@ const Register = () => {
             .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>`);

website/public/css/pages/profile.css

@@ -0,0 +1,25 @@
+.Profile__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 30px 0 0 0;
+}
+.Profile__row {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    word-wrap: break-word;
+    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
+    border: 1px solid black;
+    border-radius: 1rem;
+    margin-bottom: 50px;
+}
+.Profile__logo {
+    border-radius: 50%;
+    object-fit: cover;
+    width: 150px;
+    height: 150px;
+}
+.Profile__comment {
+    margin: 0 0 50px 0;
+}