117 lines
3.8 KiB
JavaScript
117 lines
3.8 KiB
JavaScript
import { useState } from 'react'
|
||
import Cookies from 'universal-cookie'
|
||
import SwipeableViews from 'react-swipeable-views'
|
||
import HeadTag from '../../components/HeadTag'
|
||
import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction'
|
||
import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunction'
|
||
import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction'
|
||
import redirect from '../../utils/redirect'
|
||
import api, { API_URL } from '../../utils/api'
|
||
import '../../components/FunctionPage/FunctionTabs.css'
|
||
import '../../public/css/pages/admin.css'
|
||
|
||
const AdminFunctionComponent = props => {
|
||
const [slideIndex, setSlideIndex] = useState(0)
|
||
|
||
const handleDeleteFunction = async () => {
|
||
await api.delete(`/admin/functions/${props.functionInfo.id}`, {
|
||
headers: { Authorization: props.user.token }
|
||
})
|
||
redirect({}, '/admin')
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<HeadTag
|
||
title={props.functionInfo.title}
|
||
description={props.functionInfo.description}
|
||
image={API_URL + props.functionInfo.image}
|
||
/>
|
||
|
||
<div className='container-fluid'>
|
||
<div className='container'>
|
||
<div className='row justify-content-center'>
|
||
<ul className='FunctionTabs__nav'>
|
||
<li className='FunctionTabs__nav-item'>
|
||
<a
|
||
onClick={() => setSlideIndex(0)}
|
||
className={`FunctionTabs__nav-link ${slideIndex === 0 &&
|
||
'FunctionTabs__nav-link-active'}`}
|
||
>
|
||
✒️ Modifier
|
||
</a>
|
||
</li>
|
||
<li className='FunctionTabs__nav-item'>
|
||
<a
|
||
onClick={() => setSlideIndex(1)}
|
||
className={`FunctionTabs__nav-link ${slideIndex === 1 &&
|
||
'FunctionTabs__nav-link-active'}`}
|
||
>
|
||
📝 Article
|
||
</a>
|
||
</li>
|
||
<li className='FunctionTabs__nav-item'>
|
||
<a
|
||
onClick={() => setSlideIndex(2)}
|
||
className={`FunctionTabs__nav-link ${slideIndex === 2 &&
|
||
'FunctionTabs__nav-link-active'}`}
|
||
>
|
||
⚙️ Utilisation
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='container-fluid'>
|
||
<SwipeableViews
|
||
onChangeIndex={index => setSlideIndex(index)}
|
||
index={slideIndex}
|
||
>
|
||
<div className='Admin__Function-slide'>
|
||
<AddEditFunction
|
||
defaultInputState={{ ...props.functionInfo }}
|
||
user={props.user}
|
||
isEditing
|
||
/>
|
||
<div style={{ marginBottom: '30px' }} className='text-center'>
|
||
<button onClick={handleDeleteFunction} className='btn btn-dark'>
|
||
Supprimer la fonction
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className='Admin__Function-slide'>
|
||
<EditArticleFunction {...props} />
|
||
</div>
|
||
<div className='Admin__Function-slide'>
|
||
<EditFormFunction {...props} />
|
||
</div>
|
||
</SwipeableViews>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export async function getServerSideProps (context) {
|
||
const cookies = new Cookies(context.req.headers.cookie)
|
||
const user = { ...cookies.get('user') }
|
||
const { slug } = context.params
|
||
if (!user.isAdmin) {
|
||
return redirect(context, '/404')
|
||
}
|
||
return api
|
||
.get(`/admin/functions/${slug}`, { headers: { Authorization: user.token } })
|
||
.then(response => {
|
||
return {
|
||
props: {
|
||
user,
|
||
functionInfo: response.data
|
||
}
|
||
}
|
||
})
|
||
.catch(() => redirect(context, '/404'))
|
||
}
|
||
|
||
export default AdminFunctionComponent
|