New/Edit drive and finish donation modals (#6)

src/components/Button/Button.tsx

@@ -3,8 +3,16 @@ import "./button.css";
 
 interface ButtonProps {
   label: string;
+  onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
 }
 
-export default function Button({ label }: ButtonProps) {
-  return <div className={"button-container"}>{label}</div>;
+export default function Button({ label, onClick }: ButtonProps) {
+  return (
+    <input
+      type="submit"
+      className={"button-container"}
+      onClick={onClick}
+      value={label}
+    ></input>
+  );
 }

src/components/Button/button.css

@@ -7,4 +7,6 @@
   min-height: 50px;
   background-color: #ff647c;
   color: white;
+  cursor: pointer;
+  border: none;
 }

src/components/Dropdown/Dropdown.tsx

@@ -1,24 +1,36 @@
 import React from "react";
-import Select from "react-select";
+import Select, { SingleValue } from "react-select";
 import DropdownStyles from "./DropdownStyles";
+import "./dropdown.css";
 
-interface Option {
+export interface DropdownOption {
   value: string;
   label: string;
 }
 
 interface DropdownProps {
-  options: Option[];
-  placeHolder: string;
+  options: DropdownOption[];
+  label: string;
+  selected: any;
+  onChange: (newValue: SingleValue<DropdownOption>) => void;
 }
 
-export default function Dropdown({ options, placeHolder }: DropdownProps) {
+export default function Dropdown({
+  options,
+  label,
+  selected,
+  onChange,
+}: DropdownProps) {
   return (
-    <Select
-      options={options}
-      isSearchable={false}
-      styles={DropdownStyles}
-      placeholder={placeHolder}
-    />
+    <div>
+      <span className={"select-label"}>{label}</span>
+      <Select
+        options={options}
+        defaultValue={selected}
+        isSearchable={false}
+        styles={DropdownStyles}
+        onChange={onChange}
+      />
+    </div>
   );
 }

src/components/Dropdown/DropdownStyles.tsx

@@ -7,6 +7,7 @@ const DropdownStyles = {
       borderColor: "#FF98A8",
     },
     color: "#FF98A8",
+    minHeight: "50px",
   }),
   option: (provided: any, state: { isSelected: any }) => ({
     ...provided,
@@ -43,6 +44,11 @@ const DropdownStyles = {
     ...provided,
     color: "#FF98A8",
   }),
+  container: (provided: any, state: any) => ({
+    ...provided,
+    minWidth: "325px",
+    minHeight: "50px",
+  }),
 };
 
 export default DropdownStyles;

src/components/Dropdown/dropdown.css

@@ -0,0 +1,13 @@
+.select-label {
+  left: 0px;
+  top: 0px;
+  display: block;
+  margin-bottom: 15px;
+
+  font-style: normal;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 20px;
+
+  color: #151522;
+}

src/components/Dropdown/index.ts

@@ -1 +1,2 @@
 export { default } from "./Dropdown";
+export type { DropdownOption } from "./Dropdown";

src/components/Input/Input.tsx

@@ -20,6 +20,7 @@ export default function Input({
       <input
         type="text"
         id={name}
+        name={name}
         placeholder={placeholder}
         defaultValue={defaultValue}
       />

src/components/Input/input.css

@@ -1,6 +1,6 @@
 .main {
   position: relative;
-  max-width: 325px;
+  min-width: 325px;
 }
 
 .main label {

src/components/Modals/Drive/Drive.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import Input from "../../Input";
+import Dropdown from "../../Dropdown";
+import Switch from "../../Switch";
+import Button from "../../Button";
+import { DropdownOption } from "../../Dropdown";
+import "./drive.css";
+
+interface DriveProps {
+  bloodAmount?: string;
+  bloodType: DropdownOption;
+  urgency?: boolean;
+}
+
+export default function Drive(props: DriveProps) {
+  const bloodTypes = [
+    { value: "O+", label: "O+" },
+    { value: "O-", label: "O-" },
+    { value: "A+", label: "A+" },
+    { value: "A-", label: "A-" },
+    { value: "B+", label: "B+" },
+    { value: "B-", label: "B-" },
+    { value: "AB+", label: "AB+" },
+    { value: "AB-", label: "AB-" },
+  ];
+
+  const { title, buttonLabel } =
+    Object.keys(props).length == 0
+      ? { title: "New Drive", buttonLabel: "Create" }
+      : { title: "Edit Drive", buttonLabel: "Update" };
+
+  const [bloodType, setBloodType] = React.useState<string | undefined>(
+    props.bloodType?.value || bloodTypes[0].value
+  );
+  const [urgency, setUrgency] = React.useState<boolean>(props.urgency || false);
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    const data = new FormData(e.target.form);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className={"modal-container"}>
+        <div className={"modal-title"}>{title}</div>
+        <div className={"input-container"}>
+          <Input
+            label={"Blood amount"}
+            name={"bloodAmount"}
+            placeholder={"type here..."}
+            defaultValue={props.bloodAmount}
+          />
+        </div>
+        <div className={"input-container"}>
+          <input
+            type="text"
+            hidden={true}
+            id={"bloodType"}
+            name={"bloodType"}
+            value={bloodType}
+          />
+          <Dropdown
+            options={bloodTypes}
+            selected={{ value: bloodType, label: bloodType }}
+            label={"Blood type"}
+            onChange={(value) => {
+              setBloodType(value?.value);
+            }}
+          />
+        </div>
+        <div className={"switch-container"}>
+          <input
+            type="text"
+            hidden={true}
+            id={"urgency"}
+            name={"urgency"}
+            value={urgency?.toString()}
+          />
+          <Switch
+            initChecked={urgency}
+            onToggle={(checked) => {
+              setUrgency(checked);
+            }}
+          />
+          <span className={"switch-label"}>Urgent</span>
+        </div>
+        <div className={"input-container submit-button"}>
+          <Button label={buttonLabel} onClick={handleSubmit} />
+        </div>
+      </div>
+    </form>
+  );
+}

src/components/Modals/Drive/drive.css

@@ -0,0 +1,46 @@
+.modal-container {
+  height: 540px;
+  width: 410px;
+  border-radius: 10px;
+  border: 1px solid red;
+}
+
+.modal-title {
+  display: flex;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 22px;
+  padding-top: 20px;
+}
+
+.modal-container {
+  position: relative;
+  height: 540px;
+  width: 410px;
+  border-radius: 10px;
+  border: 1px solid red;
+}
+
+.input-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 50px;
+}
+
+.switch-container {
+  display: flex;
+  align-items: center;
+  padding-top: 50px;
+  padding-left: 42px;
+}
+.switch-label {
+  padding-left: 20px;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.submit-button {
+  position: absolute;
+  bottom: 30px;
+  left: 42px;
+}

src/components/Modals/Drive/index.ts

@@ -0,0 +1 @@
+export { default } from "./Drive";

src/components/Modals/FinishDonation/FinishDonation.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import Input from "../../Input";
+import Dropdown from "../../Dropdown";
+import Button from "../../Button";
+import "./finish-donation.css";
+import TextInput from "../../TextInput";
+
+export default function FinishDonation() {
+  const donationStatuses = [
+    { value: "Successful", label: "Successful" },
+    { value: "Failed", label: "Failed" },
+    { value: "Canceled", label: "Canceled" },
+  ];
+
+  const [donationStatus, setdonationStatus] = React.useState<
+    string | undefined
+  >(donationStatuses[0].value);
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    const data = new FormData(e.target.form);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className={"modal-container"}>
+        <div className={"modal-title"}>Finish Donation</div>
+        <div className={"finish-input-container"}>
+          <input
+            type="text"
+            hidden={true}
+            id={"status"}
+            name={"status"}
+            value={donationStatus}
+          />
+          <Dropdown
+            options={donationStatuses}
+            label={"Status"}
+            selected={donationStatuses[0]}
+            onChange={(value) => {
+              setdonationStatus(value?.value);
+            }}
+          />
+        </div>
+        {donationStatus == donationStatuses[0].value && (
+          <>
+            <div className={"finish-input-container"}>
+              <Input
+                label={"Leukocyte Count (ccm)"}
+                name={"leukocyteCount"}
+                placeholder={"6,000"}
+              />
+            </div>
+            <div className={"finish-input-container"}>
+              <Input
+                label={"Erythrocyte Count (ccm)"}
+                name={"erythrocyteCount"}
+                placeholder={"4,520,000"}
+              />
+            </div>
+            <div className={"finish-input-container"}>
+              <Input
+                label={"Platelet Count (ml)"}
+                name={"plateletCount"}
+                placeholder={"329,000"}
+              />
+            </div>
+          </>
+        )}
+        {donationStatus != donationStatuses[0].value && (
+          <div className={"finish-input-container"}>
+            <TextInput
+              label={"Note"}
+              name={"note"}
+              placeholder={"Enter note here..."}
+            />
+          </div>
+        )}
+        <div className={"finish-input-container submit-button"}>
+          <Button label={"Finish Donation"} onClick={handleSubmit} />
+        </div>
+      </div>
+    </form>
+  );
+}

src/components/Modals/FinishDonation/finish-donation.css

@@ -0,0 +1,27 @@
+.modal-container {
+  position: relative;
+  height: 540px;
+  width: 410px;
+  border-radius: 10px;
+  border: 1px solid red;
+}
+
+.modal-title {
+  display: flex;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 22px;
+  padding-top: 20px;
+}
+
+.finish-input-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 15px;
+}
+
+.submit-button {
+  position: absolute;
+  bottom: 30px;
+  left: 42px;
+}

src/components/Modals/FinishDonation/index.ts

@@ -0,0 +1 @@
+export { default } from "./FinishDonation";