👌 IMPROVE: Refactoring /functions/[slug]
This commit is contained in:
parent
3e6b7fcd66
commit
3ff7f40f7b
@ -1,9 +1,9 @@
|
||||
import { Fragment, useState, useEffect } from 'react';
|
||||
import htmlParser from 'html-react-parser';
|
||||
import Loader from '../components/Loader';
|
||||
import useAPI from '../hooks/useAPI';
|
||||
import api from '../utils/api';
|
||||
import '../public/css/pages/admin.css';
|
||||
import Loader from '../../components/Loader';
|
||||
import useAPI from '../../hooks/useAPI';
|
||||
import api from '../../utils/api';
|
||||
import '../../public/css/pages/admin.css';
|
||||
|
||||
const AddEditFunction = (props) => {
|
||||
|
@ -1,10 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { complex } from '../utils/sunEditorConfig';
|
||||
import api from '../utils/api';
|
||||
import FunctionArticle from '../components/FunctionArticle';
|
||||
import { complex } from '../../utils/sunEditorConfig';
|
||||
import api from '../../utils/api';
|
||||
import FunctionArticle from '../FunctionPage/FunctionArticle';
|
||||
import 'notyf/notyf.min.css';
|
||||
import '../public/css/suneditor.min.css';
|
||||
import '../../public/css/suneditor.min.css';
|
||||
|
||||
const SunEditor = dynamic(
|
||||
() => import('suneditor-react'),
|
@ -1,5 +1,5 @@
|
||||
import { useState, Fragment } from 'react';
|
||||
import api from '../utils/api';
|
||||
import api from '../../utils/api';
|
||||
import 'notyf/notyf.min.css';
|
||||
|
||||
const EditFormFunction = (props) => {
|
@ -1,9 +1,9 @@
|
||||
import Link from 'next/link';
|
||||
import { forwardRef, useContext, Fragment } from 'react';
|
||||
import date from 'date-and-time';
|
||||
import { UserContext } from '../../contexts/UserContext';
|
||||
import { API_URL } from '../../utils/config';
|
||||
import api from '../../utils/api';
|
||||
import { UserContext } from '../../../contexts/UserContext';
|
||||
import { API_URL } from '../../../utils/config';
|
||||
import api from '../../../utils/api';
|
||||
import './CommentCard.css';
|
||||
|
||||
const CommentCard = forwardRef((props, ref) => {
|
@ -1,9 +1,9 @@
|
||||
import { Fragment, useState, useEffect, useContext, useRef, useCallback } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { UserContext } from '../../contexts/UserContext';
|
||||
import { UserContext } from '../../../contexts/UserContext';
|
||||
import CommentCard from '../CommentCard/CommentCard';
|
||||
import Loader from '../Loader';
|
||||
import api from '../../utils/api';
|
||||
import Loader from '../../Loader';
|
||||
import api from '../../../utils/api';
|
||||
import './FunctionComments.css';
|
||||
|
||||
const FunctionComments = ({ functionId }) => {
|
@ -4,10 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faStar } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
|
||||
import date from 'date-and-time';
|
||||
import { UserContext } from '../contexts/UserContext';
|
||||
import api from '../utils/api';
|
||||
import { API_URL } from '../utils/config';
|
||||
import './FunctionCard/FunctionCard.css';
|
||||
import { UserContext } from '../../contexts/UserContext';
|
||||
import api from '../../utils/api';
|
||||
import { API_URL } from '../../utils/config';
|
||||
import '../FunctionCard/FunctionCard.css';
|
||||
|
||||
const FunctionComponentTop = (props) => {
|
||||
|
@ -1,8 +1,8 @@
|
||||
import { Fragment, useState, useEffect } from 'react';
|
||||
import Loader from './Loader';
|
||||
import Loader from '../Loader';
|
||||
import htmlParser from 'html-react-parser';
|
||||
import dynamic from 'next/dynamic';
|
||||
import api from '../utils/api';
|
||||
import api from '../../utils/api';
|
||||
import fr from 'date-fns/locale/fr';
|
||||
import { registerLocale } from "react-datepicker";
|
||||
import date from 'date-and-time';
|
@ -2,7 +2,7 @@ import { Fragment, useState } from 'react';
|
||||
import { API_URL } from '../../utils/config';
|
||||
import HeadTag from '../HeadTag';
|
||||
import FunctionTabsTop from './FunctionTabsTop';
|
||||
import FunctionComponentTop from '../FunctionComponentTop';
|
||||
import FunctionComponentTop from './FunctionComponentTop';
|
||||
|
||||
const FunctionPage = (props) => {
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
import '../../components/FunctionTabs/FunctionTabs.css';
|
||||
import './FunctionTabs.css';
|
||||
|
||||
const FunctionTabs = (props) => {
|
||||
return (
|
||||
|
@ -1,35 +0,0 @@
|
||||
import FunctionTabs from './FunctionTabs/FunctionTabs';
|
||||
import FunctionForm from './FunctionForm';
|
||||
import FunctionArticle from './FunctionArticle';
|
||||
import FunctionComments from './FunctionComments/FunctionComments';
|
||||
|
||||
const FunctionTabManager = (props) => {
|
||||
if (props.type === "form") {
|
||||
return (
|
||||
<FunctionTabs type={props.type}>
|
||||
<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 (
|
||||
<FunctionTabs type={props.type}>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionArticle article={props.article} />
|
||||
</div>
|
||||
<div className="FunctionComponent__slide">
|
||||
<FunctionComments functionId={props.id} />
|
||||
</div>
|
||||
</FunctionTabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunctionTabManager;
|
@ -1,19 +0,0 @@
|
||||
import { useContext } from 'react';
|
||||
import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
import './FunctionTabs.css';
|
||||
|
||||
function FunctionTabs(props) {
|
||||
|
||||
const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex} enableMouseEvents>
|
||||
{props.children}
|
||||
</SwipeableViews>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunctionTabs;
|
@ -1,45 +0,0 @@
|
||||
import { useContext } from 'react';
|
||||
import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
|
||||
import '../FunctionCard/FunctionCard.css';
|
||||
|
||||
const FunctionTabsTop = (props) => {
|
||||
|
||||
const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<ul className="FunctionTabs__nav">
|
||||
{(props.type !== 'article') &&
|
||||
<li className="FunctionTabs__nav-item">
|
||||
<a
|
||||
className={`FunctionTabs__nav-link ${(slideIndex === 0) ? "FunctionTabs__nav-link-active" : ""}`}
|
||||
onClick={() => setSlideIndex(0)}
|
||||
>
|
||||
⚙️ Utilisation
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
<li className="FunctionTabs__nav-item">
|
||||
<a
|
||||
className={`FunctionTabs__nav-link ${((slideIndex === 1 && props.type !== 'article') || (props.type === 'article' && slideIndex === 0)) ? "FunctionTabs__nav-link-active" : ""}`}
|
||||
onClick={() => setSlideIndex((props.type === 'article') ? 0 : 1)}
|
||||
>
|
||||
📝 Article
|
||||
</a>
|
||||
</li>
|
||||
<li className="FunctionTabs__nav-item">
|
||||
<a
|
||||
className={`FunctionTabs__nav-link ${((slideIndex === 2 && props.type !== 'article') || (props.type === 'article' && slideIndex === 1)) ? "FunctionTabs__nav-link-active" : ""}`}
|
||||
onClick={() => setSlideIndex((props.type === 'article') ? 1 : 2)}
|
||||
>
|
||||
📬 Commentaires
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunctionTabsTop;
|
@ -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