feat(Editing): display next month after the 5th

src/components/Editing/Editing.tsx

-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