diff --git a/.vscode/settings.json b/.vscode/settings.json
index e8686e1b37049819cb77f999098ae5d2f169f16b..5ecf35bd21a60e88ee545053ab9d2628bab7edd3 100644
--- a/.vscode/settings.json
+++ b/.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",
diff --git a/src/components/Newsletter/CustomEditor.tsx b/src/components/Newsletter/CustomEditor.tsx
index 5e0bfa08e15386c88c7a60d0ebee3fe230ba5b57..b9867c75e8d282218ff4cd7c00d8513b568f58b1 100644
--- a/src/components/Newsletter/CustomEditor.tsx
+++ b/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 (
diff --git a/src/components/Newsletter/ImagePicker/ImagePicker.tsx b/src/components/Newsletter/ImagePicker/ImagePicker.tsx
index 2e9f6c274a17718ead9ec215ef7eb70f6b5e0499..33a85e80a7e9c39444ef466216cb13fa7e9d1f19 100644
--- a/src/components/Newsletter/ImagePicker/ImagePicker.tsx
+++ b/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> = ({
diff --git a/src/components/Newsletter/MailSubject/mailSubject.tsx b/src/components/Newsletter/MailSubject/mailSubject.tsx
index 1b3374b251ec7d0e88ddad851c2e13cfc619f023..bf6443b9d4ce0ddb6e8e9157ae4d5cddfd80ec62 100644
--- a/src/components/Newsletter/MailSubject/mailSubject.tsx
+++ b/src/components/Newsletter/MailSubject/mailSubject.tsx
@@ -1,4 +1,5 @@
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> = ({
diff --git a/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx b/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx
index ec98ab253b483550ef4d63f60ac2ce458436f5ff..d7d8a2773505a8ac7a5eaccccb2949d162ee65d9 100644
--- a/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx
+++ b/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx
@@ -1,7 +1,7 @@
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}>
diff --git a/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx b/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx
index f4fdbc586cde10b96f109e1566ad329ac01f80de..90557d310fe8f7d438f7a16052f687d0e1a6e659 100644
--- a/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx
+++ b/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx
@@ -1,7 +1,7 @@
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>
diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
index 7e902395f4ff01c91a8d200cdf6835e765093347..774fe1ddfba6cf336ecf02de25fadb3caac4c340 100644
--- a/src/components/Newsletter/Newsletter.tsx
+++ b/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(() => {
diff --git a/src/components/Newsletter/Poll/Poll.tsx b/src/components/Newsletter/Poll/Poll.tsx
index 24e0d371b44229a5e5d94f10b93d22afe1f3e31d..c82196168da4164fe179a41a46d8d3691531ffd8 100644
--- a/src/components/Newsletter/Poll/Poll.tsx
+++ b/src/components/Newsletter/Poll/Poll.tsx
@@ -1,17 +1,14 @@
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>
diff --git a/src/components/Popups/Popups.tsx b/src/components/Popups/Popups.tsx
index 59204192110a86efcee7501c5eb0eb3ee61fdd33..c921d3fc60f598c372b9e855de42d53ea8c4d9d8 100644
--- a/src/components/Popups/Popups.tsx
+++ b/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">
diff --git a/src/components/Popups/popups.scss b/src/components/Popups/popups.scss
index 332a9617ba97107b70bbfc712a67c3e6cf9b0f62..7f93c69038d13c943d4658f6c0c478f956d5480c 100644
--- a/src/components/Popups/popups.scss
+++ b/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;