🎨 website/utils API_URL + standardJS
This commit is contained in:
divlo
@ -12,11 +12,10 @@ import htmlParser from 'html-react-parser'
|
||||
import Loader from '../../components/Loader'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import CodeBlock from '../../components/CodeBlock'
|
||||
import api from '../../utils/api'
|
||||
import { API_URL } from '../../utils/config/config'
|
||||
import api, { API_URL } from '../../utils/api'
|
||||
import '../../public/css/pages/profile.css'
|
||||
|
||||
const Profile = (props) => {
|
||||
const Profile = props => {
|
||||
const { isAuth, user, logoutUser } = useContext(UserContext)
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [inputState, setInputState] = useState({})
|
||||
@ -25,7 +24,12 @@ const Profile = (props) => {
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuth) {
|
||||
setInputState({ name: user.name, email: user.email, biography: user.biography, isPublicEmail: user.isPublicEmail })
|
||||
setInputState({
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
biography: user.biography,
|
||||
isPublicEmail: user.isPublicEmail
|
||||
})
|
||||
}
|
||||
}, [isAuth])
|
||||
|
||||
@ -33,11 +37,16 @@ const Profile = (props) => {
|
||||
|
||||
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
|
||||
inputStateNew[event.target.name] =
|
||||
event.target.files != null
|
||||
? event.target.files[0]
|
||||
: isTypeCheck
|
||||
? event.target.checked
|
||||
: event.target.value
|
||||
setInputState(inputStateNew)
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const handleSubmit = event => {
|
||||
event.preventDefault()
|
||||
const token = user.token
|
||||
if (isAuth && token != null) {
|
||||
@ -49,14 +58,17 @@ const Profile = (props) => {
|
||||
formData.append('isPublicEmail', inputState.isPublicEmail)
|
||||
formData.append('logo', inputState.logo)
|
||||
|
||||
api.put('/users/', formData, { headers: { Authorization: token } })
|
||||
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>`)
|
||||
.catch(error => {
|
||||
setMessage(
|
||||
`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`
|
||||
)
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
@ -64,174 +76,316 @@ const Profile = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != null) ? props.biography : ''}`} />
|
||||
<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)
|
||||
}
|
||||
{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>
|
||||
</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 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='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 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>
|
||||
|
||||
{(isAuth && user.name === props.name) &&
|
||||
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className='btn btn-dark'>
|
||||
<FontAwesomeIcon icon={faPen} style={{ cursor: 'pointer', width: '1rem' }} />
|
||||
Éditez le profil
|
||||
</button>}
|
||||
<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>
|
||||
|
||||
{(props.favoritesArray.length > 0) &&
|
||||
</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'>
|
||||
<h2>Dernières fonctions ajoutées aux <span className='important'>favoris</span> :</h2>
|
||||
<img
|
||||
className='Profile__logo'
|
||||
src={API_URL + props.logo}
|
||||
alt={props.name}
|
||||
/>
|
||||
</div>
|
||||
<div className='col-24'>
|
||||
<div className='row justify-content-center'>
|
||||
{props.favoritesArray.map((favorite) => {
|
||||
|
||||
<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' }}
|
||||
/>
|
||||
É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
|
||||
<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>
|
||||
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 (
|
||||
<FunctionCard key={favorite.id} {...favorite} />
|
||||
<tr key={index}>
|
||||
<td className='table-row text-center'>
|
||||
{currentQuote.quote}
|
||||
</td>
|
||||
<td className='table-row text-center'>
|
||||
{currentQuote.author}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</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
|
||||
<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>
|
||||
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>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps (context) {
|
||||
const { name } = context.params
|
||||
return api.get(`/users/${name}`)
|
||||
.then((response) => ({ props: response.data }))
|
||||
return api
|
||||
.get(`/users/${name}`)
|
||||
.then(response => ({ props: response.data }))
|
||||
.catch(() => redirect(context, '/404'))
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user