theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

👌 IMPROVE: Refactoring /functions/[slug]

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/components/AddEditFunction.js → website/components/FunctionAdmin/AddEditFunction.js
View File

@ -1,9 +1,9 @@
import { Fragment, useState, useEffect } from 'react'; import { Fragment, useState, useEffect } from 'react';
import htmlParser from 'html-react-parser'; import htmlParser from 'html-react-parser';
import Loader from '../components/Loader'; import Loader from '../../components/Loader';
import useAPI from '../hooks/useAPI'; import useAPI from '../../hooks/useAPI';
import api from '../utils/api'; import api from '../../utils/api';
import '../public/css/pages/admin.css'; import '../../public/css/pages/admin.css';
const AddEditFunction = (props) => { const AddEditFunction = (props) => {

8
website/components/EditArticleFunction.js → website/components/FunctionAdmin/EditArticleFunction.js
View File

@ -1,10 +1,10 @@
import { useState } from 'react'; import { useState } from 'react';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { complex } from '../utils/sunEditorConfig'; import { complex } from '../../utils/sunEditorConfig';
import api from '../utils/api'; import api from '../../utils/api';
import FunctionArticle from '../components/FunctionArticle'; import FunctionArticle from '../FunctionPage/FunctionArticle';
import 'notyf/notyf.min.css'; import 'notyf/notyf.min.css';
import '../public/css/suneditor.min.css'; import '../../public/css/suneditor.min.css';
const SunEditor = dynamic( const SunEditor = dynamic(
() => import('suneditor-react'), () => import('suneditor-react'),

2
website/components/EditFormFunction.js → website/components/FunctionAdmin/EditFormFunction.js
View File

@ -1,5 +1,5 @@
import { useState, Fragment } from 'react'; import { useState, Fragment } from 'react';
import api from '../utils/api'; import api from '../../utils/api';
import 'notyf/notyf.min.css'; import 'notyf/notyf.min.css';
const EditFormFunction = (props) => { const EditFormFunction = (props) => {

0
website/components/CommentCard/CommentCard.css → website/components/FunctionPage/CommentCard/CommentCard.css
View File

6
website/components/CommentCard/CommentCard.js → website/components/FunctionPage/CommentCard/CommentCard.js
View File

@ -1,9 +1,9 @@
import Link from 'next/link'; import Link from 'next/link';
import { forwardRef, useContext, Fragment } from 'react'; import { forwardRef, useContext, Fragment } from 'react';
import date from 'date-and-time'; import date from 'date-and-time';
import { UserContext } from '../../contexts/UserContext'; import { UserContext } from '../../../contexts/UserContext';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../../utils/config';
import api from '../../utils/api'; import api from '../../../utils/api';
import './CommentCard.css'; import './CommentCard.css';
const CommentCard = forwardRef((props, ref) => { const CommentCard = forwardRef((props, ref) => {

0
website/components/FunctionArticle.js → website/components/FunctionPage/FunctionArticle.js
View File

0
website/components/FunctionComments/FunctionComments.css → website/components/FunctionPage/FunctionComments/FunctionComments.css
View File

6
website/components/FunctionComments/FunctionComments.js → website/components/FunctionPage/FunctionComments/FunctionComments.js
View File

@ -1,9 +1,9 @@
import { Fragment, useState, useEffect, useContext, useRef, useCallback } from 'react'; import { Fragment, useState, useEffect, useContext, useRef, useCallback } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { UserContext } from '../../contexts/UserContext'; import { UserContext } from '../../../contexts/UserContext';
import CommentCard from '../CommentCard/CommentCard'; import CommentCard from '../CommentCard/CommentCard';
import Loader from '../Loader'; import Loader from '../../Loader';
import api from '../../utils/api'; import api from '../../../utils/api';
import './FunctionComments.css'; import './FunctionComments.css';
const FunctionComments = ({ functionId }) => { const FunctionComments = ({ functionId }) => {

8
website/components/FunctionComponentTop.js → website/components/FunctionPage/FunctionComponentTop.js
View File

@ -4,10 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons'; import { faStar } from '@fortawesome/free-solid-svg-icons';
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons'; import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import date from 'date-and-time'; import date from 'date-and-time';
import { UserContext } from '../contexts/UserContext'; import { UserContext } from '../../contexts/UserContext';
import api from '../utils/api'; import api from '../../utils/api';
import { API_URL } from '../utils/config'; import { API_URL } from '../../utils/config';
import './FunctionCard/FunctionCard.css'; import '../FunctionCard/FunctionCard.css';
const FunctionComponentTop = (props) => { const FunctionComponentTop = (props) => {

4
website/components/FunctionForm.js → website/components/FunctionPage/FunctionForm.js
View File

@ -1,8 +1,8 @@
import { Fragment, useState, useEffect } from 'react'; import { Fragment, useState, useEffect } from 'react';
import Loader from './Loader'; import Loader from '../Loader';
import htmlParser from 'html-react-parser'; import htmlParser from 'html-react-parser';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import api from '../utils/api'; import api from '../../utils/api';
import fr from 'date-fns/locale/fr'; import fr from 'date-fns/locale/fr';
import { registerLocale } from "react-datepicker"; import { registerLocale } from "react-datepicker";
import date from 'date-and-time'; import date from 'date-and-time';

2
website/components/FunctionPage/FunctionPage.js
View File

@ -2,7 +2,7 @@ import { Fragment, useState } from 'react';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../utils/config';
import HeadTag from '../HeadTag'; import HeadTag from '../HeadTag';
import FunctionTabsTop from './FunctionTabsTop'; import FunctionTabsTop from './FunctionTabsTop';
import FunctionComponentTop from '../FunctionComponentTop'; import FunctionComponentTop from './FunctionComponentTop';
const FunctionPage = (props) => { const FunctionPage = (props) => {

0
website/components/FunctionTabs/FunctionTabs.css → website/components/FunctionPage/FunctionTabs.css
View File

2
website/components/FunctionPage/FunctionTabs.js
View File

@ -1,5 +1,5 @@
import SwipeableViews from 'react-swipeable-views'; import SwipeableViews from 'react-swipeable-views';
import '../../components/FunctionTabs/FunctionTabs.css'; import './FunctionTabs.css';
const FunctionTabs = (props) => { const FunctionTabs = (props) => {
return ( return (

35
website/components/FunctionTabManager.js
View File

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

19
website/components/FunctionTabs/FunctionTabs.js
View File

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

45
website/components/FunctionTabs/FunctionTabsTop.js
View File

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

8
website/pages/admin/[slug].js
View File

@ -2,13 +2,13 @@ import { Fragment, useState } from 'react';
import Cookies from "universal-cookie"; import Cookies from "universal-cookie";
import SwipeableViews from 'react-swipeable-views'; import SwipeableViews from 'react-swipeable-views';
import HeadTag from '../../components/HeadTag'; import HeadTag from '../../components/HeadTag';
import AddEditFunction from '../../components/AddEditFunction'; import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction';
import EditArticleFunction from '../../components/EditArticleFunction'; import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunction';
import EditFormFunction from '../../components/EditFormFunction'; import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction';
import redirect from '../../utils/redirect'; import redirect from '../../utils/redirect';
import api from '../../utils/api'; import api from '../../utils/api';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../utils/config';
import '../../components/FunctionTabs/FunctionTabs.css'; import '../../components/FunctionPage/FunctionTabs.css';
import '../../public/css/pages/admin.css'; import '../../public/css/pages/admin.css';
const AdminFunctionComponent = (props) => { const AdminFunctionComponent = (props) => {

2
website/pages/admin/index.js
View File

@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { faTimes } from '@fortawesome/free-solid-svg-icons';
import Modal from '../../components/Modal'; import Modal from '../../components/Modal';
import FunctionsList from '../../components/FunctionsList/FunctionsList'; import FunctionsList from '../../components/FunctionsList/FunctionsList';
import AddEditFunction from '../../components/AddEditFunction'; import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction';
import redirect from '../../utils/redirect'; import redirect from '../../utils/redirect';
import '../../public/css/pages/admin.css'; import '../../public/css/pages/admin.css';

51
website/pages/functions/[slug].js
View File

@ -1,26 +1,49 @@
import FunctionTabsContextProvider from '../../contexts/FunctionTabsContext'; import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
import HeadTag from '../../components/HeadTag'; import FunctionForm from '../../components/FunctionPage/FunctionForm';
import FunctionComponentTop from '../../components/FunctionComponentTop'; import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop'; import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
import FunctionTabManager from '../../components/FunctionTabManager'; import FunctionPage from '../../components/FunctionPage/FunctionPage';
import redirect from '../../utils/redirect'; import redirect from '../../utils/redirect';
import api from '../../utils/api'; import api from '../../utils/api';
import { API_URL } from '../../utils/config';
import '../../public/css/pages/FunctionComponent.css'; import '../../public/css/pages/FunctionComponent.css';
const FunctionComponent = (props) => { const FunctionTabManager = (props) => {
if (props.type === "form") {
return ( return (
<FunctionTabsContextProvider> <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<HeadTag title={props.title} description={props.description} image={API_URL + props.image} /> <div className="FunctionComponent__slide">
<div className="container-fluid"> <FunctionForm inputsArray={ [...props.utilizationForm || []] } slug={props.slug} />
<FunctionTabsTop type={props.type} />
<FunctionComponentTop { ...props } />
<FunctionTabManager { ...props } />
</div> </div>
</FunctionTabsContextProvider> <div className="FunctionComponent__slide">
<FunctionArticle article={props.article} />
</div>
<div className="FunctionComponent__slide">
<FunctionComments functionId={props.id} />
</div>
</FunctionTabs>
);
}
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<div className="FunctionComponent__slide">
<FunctionArticle article={props.article} />
</div>
<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) { export async function getServerSideProps(context) {
const { slug } = context.params; const { slug } = context.params;
return api.get(`/functions/${slug}`) return api.get(`/functions/${slug}`)

4
website/pages/functions/randomQuote.js
View File

@ -8,8 +8,8 @@ import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader'; import Loader from '../../components/Loader';
import FunctionPage from '../../components/FunctionPage/FunctionPage'; import FunctionPage from '../../components/FunctionPage/FunctionPage';
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'; import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
import FunctionArticle from '../../components/FunctionArticle'; import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
import FunctionComments from '../../components/FunctionComments/FunctionComments'; import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
import api from '../../utils/api'; import api from '../../utils/api';
import copyToClipboard from '../../utils/copyToClipboard'; import copyToClipboard from '../../utils/copyToClipboard';
import 'notyf/notyf.min.css'; import 'notyf/notyf.min.css';