diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index df2e87c5c966efc664ea804fbc561fd95b739753..3d3b0aebe91b4396ba63393f35dcdd530db76972 100644
--- a/src/components/Editing/Editing.tsx
+++ b/src/components/Editing/Editing.tsx
@@ -1,260 +1,270 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
-import DateSelector from '../DateSelector/DateSelector'
-import { NewsletterService } from '../../services/newsletter.service'
-import { UserContext, UserContextProps } from '../../hooks/userContext'
-import { IMonthlyNews } from '../../models/monthlyNews.model'
-import { IMonthlyInfo } from '../../models/monthlyInfo.model'
-import { IPoll } from '../../models/poll.model'
-import Poll from '../Poll/Poll'
-import MonthlyInfo from '../MonthlyInfo/MonthlyInfo'
-import MonthlyNews from '../MonthlyNews/MonthlyNews'
-import Loader from '../Loader/Loader'
-import Modal from '../Modal/Modal'
-import './editing.scss'
-
-export type ContentItems = 'monthlyInfo' | 'monthlyNews' | 'poll' | ''
-
-const Editing: React.FC = () => {
- const [date, setDate] = useState<Date>(new Date())
- const [info, setInfo] = useState<string>('')
- const [title, setTitle] = useState<string>('')
- const [imageURL, setImageURL] = useState<string>('')
- const [content, setContent] = useState<string>('')
- const [question, setQuestion] = useState<string>('')
- const [link, setLink] = useState<string>('')
- const [isTouched, setIsTouched] = useState<boolean>(false)
- const [refreshData, setRefreshData] = useState(false)
- const [isLoading, setisLoading] = useState<boolean>(false)
- const [warningModal, setwarningModal] = useState<boolean>(false)
- const [toDelete, settoDelete] = useState<ContentItems>('')
- const { user }: Partial<UserContextProps> = useContext(UserContext)
- const newsletterService = new NewsletterService()
-
- const handleSaveMonthlyInfo = async (): Promise<void> => {
- if (user) {
- const newsletterService = new NewsletterService()
- await newsletterService.saveMonthlyInfo(
- date,
- info,
- imageURL,
- user.xsrftoken
- )
- setIsTouched(false)
- }
- }
-
- const handleSaveMonthlyNews = async (): Promise<void> => {
- if (user) {
- const newsletterService = new NewsletterService()
- await newsletterService.saveMonthlyNews(
- date,
- title,
- content,
- user.xsrftoken
- )
- setIsTouched(false)
- }
- }
- const handleSavePoll = async (): Promise<void> => {
- if (user) {
- await newsletterService.savePoll(date, question, link, user.xsrftoken)
- setIsTouched(false)
- }
- }
- const handleCancel = useCallback(() => {
- setRefreshData(true)
- }, [])
-
- const handleDeleteMonthlyInfo = async (): Promise<void> => {
- if (user) {
- await newsletterService.deleteMonthlyInfo(date, user.xsrftoken)
- setRefreshData(true)
- }
- }
- const handleDeleteMonthlyNews = async (): Promise<void> => {
- if (user) {
- await newsletterService.deleteMonthlyNews(date, user.xsrftoken)
- setRefreshData(true)
- }
- }
- const handleDeletePoll = async (): Promise<void> => {
- if (user) {
- await newsletterService.deletePoll(date, user.xsrftoken)
- setRefreshData(true)
- }
- }
- const handleOpenDeleteModal = (target: ContentItems) => {
- settoDelete(target)
- setwarningModal(true)
- }
- const handleConfirmAlert = () => {
- if (toDelete === 'monthlyInfo') {
- handleDeleteMonthlyInfo()
- }
- if (toDelete === 'monthlyNews') {
- handleDeleteMonthlyNews()
- }
- if (toDelete === 'poll') {
- handleDeletePoll()
- }
- setwarningModal(false)
- }
-
- const isEmpty = (): boolean => {
- if (
- (info !== '' ||
- title !== '' ||
- content !== '' ||
- question !== '' ||
- imageURL !== '' ||
- link !== '') &&
- isTouched
- ) {
- return false
- } else return true
- }
-
- const handleEditorChange = (
- value: string,
- type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image'
- ): 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 === 'image') {
- setImageURL(value)
- }
- }
- const resetFields = useCallback(() => {
- setImageURL('')
- setInfo('')
- setTitle('')
- setContent('')
- setLink('')
- setQuestion('')
- }, [])
-
- useEffect(() => {
- let subscribed = true
- resetFields()
- setisLoading(true)
- async function getCurrentMonthlyNews() {
- if (user) {
- const newsletterService = new NewsletterService()
- const montlhyInfo: IMonthlyInfo | null =
- await newsletterService.getSingleMonthlyInfo(date, user.xsrftoken)
- const montlhyNews: IMonthlyNews | null =
- await newsletterService.getSingleMonthlyNews(date, user.xsrftoken)
- const poll: IPoll | null = await newsletterService.getSinglePoll(
- date,
- user.xsrftoken
- )
- if (montlhyInfo) {
- setInfo(montlhyInfo.info)
- setImageURL(montlhyInfo.image)
- setIsTouched(false)
- }
- if (montlhyNews) {
- setTitle(montlhyNews.title)
- setContent(montlhyNews.content)
- setIsTouched(false)
- }
- if (poll) {
- setLink(poll.link)
- setQuestion(poll.question)
- setIsTouched(false)
- }
- }
- setisLoading(false)
- }
- if (subscribed) {
- getCurrentMonthlyNews()
- }
- return () => {
- subscribed = false
- setRefreshData(false)
- }
- }, [date, user, refreshData, resetFields])
-
- return (
- <>
- <div className="header">
- <p className="title pagetitle">Édition de la newsletter</p>
- <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
- </div>
- {isLoading ? (
- <Loader />
- ) : (
- <div className="content">
- <MonthlyInfo
- info={info}
- onSave={handleSaveMonthlyInfo}
- onCancel={handleCancel}
- handleChange={handleEditorChange}
- onDelete={handleOpenDeleteModal}
- imageURL={imageURL}
- />
- <hr />
- <MonthlyNews
- title={title}
- content={content}
- onSave={handleSaveMonthlyNews}
- onCancel={handleCancel}
- handleChange={handleEditorChange}
- onDelete={handleOpenDeleteModal}
- />
- <hr />
- <Poll
- question={question}
- link={link}
- onSave={handleSavePoll}
- onCancel={handleCancel}
- handleChange={handleEditorChange}
- onDelete={handleOpenDeleteModal}
- />
- </div>
- )}
- {warningModal && (
- <Modal>
- <>
- <div className="modal-text">
- Etes-vous sûr de vouloir supprimer{' '}
- {toDelete === 'monthlyInfo'
- ? 'cette info mensuelle '
- : toDelete === 'monthlyNews'
- ? 'cette news mensuelle'
- : 'ce sondage'}{' '}
- ?
- </div>
- <div className="buttons">
- <button
- className="btnCancel"
- onClick={() => setwarningModal(false)}
- >
- Annuler
- </button>
- <button className="btnValid" onClick={handleConfirmAlert}>
- Continuer
- </button>
- </div>
- </>
- </Modal>
- )}
- </>
- )
-}
-
-export default Editing
+import React, { useCallback, useContext, useEffect, useState } from 'react'
+import DateSelector from '../DateSelector/DateSelector'
+import { NewsletterService } from '../../services/newsletter.service'
+import { UserContext, UserContextProps } from '../../hooks/userContext'
+import { IMonthlyNews } from '../../models/monthlyNews.model'
+import { IMonthlyInfo } from '../../models/monthlyInfo.model'
+import { IPoll } from '../../models/poll.model'
+import Poll from '../Poll/Poll'
+import MonthlyInfo from '../MonthlyInfo/MonthlyInfo'
+import MonthlyNews from '../MonthlyNews/MonthlyNews'
+import Loader from '../Loader/Loader'
+import Modal from '../Modal/Modal'
+import './editing.scss'
+
+export type ContentItems = 'monthlyInfo' | 'monthlyNews' | 'poll' | ''
+
+const Editing: React.FC = () => {
+ // Fonctional rule :
+ // Display next month after the 5th of the current month
+ const getCurrentNewsletterDate = (): Date => {
+ let newsletterDate = new Date()
+ if (newsletterDate.getDate() > 5) {
+ newsletterDate.setMonth(newsletterDate.getMonth() + 1)
+ }
+ return newsletterDate
+ }
+
+ const [date, setDate] = useState<Date>(getCurrentNewsletterDate())
+ const [info, setInfo] = useState<string>('')
+ const [title, setTitle] = useState<string>('')
+ const [imageURL, setImageURL] = useState<string>('')
+ const [content, setContent] = useState<string>('')
+ const [question, setQuestion] = useState<string>('')
+ const [link, setLink] = useState<string>('')
+ const [isTouched, setIsTouched] = useState<boolean>(false)
+ const [refreshData, setRefreshData] = useState(false)
+ const [isLoading, setisLoading] = useState<boolean>(false)
+ const [warningModal, setwarningModal] = useState<boolean>(false)
+ const [toDelete, settoDelete] = useState<ContentItems>('')
+ const { user }: Partial<UserContextProps> = useContext(UserContext)
+ const newsletterService = new NewsletterService()
+
+ const handleSaveMonthlyInfo = async (): Promise<void> => {
+ if (user) {
+ const newsletterService = new NewsletterService()
+ await newsletterService.saveMonthlyInfo(
+ date,
+ info,
+ imageURL,
+ user.xsrftoken
+ )
+ setIsTouched(false)
+ }
+ }
+
+ const handleSaveMonthlyNews = async (): Promise<void> => {
+ if (user) {
+ const newsletterService = new NewsletterService()
+ await newsletterService.saveMonthlyNews(
+ date,
+ title,
+ content,
+ user.xsrftoken
+ )
+ setIsTouched(false)
+ }
+ }
+ const handleSavePoll = async (): Promise<void> => {
+ if (user) {
+ await newsletterService.savePoll(date, question, link, user.xsrftoken)
+ setIsTouched(false)
+ }
+ }
+ const handleCancel = useCallback(() => {
+ setRefreshData(true)
+ }, [])
+
+ const handleDeleteMonthlyInfo = async (): Promise<void> => {
+ if (user) {
+ await newsletterService.deleteMonthlyInfo(date, user.xsrftoken)
+ setRefreshData(true)
+ }
+ }
+ const handleDeleteMonthlyNews = async (): Promise<void> => {
+ if (user) {
+ await newsletterService.deleteMonthlyNews(date, user.xsrftoken)
+ setRefreshData(true)
+ }
+ }
+ const handleDeletePoll = async (): Promise<void> => {
+ if (user) {
+ await newsletterService.deletePoll(date, user.xsrftoken)
+ setRefreshData(true)
+ }
+ }
+ const handleOpenDeleteModal = (target: ContentItems) => {
+ settoDelete(target)
+ setwarningModal(true)
+ }
+ const handleConfirmAlert = () => {
+ if (toDelete === 'monthlyInfo') {
+ handleDeleteMonthlyInfo()
+ }
+ if (toDelete === 'monthlyNews') {
+ handleDeleteMonthlyNews()
+ }
+ if (toDelete === 'poll') {
+ handleDeletePoll()
+ }
+ setwarningModal(false)
+ }
+
+ const isEmpty = (): boolean => {
+ if (
+ (info !== '' ||
+ title !== '' ||
+ content !== '' ||
+ question !== '' ||
+ imageURL !== '' ||
+ link !== '') &&
+ isTouched
+ ) {
+ return false
+ } else return true
+ }
+
+ const handleEditorChange = (
+ value: string,
+ type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image'
+ ): 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 === 'image') {
+ setImageURL(value)
+ }
+ }
+ const resetFields = useCallback(() => {
+ setImageURL('')
+ setInfo('')
+ setTitle('')
+ setContent('')
+ setLink('')
+ setQuestion('')
+ }, [])
+
+ useEffect(() => {
+ let subscribed = true
+ resetFields()
+ setisLoading(true)
+ async function getCurrentMonthlyNews() {
+ if (user) {
+ const newsletterService = new NewsletterService()
+ const montlhyInfo: IMonthlyInfo | null =
+ await newsletterService.getSingleMonthlyInfo(date, user.xsrftoken)
+ const montlhyNews: IMonthlyNews | null =
+ await newsletterService.getSingleMonthlyNews(date, user.xsrftoken)
+ const poll: IPoll | null = await newsletterService.getSinglePoll(
+ date,
+ user.xsrftoken
+ )
+ if (montlhyInfo) {
+ setInfo(montlhyInfo.info)
+ setImageURL(montlhyInfo.image)
+ setIsTouched(false)
+ }
+ if (montlhyNews) {
+ setTitle(montlhyNews.title)
+ setContent(montlhyNews.content)
+ setIsTouched(false)
+ }
+ if (poll) {
+ setLink(poll.link)
+ setQuestion(poll.question)
+ setIsTouched(false)
+ }
+ }
+ setisLoading(false)
+ }
+ if (subscribed) {
+ getCurrentMonthlyNews()
+ }
+ return () => {
+ subscribed = false
+ setRefreshData(false)
+ }
+ }, [date, user, refreshData, resetFields])
+
+ return (
+ <>
+ <div className="header">
+ <p className="title pagetitle">Édition de la newsletter</p>
+ <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
+ </div>
+ {isLoading ? (
+ <Loader />
+ ) : (
+ <div className="content">
+ <MonthlyInfo
+ info={info}
+ onSave={handleSaveMonthlyInfo}
+ onCancel={handleCancel}
+ handleChange={handleEditorChange}
+ onDelete={handleOpenDeleteModal}
+ imageURL={imageURL}
+ />
+ <hr />
+ <MonthlyNews
+ title={title}
+ content={content}
+ onSave={handleSaveMonthlyNews}
+ onCancel={handleCancel}
+ handleChange={handleEditorChange}
+ onDelete={handleOpenDeleteModal}
+ />
+ <hr />
+ <Poll
+ question={question}
+ link={link}
+ onSave={handleSavePoll}
+ onCancel={handleCancel}
+ handleChange={handleEditorChange}
+ onDelete={handleOpenDeleteModal}
+ />
+ </div>
+ )}
+ {warningModal && (
+ <Modal>
+ <>
+ <div className="modal-text">
+ Etes-vous sûr de vouloir supprimer{' '}
+ {toDelete === 'monthlyInfo'
+ ? 'cette info mensuelle '
+ : toDelete === 'monthlyNews'
+ ? 'cette news mensuelle'
+ : 'ce sondage'}{' '}
+ ?
+ </div>
+ <div className="buttons">
+ <button
+ className="btnCancel"
+ onClick={() => setwarningModal(false)}
+ >
+ Annuler
+ </button>
+ <button className="btnValid" onClick={handleConfirmAlert}>
+ Continuer
+ </button>
+ </div>
+ </>
+ </Modal>
+ )}
+ </>
+ )
+}
+
+export default Editing