From 88f9c3fb7a68e4dc41adcef002872d4beeecbfb8 Mon Sep 17 00:00:00 2001
From: kenechukwu offokansi <koffokansi@gmail.com>
Date: Sat, 18 Sep 2021 17:07:18 +0100
Subject: [PATCH] reuseable modalButton added && cancel button wired up for uv
 and ae

---
 .../admin/editDeadline/editDeadline.jsx       | 20 ++++++++++--------
 .../components/modals/component/button.jsx    | 21 +++++++++++++++++++
 .../modals/component/checkbox/checkbox.jsx    |  2 +-
 .../component/radioButton/radioButton.jsx     |  2 +-
 .../modals/user/userViewDeadline/userView.jsx | 12 ++++++++++-
 5 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/modals/component/button.jsx

diff --git a/frontend/src/components/modals/admin/editDeadline/editDeadline.jsx b/frontend/src/components/modals/admin/editDeadline/editDeadline.jsx
index 0f1b515e..8fc9ada9 100644
--- a/frontend/src/components/modals/admin/editDeadline/editDeadline.jsx
+++ b/frontend/src/components/modals/admin/editDeadline/editDeadline.jsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import ColTitleDes from '../../component/columnTitleDes'
 import TextField from '../../component/textField'
 import DatePicker from '../../component/datePicker2'
 import RadioButton from '../../component/radioButton/radioButton'
 import Priority from '../../component/priority'
 import ModalBase from '../../modalBase/index'
+import ModalButton from '../../component/button'
+import { ModalContext } from '../../../../context/ModalContext'
 
 // prop value format= {
 // 	title: 'fuck',
@@ -15,6 +17,9 @@ import ModalBase from '../../modalBase/index'
 //  assignTo: "#marketing"
 // }
 const EditDeadline = ({ details }) => {
+	const { modalData, setModalData } = useContext(ModalContext)
+	const closeModal = () => setModalData({ ...modalData, modalShow: false })
+
 	let data = {
 		description: details.description,
 		title: details.title,
@@ -128,14 +133,11 @@ const EditDeadline = ({ details }) => {
 						}}
 					/>
 				</div>
-				<div className="flex justify-end gap-4">
-					<button className="h-11 px-5 text-sm text-brand-primary font-semibold">
-						Cancel
-					</button>
-					<button className="h-11 px-5 text-sm bg-brand-primary font-semibold text-brand-bg-white">
-						Update
-					</button>
-				</div>
+				<ModalButton
+					actionName="Update"
+					actionFunc={() => {}}
+					cancelFunc={closeModal}
+				/>
 			</div>
 		</ModalBase>
 	)
diff --git a/frontend/src/components/modals/component/button.jsx b/frontend/src/components/modals/component/button.jsx
new file mode 100644
index 00000000..91c53834
--- /dev/null
+++ b/frontend/src/components/modals/component/button.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const ModalButton = ({ cancelFunc, actionFunc, actionName }) => {
+	return (
+		<div className="flex justify-end gap-4">
+			<button
+				className="h-11 px-5 text-sm text-brand-primary font-semibold"
+				onClick={cancelFunc}
+			>
+				Cancel
+			</button>
+			<button
+				className="h-11 px-5 text-sm bg-brand-primary font-semibold text-brand-bg-white"
+				onClick={actionFunc}
+			>
+				{actionName}
+			</button>
+		</div>
+	)
+}
+export default ModalButton
diff --git a/frontend/src/components/modals/component/checkbox/checkbox.jsx b/frontend/src/components/modals/component/checkbox/checkbox.jsx
index fb559ebc..b531ef27 100644
--- a/frontend/src/components/modals/component/checkbox/checkbox.jsx
+++ b/frontend/src/components/modals/component/checkbox/checkbox.jsx
@@ -25,7 +25,7 @@ const Checkbox = ({ id, label, check, onChange }) => {
 			)}
 			<label
 				htmlFor={id}
-				className="text-sm leading-none self-center flex items-center gap-x-2"
+				className="text-sm cursor-pointer leading-none self-center flex items-center gap-x-2"
 			>
 				<div className="inline-block h-5 w-5 border-solid border border-black p-px">
 					<div className={`${style.interior} bg-brand-primary h-full`}></div>
diff --git a/frontend/src/components/modals/component/radioButton/radioButton.jsx b/frontend/src/components/modals/component/radioButton/radioButton.jsx
index bb2abfab..f09d8299 100644
--- a/frontend/src/components/modals/component/radioButton/radioButton.jsx
+++ b/frontend/src/components/modals/component/radioButton/radioButton.jsx
@@ -16,7 +16,7 @@ const RadioButton = ({ id, label, selected, onChange }) => {
 			}
 			<label
 				htmlFor={id}
-				className="text-sm leading-none self-center flex items-center gap-x-2"
+				className="text-sm cursor-pointer leading-none self-center flex items-center gap-x-2"
 			>
 				<div className="inline-block h-4 w-4 rounded-1/2 border-solid border border-black p-px">
 					<div
diff --git a/frontend/src/components/modals/user/userViewDeadline/userView.jsx b/frontend/src/components/modals/user/userViewDeadline/userView.jsx
index 25172c26..904113ef 100644
--- a/frontend/src/components/modals/user/userViewDeadline/userView.jsx
+++ b/frontend/src/components/modals/user/userViewDeadline/userView.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 
 import ColTitleDes from '../../component/columnTitleDes'
 import RowTitleDes from '../../component/rowTitleDes'
@@ -6,6 +6,8 @@ import Avatar from '../../component/avatar'
 import RemindMeCheckBox from '../../component/remindMeCheckBox'
 import ModalBase from '../../modalBase/index'
 import Priority from '../../component/priority'
+import ModalButton from '../../component/button'
+import { ModalContext } from '../../../../context/ModalContext'
 
 // const props = {
 // 	priority: 'high',
@@ -41,6 +43,9 @@ export default function UserViewDeadline({
 	checkbox,
 	assigneeOnline,
 }) {
+	const { modalData, setModalData } = useContext(ModalContext)
+	const closeModal = () => setModalData({ ...modalData, modalShow: false })
+
 	const DeadlineTitle = (
 		<div className="flex gap-4">
 			{title} <Priority status={priority} forTitle />
@@ -88,6 +93,11 @@ export default function UserViewDeadline({
 						<RemindMeCheckBox checkBoxObj labels={labels} change={onchange} />
 					}
 				/>
+				<ModalButton
+					actionName="Save"
+					actionFunc={() => {}}
+					cancelFunc={closeModal}
+				/>
 			</div>
 		</ModalBase>
 	)