From 191f82003aba254c9d036c449a78f59b9f898741 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Wed, 4 Aug 2021 13:35:39 +0200
Subject: [PATCH] Add deletion modal

---
 src/components/Editing/Editing.tsx         | 43 +++++++++++++++++++++-
 src/components/MonthlyNews/MonthlyNews.tsx |  5 ++-
 src/components/Poll/Poll.tsx               |  5 ++-
 src/hooks/useAuth.ts                       |  5 +--
 4 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index 2755666e..5af1ff69 100644
--- a/src/components/Editing/Editing.tsx
+++ b/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>
+      )}
     </>
   )
 }
diff --git a/src/components/MonthlyNews/MonthlyNews.tsx b/src/components/MonthlyNews/MonthlyNews.tsx
index 9920226b..a5befe0f 100644
--- a/src/components/MonthlyNews/MonthlyNews.tsx
+++ b/src/components/MonthlyNews/MonthlyNews.tsx
@@ -1,5 +1,6 @@
 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>
diff --git a/src/components/Poll/Poll.tsx b/src/components/Poll/Poll.tsx
index 0cc8fb34..4ed6d85b 100644
--- a/src/components/Poll/Poll.tsx
+++ b/src/components/Poll/Poll.tsx
@@ -1,5 +1,6 @@
 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>
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 3b9ba236..f9d7e532 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,7 +1,6 @@
-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 {
-- 
GitLab