From 52d16a88d4a79de759d3850be3567596e4582501 Mon Sep 17 00:00:00 2001
From: Bastien Grignon <basgrignon@gmail.com>
Date: Wed, 21 Aug 2024 23:50:19 +0200
Subject: [PATCH 1/2] WIP refactor texts

---
 src/components/Admin/Dashboard/index.tsx      |  5 +-
 .../DashboardPageAssociation/index.tsx        |  7 +++
 .../DashboardPageHome/index.tsx               |  7 +++
 .../DashboardPageInformation/index.tsx        |  5 ++
 .../DashboardPageProgrammation/index.tsx      |  5 ++
 src/components/Admin/DashboardPages/index.tsx | 39 +++++++++++++++
 src/components/Footer/index.tsx               |  6 +--
 src/pages/admin/Navigation/index.tsx          | 46 +++--------------
 .../admin/Navigation/useNavigation.hook.ts    | 50 +++++++++++++++++++
 9 files changed, 125 insertions(+), 45 deletions(-)
 create mode 100644 src/components/Admin/DashboardPages/DashboardPageAssociation/index.tsx
 create mode 100644 src/components/Admin/DashboardPages/DashboardPageHome/index.tsx
 create mode 100644 src/components/Admin/DashboardPages/DashboardPageInformation/index.tsx
 create mode 100644 src/components/Admin/DashboardPages/DashboardPageProgrammation/index.tsx
 create mode 100644 src/components/Admin/DashboardPages/index.tsx
 create mode 100644 src/pages/admin/Navigation/useNavigation.hook.ts

diff --git a/src/components/Admin/Dashboard/index.tsx b/src/components/Admin/Dashboard/index.tsx
index d399e4a..08c9ffa 100644
--- a/src/components/Admin/Dashboard/index.tsx
+++ b/src/components/Admin/Dashboard/index.tsx
@@ -23,7 +23,7 @@ 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;
@@ -121,7 +121,8 @@ 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 />
+          {/*<DashboardText isLoading={isTextLoading} texts={texts} setTexts={setTexts} setNewTexts={setNewTexts} />*/}
         </Card>
         <Card bordered={false} className="rounded-lg col-span-12 lg:col-span-4">
           <div className="space-y-4">
diff --git a/src/components/Admin/DashboardPages/DashboardPageAssociation/index.tsx b/src/components/Admin/DashboardPages/DashboardPageAssociation/index.tsx
new file mode 100644
index 0000000..4ca6b1c
--- /dev/null
+++ b/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;
diff --git a/src/components/Admin/DashboardPages/DashboardPageHome/index.tsx b/src/components/Admin/DashboardPages/DashboardPageHome/index.tsx
new file mode 100644
index 0000000..f9b8e45
--- /dev/null
+++ b/src/components/Admin/DashboardPages/DashboardPageHome/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DashboardPageHome: React.FC = () => (
+  <div>Accueil</div>
+);
+
+export default DashboardPageHome;
diff --git a/src/components/Admin/DashboardPages/DashboardPageInformation/index.tsx b/src/components/Admin/DashboardPages/DashboardPageInformation/index.tsx
new file mode 100644
index 0000000..b7cfd21
--- /dev/null
+++ b/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;
diff --git a/src/components/Admin/DashboardPages/DashboardPageProgrammation/index.tsx b/src/components/Admin/DashboardPages/DashboardPageProgrammation/index.tsx
new file mode 100644
index 0000000..8e88e12
--- /dev/null
+++ b/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;
diff --git a/src/components/Admin/DashboardPages/index.tsx b/src/components/Admin/DashboardPages/index.tsx
new file mode 100644
index 0000000..274312c
--- /dev/null
+++ b/src/components/Admin/DashboardPages/index.tsx
@@ -0,0 +1,39 @@
+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: 'Accueil',
+      icon: <HomeFilled />,
+      children: <DashboardPageHome />
+    },
+    {
+      key: '2',
+      label: 'Association',
+      icon: <ApartmentOutlined />,
+      children: <DashboardPageAssociation />
+    },
+    {
+      key: '3',
+      label: 'Programmation',
+      icon: <AppstoreFilled />,
+      children: <DashboardPageProgrammation />
+    },
+    {
+      key: '4',
+      label: 'Information',
+      icon: <InfoCircleFilled />,
+      children: <DashboardPageInformation />
+    }
+  ];
+  return (<Tabs items={pages} />);
+};
+
+export default DashboardPages;
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index b961e95..56160c6 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -30,13 +30,13 @@ 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)}
@@ -44,7 +44,7 @@ const Footer: React.FC = () => {
                   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)}
diff --git a/src/pages/admin/Navigation/index.tsx b/src/pages/admin/Navigation/index.tsx
index 54e2dfb..eeee19c 100644
--- a/src/pages/admin/Navigation/index.tsx
+++ b/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">
diff --git a/src/pages/admin/Navigation/useNavigation.hook.ts b/src/pages/admin/Navigation/useNavigation.hook.ts
new file mode 100644
index 0000000..8a28afd
--- /dev/null
+++ b/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
+  };
+};

From df07b5988a80875c0ac0cdbe2d2b517ce586b89a Mon Sep 17 00:00:00 2001
From: Bastien Grignon <basgrignon@gmail.com>
Date: Sun, 15 Sep 2024 10:34:28 +0200
Subject: [PATCH 2/2] Disable tabs and move texts to first tab

---
 src/components/Admin/Dashboard/index.tsx      | 10 +-------
 .../DashboardPageHome/index.tsx               | 25 ++++++++++++++++---
 src/components/Admin/DashboardPages/index.tsx | 11 +++++---
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/Admin/Dashboard/index.tsx b/src/components/Admin/Dashboard/index.tsx
index 08c9ffa..9beee31 100644
--- a/src/components/Admin/Dashboard/index.tsx
+++ b/src/components/Admin/Dashboard/index.tsx
@@ -31,24 +31,17 @@ 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) {
@@ -122,7 +115,6 @@ const Dashboard: React.FC = () => {
       <div className="grid grid-cols-12 gap-2 md:gap-5">
         <Card bordered={false} className="rounded-lg col-span-12 lg:col-span-8">
           <DashboardPages />
-          {/*<DashboardText isLoading={isTextLoading} texts={texts} setTexts={setTexts} setNewTexts={setNewTexts} />*/}
         </Card>
         <Card bordered={false} className="rounded-lg col-span-12 lg:col-span-4">
           <div className="space-y-4">
diff --git a/src/components/Admin/DashboardPages/DashboardPageHome/index.tsx b/src/components/Admin/DashboardPages/DashboardPageHome/index.tsx
index f9b8e45..eed4845 100644
--- a/src/components/Admin/DashboardPages/DashboardPageHome/index.tsx
+++ b/src/components/Admin/DashboardPages/DashboardPageHome/index.tsx
@@ -1,7 +1,24 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import DashboardText from '../../DashboardText';
+import { IText, TextService } from '../../../../services';
 
-const DashboardPageHome: React.FC = () => (
-  <div>Accueil</div>
-);
+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;
diff --git a/src/components/Admin/DashboardPages/index.tsx b/src/components/Admin/DashboardPages/index.tsx
index 274312c..43d55f0 100644
--- a/src/components/Admin/DashboardPages/index.tsx
+++ b/src/components/Admin/DashboardPages/index.tsx
@@ -10,7 +10,7 @@ const DashboardPages: React.FC = () => {
   const pages: TabsProps['items'] = [
     {
       key: '1',
-      label: 'Accueil',
+      label: 'Tout',
       icon: <HomeFilled />,
       children: <DashboardPageHome />
     },
@@ -18,19 +18,22 @@ const DashboardPages: React.FC = () => {
       key: '2',
       label: 'Association',
       icon: <ApartmentOutlined />,
-      children: <DashboardPageAssociation />
+      children: <DashboardPageAssociation />,
+      disabled: true,
     },
     {
       key: '3',
       label: 'Programmation',
       icon: <AppstoreFilled />,
-      children: <DashboardPageProgrammation />
+      children: <DashboardPageProgrammation />,
+      disabled: true,
     },
     {
       key: '4',
       label: 'Information',
       icon: <InfoCircleFilled />,
-      children: <DashboardPageInformation />
+      children: <DashboardPageInformation />,
+      disabled: true,
     }
   ];
   return (<Tabs items={pages} />);