Add deletion modal

src/components/Editing/Editing.tsx

@@ -8,6 +8,9 @@ import Poll from '../Poll/Poll'
 import MonthlyNews from '../MonthlyNews/MonthlyNews'
 import { IPoll } from '../../models/poll.model'
 import Loader from '../Loader/Loader'
+import Modal from '../Modal/Modal'
+
+export type ContentItems = 'poll' | 'monthlyNews' | ''
 
 const Editing: React.FC = () => {
   const [date, setDate] = useState<Date>(new Date())
@@ -18,6 +21,8 @@ const Editing: React.FC = () => {
   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 monthlyNewsService = new MonthlyNewsService()
 
@@ -63,6 +68,19 @@ const Editing: React.FC = () => {
       setRefreshData(true)
     }
   }
+  const handleOpenDeleteModal = (target: ContentItems) => {
+    settoDelete(target)
+    setwarningModal(true)
+  }
+  const handleConfirmAlert = () => {
+    if (toDelete === 'monthlyNews') {
+      handleDeleteMonthlyNews()
+    }
+    if (toDelete === 'poll') {
+      handleDeletePoll()
+    }
+    setwarningModal(false)
+  }
 
   const isEmpty = (): boolean => {
     if ((quote !== '' || header !== '') && isTouched) {
@@ -154,7 +172,7 @@ const Editing: React.FC = () => {
             onSave={handleSaveMonthlyNews}
             onCancel={handleCancel}
             handleChange={handleEditorChange}
-            onDelete={handleDeleteMonthlyNews}
+            onDelete={handleOpenDeleteModal}
           />
           <hr />
           <Poll
@@ -163,10 +181,31 @@ const Editing: React.FC = () => {
             handleChange={handleEditorChange}
             onSave={handleSavePoll}
             onCancel={handleCancel}
-            onDelete={handleDeletePoll}
+            onDelete={handleOpenDeleteModal}
           />
         </div>
       )}
+      {warningModal && (
+        <Modal>
+          <>
+            <div className="modal-text">
+              Etes-vous sûr de vouloir supprimer{' '}
+              {toDelete === 'poll' ? 'ce sondage' : 'cette news mensuelle'} ?
+            </div>
+            <div className="buttons">
+              <button
+                className="btnCancel"
+                onClick={() => setwarningModal(false)}
+              >
+                Annuler
+              </button>
+              <button className="btnValid" onClick={handleConfirmAlert}>
+                Continuer
+              </button>
+            </div>
+          </>
+        </Modal>
+      )}
     </>
   )
 }

src/components/MonthlyNews/MonthlyNews.tsx

 import { Editor } from '@tinymce/tinymce-react'
 import React from 'react'
+import { ContentItems } from '../Editing/Editing'
 
 interface MonthlyNewsProps {
   onSave: () => Promise<void>
@@ -10,7 +11,7 @@ interface MonthlyNewsProps {
     value: string,
     type: 'header' | 'quote' | 'question' | 'link'
   ) => void
-  onDelete: () => Promise<void>
+  onDelete: (target: ContentItems) => void
 }
 const MonthlyNews: React.FC<MonthlyNewsProps> = ({
   onSave,
@@ -110,7 +111,7 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({
           <button className="btnValid" onClick={onSave}>
             Sauvegarder
           </button>
-          <button className="btnDelete" onClick={onDelete}>
+          <button className="btnDelete" onClick={() => onDelete('monthlyNews')}>
             Supprimer
           </button>
         </div>

src/components/Poll/Poll.tsx

 import { Editor } from '@tinymce/tinymce-react'
 import React, { ChangeEvent } from 'react'
+import { ContentItems } from '../Editing/Editing'
 import './poll.scss'
 
 interface PollProps {
@@ -11,7 +12,7 @@ interface PollProps {
   ) => void
   onSave: () => Promise<void>
   onCancel: () => void
-  onDelete: () => Promise<void>
+  onDelete: (target: ContentItems) => void
 }
 const Poll: React.FC<PollProps> = ({
   question,
@@ -57,7 +58,7 @@ const Poll: React.FC<PollProps> = ({
           <button className="btnValid" onClick={onSave}>
             Sauvegarder
           </button>
-          <button className="btnDelete" onClick={onDelete}>
+          <button className="btnDelete" onClick={() => onDelete('poll')}>
             Supprimer
           </button>
         </div>

src/hooks/useAuth.ts

-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import axios from 'axios'
 import { User } from '../models/user.model'
-import { UserContext } from './userContext'
 
 const _apiUrl: string = 'https://localhost:1443/'
 
@@ -14,7 +13,7 @@ export interface Auth {
 }
 export const useAuth = (): Auth => {
   const [error, setError] = useState(null)
-  const { setisLogged } = useContext(UserContext)
+
   //login user
   const loginUser = async (): Promise<void> => {
     try {