From 11da66aacbad84ff61e8d58aec9945564d1f197c Mon Sep 17 00:00:00 2001
From: Muneerat <oladipomunirat@gmail.com>
Date: Sun, 21 Jul 2024 17:54:12 +0100
Subject: [PATCH 1/2] Fix : view modal

---
 app/components/modal/addUserModal.tsx | 127 ++++++++++++++++++++++++++
 app/components/modal/deleteUser.tsx   |  13 +++
 app/components/modal/modal.tsx        |  79 ++++++++++++++++
 app/routes/_index.tsx                 |  21 +++++
 4 files changed, 240 insertions(+)
 create mode 100644 app/components/modal/addUserModal.tsx
 create mode 100644 app/components/modal/deleteUser.tsx
 create mode 100644 app/components/modal/modal.tsx

diff --git a/app/components/modal/addUserModal.tsx b/app/components/modal/addUserModal.tsx
new file mode 100644
index 00000000..0623f71c
--- /dev/null
+++ b/app/components/modal/addUserModal.tsx
@@ -0,0 +1,127 @@
+import { useState, ChangeEvent, FormEvent } from "react";
+
+interface AddUserContentProps {
+  toggleShow: (show: boolean) => void;
+}
+
+const AddUserContent: React.FC<AddUserContentProps> = ({ toggleShow }) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [errors, setErrors] = useState({
+    name: "",
+    email: "",
+    phoneNumber: ""
+  });
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = e.target;
+    if (id === "name") setName(value);
+    if (id === "email") setEmail(value);
+    if (id === "phoneNumber") setPhoneNumber(value);
+  };
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const newErrors = {
+      name: "",
+      email: "",
+      phoneNumber: ""
+    };
+
+    if (!name.trim()) {
+      newErrors.name = "Name is required";
+    }
+    if (!email.trim()) {
+      newErrors.email = "Email is required";
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      newErrors.email = "Email address is invalid";
+    }
+    if (!phoneNumber.trim()) {
+      newErrors.phoneNumber = "Phone number is required";
+    }
+    if (newErrors.name || newErrors.email || newErrors.phoneNumber) {
+      setErrors(newErrors);
+    } else {
+      setName("");
+      setEmail("");
+      setPhoneNumber("");
+      setErrors({
+        name: "",
+        email: "",
+        phoneNumber: ""
+      });
+      toggleShow(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h2 className="text-xl">Add new user</h2>
+      <p className="text-[#64748B]">Create a new user</p>
+      <div className="flex">
+        <div className="h-20 w-20 rounded-full bg-[#D9D9D9] my-5">
+          <input
+            type="file"
+            alt=""
+            className="h-20 w-20 rounded-full bg-[#D9D9D9] opacity-0"
+          />
+        </div>
+        <div className="my-auto mx-4">
+          <p>Upload Picture</p>
+          <div className="relative">
+            <p className="absolute text-[#F97316]">Click to upload</p>
+            <input type="file" className="opacity-0 w-28" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div className="flex flex-col my-2">
+          <label htmlFor="name">Name</label>
+          <input
+            type="text"
+            id="name"
+            value={name}
+            onChange={handleChange}
+            placeholder="e.g John Doe"
+            className="border-2 rounded-lg p-2 focus:border-none outline-[#CBD5E1] my-2"
+          />
+          {errors.name && <p className="text-red-600">{errors.name}</p>}
+        </div>
+        <div className="flex flex-col my-2">
+          <label htmlFor="email">Email</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={handleChange}
+            placeholder="e.g johndoe@gmail.com"
+            className="border-2 rounded-lg p-2 focus:border-none outline-[#CBD5E1] my-2"
+          />
+          {errors.email && <p className="text-red-600">{errors.email}</p>}
+        </div>
+        <div className="flex flex-col my-2">
+          <label htmlFor="phoneNumber">Phone number</label>
+          <input
+            type="text"
+            id="phoneNumber"
+            value={phoneNumber}
+            onChange={handleChange}
+            placeholder="e.g 08123456789"
+            className="border-2 rounded-lg p-2 focus:border-none outline-[#CBD5E1] my-2"
+          />
+          {errors.phoneNumber && <p className="text-red-600">{errors.phoneNumber}</p>}
+        </div>
+      </div>
+      <div className="flex justify-end">
+        <button type="submit" className="bg-[#F97316] p-3 rounded-lg text-white">
+          Add New User
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default AddUserContent;
+ 
+  
\ No newline at end of file
diff --git a/app/components/modal/deleteUser.tsx b/app/components/modal/deleteUser.tsx
new file mode 100644
index 00000000..543c1ab0
--- /dev/null
+++ b/app/components/modal/deleteUser.tsx
@@ -0,0 +1,13 @@
+const DeleteUserContent = () => {
+    return (
+    <div>
+        <h1 className=" font-bold ">Are you sure you want to delete?</h1 >      
+        <p>This action cannot be undone. This will permanently delete this user from the database.</p>
+    </div> 
+
+  );
+};
+
+export default DeleteUserContent;
+ 
+  
\ No newline at end of file
diff --git a/app/components/modal/modal.tsx b/app/components/modal/modal.tsx
new file mode 100644
index 00000000..af6b5792
--- /dev/null
+++ b/app/components/modal/modal.tsx
@@ -0,0 +1,79 @@
+import React, { useEffect, useRef, ReactNode } from 'react';
+import { Card } from '../ui/card';
+
+interface ModalProps {
+  className?: string;
+  show: boolean;
+  toggleShow: (show: boolean) => void;
+  children: ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ className, show, toggleShow, children }) => {
+  const modal = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (modal.current && !modal.current.contains(e.target as Node)) {
+        toggleShow(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [toggleShow]);
+
+  return (
+    <Card>
+      {show && (
+        <div className="w-screen h-screen z-50 bg-black/20 fixed inset-0 flex justify-center items-center">
+          <div
+            className={`bg-white p-10 h-fit max-w-2xl w-1/4 rounded-lg relative m-8 ${className}`}
+            ref={modal}
+          >
+            {/* <button
+              type="button"
+              className="absolute right-2 top-2 z-10 text-center bg-slate-600 rounded-full p-1 hover:bg-opacity-80 transition ease-in-out duration-150"
+              onClick={() => toggleShow(true)}
+            >
+              *
+            </button> */}
+            <div className="max- w-full">{children}</div>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default Modal;
+// context/ModalContext.tsx
+// import { createContext, useContext, useState, ReactNode } from "react";
+
+// interface ModalContextProps {
+//   showModal: boolean;
+//   toggleModal: (show: boolean) => void;
+// }
+
+// const ModalContext = createContext<ModalContextProps | undefined>(undefined);
+
+// export const useModal = () => {
+//   const context = useContext(ModalContext);
+//   if (!context) {
+//     throw new Error("useModal must be used within a ModalProvider");
+//   }
+//   return context;
+// };
+
+// export const ModalProvider = ({ children }: { children: ReactNode }) => {
+//   const [showModal, setShowModal] = useState(false);
+
+//   const toggleModal = (show: boolean) => setShowModal(show);
+
+//   return (
+//     <ModalContext.Provider value={{ showModal, toggleModal }}>
+//       {children}
+//     </ModalContext.Provider>
+//   );
+// };
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 1eeb5b2f..22331026 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,8 +1,14 @@
 import type { MetaFunction } from "@remix-run/node";
+import { useState } from "react";
 import { Button } from "~/components/ui/button";
 import CardPlatform from "~/components/ui/card/card-platform";
+import Modal from "~/components/modal/modal";
+import AddUserContent from "~/components/modal/addUserModal";
+import DeleteUserContent from "~/components/modal/deleteUser";
 
 export const meta: MetaFunction = () => {
+
+
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
@@ -10,6 +16,11 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+  const [show, setShow] = useState(false);
+
+  const toggleShow = (show: boolean) => {
+    setShow(show);
+  };
   return (
     <div className="font-sans p-4">
       <h1 className="text-3xl">Welcome to Remix</h1>
@@ -54,6 +65,16 @@ export default function Index() {
           </a>
         </li>
       </ul>
+      <button
+        className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition duration-200"
+        onClick={() => toggleShow(true)}
+      >
+        Open Modal
+      </button>
+      <Modal show={show} toggleShow={toggleShow}>
+        {/* <AddUserContent toggleShow={toggleShow} /> */}
+        <DeleteUserContent />
+      </Modal>
     </div>
   );
 }

From ed34b0bdf53a8d59be8e66f84718ec452440034d Mon Sep 17 00:00:00 2001
From: Muneerat <oladipomunirat@gmail.com>
Date: Mon, 22 Jul 2024 13:05:05 +0100
Subject: [PATCH 2/2] Fix: lint error

---
 app/components/modal/addUserModal.tsx | 16 ++++++++--------
 app/components/modal/deleteUser.tsx   |  2 +-
 app/components/modal/modal.tsx        | 17 +++++++++--------
 app/routes/_index.tsx                 | 10 +---------
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/app/components/modal/addUserModal.tsx b/app/components/modal/addUserModal.tsx
index 82d2ebe4..6a7835e1 100644
--- a/app/components/modal/addUserModal.tsx
+++ b/app/components/modal/addUserModal.tsx
@@ -1,4 +1,4 @@
-import {ChangeEvent, FormEvent, useState } from "react"
+import { ChangeEvent, FormEvent, useState } from "react";
 
 interface AddUserContentProperties {
   toggleShow: (show: boolean) => void;
@@ -26,7 +26,7 @@ const AddUserContent: React.FC<AddUserContentProperties> = ({ toggleShow }) => {
     const newErrors = {
       name: "",
       email: "",
-      phoneNumber: ""
+      phoneNumber: "",
     };
 
     if (!name.trim()) {
@@ -60,7 +60,7 @@ const AddUserContent: React.FC<AddUserContentProperties> = ({ toggleShow }) => {
       <h2 className="text-xl">Add new user</h2>
       <p className="text-loading-hover">Create a new user</p>
       <div className="flex">
-        <div className="bg-[hsl(0,0%,85%) my-5 h-20 w-20 rounded-full ">
+        <div className="my-5 h-20 w-20 rounded-full bg-[hsl(0,0%,85%)]">
           <input
             type="file"
             alt=""
@@ -71,7 +71,7 @@ const AddUserContent: React.FC<AddUserContentProperties> = ({ toggleShow }) => {
           <p>Upload Picture</p>
           <div className="relative">
             <p className="absolute text-primary">Click to upload</p>
-            <input type="file" className="w-28 opacity-0 " />
+            <input type="file" className="w-28 opacity-0" />
           </div>
         </div>
       </div>
@@ -110,9 +110,9 @@ const AddUserContent: React.FC<AddUserContentProperties> = ({ toggleShow }) => {
             placeholder="e.g 08123456789"
             className="my-2 rounded-lg border-2 p-2 outline-[#CBD5E1] focus:border-none"
           />
-          {
-           errors.phoneNumber && <p className="text-error">{errors.phoneNumber}</p>
-           }
+          {errors.phoneNumber && (
+            <p className="text-error">{errors.phoneNumber}</p>
+          )}
         </div>
       </div>
       <div className="flex justify-end">
@@ -124,4 +124,4 @@ const AddUserContent: React.FC<AddUserContentProperties> = ({ toggleShow }) => {
   );
 };
 
-export default AddUserContent;
\ No newline at end of file
+export default AddUserContent;
diff --git a/app/components/modal/deleteUser.tsx b/app/components/modal/deleteUser.tsx
index ff37cdbe..ccd34046 100644
--- a/app/components/modal/deleteUser.tsx
+++ b/app/components/modal/deleteUser.tsx
@@ -26,7 +26,7 @@ const DeleteUserContent: React.FC<DeleteUserContentProperties> = ({
           Cancel
         </Button>
         <Button
-          className="m-2 bg-error hover:bg-error"
+          className="bg-error hover:bg-error m-2"
           onClick={() => toggleShow(false)}
         >
           Delete
diff --git a/app/components/modal/modal.tsx b/app/components/modal/modal.tsx
index 3a705ad1..878f3890 100644
--- a/app/components/modal/modal.tsx
+++ b/app/components/modal/modal.tsx
@@ -1,4 +1,5 @@
-import React, {ReactNode, useEffect, useRef } from "react";
+import React, { ReactNode, useEffect, useRef } from "react";
+
 import { Card } from "../ui/card";
 
 interface ModalProperties {
@@ -9,11 +10,11 @@ interface ModalProperties {
 }
 
 const Modal: React.FC<ModalProperties> = ({
-                                        className, 
-                                        show, 
-                                        toggleShow, 
-                                        children 
-                                      }) => {
+  className,
+  show,
+  toggleShow,
+  children,
+}) => {
   const modal = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -32,9 +33,9 @@ const Modal: React.FC<ModalProperties> = ({
   return (
     <Card>
       {show && (
-        <div className="w-screen h-screen z-50 bg-black/20 fixed inset-0 flex justify-center items-center">
+        <div className="fixed inset-0 z-50 flex h-screen w-screen items-center justify-center bg-black/20">
           <div
-            className={`bg-background p-5 h-fit max-w-2xl md:w-[28%] rounded-lg relative m-8 ${className}`}
+            className={`relative m-8 h-fit max-w-2xl rounded-lg bg-background p-5 md:w-[28%] ${className}`}
             ref={modal}
           >
             <div className="max- w-full">{children}</div>
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 95335840..2f45d32a 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,11 +1,4 @@
 import type { MetaFunction } from "@remix-run/node";
-import { useState } from "react";
-import AddUserContent from "~/components/modal/addUserModal";
-import { Button } from "~/components/ui/button";
-import Modal from "~/components/modal/modal";
-import CardPlatform from "~/components/ui/card/card-platform";
-import OtpAuth from "~/components/ui/otp/OtpAuth";
-import { Input } from "~/types/otpauth";
 
 import FindSection from "~/components/pages/home/FindSection";
 import HeroSection from "~/components/pages/home/HeroSection";
@@ -14,7 +7,6 @@ import TestimonialsSection from "~/components/pages/home/TestimonialsSection";
 import UsersSection from "~/components/pages/home/UsersSection";
 
 export const meta: MetaFunction = () => {
-
   return [
     { title: "Remix Boilerplate" },
     { name: "description", content: "Welcome to Remix!" },
@@ -31,4 +23,4 @@ export default function Index() {
       <FindSection />
     </>
   );
-}
\ No newline at end of file
+}