From 4cdfe81e31dcce558e1c284961824fff3944a965 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 30 Apr 2024 11:46:12 +0000
Subject: [PATCH] feat: rework popups & refactor best practices for react query
---
src/API.ts | 81 ++++++--
src/components/Consents/Consents.tsx | 2 +-
src/components/ImagePicker/ImagePicker.tsx | 3 +-
src/components/Newsletter/Newsletter.tsx | 2 +-
.../Popups/{Popups.tsx => CustomPopup.tsx} | 183 ++++--------------
src/components/Popups/PartnersIssue.tsx | 124 ++++++++++++
src/components/Popups/popups.scss | 6 +
src/components/Prices/PriceSection.tsx | 2 +-
src/components/Routes/Router.tsx | 21 +-
src/components/SideBar/SideBar.tsx | 3 +-
src/hooks/query-keys.ts | 5 +
src/hooks/useCustomPopup.tsx | 12 ++
src/hooks/usePartnersIssue.tsx | 35 ++++
src/hooks/useWhoAmI.tsx | 12 ++
src/services/partnersInfo.service.ts | 46 -----
15 files changed, 319 insertions(+), 218 deletions(-)
rename src/components/Popups/{Popups.tsx => CustomPopup.tsx} (63%)
create mode 100644 src/components/Popups/PartnersIssue.tsx
create mode 100644 src/hooks/query-keys.ts
create mode 100644 src/hooks/useCustomPopup.tsx
create mode 100644 src/hooks/usePartnersIssue.tsx
create mode 100644 src/hooks/useWhoAmI.tsx
delete mode 100644 src/services/partnersInfo.service.ts
diff --git a/src/API.ts b/src/API.ts
index 1526a7a4..be154814 100644
--- a/src/API.ts
+++ b/src/API.ts
@@ -1,11 +1,28 @@
-import { useQuery } from '@tanstack/react-query'
import axios, { AxiosRequestConfig } from 'axios'
import { toast } from 'react-toastify'
+import { ICustomPopup } from './models/customPopup.model'
+import { IPartnersInfo } from './models/partnersInfo.model'
import { User } from './models/user.model'
-const fetchWhoAmI = async () => {
+const endpoints = {
+ /** public endpoints */
+ common: {
+ WhoAmI: '/api/common/WhoAmI',
+ partnersInfo: '/api/common/partnersInfo',
+ customPop: '/api/common/customPopup',
+ logout: '/Logout',
+ },
+ /** animator role required endpoints */
+ animator: {
+ partnersInfo: '/api/animator/partnersInfo',
+ imageNames: '/api/animator/imageNames',
+ savePartnersInfo: '/api/animator/savePartnersInfo',
+ },
+} as const
+
+export const fetchWhoAmI = async () => {
try {
- const { data } = await axios.get<User | null>('/api/common/WhoAmI')
+ const { data } = await axios.get<User | null>(endpoints.common.WhoAmI)
return data
} catch (error) {
console.error('error whoami', error)
@@ -13,18 +30,8 @@ const fetchWhoAmI = async () => {
}
}
-export const useWhoAmI = () => {
- return useQuery({
- queryKey: ['WhoAmI'],
- queryFn: fetchWhoAmI,
- retry: false,
-
- refetchOnMount: false,
- })
-}
-
export const fetchLogout = async () => {
- return await axios.get('/Logout')
+ return await axios.get(endpoints.common.WhoAmI)
}
export const fetchEcogestureImages = async (
@@ -39,3 +46,49 @@ export const fetchEcogestureImages = async (
}
return []
}
+
+export const fetchPartnersIssue = async () => {
+ try {
+ const { data } = await axios.get<IPartnersInfo>(
+ endpoints.common.partnersInfo
+ )
+ return data
+ } catch (error) {
+ console.error('error partnersInfo', error)
+ toast.error('Accès refusé, veuillez vous connecter')
+ throw error
+ }
+}
+
+export const savePartnersInfo = async (
+ partnersInfo: IPartnersInfo,
+ axiosHeaders: AxiosRequestConfig
+) => {
+ try {
+ await axios.put<IPartnersInfo>(
+ endpoints.animator.partnersInfo,
+ {
+ grdf_failure: partnersInfo.grdf_failure,
+ enedis_failure: partnersInfo.enedis_failure,
+ egl_failure: partnersInfo.egl_failure,
+ notification_activated: partnersInfo.notification_activated,
+ },
+ axiosHeaders
+ )
+ toast.success('Information des partenaires mises à jour !')
+ } catch (error) {
+ toast.error('Erreur lors de la mise à jour des information des partenaires')
+ console.error(error)
+ }
+}
+
+export const fetchCustomPopup = async (): Promise<ICustomPopup> => {
+ try {
+ const { data } = await axios.get<ICustomPopup>(endpoints.common.customPop)
+ return data
+ } catch (error) {
+ console.error('error customPopup', error)
+ toast.error('Accès refusé, veuillez vous connecter')
+ throw error
+ }
+}
diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx
index 95e12e6c..886f81cd 100644
--- a/src/components/Consents/Consents.tsx
+++ b/src/components/Consents/Consents.tsx
@@ -9,8 +9,8 @@ import {
import { AgGridReact } from 'ag-grid-react'
import { DateTime } from 'luxon'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useWhoAmI } from '../../API'
import { getAxiosXSRFHeader } from '../../axios.config'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
import { IGrdfConsent, grdfColumnDef } from '../../models/grdfConsent'
import { ISgeConsent, sgeColumnDefs } from '../../models/sgeConsent.model'
import { GrdfConsentService } from '../../services/grdfConsent.service'
diff --git a/src/components/ImagePicker/ImagePicker.tsx b/src/components/ImagePicker/ImagePicker.tsx
index 87e990e2..9ec4dbb6 100644
--- a/src/components/ImagePicker/ImagePicker.tsx
+++ b/src/components/ImagePicker/ImagePicker.tsx
@@ -1,8 +1,9 @@
import { Button, Dialog, Pagination } from '@mui/material'
import { useQuery } from '@tanstack/react-query'
import React, { useState } from 'react'
-import { fetchEcogestureImages, useWhoAmI } from '../../API'
+import { fetchEcogestureImages } from '../../API'
import { getAxiosXSRFHeader } from '../../axios.config'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
import SingleImage from './SingleImage'
const IMAGES_PER_PAGE = 15
diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
index 9ecedf91..22d3f187 100644
--- a/src/components/Newsletter/Newsletter.tsx
+++ b/src/components/Newsletter/Newsletter.tsx
@@ -1,7 +1,7 @@
import { Button, Dialog } from '@mui/material'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useWhoAmI } from '../../API'
import { getAxiosXSRFHeader } from '../../axios.config'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
import { IMailSubject } from '../../models/mailSubject.model'
import { IMonthlyInfo } from '../../models/monthlyInfo.model'
import { IMonthlyNews } from '../../models/monthlyNews.model'
diff --git a/src/components/Popups/Popups.tsx b/src/components/Popups/CustomPopup.tsx
similarity index 63%
rename from src/components/Popups/Popups.tsx
rename to src/components/Popups/CustomPopup.tsx
index 853e91f2..df9394a7 100644
--- a/src/components/Popups/Popups.tsx
+++ b/src/components/Popups/CustomPopup.tsx
@@ -8,11 +8,12 @@ import {
TextField,
} from '@mui/material'
import { DateTime } from 'luxon'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import { useWhoAmI } from '../../API'
+import { Link } from 'react-router-dom'
import { getAxiosXSRFHeader } from '../../axios.config'
-import { CheckboxType } from '../../enum/checkboxType.enum'
+import { usePartnersIssue } from '../../hooks/usePartnersIssue'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
import { ICustomPopup, PopupDuration } from '../../models/customPopup.model'
import {
Option,
@@ -20,14 +21,13 @@ import {
durationType,
mapDuration,
} from '../../models/durationOptions.model'
-import { IPartnersInfo } from '../../models/partnersInfo.model'
import { CustomPopupService } from '../../services/customPopup.service'
-import { PartnersInfoService } from '../../services/partnersInfo.service'
import { convertStringToEditorState } from '../../utils/editorStateManagement'
import { getFilenameFromPath } from '../../utils/imagesUrlsGetter'
import ImagePicker from '../ImagePicker/ImagePicker'
import Loader from '../Loader/Loader'
import CustomEditor from '../Newsletter/CustomEditor'
+import { links } from '../Routes/Router'
import './popups.scss'
const OPTIONS: Option[] = [
@@ -45,18 +45,13 @@ const OPTIONS: Option[] = [
},
]
-const Popups: React.FC = () => {
+export const CustomPopup: React.FC = () => {
const { data: user } = useWhoAmI()
+ const { partnersIssue } = usePartnersIssue()
const defaultIcon = '/assets/ecogesture/bullhorn.png'
const [refreshData, setRefreshData] = useState(false)
const [isLoading, setIsLoading] = useState(false)
- const [partnersInfo, setPartnersInfo] = useState<IPartnersInfo>({
- grdf_failure: false,
- enedis_failure: false,
- egl_failure: false,
- notification_activated: false,
- })
const [previousEndDate, setPreviousEndDate] = useState<string>()
const [popupDuration, setPopupDuration] = useState<PopupDuration>({
type: durationEnum.infinite,
@@ -71,43 +66,22 @@ const Popups: React.FC = () => {
})
const isPartnerNotificationOn = () =>
- partnersInfo.enedis_failure ||
- partnersInfo.egl_failure ||
- partnersInfo.grdf_failure
+ Boolean(
+ partnersIssue.data &&
+ (partnersIssue.data.enedis_failure ||
+ partnersIssue.data.egl_failure ||
+ partnersIssue.data.grdf_failure)
+ )
/** Only one type of popup can be enabled */
const isPageValid = () =>
!(isPartnerNotificationOn() && customPopup.popupEnabled)
- const handleCheckboxChange = (value: boolean, type: CheckboxType): void => {
- switch (type) {
- case CheckboxType.GRDF:
- setPartnersInfo(prevPartnersInfo => ({
- ...prevPartnersInfo,
- grdf_failure: value,
- }))
- break
- case CheckboxType.ENEDIS:
- setPartnersInfo(prevPartnersInfo => ({
- ...prevPartnersInfo,
- enedis_failure: value,
- }))
- break
- case CheckboxType.EGL:
- setPartnersInfo(prevPartnersInfo => ({
- ...prevPartnersInfo,
- egl_failure: value,
- }))
- break
- case CheckboxType.CUSTOM:
- setCustomPopup(prev => ({
- ...prev,
- popupEnabled: value,
- }))
- break
- default:
- throw new Error('Unknown checkbox type')
- }
+ const toggleCustomPopup = (value: boolean): void => {
+ setCustomPopup(prev => ({
+ ...prev,
+ popupEnabled: value,
+ }))
}
const handlePopupChange = (
@@ -120,37 +94,15 @@ const Popups: React.FC = () => {
}))
}
- // clean this
- const handleCancel = useCallback(() => {
- setRefreshData(true)
- }, [setRefreshData])
-
- const resetFields = useCallback(() => {
- setPartnersInfo({
- grdf_failure: false,
- enedis_failure: false,
- egl_failure: false,
- notification_activated: false,
- })
- }, [setPartnersInfo])
-
useEffect(() => {
let subscribed = true
- resetFields()
setIsLoading(true)
- async function loadSettings() {
+ async function loadCustomPopup() {
if (user) {
- const partnersInfoService = new PartnersInfoService()
const customPopupService = new CustomPopupService()
- const previousPartnersInfo = await partnersInfoService.getPartnersInfo()
const previousPopup = await customPopupService.getCustomPopupInfo()
- if (previousPartnersInfo) {
- setPartnersInfo({
- ...previousPartnersInfo,
- })
- }
if (previousPopup) {
const isOutdated = isPopupOutdated(previousPopup.endDate)
/** If outdated, set value to false, otherwise, set it to its value */
@@ -173,29 +125,18 @@ const Popups: React.FC = () => {
setIsLoading(false)
}
if (subscribed) {
- loadSettings()
+ loadCustomPopup()
}
return () => {
subscribed = false
setRefreshData(false)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [user, refreshData, setPartnersInfo, setCustomPopup, resetFields])
+ }, [user, refreshData, setCustomPopup])
const handleSave = async (): Promise<void> => {
if (user) {
- const partnersInfoService = new PartnersInfoService()
const customPopupService = new CustomPopupService()
- const updatedPartnersInfo = {
- egl_failure: partnersInfo.egl_failure,
- enedis_failure: partnersInfo.enedis_failure,
- grdf_failure: partnersInfo.grdf_failure,
- notification_activated: isPartnerNotificationOn(),
- }
- await partnersInfoService.savePartnersInfo(
- updatedPartnersInfo,
- getAxiosXSRFHeader(user.xsrftoken)
- )
await customPopupService.saveCustomPopup(
{
...customPopup,
@@ -229,7 +170,7 @@ const Popups: React.FC = () => {
}
setCustomPopup(prev => ({
...prev,
- endDate: newDate.toISO() || '',
+ endDate: newDate.toISO() ?? '',
}))
}, [popupDuration])
@@ -264,63 +205,6 @@ const Popups: React.FC = () => {
{isLoading && <Loader />}
{!isLoading && (
<>
- <div className="partnersInfo">
- <h3>Affichage des pop-up de panne</h3>
- <div>
- <p>Services concernés</p>
- <FormGroup style={{ flexDirection: 'row' }}>
- <FormControlLabel
- label="Panne Enedis"
- labelPlacement="top"
- control={
- <Switch
- disabled={customPopup.popupEnabled}
- checked={partnersInfo.enedis_failure}
- onChange={event => {
- handleCheckboxChange(
- event.target.checked,
- CheckboxType.ENEDIS
- )
- }}
- />
- }
- />
- <FormControlLabel
- label="Panne EGL"
- labelPlacement="top"
- control={
- <Switch
- disabled={customPopup.popupEnabled}
- checked={partnersInfo.egl_failure}
- onChange={event => {
- handleCheckboxChange(
- event.target.checked,
- CheckboxType.EGL
- )
- }}
- />
- }
- />
- <FormControlLabel
- label="Panne GRDF"
- labelPlacement="top"
- control={
- <Switch
- disabled={customPopup.popupEnabled}
- checked={partnersInfo.grdf_failure}
- onChange={event => {
- handleCheckboxChange(
- event.target.checked,
- CheckboxType.GRDF
- )
- }}
- />
- }
- />
- </FormGroup>
- </div>
- </div>
-
<div className="customPopup">
<h3>Affichage de pop-up personnalisée</h3>
<FormGroup style={{ flexDirection: 'row' }}>
@@ -331,18 +215,25 @@ const Popups: React.FC = () => {
<Switch
disabled={isPartnerNotificationOn()}
checked={customPopup.popupEnabled}
- onChange={event => {
- handleCheckboxChange(
- event.target.checked,
- CheckboxType.CUSTOM
- )
- }}
+ onChange={event =>
+ toggleCustomPopup(event.target.checked)
+ }
/>
}
/>
{customPopup.popupEnabled &&
previousEndDate &&
getRemainingDuration(previousEndDate)}
+
+ {isPartnerNotificationOn() && (
+ <p className="singlePopupWarning">
+ La pop-up personnalisée ne peut pas être activée en même
+ temps que les{' '}
+ <Link to={links.partnersIssue.path}>
+ pannes des partenaires
+ </Link>
+ </p>
+ )}
</FormGroup>
<div className="popupEndDate">
@@ -427,7 +318,7 @@ const Popups: React.FC = () => {
</div>
<div className="buttons">
- <Button variant="outlined" onClick={handleCancel}>
+ <Button variant="outlined" onClick={() => setRefreshData(true)}>
Annuler
</Button>
<Button disabled={!isPageValid()} onClick={handleSave}>
@@ -440,5 +331,3 @@ const Popups: React.FC = () => {
</>
)
}
-
-export default Popups
diff --git a/src/components/Popups/PartnersIssue.tsx b/src/components/Popups/PartnersIssue.tsx
new file mode 100644
index 00000000..078a02c8
--- /dev/null
+++ b/src/components/Popups/PartnersIssue.tsx
@@ -0,0 +1,124 @@
+import { FormControlLabel, FormGroup, Switch } from '@mui/material'
+import { Link } from 'react-router-dom'
+import { getAxiosXSRFHeader } from '../../axios.config'
+import { useCustomPopup } from '../../hooks/useCustomPopup'
+import { usePartnersIssue } from '../../hooks/usePartnersIssue'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
+import Loader from '../Loader/Loader'
+import { links } from '../Routes/Router'
+import './popups.scss'
+
+export const PartnersIssue = () => {
+ const { data: user } = useWhoAmI()
+ const { partnersIssue, savePartnersIssue } = usePartnersIssue()
+ const { customPopup } = useCustomPopup()
+
+ const isCustomPopupEnabled = customPopup.data?.popupEnabled
+
+ const handlePartnerIssue = (
+ value: boolean,
+ type: 'enedis_failure' | 'egl_failure' | 'grdf_failure'
+ ) => {
+ if (partnersIssue.data && user) {
+ const updatedNotification = {
+ egl_failure: partnersIssue.data.egl_failure,
+ enedis_failure: partnersIssue.data.enedis_failure,
+ grdf_failure: partnersIssue.data.grdf_failure,
+ [type]: value,
+ }
+
+ savePartnersIssue(
+ {
+ ...partnersIssue.data,
+ [type]: value,
+ notification_activated: Object.values(updatedNotification).some(
+ v => v
+ ),
+ },
+ getAxiosXSRFHeader(user.xsrftoken)
+ )
+ }
+ }
+
+ return (
+ <>
+ <div className="header">
+ <h1>Création de Pop-up</h1>
+ </div>
+ <div className="content popups">
+ <div className="partnersInfo">
+ <h3>Affichage des pop-up de panne</h3>
+ <div>
+ {partnersIssue.isPending && <Loader />}
+ {partnersIssue.isError && <p>Erreur</p>}
+ {partnersIssue.data && (
+ <div>
+ <p>Services concernés</p>
+ <FormGroup style={{ flexDirection: 'row' }}>
+ <FormControlLabel
+ label={'Panne Enedis'}
+ labelPlacement="top"
+ control={
+ <Switch
+ disabled={isCustomPopupEnabled}
+ checked={partnersIssue.data.enedis_failure}
+ onChange={event => {
+ handlePartnerIssue(
+ event.target.checked,
+ 'enedis_failure'
+ )
+ }}
+ />
+ }
+ />
+ <FormControlLabel
+ label={'Panne EGL'}
+ labelPlacement="top"
+ control={
+ <Switch
+ disabled={isCustomPopupEnabled}
+ checked={partnersIssue.data.egl_failure}
+ onChange={event => {
+ handlePartnerIssue(
+ event.target.checked,
+ 'egl_failure'
+ )
+ }}
+ />
+ }
+ />
+ <FormControlLabel
+ label={'Panne GRDF'}
+ labelPlacement="top"
+ control={
+ <Switch
+ disabled={isCustomPopupEnabled}
+ checked={partnersIssue.data.grdf_failure}
+ onChange={event => {
+ handlePartnerIssue(
+ event.target.checked,
+ 'grdf_failure'
+ )
+ }}
+ />
+ }
+ />
+ </FormGroup>
+
+ {isCustomPopupEnabled && (
+ <p className="singlePopupWarning">
+ La maintenance des partenaires ne peut pas être activée en
+ même temps que la{' '}
+ <Link to={links.customPopup.path}>
+ pop-ups personnalisée
+ </Link>
+ </p>
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ </>
+ )
+}
diff --git a/src/components/Popups/popups.scss b/src/components/Popups/popups.scss
index f106a525..aca1d5f2 100644
--- a/src/components/Popups/popups.scss
+++ b/src/components/Popups/popups.scss
@@ -37,4 +37,10 @@
text-transform: uppercase;
margin-top: 1rem;
}
+
+ .singlePopupWarning,
+ .singlePopupWarning a {
+ font-weight: bold;
+ color: #df4646;
+ }
}
diff --git a/src/components/Prices/PriceSection.tsx b/src/components/Prices/PriceSection.tsx
index 84b364ca..693d3424 100644
--- a/src/components/Prices/PriceSection.tsx
+++ b/src/components/Prices/PriceSection.tsx
@@ -4,11 +4,11 @@ import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'
import React, { useCallback, useEffect, useState } from 'react'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import { useWhoAmI } from '../../API'
import arrowDown from '../../assets/icons/down-arrow.png'
import { getAxiosXSRFHeader } from '../../axios.config'
import { FluidType } from '../../enum/fluidTypes'
import { FrequencyInMonth } from '../../enum/frequency.enum'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
import { IPrice } from '../../models/price.model'
import { PricesService } from '../../services/prices.service'
import Loader from '../Loader/Loader'
diff --git a/src/components/Routes/Router.tsx b/src/components/Routes/Router.tsx
index 85051f1b..bd4fe74e 100644
--- a/src/components/Routes/Router.tsx
+++ b/src/components/Routes/Router.tsx
@@ -1,10 +1,11 @@
import { Navigate, Route, Routes } from 'react-router-dom'
-import { useWhoAmI } from '../../API'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
import { Consents } from '../Consents/Consents'
import Loader from '../Loader/Loader'
import Login from '../Login/Login'
import Newsletter from '../Newsletter/Newsletter'
-import Popups from '../Popups/Popups'
+import { CustomPopup } from '../Popups/CustomPopup'
+import { PartnersIssue } from '../Popups/PartnersIssue'
import Prices from '../Prices/Prices'
import SideBar from '../SideBar/SideBar'
@@ -16,9 +17,13 @@ export const links: Record<
label: 'Newsletter',
path: '/newsletter',
},
- popups: {
- label: 'Pop-ups',
- path: '/popups',
+ partnersIssue: {
+ label: 'Panne des partenaires',
+ path: '/popups/partners',
+ },
+ customPopup: {
+ label: 'Pop-up personnalisée',
+ path: '/popups/custom',
},
prices: {
label: 'Prix',
@@ -55,7 +60,11 @@ const Router = () => {
<Routes>
<Route path={links.newsletter.path} element={<Newsletter />} />
<Route path={links.prices.path} element={<Prices />} />
- <Route path="/popups" element={<Popups />} />
+ <Route
+ path={links.partnersIssue.path}
+ element={<PartnersIssue />}
+ />
+ <Route path={links.customPopup.path} element={<CustomPopup />} />
{user.isAdmin && (
<>
<Route
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index eca3afdd..9e38fc0c 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -2,8 +2,9 @@ import { Button } from '@mui/material'
import { useMutation } from '@tanstack/react-query'
import React from 'react'
import { NavLink } from 'react-router-dom'
-import { fetchLogout, useWhoAmI } from '../../API'
+import { fetchLogout } from '../../API'
import logo from '../../assets/icons/ecolyo-logo.svg'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
import { routes } from '../Routes/Router'
import './sidebar.scss'
diff --git a/src/hooks/query-keys.ts b/src/hooks/query-keys.ts
new file mode 100644
index 00000000..87dd134d
--- /dev/null
+++ b/src/hooks/query-keys.ts
@@ -0,0 +1,5 @@
+export const queryKeys = {
+ WhoAmI: 'WhoAmI',
+ partnersInfo: 'partnersInfo',
+ customPopup: 'customPopup',
+} as const
diff --git a/src/hooks/useCustomPopup.tsx b/src/hooks/useCustomPopup.tsx
new file mode 100644
index 00000000..6bdc99da
--- /dev/null
+++ b/src/hooks/useCustomPopup.tsx
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchCustomPopup } from '../API'
+import { queryKeys } from './query-keys'
+
+export const useCustomPopup = () => {
+ const customPopup = useQuery({
+ queryKey: [queryKeys.customPopup],
+ queryFn: fetchCustomPopup,
+ })
+
+ return { customPopup }
+}
diff --git a/src/hooks/usePartnersIssue.tsx b/src/hooks/usePartnersIssue.tsx
new file mode 100644
index 00000000..2328adda
--- /dev/null
+++ b/src/hooks/usePartnersIssue.tsx
@@ -0,0 +1,35 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { AxiosRequestConfig } from 'axios'
+import { fetchPartnersIssue, savePartnersInfo } from '../API'
+import { IPartnersInfo } from '../models/partnersInfo.model'
+import { queryKeys } from './query-keys'
+
+export const usePartnersIssue = () => {
+ const queryClient = useQueryClient()
+
+ const partnersIssue = useQuery({
+ queryKey: [queryKeys.partnersInfo],
+ queryFn: fetchPartnersIssue,
+ })
+
+ const mutation = useMutation<
+ void,
+ unknown,
+ { customPopup: IPartnersInfo; axiosHeaders: AxiosRequestConfig }
+ >({
+ mutationFn: ({ customPopup, axiosHeaders }) =>
+ savePartnersInfo(customPopup, axiosHeaders),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: [queryKeys.partnersInfo] })
+ },
+ })
+
+ const savePartnersIssue = (
+ customPopup: IPartnersInfo,
+ axiosHeaders: AxiosRequestConfig
+ ) => {
+ mutation.mutate({ customPopup, axiosHeaders })
+ }
+
+ return { partnersIssue, savePartnersIssue }
+}
diff --git a/src/hooks/useWhoAmI.tsx b/src/hooks/useWhoAmI.tsx
new file mode 100644
index 00000000..4df59355
--- /dev/null
+++ b/src/hooks/useWhoAmI.tsx
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchWhoAmI } from '../API'
+import { queryKeys } from './query-keys'
+
+export const useWhoAmI = () => {
+ return useQuery({
+ queryKey: [queryKeys.WhoAmI],
+ queryFn: fetchWhoAmI,
+ retry: false,
+ refetchOnMount: false,
+ })
+}
diff --git a/src/services/partnersInfo.service.ts b/src/services/partnersInfo.service.ts
deleted file mode 100644
index 0f9a5174..00000000
--- a/src/services/partnersInfo.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import axios, { AxiosRequestConfig } from 'axios'
-import { toast } from 'react-toastify'
-import { IPartnersInfo } from '../models/partnersInfo.model'
-export class PartnersInfoService {
- /**
- * Save the partnersInfo
- * @param partnersInfo
- * @param axiosHeaders
- */
- public savePartnersInfo = async (
- partnersInfo: IPartnersInfo,
- axiosHeaders: AxiosRequestConfig
- ): Promise<void> => {
- try {
- await axios.put(
- `/api/animator/partnersInfo`,
- {
- grdf_failure: partnersInfo.grdf_failure,
- enedis_failure: partnersInfo.enedis_failure,
- egl_failure: partnersInfo.egl_failure,
- notification_activated: partnersInfo.notification_activated,
- },
- axiosHeaders
- )
- toast.success('Information des partenaires mises à jour !')
- } catch (e) {
- toast.error(
- 'Erreur lors de la mise à jour des information des partenaires'
- )
- console.error(e)
- }
- }
-
- /**
- * Gets the partners information
- */
- public getPartnersInfo = async (): Promise<IPartnersInfo | null> => {
- try {
- const { data } = await axios.get(`/api/common/partnersInfo`)
- return data as IPartnersInfo
- } catch (e) {
- console.error('error', e)
- return null
- }
- }
-}
--
GitLab