Refacto

src/components/Editing/Editing.tsx

 import React, { useCallback, useContext, useEffect, useState } from 'react'
-import { Editor } from '@tinymce/tinymce-react'
-
 import DateSelector from '../DateSelector/DateSelector'
 import './editing.scss'
 import { MonthlyNewsService } from '../../services/monthlyNews.service'
 import { UserContext, UserContextProps } from '../../hooks/userContext'
-import { MonthlyNews } from '../../models/monthlyNews.model'
+import { IMonthlyNews } from '../../models/monthlyNews.model'
 import Poll from '../Poll/Poll'
+import MonthlyNews from '../MonthlyNews/MonthlyNews'
 
 const Editing: React.FC = () => {
   const [date, setDate] = useState<Date>(new Date())
   const [header, setHeader] = useState<string>('')
   const [quote, setQuote] = useState<string>('')
+  const [question, setQuestion] = useState<string>('')
+  const [link, setLink] = useState<string>('')
   const [isTouched, setIsTouched] = useState<boolean>(false)
   const { user }: Partial<UserContextProps> = useContext(UserContext)
 
-  const handleSave = async (): Promise<void> => {
+  const handleSaveMonthlyNews = async (): Promise<void> => {
     if (user) {
       const monthlyNewsService = new MonthlyNewsService()
       await monthlyNewsService.createMonthlyReport(
@@ -24,9 +25,10 @@ const Editing: React.FC = () => {
         quote,
         user.xsrftoken
       )
+      console.log('saved')
     }
   }
-  const handleCancel = useCallback(() => {
+  const handleCancelMonthlyNews = useCallback(() => {
     setQuote('')
     setHeader('')
   }, [])
@@ -39,22 +41,36 @@ const Editing: React.FC = () => {
 
   const handleEditorChange = (
     value: string,
-    type: 'header' | 'quote'
+    type: 'header' | 'quote' | 'question' | 'link'
   ): void => {
     setIsTouched(true)
     if (type === 'header') {
       setHeader(value)
-    } else {
+    }
+    if (type === 'quote') {
       setQuote(value)
     }
+    if (type === 'question') {
+      setQuestion(value)
+    }
+    if (type === 'link') {
+      setLink(value)
+    }
   }
+  const resetFields = useCallback(() => {
+    setQuote('')
+    setHeader('')
+    setLink('')
+    setQuestion('')
+  }, [])
 
   useEffect(() => {
     let subscribed = true
+    resetFields()
     async function getCurrentMonthlyNews() {
       if (user) {
         const monthlyNewsService = new MonthlyNewsService()
-        const news: MonthlyNews =
+        const news: IMonthlyNews =
           await monthlyNewsService.getSingleMonthlyReport(
             date.getFullYear(),
             date.getMonth(),
@@ -84,101 +100,20 @@ const Editing: React.FC = () => {
       </div>
       <div className="content">
         <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
-        <div className="subtitle">
-          <p className="title">Informations du mois</p>
-        </div>
-        <div>
-          <Editor
-            initialValue={header}
-            init={{
-              menubar: false,
-              toolbar:
-                'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
-            }}
-            value={header}
-            onEditorChange={(newHeader, editor) =>
-              handleEditorChange(newHeader, 'header')
-            }
-          />
-          <div className="subtitle">
-            <p className="title">Citation du mois</p>
-          </div>
+        <MonthlyNews
+          header={header}
+          quote={quote}
+          onSave={handleSaveMonthlyNews}
+          onCancel={handleCancelMonthlyNews}
+          handleChange={handleEditorChange}
+        />
 
-          <Editor
-            initialValue={quote}
-            init={{
-              menubar: false,
-              toolbar:
-                'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
-              setup: function (editor) {
-                editor.ui.registry.addMenuButton('ecolyoLink', {
-                  text: 'Lien Ecolyo',
-                  fetch: function (callback) {
-                    var items: any = [
-                      {
-                        type: 'menuitem',
-                        text: 'consumption',
-                        onAction: function () {
-                          editor.insertContent(
-                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
-                          )
-                        },
-                      },
-                      {
-                        type: 'menuitem',
-                        text: 'challenges',
-                        onAction: function () {
-                          editor.insertContent(
-                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
-                          )
-                        },
-                      },
-                      {
-                        type: 'menuitem',
-                        text: 'ecogestures',
-                        onAction: function () {
-                          editor.insertContent(
-                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
-                          )
-                        },
-                      },
-                      {
-                        type: 'menuitem',
-                        text: 'analysis',
-                        onAction: function () {
-                          editor.insertContent(
-                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
-                          )
-                        },
-                      },
-                      {
-                        type: 'menuitem',
-                        text: 'options',
-                        onAction: function () {
-                          editor.insertContent(
-                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/options">Page options</a>'
-                          )
-                        },
-                      },
-                    ]
-                    callback(items)
-                  },
-                })
-              },
-            }}
-            value={quote}
-            onEditorChange={(newQuote, editor) =>
-              handleEditorChange(newQuote, 'quote')
-            }
-          />
-          <button className="btnCancel" onClick={handleCancel}>
-            Annuler
-          </button>
-          <button className="btnValid" onClick={handleSave}>
-            Sauvegarder
-          </button>
-        </div>
-        <Poll />
+        <hr />
+        <Poll
+          question={question}
+          link={link}
+          handleChange={handleEditorChange}
+        />
       </div>
     </>
   )

src/components/Editing/editing.scss

@@ -16,3 +16,6 @@
 .subtitle {
   margin: 1rem 0;
 }
+hr {
+  margin: 2rem 1rem;
+}

src/components/MonthlyNews/MonthlyNews.tsx

+import { Editor } from '@tinymce/tinymce-react'
+import React from 'react'
+
+interface MonthlyNewsProps {
+  onSave: () => void
+  onCancel: () => void
+  header: string
+  quote: string
+  handleChange: (
+    value: string,
+    type: 'header' | 'quote' | 'question' | 'link'
+  ) => void
+}
+const MonthlyNews: React.FC<MonthlyNewsProps> = ({
+  onSave,
+  onCancel,
+  header,
+  quote,
+  handleChange,
+}: MonthlyNewsProps) => {
+  return (
+    <>
+      <div className="subtitle">
+        <p className="title">Informations du mois</p>
+      </div>
+      <div>
+        <Editor
+          init={{
+            menubar: false,
+            toolbar:
+              'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
+          }}
+          value={header}
+          onEditorChange={(newHeader) => handleChange(newHeader, 'header')}
+        />
+        <div className="subtitle">
+          <p className="title">Citation du mois</p>
+        </div>
+
+        <Editor
+          init={{
+            menubar: false,
+            toolbar:
+              'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
+            setup: function (editor) {
+              editor.ui.registry.addMenuButton('ecolyoLink', {
+                text: 'Lien Ecolyo',
+                fetch: function (callback) {
+                  var items: any = [
+                    {
+                      type: 'menuitem',
+                      text: 'consumption',
+                      onAction: function () {
+                        editor.insertContent(
+                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
+                        )
+                      },
+                    },
+                    {
+                      type: 'menuitem',
+                      text: 'challenges',
+                      onAction: function () {
+                        editor.insertContent(
+                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
+                        )
+                      },
+                    },
+                    {
+                      type: 'menuitem',
+                      text: 'ecogestures',
+                      onAction: function () {
+                        editor.insertContent(
+                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
+                        )
+                      },
+                    },
+                    {
+                      type: 'menuitem',
+                      text: 'analysis',
+                      onAction: function () {
+                        editor.insertContent(
+                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
+                        )
+                      },
+                    },
+                    {
+                      type: 'menuitem',
+                      text: 'options',
+                      onAction: function () {
+                        editor.insertContent(
+                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/options">Page options</a>'
+                        )
+                      },
+                    },
+                  ]
+                  callback(items)
+                },
+              })
+            },
+          }}
+          value={quote}
+          onEditorChange={(newQuote) => handleChange(newQuote, 'quote')}
+        />
+        <button className="btnCancel" onClick={onCancel}>
+          Annuler
+        </button>
+        <button className="btnValid" onClick={onSave}>
+          Sauvegarder
+        </button>
+      </div>
+    </>
+  )
+}
+
+export default MonthlyNews

src/components/Poll/Poll.tsx

-import React, { ChangeEvent, useState } from 'react'
-const Poll: React.FC = () => {
-  const [poll, setPoll] = useState<string>('')
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setPoll(e.target.value)
+import { Editor } from '@tinymce/tinymce-react'
+import React, { ChangeEvent } from 'react'
+import './poll.scss'
+
+interface PollProps {
+  question: string
+  link: string
+  handleChange: (
+    value: string,
+    type: 'header' | 'quote' | 'question' | 'link'
+  ) => void
+}
+const Poll: React.FC<PollProps> = ({
+  question,
+  link,
+  handleChange,
+}: PollProps) => {
+  const handleChangeLink = (e: ChangeEvent<HTMLInputElement>) => {
+    handleChange(e.target.value, 'link')
   }
+
   return (
     <div className="poll">
-      <h2>Sélectionner un formulaire</h2>
+      <h2>Ajouter un sondage</h2>
+      <p className="title">Question</p>
+
+      <Editor
+        init={{
+          menubar: false,
+          toolbar:
+            'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
+        }}
+        value={question}
+        onEditorChange={(newQuestion, editor) =>
+          handleChange(newQuestion, 'question')
+        }
+      />
+      <p className="title">Lien</p>
       <input
         type="text"
         className="input-dark"
-        value={poll}
-        onChange={handleChange}
+        value={link}
+        onChange={handleChangeLink}
       />
     </div>
   )

src/components/Poll/poll.scss

+.poll {
+  margin: 2rem 0;
+  .title {
+    margin: 1rem 0;
+  }
+  input {
+    min-width: 300px;
+    margin-left: 0;
+  }
+}

src/models/monthlyNews.model.ts

-export interface MonthlyNews {
+export interface IMonthlyNews {
   year: number
   month: number
   header: string

src/services/monthlyNews.service.ts

 import axios from 'axios'
-import { MonthlyNews } from '../models/monthlyNews.model'
+import { IMonthlyNews } from '../models/monthlyNews.model'
 export class MonthlyNewsService {
   private readonly _apiUrl: string
   constructor() {
@@ -44,7 +44,7 @@ export class MonthlyNewsService {
     year: number,
     month: number,
     token: string
-  ): Promise<MonthlyNews | any> => {
+  ): Promise<IMonthlyNews | any> => {
     try {
       const { data } = await axios.get(
         `${this._apiUrl}api/admin/monthlyNews/${year}/${month}`,
@@ -54,7 +54,7 @@ export class MonthlyNewsService {
           },
         }
       )
-      return data as MonthlyNews
+      return data as IMonthlyNews
     } catch (e) {
       console.log('error', e)
       return