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',
                        false
                      )}
                    </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',
                            false
                          )}
                        </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