Merge pull request #56 from NUS-Project-SaBai/medicine-refactor

Medicine refactor
NUS-Project-SaBai · Mar 28, 2024 · fd94b58 · fd94b58
2 parents f83fa78 + 9de9199
commit fd94b58
Show file tree

Hide file tree

Showing 3 changed files with 239 additions and 281 deletions.
diff --git a/components/forms/stock.js b/components/forms/stock.js
@@ -1,75 +1,68 @@
 import React from "react";
 
-class MedicationForm extends React.Component {
-  constructor() {
-    super();
-  }
+const MedicationForm = ({ onSubmit, handleInputChange, formDetails }) => {
+  return (
+    <div>
+      <label className="label">Medication</label>
 
-  render() {
-    let { onSubmit, handleInputChange, formDetails } = this.props;
-    return (
-      <div>
-        <label className="label">Medication</label>
-
-        <div className="field">
-          <label className="label">Medicine Name</label>
-          <div className="control">
-            <input
-              name="medicine_name"
-              className="input"
-              type="text"
-              onChange={handleInputChange}
-              value={formDetails.medicine_name}
-            />
-          </div>
+      <div className="field">
+        <label className="label">Medicine Name</label>
+        <div className="control">
+          <input
+            name="medicine_name"
+            className="input"
+            type="text"
+            onChange={handleInputChange}
+            value={formDetails.medicine_name}
+          />
         </div>
+      </div>
 
-        <div className="field is-grouped">
-          <div className="control is-expanded">
-            <label className="label">Current Quantity</label>
-            <div className="control">
-              <label className="label">
-                {formDetails.quantity == null ? 0 : formDetails.quantity}
-              </label>
-            </div>
-          </div>
-
-          <div className="control is-expanded">
-            <label className="label">Add/ Subtract</label>
-            <div className="control">
-              <input
-                name="quantityChange"
-                className="input"
-                type="number"
-                onWheel={(e) => e.target.blur()}
-                onChange={handleInputChange}
-                value={formDetails.quantityChange}
-              />
-            </div>
+      <div className="field is-grouped">
+        <div className="control is-expanded">
+          <label className="label">Current Quantity</label>
+          <div className="control">
+            <label className="label">
+              {formDetails.quantity == null ? 0 : formDetails.quantity}
+            </label>
           </div>
         </div>
 
-        <div className="field">
-          <label className="label">Notes</label>
+        <div className="control is-expanded">
+          <label className="label">Add/ Subtract</label>
           <div className="control">
-            <textarea
-              name="notes"
-              className="textarea"
-              placeholder="Textarea"
+            <input
+              name="quantityChange"
+              className="input"
+              type="number"
+              onWheel={(e) => e.target.blur()}
               onChange={handleInputChange}
-              value={formDetails.notes}
+              value={formDetails.quantityChange}
             />
           </div>
         </div>
+      </div>
 
-        <div className="level-left">
-          <button className="button is-dark is-medium" onClick={onSubmit}>
-            Submit
-          </button>
+      <div className="field">
+        <label className="label">Notes</label>
+        <div className="control">
+          <textarea
+            name="notes"
+            className="textarea"
+            placeholder="Textarea"
+            onChange={handleInputChange}
+            value={formDetails.notes}
+          />
         </div>
       </div>
-    );
-  }
-}
 
-export { MedicationForm };
+      <div className="level-left">
+        <button className="button is-dark is-medium" onClick={onSubmit}>
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MedicationForm;