Merge branch...

Merge branch '17-3-diffuser-une-enquete-aupres-des-utilisateurs-dans-la-modale-a-l-ouverture-du-service' into 'dev'

feat(custom-popup): use wysiwyg editor

See merge request !101

.vscode/settings.json

@@ -22,7 +22,9 @@
   "editor.formatOnSave": true,
   "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": true,
+    "source.fixAll": true,
+    "source.organizeImports": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "peacock.color": "#2aa63d",

src/components/Newsletter/CustomEditor.tsx

@@ -5,19 +5,26 @@ import { Editor, EditorState } from 'react-draft-wysiwyg'
 import CustomLink from './CustomLink'
 import './customEditor.scss'
 
+export type EditorType =
+  | 'info'
+  | 'title'
+  | 'content'
+  | 'question'
+  | 'link'
+  | 'subject'
+  | 'image'
+  | 'custom_popup'
+
 interface CustomEditorProps {
   baseState: EditorState
-  editorType: 'info' | 'title' | 'content' | 'question' | 'link' | 'subject'
-  handleChange: (
-    value: string,
-    type: 'info' | 'title' | 'content' | 'question' | 'link' | 'subject'
-  ) => void
+  type: EditorType
+  handleChange: (value: string, type: EditorType) => void
 }
 
 const CustomEditor: React.FC<CustomEditorProps> = ({
   baseState,
   handleChange,
-  editorType,
+  type,
 }) => {
   const [editorState, setEditorState] = useState<EditorState>(baseState)
 
@@ -45,9 +52,9 @@ const CustomEditor: React.FC<CustomEditorProps> = ({
     (state: EditorState) => {
       setEditorState(state)
       const htmlState = convertStateToHTML(state)
-      handleChange(htmlState, editorType)
+      handleChange(htmlState, type)
     },
-    [editorType, handleChange]
+    [type, handleChange]
   )
 
   return (

src/components/Newsletter/ImagePicker/ImagePicker.tsx

@@ -3,22 +3,13 @@ import React, { useContext, useEffect, useState } from 'react'
 import { getAxiosXSRFHeader } from '../../../axios.config'
 import { UserContext, UserContextProps } from '../../../hooks/userContext'
 import { NewsletterService } from '../../../services/newsletter.service'
+import { EditorType } from '../CustomEditor'
 import Modal from '../Modal/Modal'
 import SingleImage from './SingleImage'
 
 interface ImagePickerProps {
   imageURL: string
-  handleChange: (
-    value: string,
-    type:
-      | 'info'
-      | 'title'
-      | 'content'
-      | 'question'
-      | 'link'
-      | 'image'
-      | 'subject'
-  ) => void
+  handleChange: (value: string, type: EditorType) => void
 }
 
 const ImagePicker: React.FC<ImagePickerProps> = ({

src/components/Newsletter/MailSubject/mailSubject.tsx

 import React, { ChangeEvent } from 'react'
+import { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
 import './mailSubject.scss'
 
@@ -6,10 +7,7 @@ interface MailSubjectProps {
   onSave: () => Promise<void>
   onCancel: () => void
   subject: string
-  handleChange: (
-    value: string,
-    type: 'info' | 'title' | 'content' | 'question' | 'link' | 'subject'
-  ) => void
+  handleChange: (value: string, type: EditorType) => void
   onDelete: (target: ContentItems) => void
 }
 const MailSubject: React.FC<MailSubjectProps> = ({

src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx

 import React from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
-import CustomEditor from '../CustomEditor'
+import CustomEditor, { EditorType } from '../CustomEditor'
 import ImagePicker from '../ImagePicker/ImagePicker'
 import { ContentItems } from '../Newsletter'
 import './monthlyInfo.scss'
@@ -10,17 +10,7 @@ interface MonthlyInfoProps {
   onSave: () => Promise<void>
   onCancel: () => void
   info: string
-  handleChange: (
-    value: string,
-    type:
-      | 'info'
-      | 'title'
-      | 'content'
-      | 'question'
-      | 'link'
-      | 'image'
-      | 'subject'
-  ) => void
+  handleChange: (value: string, type: EditorType) => void
   onDelete: (target: ContentItems) => void
   imageURL: string
 }
@@ -42,7 +32,7 @@ const MonthlyInfo: React.FC<MonthlyInfoProps> = ({
         <CustomEditor
           baseState={convertStringToEditorState(info)}
           handleChange={handleChange}
-          editorType="info"
+          type="info"
         />
         <div className="buttons">
           <button className="btnCancel" onClick={onCancel}>

src/components/Newsletter/MonthlyNews/MonthlyNews.tsx

 import React, { ChangeEvent } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
-import CustomEditor from '../CustomEditor'
+import CustomEditor, { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
 import './monthlyNews.scss'
 
@@ -10,10 +10,7 @@ interface MonthlyNewsProps {
   onCancel: () => void
   title: string
   content: string
-  handleChange: (
-    value: string,
-    type: 'info' | 'title' | 'content' | 'question' | 'link' | 'subject'
-  ) => void
+  handleChange: (value: string, type: EditorType) => void
   onDelete: (target: ContentItems) => void
 }
 const MonthlyNews: React.FC<MonthlyNewsProps> = ({
@@ -44,7 +41,7 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({
           <CustomEditor
             baseState={convertStringToEditorState(content)}
             handleChange={handleChange}
-            editorType="content"
+            type="content"
           />
         </div>
 

src/components/Newsletter/Newsletter.tsx

@@ -13,6 +13,7 @@ import { IMonthlyNews } from '../../models/monthlyNews.model'
 import { IPoll } from '../../models/poll.model'
 import { NewsletterService } from '../../services/newsletter.service'
 import Loader from '../Loader/Loader'
+import { EditorType } from './CustomEditor'
 import DateSelector from './DateSelector/DateSelector'
 import MailSubject from './MailSubject/mailSubject'
 import Modal from './Modal/Modal'
@@ -177,38 +178,32 @@ const Newsletter: React.FC = () => {
     } else return true
   }
 
-  const handleEditorChange = (
-    value: string,
-    type:
-      | 'info'
-      | 'title'
-      | 'content'
-      | 'question'
-      | 'link'
-      | 'image'
-      | 'subject'
-  ): void => {
+  const handleEditorChange = (value: string, type: EditorType): void => {
     setIsTouched(true)
-    if (type === 'info') {
-      setInfo(value)
-    }
-    if (type === 'title') {
-      setTitle(value)
-    }
-    if (type === 'content') {
-      setContent(value)
-    }
-    if (type === 'question') {
-      setQuestion(value)
-    }
-    if (type === 'link') {
-      setLink(value)
-    }
-    if (type === 'subject') {
-      setSubject(value)
-    }
-    if (type === 'image') {
-      setImageURL(value)
+    switch (type) {
+      case 'info':
+        setInfo(value)
+        break
+      case 'title':
+        setTitle(value)
+        break
+      case 'content':
+        setContent(value)
+        break
+      case 'question':
+        setQuestion(value)
+        break
+      case 'link':
+        setLink(value)
+        break
+      case 'subject':
+        setSubject(value)
+        break
+      case 'image':
+        setImageURL(value)
+        break
+      default:
+        break
     }
   }
   const resetFields = useCallback(() => {

src/components/Newsletter/Poll/Poll.tsx

 import React, { ChangeEvent } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
-import CustomEditor from '../CustomEditor'
+import CustomEditor, { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
 import './poll.scss'
 
 interface PollProps {
   question: string
   link: string
-  handleChange: (
-    value: string,
-    type: 'info' | 'title' | 'content' | 'question' | 'link' | 'subject'
-  ) => void
+  handleChange: (value: string, type: EditorType) => void
   onSave: () => Promise<void>
   onCancel: () => void
   onDelete: (target: ContentItems) => void
@@ -45,7 +42,7 @@ const Poll: React.FC<PollProps> = ({
           <CustomEditor
             baseState={convertStringToEditorState(question)}
             handleChange={handleChange}
-            editorType="question"
+            type="question"
           />
         </div>
 

src/components/Popups/Popups.tsx

@@ -13,7 +13,9 @@ import {
 import { IPartnersInfo } from '../../models/partnersInfo.model'
 import { CustomPopupService } from '../../services/customPopup.service'
 import { PartnersInfoService } from '../../services/partnersInfo.service'
+import { convertStringToEditorState } from '../../utils/editorStateManagement'
 import Loader from '../Loader/Loader'
+import CustomEditor from '../Newsletter/CustomEditor'
 import './popups.scss'
 
 const OPTIONS: Array<Option> = [
@@ -96,13 +98,10 @@ const Popups: React.FC = () => {
     }
   }
 
-  const handlePopupChange = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    field: 'title' | 'description'
-  ) => {
+  const handlePopupChange = (field: 'title' | 'description', value: string) => {
     setCustomPopup((prev) => ({
       ...prev,
-      [field]: event.target.value,
+      [field]: value,
     }))
   }
 
@@ -326,26 +325,22 @@ const Popups: React.FC = () => {
                     min={1}
                     placeholder="Titre"
                     value={customPopup.title}
-                    onChange={(event) => handlePopupChange(event, 'title')}
+                    onChange={(event) =>
+                      handlePopupChange('title', event.target.value)
+                    }
                   />
                 </div>
 
                 <div className="popupDescription">
-                  <label htmlFor="description">Description</label>
-                  <textarea
-                    name="description"
-                    id="description"
-                    placeholder="Description"
-                    rows={5}
-                    maxLength={250}
-                    value={customPopup.description}
-                    onChange={(event) =>
-                      handlePopupChange(event, 'description')
+                  <CustomEditor
+                    baseState={convertStringToEditorState(
+                      customPopup.description
+                    )}
+                    handleChange={(value) =>
+                      handlePopupChange('description', value)
                     }
+                    type="custom_popup"
                   />
-                  <p className="count">
-                    {customPopup.description.length} / 250
-                  </p>
                 </div>
 
                 <div className="popupEndDate">

src/components/Popups/popups.scss

@@ -77,6 +77,7 @@
   }
 
   .popupEndDate {
+    margin-top: 1rem;
     .durationInput {
       display: flex;
       gap: 1.5rem;
@@ -104,11 +105,8 @@
   }
 
   .buttons {
-    position: fixed;
-    bottom: 1rem;
     display: flex;
-    transform: translate(-25%);
-    left: 50%;
+    justify-content: center;
     gap: 1rem;
     button {
       margin: 0;