FunctionProject/website/pages/users/[name].jsx

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, { API_URL } from '../../utils/api'
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)

  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 != 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 (
    <>
      <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'
                    />
                  </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 default Profile