dashboard-refactor-texts

src/components/Admin/Dashboard/index.tsx

@@ -23,32 +23,25 @@ import {
   DASHBOARD_TITLE_GPS_COORDS,
   DASHBOARD_TITLE_INFORMATION,
 } from './Dashboard.constants';
-import DashboardText from '../DashboardText';
+import DashboardPages from '../DashboardPages';
 
 const Navigation = loadable(() => import('../../../pages/admin/Navigation'));
 const { RangePicker } = DatePicker;
 
 type NoUndefinedRangeValueType<DateType> = [DateType | null, DateType | null] | null;
 
 const Dashboard: React.FC = () => {
-  const [isTextLoading, setIsTextLoading] = useState<boolean>(false);
-  const [texts, setTexts] = useState<IText[]>([]);
-  const [newTexts, setNewTexts] = useState<IText[]>(texts);
   const [infoText, setInfoText] = useState<IText>({} as IText);
   const [festival, setFestival] = useState<IFestival>({} as IFestival);
   const [toggleLoading, setToggleLoading] = useState<{ [x: string]: boolean }>({});
 
   useEffect(() => {
-    setIsTextLoading(true);
-    TextService.getAll()
-      .then(setTexts)
-      .finally(() => setIsTextLoading(false));
     TextService.getByTextType(TextType.info).then(setInfoText);
     FestivalService.getLastFestival().then((festival) => {
       CookieService.set(CookieService.festivalId, festival.id);
       setFestival(festival);
     });
-  }, [newTexts]);
+  }, []);
 
   const updateInformationsVisibility = (checked: boolean): void => {
     if (infoText) {
@@ -121,7 +114,7 @@ const Dashboard: React.FC = () => {
     <Navigation>
       <div className="grid grid-cols-12 gap-2 md:gap-5">
         <Card bordered={false} className="rounded-lg col-span-12 lg:col-span-8">
-          <DashboardText isLoading={isTextLoading} texts={texts} setTexts={setTexts} setNewTexts={setNewTexts} />
+          <DashboardPages />
         </Card>
         <Card bordered={false} className="rounded-lg col-span-12 lg:col-span-4">
           <div className="space-y-4">

src/components/Admin/DashboardPages/DashboardPageAssociation/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DashboardPageAssociation : React.FC = () => (
+  <div>Association</div>
+);
+
+export default DashboardPageAssociation;

src/components/Admin/DashboardPages/DashboardPageHome/index.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import DashboardText from '../../DashboardText';
+import { IText, TextService } from '../../../../services';
+
+const DashboardPageHome: React.FC = () => {
+  const [isTextLoading, setIsTextLoading] = useState<boolean>(false);
+  const [texts, setTexts] = useState<IText[]>([]);
+  const [newTexts, setNewTexts] = useState<IText[]>(texts);
+
+  useEffect(() => {
+    setIsTextLoading(true);
+    TextService.getAll()
+      .then(setTexts)
+      .finally(() => setIsTextLoading(false));
+  }, [newTexts]);
+
+  return (
+    <div>
+      <DashboardText isLoading={isTextLoading} texts={texts} setTexts={setTexts} setNewTexts={setNewTexts}/>
+    </div>
+  );
+};
+
+export default DashboardPageHome;

src/components/Admin/DashboardPages/DashboardPageInformation/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const DashboardPageInformation: React.FC = () => (<div>Information</div>);
+
+export default DashboardPageInformation;

src/components/Admin/DashboardPages/DashboardPageProgrammation/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const DashboardPageProgrammation: React.FC = () => (<div>Programmation</div>);
+
+export default DashboardPageProgrammation;

src/components/Admin/DashboardPages/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Tabs, TabsProps } from 'antd';
+import { ApartmentOutlined, AppstoreFilled, HomeFilled, InfoCircleFilled } from '@ant-design/icons';
+import DashboardPageHome from './DashboardPageHome';
+import DashboardPageAssociation from './DashboardPageAssociation';
+import DashboardPageProgrammation from './DashboardPageProgrammation';
+import DashboardPageInformation from './DashboardPageInformation';
+
+const DashboardPages: React.FC = () => {
+  const pages: TabsProps['items'] = [
+    {
+      key: '1',
+      label: 'Tout',
+      icon: <HomeFilled />,
+      children: <DashboardPageHome />
+    },
+    {
+      key: '2',
+      label: 'Association',
+      icon: <ApartmentOutlined />,
+      children: <DashboardPageAssociation />,
+      disabled: true,
+    },
+    {
+      key: '3',
+      label: 'Programmation',
+      icon: <AppstoreFilled />,
+      children: <DashboardPageProgrammation />,
+      disabled: true,
+    },
+    {
+      key: '4',
+      label: 'Information',
+      icon: <InfoCircleFilled />,
+      children: <DashboardPageInformation />,
+      disabled: true,
+    }
+  ];
+  return (<Tabs items={pages} />);
+};
+
+export default DashboardPages;

src/components/Footer/index.tsx

@@ -30,21 +30,21 @@ const Footer: React.FC = () => {
     });
 
   return (
-    <footer className="text-black text-center w-full p-2 mt-10">
+    <footer className="text-black text-center w-full p-2 mt-2">
       <div className="bg-footer mx-auto w-11/12 rounded py-1 my-5" />
       <div className="grid grid-cols-5 xl:grid-cols-6 grid-rows-4">
         <div className="col-span-6 lg:col-span-5 row-span-5 text-left flex flex-row flex-wrap justify-evenly overflow-x-auto">
           {partners.map((partner, key) => (
             <Skeleton key={key} avatar={true} active={true} loading={isPartnerLoading}>
-              {partner.link.trim() === '' ? (
+              {partner.link && partner.link.trim() === '' ? (
                 <AdvancedImage
                   plugins={[lazyload({ threshold: 0.5 })]}
                   cldImg={cloudinary.image(partner.image)}
                   alt={partner.name}
                   className="w-auto h-16 2xl:h-24 object-contain"
                 />
               ) : (
-                <ExternalLink src={partner.link}>
+                <ExternalLink src={partner.link || ''}>
                   <AdvancedImage
                     plugins={[lazyload({ threshold: 0.5 })]}
                     cldImg={cloudinary.image(partner.image)}

src/pages/admin/Navigation/index.tsx

@@ -9,13 +9,12 @@ import {
   TeamOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
-import { Form, Input, message, Modal } from 'antd';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import React, { useState } from 'react';
+import { Form, Input, Modal } from 'antd';
+import { Link } from 'react-router-dom';
+import React from 'react';
 
-import { AxiosError } from 'axios';
-import { AuthenticationService, CookieService } from '../../../services';
 import { programmationTitle, RouterUrl } from '../../../constants';
+import { useNavigationHook } from './useNavigation.hook';
 
 const activatedClassCSS =
   'flex items-center py-2 px-6 bg-gray-200 bg-opacity-1 text-gray-700 hover:text-gray-900 rounded-l-full';
@@ -24,7 +23,7 @@ const deactivatedClassCSS =
 
 const adminRoutes = [
   {
-    name: 'Dashboard',
+    name: 'Pages',
     link: RouterUrl.home,
     icon: <DashboardOutlined />,
   },
@@ -60,40 +59,7 @@ interface NavigationProps {
 }
 
 const Navigation: React.FC<NavigationProps> = ({ children }) => {
-  const [isModalVisible, setIsModalVisible] = useState<boolean>(!AuthenticationService.connectedUserCookie());
-  const [confirmLoginLoading, setConfirmLoginLoading] = useState<boolean>(false);
-  const [loginForm] = Form.useForm();
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const logout = () => {
-    AuthenticationService.logout();
-    navigate(RouterUrl.home);
-    if (location.pathname === RouterUrl.home) navigate(0);
-  };
-
-  const handleLogin = () => {
-    setConfirmLoginLoading(true);
-    loginForm
-      .validateFields()
-      .then((values) => {
-        AuthenticationService.logInAsync(values)
-          .then((result) => {
-            setConfirmLoginLoading(false);
-            setIsModalVisible(false);
-            CookieService.set(CookieService.authToken, 'true', 60 * 60 * 2); // 2 hours
-            message.success(`${result.username} connecté`);
-          })
-          .catch(async (error: AxiosError) => {
-            await message.error(error.response?.data as string);
-            setConfirmLoginLoading(false);
-            CookieService.set(CookieService.authToken, 'false');
-          })
-          .finally(() => loginForm.resetFields());
-      })
-      .catch((info) => message.warning('Validation failed: ', info));
-  };
-
+  const { isModalVisible, confirmLoginLoading, loginForm, logout, handleLogin } = useNavigationHook();
   return (
     <div className="grid grid-cols-12 h-screen">
       <div className="col-span-1 sm:col-span-2 md:col-span-2 bg-gray-900">

src/pages/admin/Navigation/useNavigation.hook.ts

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { AuthenticationService, CookieService } from '../../../services';
+import { Form, message } from 'antd';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { RouterUrl } from '../../../constants';
+import { AxiosError } from 'axios';
+
+export const useNavigationHook = () => {
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(!AuthenticationService.connectedUserCookie());
+  const [confirmLoginLoading, setConfirmLoginLoading] = useState<boolean>(false);
+  const [loginForm] = Form.useForm();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const logout = () => {
+    AuthenticationService.logout();
+    navigate(RouterUrl.home);
+    if (location.pathname === RouterUrl.home) navigate(0);
+  };
+
+  const handleLogin = () => {
+    setConfirmLoginLoading(true);
+    loginForm
+      .validateFields()
+      .then((values) => {
+        AuthenticationService.logInAsync(values)
+          .then((result) => {
+            setConfirmLoginLoading(false);
+            setIsModalVisible(false);
+            CookieService.set(CookieService.authToken, 'true', 60 * 60 * 2); // 2 hours
+            message.success(`${result.username} connecté`);
+          })
+          .catch(async (error: AxiosError) => {
+            await message.error(error.response?.data as string);
+            setConfirmLoginLoading(false);
+            CookieService.set(CookieService.authToken, 'false');
+          })
+          .finally(() => loginForm.resetFields());
+      })
+      .catch((info) => message.warning('Validation failed: ', info));
+  };
+
+  return {
+    isModalVisible,
+    confirmLoginLoading,
+    loginForm,
+    logout,
+    handleLogin
+  };
+};