👌 IMPROVE: Refactoring /functions/[slug]
This commit is contained in:
@ -2,13 +2,13 @@ import { Fragment, useState } from 'react';
|
||||
import Cookies from "universal-cookie";
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
import HeadTag from '../../components/HeadTag';
|
||||
import AddEditFunction from '../../components/AddEditFunction';
|
||||
import EditArticleFunction from '../../components/EditArticleFunction';
|
||||
import EditFormFunction from '../../components/EditFormFunction';
|
||||
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 from '../../utils/api';
|
||||
import { API_URL } from '../../utils/config';
|
||||
import '../../components/FunctionTabs/FunctionTabs.css';
|
||||
import '../../components/FunctionPage/FunctionTabs.css';
|
||||
import '../../public/css/pages/admin.css';
|
||||
|
||||
const AdminFunctionComponent = (props) => {
|
||||
|
@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
import Modal from '../../components/Modal';
|
||||
import FunctionsList from '../../components/FunctionsList/FunctionsList';
|
||||
import AddEditFunction from '../../components/AddEditFunction';
|
||||
import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction';
|
||||
import redirect from '../../utils/redirect';
|
||||
import '../../public/css/pages/admin.css';
|
||||
|
||||
|
@ -1,26 +1,49 @@
|
||||
import FunctionTabsContextProvider from '../../contexts/FunctionTabsContext';
|
||||
import HeadTag from '../../components/HeadTag';
|
||||
import FunctionComponentTop from '../../components/FunctionComponentTop';
|
||||
import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop';
|
||||
import FunctionTabManager from '../../components/FunctionTabManager';
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
|
||||
import FunctionForm from '../../components/FunctionPage/FunctionForm';
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage';
|
||||
import redirect from '../../utils/redirect';
|
||||
import api from '../../utils/api';
|
||||
import { API_URL } from '../../utils/config';
|
||||
import '../../public/css/pages/FunctionComponent.css';
|
||||
|
||||
const FunctionComponent = (props) => {
|
||||
const FunctionTabManager = (props) => {
|
||||
if (props.type === "form") {
|
||||
return (
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionForm inputsArray={ [...props.utilizationForm || []] } slug={props.slug} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<FunctionTabsContextProvider>
|
||||
<HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
|
||||
<div className="container-fluid">
|
||||
<FunctionTabsTop type={props.type} />
|
||||
<FunctionComponentTop { ...props } />
|
||||
<FunctionTabManager { ...props } />
|
||||
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
</FunctionTabsContextProvider>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
}
|
||||
|
||||
const FunctionComponent = (props) => (
|
||||
<FunctionPage
|
||||
FunctionTabManager={FunctionTabManager}
|
||||
{ ...props }
|
||||
tabNames={(props.type === "form") ? ["⚙️ Utilisation", "📝 Article", "📬 Commentaires"] : ["📝 Article", "📬 Commentaires"]}
|
||||
/>
|
||||
);
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
const { slug } = context.params;
|
||||
return api.get(`/functions/${slug}`)
|
||||
|
@ -8,8 +8,8 @@ import htmlParser from 'html-react-parser';
|
||||
import Loader from '../../components/Loader';
|
||||
import FunctionPage from '../../components/FunctionPage/FunctionPage';
|
||||
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
|
||||
import FunctionArticle from '../../components/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionComments/FunctionComments';
|
||||
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
|
||||
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
|
||||
import api from '../../utils/api';
|
||||
import copyToClipboard from '../../utils/copyToClipboard';
|
||||
import 'notyf/notyf.min.css';
|
||||
|
Reference in New Issue
Block a user