Merge pull request #21 from Code-the-Dream-School/6-implement-addedit…

…-drug-modal

Implemented Add Drug Modal

package.json

@@ -14,7 +14,11 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@chakra-ui/react": "^3.2.1",
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
         "axios": "^1.6.7",
+        "framer-motion": "^6.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0",

src/App.jsx

@@ -48,11 +48,11 @@ const router = createBrowserRouter([
     },
     {
         path: '/adddrug',
-        element: <AddDrug />,
+        element: <AddDrug addDrugs={AddDrug} />,
     },
     {
         path: '/editdrug',
-        element: <EditDrug />,
+        element: <EditDrug updateDrug={EditDrug} />,
     },
     {
         path: '/dispense',
@@ -77,6 +77,11 @@ const router = createBrowserRouter([
 ]);
 
 const App = () => {
-    return <RouterProvider router={router} />;
+    return (
+        <>
+            <RouterProvider router={router} />
+        </>
+    );
 };
+
 export default App;

src/components/AddMedicineForm.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => {
+    const inputRef = useRef();
+
+    useEffect(() => {
+        inputRef.current.focus();
+    }, [value]);
+
+    return (
+        <div>
+            <StyleInput
+                type={
+                    id === 'expirationDate'
+                        ? 'date'
+                        : ['quantity', 'minAmount', 'lotNumber', 'ndcNumber'].includes(id)
+                          ? 'number'
+                          : 'text'
+                }
+                key={id}
+                id={id}
+                value={value} // Directly use value passed as a prop
+                onChange={handleMedChange}
+                placeholder={placeholder}
+                ref={inputRef}
+            />
+        </div>
+    );
+};
+
+AddMedicineForm.propTypes = {
+    id: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, // Accept string or number
+    handleMedChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string.isRequired,
+};
+
+export default AddMedicineForm;
+
+export const FormField = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem; /* Adjust spacing between label and input */
+`;
+
+export const StyleInput = styled.input`
+    text-size: 1rem;
+    width: 100%;
+    border: 1.5px solid #000;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1em;
+    margin: 0rem;
+    color: #000;
+
+    /* Placeholder text color */
+    &::placeholder {
+        color: black; /* Set placeholder text to black */
+    }
+`;

src/global.css

@@ -73,6 +73,10 @@ body {
     line-height: 1;
 }
 
+body.active-modal {
+    overflow: hidden;
+}
+
 h1,
 h2,
 h3,

src/main.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App.jsx';
+import './global.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>