👌 IMPROVE: Refactoring /functions/[slug]

This commit is contained in:
Divlo
2020-04-23 17:31:36 +02:00
parent 3e6b7fcd66
commit 3ff7f40f7b
20 changed files with 67 additions and 143 deletions

View File

@ -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) => {

View File

@ -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';

View File

@ -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}`)

View File

@ -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';