Add editor service

src/components/Editing/Editing.tsx

@@ -3,35 +3,16 @@ import 'react-datepicker/dist/react-datepicker.css'
 import { Editor } from '@tinymce/tinymce-react'
 import DateSelector from '../DateSelector/DateSelector'
 import './editing.scss'
+import { EditorService } from '../../services/editor.service'
 
 const Editing: React.FC = () => {
   const [date, setDate] = useState<string>('')
   const [header, setHeader] = useState<string>('')
   const [quote, setQuote] = useState<string>('')
 
-  async function handleSave() {
-    try {
-      const response = await fetch(
-        'https://localhost:1443/api/admin/monthlyNews',
-        {
-          method: 'POST',
-          body: JSON.stringify({
-            month: date.split('-')[0],
-            year: date.split('-')[1],
-            header: header,
-            quote: quote,
-          }),
-        }
-      )
-      if (response.status !== 201) {
-        throw new Error(
-          `Le post n'a pas pu être créé (code ${response.status})`
-        )
-      }
-      console.log('Le post a été créé avec succès')
-    } catch (e) {
-      console.log(e)
-    }
+  const handleSave = async () => {
+    const editorService = new EditorService()
+    await editorService.sendQuotation(date, header, quote)
   }
 
   useEffect(() => {
@@ -48,14 +29,9 @@ const Editing: React.FC = () => {
       </div>
       <div className="content">
         <DateSelector date={date} setDate={setDate} />
-
-        <section className="hero is-small is-info">
-          <div className="hero-body">
-            <p className="title">Informations du mois</p>
-            <p className="subtitle"></p>
-          </div>
-        </section>
-
+        <div className="subtitle">
+          <p className="title">Informations du mois</p>
+        </div>
         <div>
           <Editor
             initialValue=""
@@ -67,13 +43,9 @@ const Editing: React.FC = () => {
             value={header}
             onEditorChange={(newHeader, editor) => setHeader(newHeader)}
           />
-
-          <section className="hero is-small is-info">
-            <div className="hero-body">
-              <p className="title">Citation du mois</p>
-              <p className="subtitle"></p>
-            </div>
-          </section>
+          <div className="subtitle">
+            <p className="title">Citation du mois</p>
+          </div>
 
           <Editor
             initialValue=""

src/components/Editing/editing.scss

@@ -12,3 +12,6 @@
 .content {
   padding: 1rem;
 }
+.subtitle {
+  margin: 1rem 0;
+}

src/services/editor.service.ts

+export class EditorService {
+  /**
+   * Createsa quotation and header for selected month
+   * @param date
+   * @param header
+   * @param quote
+   */
+  public sendQuotation = async (
+    date: string,
+    header: string,
+    quote: string
+  ): Promise<void> => {
+    try {
+      const response = await fetch(
+        'https://localhost:1443/api/admin/monthlyNews',
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            month: date.split('-')[0],
+            year: date.split('-')[1],
+            header: header,
+            quote: quote,
+          }),
+        }
+      )
+      if (response.status !== 201) {
+        throw new Error(
+          `Le post n'a pas pu être créé (code ${response.status})`
+        )
+      }
+      console.log('Le post a été créé avec succès')
+    } catch (e) {
+      console.log(e)
+    }
+  }
+}