From b5599806bf34a648bfaed4e7b87d4681011efb19 Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 13:56:53 -0500
Subject: [PATCH 01/14] Added funded line, ability to edit groups, and fixed
 what was ailing volunteer selection.

---
 .../component/AddressInput/AddressInput.jsx   | 13 ++-
 src/app/component/UsersAutocomplete.jsx       | 63 +++++++-------
 src/app/dashboard/Missions/DetailsView.jsx    | 27 +-----
 src/app/dashboard/Missions/ListView.jsx       |  1 +
 .../dashboard/Missions/MissionEditView.jsx    | 82 ++++++++++---------
 .../Missions/MissionFundedStatusRow.jsx       | 44 ++++++++++
 .../Missions/component/AddToGroupPopover.jsx  | 54 +-----------
 .../Missions/component/GroupAutoComplete.jsx  | 63 ++++++++++++++
 8 files changed, 201 insertions(+), 146 deletions(-)
 create mode 100644 src/app/dashboard/Missions/MissionFundedStatusRow.jsx
 create mode 100644 src/app/dashboard/Missions/component/GroupAutoComplete.jsx

diff --git a/src/app/component/AddressInput/AddressInput.jsx b/src/app/component/AddressInput/AddressInput.jsx
index b1f7bf2c..c0243045 100644
--- a/src/app/component/AddressInput/AddressInput.jsx
+++ b/src/app/component/AddressInput/AddressInput.jsx
@@ -22,7 +22,17 @@ const useStyles = makeStyles((theme) => ({
 
 const AddressInput = (props) => {
   const classes = useStyles();
-  const { disabled, error, location, onClear, placeholder, setLocation, showMap, value } = props;
+  const {
+    disabled,
+    error,
+    id,
+    location,
+    onClear,
+    placeholder,
+    setLocation,
+    showMap,
+    value,
+  } = props;
 
   const [zoom, setZoom] = useState(0);
   const [position, setPosition] = useState([0, 0]);
@@ -107,6 +117,7 @@ const AddressInput = (props) => {
         ) : (
           <AlgoliaPlaces
             placeholder={placeholder || "Search address"}
+            id={id}
             name={location}
             options={{
               appId: ALGOLIA_APP_ID,
diff --git a/src/app/component/UsersAutocomplete.jsx b/src/app/component/UsersAutocomplete.jsx
index 8915da98..d6a95bc9 100644
--- a/src/app/component/UsersAutocomplete.jsx
+++ b/src/app/component/UsersAutocomplete.jsx
@@ -2,6 +2,7 @@ import { Avatar, Box, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import React, { Fragment } from "react";
+import { H6, TypographyWrapper } from "./";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -31,39 +32,43 @@ const SearchUsers = ({ editable, handleChange, selected, users }) => {
   };
   const options = users?.reduce(reducer, []) || [];
   const optionSelected = options.find((option) => option && selected && option.id === selected.id);
-  const defaultValue = editable ? optionSelected : "";
-  const value = !editable ? optionSelected : "";
+  const defaultValue = editable ? optionSelected : null;
 
   return (
-    <Autocomplete
-      id="user-search"
-      noOptionsText="No users found"
-      options={options}
-      classes={{ root: classes.root }}
-      getOptionLabel={(user) => user.searchString}
-      onChange={(event, newValue) => handleChange(newValue)}
-      value={value}
-      defaultValue={defaultValue}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          className={classes.textField}
-          label="Search a user..."
-          placeholder="search user with either name or phone number"
-          variant="outlined"
-          InputProps={{ ...params.InputProps, type: "search" }}
+    <>
+      {editable ? (
+        <Autocomplete
+          id="user-search"
+          noOptionsText="No users found"
+          options={options}
+          classes={{ root: classes.root }}
+          getOptionLabel={(user) => user.searchString}
+          onChange={(event, newValue) => handleChange(newValue)}
+          defaultValue={defaultValue}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              className={classes.textField}
+              label="Search a user..."
+              placeholder="search user with either name or phone number"
+              variant="outlined"
+              InputProps={{ ...params.InputProps, type: "search" }}
+            />
+          )}
+          renderOption={(user) => (
+            <Fragment>
+              <Avatar className={classes.avatar} src={user.photoURL ? user.photoURL : null} />
+              <Box display="flex" flexDirection="column">
+                <span>{user.displayName}</span>
+                <small>{user.phoneNumber}</small>
+              </Box>
+            </Fragment>
+          )}
         />
+      ) : (
+        <H6>{selected.displayName + " " + selected.phoneNumber}</H6>
       )}
-      renderOption={(user) => (
-        <Fragment>
-          <Avatar className={classes.avatar} src={user.photoURL ? user.photoURL : null} />
-          <Box display="flex" flexDirection="column">
-            <span>{user.displayName}</span>
-            <small>{user.phoneNumber}</small>
-          </Box>
-        </Fragment>
-      )}
-    />
+    </>
   );
 };
 
diff --git a/src/app/dashboard/Missions/DetailsView.jsx b/src/app/dashboard/Missions/DetailsView.jsx
index 541a37f7..89c0fb34 100644
--- a/src/app/dashboard/Missions/DetailsView.jsx
+++ b/src/app/dashboard/Missions/DetailsView.jsx
@@ -2,7 +2,6 @@ import { Box, Container, Grid, Paper } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import AccessTimeIcon from "@material-ui/icons/AccessTime";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
 import LocationOnIcon from "@material-ui/icons/LocationOn";
 import PanToolIcon from "@material-ui/icons/PanTool";
 import PersonIcon from "@material-ui/icons/Person";
@@ -10,6 +9,7 @@ import React from "react";
 import { isEmpty, isLoaded } from "react-redux-firebase";
 import EditIcon from "@material-ui/icons/Edit";
 import Button from "@material-ui/core/Button";
+import MissionFundedStatusRow from "./MissionFundedStatusRow";
 
 import { Body2, H3 } from "../../component";
 import { Mission } from "../../model";
@@ -142,31 +142,6 @@ const VolunteerRow = ({ mission }) => {
   return <Row Icon={PanToolIcon}>{assigned}</Row>;
 };
 
-const MissionFundedStatusRow = ({ classes, mission }) => {
-  let missionFundedStatusText;
-  switch (mission?.fundedStatus) {
-    case Mission.FundedStatus.fundedbydonation:
-      missionFundedStatusText = "Funded By Donation";
-      break;
-    case Mission.FundedStatus.fundedbyrecipient:
-      missionFundedStatusText = "Funded By Recipient";
-      break;
-    case Mission.FundedStatus.fundingnotneeded:
-      missionFundedStatusText = "Funding Not Needed";
-      break;
-    case Mission.FundedStatus.notfunded:
-      missionFundedStatusText = "Not Yet Funded";
-      break;
-    default:
-      throw Error("mission funded status not exist", mission.fundedStatus);
-  }
-  return (
-    <Row Icon={AttachMoneyIcon} classes={classes}>
-      {missionFundedStatusText}
-    </Row>
-  );
-};
-
 const FoodBoxDetailsRow = ({ details }) => {
   return (
     <Box>
diff --git a/src/app/dashboard/Missions/ListView.jsx b/src/app/dashboard/Missions/ListView.jsx
index 2218e3ec..1a1b99eb 100644
--- a/src/app/dashboard/Missions/ListView.jsx
+++ b/src/app/dashboard/Missions/ListView.jsx
@@ -184,6 +184,7 @@ const MissionsListView = ({
       <Box hidden={view !== Views.edit}>
         {currentMission && (
           <EditView
+            groups={groups}
             mission={currentMission}
             setSelectedMission={setSelectedMission}
             toListView={() => setView(Views.list)}
diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index d813b5bd..cb08a496 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -1,12 +1,11 @@
 import { Box, Container, Grid, Paper, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
 import LocationOnIcon from "@material-ui/icons/LocationOn";
 import PanToolIcon from "@material-ui/icons/PanTool";
 import CancelIcon from "@material-ui/icons/Cancel";
 import PersonIcon from "@material-ui/icons/Person";
-import React, { useState } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import { isEmpty, isLoaded } from "react-redux-firebase";
 import { Button, Body2, H3 } from "../../component";
 import Switch from "@material-ui/core/Switch";
@@ -16,8 +15,10 @@ import { Mission } from "../../model";
 import _ from "../../utils/lodash";
 import AddressInput from "../../component/AddressInput";
 import UsersAutocomplete from "../../component/UsersAutocomplete";
+import GroupAutoComplete from "./component/GroupAutoComplete";
 import { useForm } from "../../hooks";
 import { MissionStatus } from "../../model/schema";
+import MissionFundedStatusRow from "./MissionFundedStatusRow";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -158,26 +159,6 @@ const MissionStatusRow = ({ classes, mission }) => {
   );
 };
 
-const MissionFundedStatusRow = ({ classes, mission }) => {
-  let missionFundedStatusText;
-  switch (mission?.fundedStatus) {
-    case Mission.FundedStatus.fundedbydonation:
-      missionFundedStatusText = "Funded By Donation";
-      break;
-    case Mission.FundedStatus.fundedbyrecipient:
-      missionFundedStatusText = "Funded By Recipient";
-      break;
-    case Mission.FundedStatus.notfunded:
-    default:
-      missionFundedStatusText = "Not Yet Funded";
-  }
-  return (
-    <Row Icon={AttachMoneyIcon} classes={classes}>
-      {missionFundedStatusText}
-    </Row>
-  );
-};
-
 const FoodBoxDetailsRow = ({ details }) => {
   return (
     <Box>
@@ -201,7 +182,7 @@ const MissionDetailsRow = ({ mission }) => {
 
 const volunteerStatus = [MissionStatus.unassigned, MissionStatus.tentative, MissionStatus.assigned];
 
-const getVolunteerAttribute = (selectedVolunteer, status, attr, tentativeClause) => {
+const getVolunteerAttribute = (selectedVolunteer, attr, tentativeClause) => {
   if (selectedVolunteer && tentativeClause) {
     return selectedVolunteer[attr];
   }
@@ -212,7 +193,7 @@ const getVolunteerAttribute = (selectedVolunteer, status, attr, tentativeClause)
  * Component for editing mission details
  * @component
  */
-const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) => {
+const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteers }) => {
   const classes = useStyles();
 
   const { handleChange, values } = useForm(mission);
@@ -226,14 +207,28 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
     date: values.deliveryWindow.startTime,
     location: "",
   });
+  console.log("mission tentative:" + mission.tentativeVolunteerUid);
+  console.log(mission);
   const [selectedVolunteer, setSelectedVolunteer] = useState(
-    volunteers.find((el) => el.id === mission.volunteerUid)
+    volunteers.find(
+      (el) => el.id === mission.volunteerUid || el.id === mission.tentativeVolunteerUid
+    )
+  );
+  console.log("selected is ...");
+  console.log(selectedVolunteer);
+  const [selectedGroup, setSelectedGroup] = useState(
+    groups.find((el) => el.id === mission.groupUid)
   );
 
   const props = { classes, mission };
 
   const volunteerEditable = volunteerStatus.includes(mission.status);
 
+  useEffect(() => {
+    document.getElementById("pickup-address-id").value = values.pickUpLocation?.address;
+    document.getElementById("delivery-address-id").value = values.deliveryLocation?.address;
+  }, []);
+
   function changeFormValue(name, value) {
     handleChange({ target: { name, value } });
   }
@@ -270,40 +265,36 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
       deliveryWindow: {
         startTime: delivery.toString(),
       },
+      groupUid: selectedGroup ? selectedGroup.id : "",
+      groupDisplayName: selectedGroup ? selectedGroup.displayName : "",
       volunteerUid: getVolunteerAttribute(
         selectedVolunteer,
-        values.status,
-        "volunteerUid",
+        "id",
         values.status !== MissionStatus.tentative
       ),
       volunteerDisplayname: getVolunteerAttribute(
         selectedVolunteer,
-        values.status,
-        "volunteerDisplayName",
+        "displayName",
         values.status !== MissionStatus.tentative
       ),
       volunteerPhoneNumber: getVolunteerAttribute(
         selectedVolunteer,
-        values.status,
-        "volunteerPhoneNumber",
+        "phoneNumber",
         values.status !== MissionStatus.tentative
       ),
       tentativeVolunteerUid: getVolunteerAttribute(
         selectedVolunteer,
-        values.status,
-        "volunteerUid",
+        "id",
         values.status === MissionStatus.tentative
       ),
       tentativeVolunteerDisplayName: getVolunteerAttribute(
         selectedVolunteer,
-        values.status,
-        "volunteerDisplayName",
+        "displayName",
         values.status === MissionStatus.tentative
       ),
       tentativeVolunteerPhoneNumber: getVolunteerAttribute(
         selectedVolunteer,
-        values.status,
-        "volunteerPhoneNumber",
+        "phoneNumber",
         values.status === MissionStatus.tentative
       ),
       readyToStart: values.readyToStart,
@@ -323,6 +314,8 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
             <MissionImage {...props} />
             <MissionTypeRow {...props} />
             <MissionDetailsRow {...props} />
+            <MissionFundedStatusRow {...props} />
+            <MissionStatusRow {...props} />
 
             <Card label="Pick Up Details" classes={classes}>
               <Row Icon={ScheduleIcon} classes={classes}>
@@ -368,6 +361,7 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
                     <Grid item className={classes.fullWidth}>
                       <AddressInput
                         className={classes.textField}
+                        id="pickup-address-id"
                         placeholder={values.pickUpLocation?.address}
                         stage={values.pickUpLocation}
                         setStage={handleChangeLocation.bind(null, "pickUpLocation")}
@@ -380,6 +374,7 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
             </Card>
             <Card label="Delivery Details" classes={classes}>
               <Row Icon={ScheduleIcon} classes={classes}>
+                {" "}
                                    
                 <DateTimeInput
                   dateInputProps={{
@@ -393,7 +388,7 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
                     label: "Delivery Time",
                   }}
                   value={deliveryTime}
-                />
+                />{" "}
                               
               </Row>
               <Row Icon={LocationOnIcon} classes={classes}>
@@ -401,6 +396,7 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
                   <Grid item className={classes.fullWidth}>
                     <AddressInput
                       className={classes.textField}
+                      id="delivery-address-id"
                       placeholder={values.deliveryLocation?.address}
                       stage={values.deliveryLocation}
                       setStage={handleChangeLocation.bind(null, "deliveryLocation")}
@@ -456,6 +452,7 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
             </Card>
 
             <Row classes={classes}>
+              {" "}
                                  
               <Grid container direction="row" spacing={1} className={classes.rowBody}>
                 <Grid item>
@@ -472,6 +469,15 @@ const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) =>
               </Grid>
             </Row>
 
+            <Card label="Group" classes={classes}>
+              <GroupAutoComplete
+                classes={classes}
+                groups={groups}
+                handleChange={setSelectedGroup}
+                selected={selectedGroup}
+              />
+            </Card>
+
             <Label classes={classes}>Delivery Notes</Label>
             <Row classes={classes}>
               <TextField
diff --git a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
new file mode 100644
index 00000000..7610f52c
--- /dev/null
+++ b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Mission } from "../../model";
+import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
+import { Box, Container, Grid, Paper } from "@material-ui/core";
+
+const Row = ({ children, Icon }) => {
+  if (!children) return null;
+  return (
+    <Grid container wrap="nowrap" alignItems="center">
+      <Box marginRight="5px" width="20px">
+        {Icon && <Icon color="primary" />}
+      </Box>
+      {children}
+    </Grid>
+  );
+};
+
+const MissionFundedStatusRow = ({ classes, mission }) => {
+  let missionFundedStatusText;
+  let fundedDateText = mission.fundedDate ? " on " + mission.fundedDate : "";
+  switch (mission?.fundedStatus) {
+    case Mission.FundedStatus.fundedbydonation:
+      missionFundedStatusText = "Funded By Donation" + fundedDateText;
+      break;
+    case Mission.FundedStatus.fundedbyrecipient:
+      missionFundedStatusText = "Funded By Recipient" + fundedDateText;
+      break;
+    case Mission.FundedStatus.fundingnotneeded:
+      missionFundedStatusText = "Funding Not Needed";
+      break;
+    case Mission.FundedStatus.notfunded:
+      missionFundedStatusText = "Not Yet Funded";
+      break;
+    default:
+      throw Error("mission funded status not exist", mission.fundedStatus);
+  }
+  return (
+    <Row Icon={AttachMoneyIcon} classes={classes}>
+      {missionFundedStatusText}
+    </Row>
+  );
+};
+
+export default MissionFundedStatusRow;
diff --git a/src/app/dashboard/Missions/component/AddToGroupPopover.jsx b/src/app/dashboard/Missions/component/AddToGroupPopover.jsx
index 63cce13a..004bff6b 100644
--- a/src/app/dashboard/Missions/component/AddToGroupPopover.jsx
+++ b/src/app/dashboard/Missions/component/AddToGroupPopover.jsx
@@ -1,8 +1,7 @@
 import { Box, TextField } from "@material-ui/core";
-import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
 import Popover from "@material-ui/core/Popover";
 import React, { useState } from "react";
-import GroupWorkIcon from "@material-ui/icons/GroupWork";
+import GroupAutoComplete from "./GroupAutoComplete";
 
 import { Button, Body1 } from "../../../component";
 import { makeStyles } from "@material-ui/core/styles";
@@ -29,9 +28,6 @@ const useStyles = makeStyles((theme) => ({
 const AddToGroupPopover = ({ boxRef, groups, handleConfirmButton, mission, onClose, open }) => {
   const [selected, setSelected] = useState();
   const classes = useStyles();
-  const filter = createFilterOptions({
-    stringify: (group) => group.groupDisplayName,
-  });
 
   return (
     <Popover
@@ -56,53 +52,7 @@ const AddToGroupPopover = ({ boxRef, groups, handleConfirmButton, mission, onClo
           <Body1>Which group do you want to add this mission to?</Body1>
         </Box>
         <form>
-          <Box className={classes.row}>
-            <Autocomplete
-              id="group-search"
-              options={groups}
-              onChange={(event, newValue) => setSelected(newValue)}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  InputLabelProps={{
-                    classes: {
-                      root: classes.inputLabel,
-                    },
-                  }}
-                  InputProps={{
-                    ...params.InputProps,
-                    type: "search",
-                  }}
-                  label="Search/Create a group"
-                  placeholder="search group by name"
-                  variant="outlined"
-                />
-              )}
-              getOptionLabel={(group) =>
-                group.tmpDisplayName ? group.tmpDisplayName : group.groupDisplayName
-              }
-              renderOption={(group) => (
-                <>
-                  <GroupWorkIcon style={{ color: _.randomColor(group.groupDisplayName) }} />{" "}
-                  {group.tmpDisplayName ? group.tmpDisplayName : group.groupDisplayName}
-                </>
-              )}
-              filterOptions={(groups, params) => {
-                const filtered = filter(groups, params);
-
-                // Suggest the creation of a new value
-                if (params.inputValue !== "") {
-                  filtered.push({
-                    inputValue: params.inputValue,
-                    groupDisplayName: params.inputValue,
-                    tmpDisplayName: `Create and add to "${params.inputValue}"`,
-                  });
-                }
-
-                return filtered;
-              }}
-            />
-          </Box>
+          <GroupAutoComplete groups={groups} handleChange={setSelected} mission={mission} />
 
           <Box className={classes.row}>
             <Button fullWidth onClick={() => handleConfirmButton(selected)}>
diff --git a/src/app/dashboard/Missions/component/GroupAutoComplete.jsx b/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
new file mode 100644
index 00000000..34c2e205
--- /dev/null
+++ b/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
@@ -0,0 +1,63 @@
+import GroupWorkIcon from "@material-ui/icons/GroupWork";
+import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
+import { Box, TextField } from "@material-ui/core";
+import React, { useState } from "react";
+import _ from "../../../utils/lodash";
+
+const GroupAutoComplete = ({ classes, groups, handleChange, selected }) => {
+  const filter = createFilterOptions({
+    stringify: (group) => group.groupDisplayName,
+  });
+
+  return (
+    <Box className={classes.row}>
+      <Autocomplete
+        id="group-search"
+        options={groups}
+        onChange={(event, newValue) => handleChange(newValue)}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            InputLabelProps={{
+              classes: {
+                root: classes.inputLabel,
+              },
+            }}
+            InputProps={{
+              ...params.InputProps,
+              type: "search",
+            }}
+            label="Search/Create a group"
+            placeholder="search group by name"
+            variant="outlined"
+          />
+        )}
+        getOptionLabel={(group) =>
+          group.tmpDisplayName ? group.tmpDisplayName : group.groupDisplayName
+        }
+        renderOption={(group) => (
+          <>
+            <GroupWorkIcon style={{ color: _.randomColor(group.groupDisplayName) }} />{" "}
+            {group.tmpDisplayName ? group.tmpDisplayName : group.groupDisplayName}
+          </>
+        )}
+        filterOptions={(groups, params) => {
+          const filtered = filter(groups, params);
+
+          // Suggest the creation of a new value
+          if (params.inputValue !== "") {
+            filtered.push({
+              inputValue: params.inputValue,
+              groupDisplayName: params.inputValue,
+              tmpDisplayName: `Create and add to "${params.inputValue}"`,
+            });
+          }
+
+          return filtered;
+        }}
+      />
+    </Box>
+  );
+};
+
+export default GroupAutoComplete;

From 6b3d8966ab7da089d40fddd1c9a9af53cce3842c Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 15:42:09 -0500
Subject: [PATCH 02/14] Removed spacing.

---
 src/app/dashboard/Missions/MissionEditView.jsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index cb08a496..2cfcb88f 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -373,9 +373,7 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
               </Grid>
             </Card>
             <Card label="Delivery Details" classes={classes}>
-              <Row Icon={ScheduleIcon} classes={classes}>
-                {" "}
-                                   
+              <Row Icon={ScheduleIcon} classes={classes}>                                   
                 <DateTimeInput
                   dateInputProps={{
                     id: "date-delivery",
@@ -388,8 +386,7 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
                     label: "Delivery Time",
                   }}
                   value={deliveryTime}
-                />{" "}
-                              
+                />                              
               </Row>
               <Row Icon={LocationOnIcon} classes={classes}>
                 <Grid container direction="row">

From 434ddc76f73dfd886091b9f646d7e4c37e0babd6 Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 15:45:56 -0500
Subject: [PATCH 03/14] Removed unnecessary imports.

---
 src/app/component/UsersAutocomplete.jsx                    | 2 +-
 src/app/dashboard/Missions/MissionEditView.jsx             | 2 +-
 src/app/dashboard/Missions/MissionFundedStatusRow.jsx      | 2 +-
 src/app/dashboard/Missions/component/AddToGroupPopover.jsx | 2 +-
 src/app/dashboard/Missions/component/GroupAutoComplete.jsx | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/component/UsersAutocomplete.jsx b/src/app/component/UsersAutocomplete.jsx
index d6a95bc9..7fbdc015 100644
--- a/src/app/component/UsersAutocomplete.jsx
+++ b/src/app/component/UsersAutocomplete.jsx
@@ -2,7 +2,7 @@ import { Avatar, Box, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import React, { Fragment } from "react";
-import { H6, TypographyWrapper } from "./";
+import { H6 } from "./";
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index 2cfcb88f..ec16fd29 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -5,7 +5,7 @@ import LocationOnIcon from "@material-ui/icons/LocationOn";
 import PanToolIcon from "@material-ui/icons/PanTool";
 import CancelIcon from "@material-ui/icons/Cancel";
 import PersonIcon from "@material-ui/icons/Person";
-import React, { useRef, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { isEmpty, isLoaded } from "react-redux-firebase";
 import { Button, Body2, H3 } from "../../component";
 import Switch from "@material-ui/core/Switch";
diff --git a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
index 7610f52c..e84f96a9 100644
--- a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
+++ b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Mission } from "../../model";
 import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
-import { Box, Container, Grid, Paper } from "@material-ui/core";
+import { Box, Grid } from "@material-ui/core";
 
 const Row = ({ children, Icon }) => {
   if (!children) return null;
diff --git a/src/app/dashboard/Missions/component/AddToGroupPopover.jsx b/src/app/dashboard/Missions/component/AddToGroupPopover.jsx
index 004bff6b..31b3a7d1 100644
--- a/src/app/dashboard/Missions/component/AddToGroupPopover.jsx
+++ b/src/app/dashboard/Missions/component/AddToGroupPopover.jsx
@@ -1,4 +1,4 @@
-import { Box, TextField } from "@material-ui/core";
+import { Box } from "@material-ui/core";
 import Popover from "@material-ui/core/Popover";
 import React, { useState } from "react";
 import GroupAutoComplete from "./GroupAutoComplete";
diff --git a/src/app/dashboard/Missions/component/GroupAutoComplete.jsx b/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
index 34c2e205..f129a2cc 100644
--- a/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
+++ b/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
@@ -1,7 +1,7 @@
 import GroupWorkIcon from "@material-ui/icons/GroupWork";
 import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
 import { Box, TextField } from "@material-ui/core";
-import React, { useState } from "react";
+import React from "react";
 import _ from "../../../utils/lodash";
 
 const GroupAutoComplete = ({ classes, groups, handleChange, selected }) => {

From c6236f3c74aa110e927e581b43cec5a74dc6e23d Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 15:57:09 -0500
Subject: [PATCH 04/14] Using template literals.

---
 src/app/dashboard/Missions/MissionFundedStatusRow.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
index e84f96a9..f711e736 100644
--- a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
+++ b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
@@ -20,10 +20,10 @@ const MissionFundedStatusRow = ({ classes, mission }) => {
   let fundedDateText = mission.fundedDate ? " on " + mission.fundedDate : "";
   switch (mission?.fundedStatus) {
     case Mission.FundedStatus.fundedbydonation:
-      missionFundedStatusText = "Funded By Donation" + fundedDateText;
+      missionFundedStatusText = "Funded By Donation ${fundedDateText}";
       break;
     case Mission.FundedStatus.fundedbyrecipient:
-      missionFundedStatusText = "Funded By Recipient" + fundedDateText;
+      missionFundedStatusText = "Funded By Recipient ${fundedDateText}";
       break;
     case Mission.FundedStatus.fundingnotneeded:
       missionFundedStatusText = "Funding Not Needed";

From 986dacda883cbf276a938aafa6c0a31d90d19c53 Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 16:01:33 -0500
Subject: [PATCH 05/14] Changing how editable fields are being handled.

---
 src/app/component/UsersAutocomplete.jsx       | 62 +++++++++----------
 .../dashboard/Missions/MissionEditView.jsx    |  7 ++-
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/app/component/UsersAutocomplete.jsx b/src/app/component/UsersAutocomplete.jsx
index 7fbdc015..4fdf9a4e 100644
--- a/src/app/component/UsersAutocomplete.jsx
+++ b/src/app/component/UsersAutocomplete.jsx
@@ -34,41 +34,39 @@ const SearchUsers = ({ editable, handleChange, selected, users }) => {
   const optionSelected = options.find((option) => option && selected && option.id === selected.id);
   const defaultValue = editable ? optionSelected : null;
 
+  if (!editable) {
+    return <H6>{selected.displayName + " " + selected.phoneNumber}</H6>;
+  }
+
   return (
-    <>
-      {editable ? (
-        <Autocomplete
-          id="user-search"
-          noOptionsText="No users found"
-          options={options}
-          classes={{ root: classes.root }}
-          getOptionLabel={(user) => user.searchString}
-          onChange={(event, newValue) => handleChange(newValue)}
-          defaultValue={defaultValue}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              className={classes.textField}
-              label="Search a user..."
-              placeholder="search user with either name or phone number"
-              variant="outlined"
-              InputProps={{ ...params.InputProps, type: "search" }}
-            />
-          )}
-          renderOption={(user) => (
-            <Fragment>
-              <Avatar className={classes.avatar} src={user.photoURL ? user.photoURL : null} />
-              <Box display="flex" flexDirection="column">
-                <span>{user.displayName}</span>
-                <small>{user.phoneNumber}</small>
-              </Box>
-            </Fragment>
-          )}
+    <Autocomplete
+      id="user-search"
+      noOptionsText="No users found"
+      options={options}
+      classes={{ root: classes.root }}
+      getOptionLabel={(user) => user.searchString}
+      onChange={(event, newValue) => handleChange(newValue)}
+      defaultValue={defaultValue}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          className={classes.textField}
+          label="Search a user..."
+          placeholder="search user with either name or phone number"
+          variant="outlined"
+          InputProps={{ ...params.InputProps, type: "search" }}
         />
-      ) : (
-        <H6>{selected.displayName + " " + selected.phoneNumber}</H6>
       )}
-    </>
+      renderOption={(user) => (
+        <Fragment>
+          <Avatar className={classes.avatar} src={user.photoURL ? user.photoURL : null} />
+          <Box display="flex" flexDirection="column">
+            <span>{user.displayName}</span>
+            <small>{user.phoneNumber}</small>
+          </Box>
+        </Fragment>
+      )}
+    />
   );
 };
 
diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index ec16fd29..df0433f0 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -373,7 +373,9 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
               </Grid>
             </Card>
             <Card label="Delivery Details" classes={classes}>
-              <Row Icon={ScheduleIcon} classes={classes}>                                   
+              <Row Icon={ScheduleIcon} classes={classes}>
+                {" "}
+                                   
                 <DateTimeInput
                   dateInputProps={{
                     id: "date-delivery",
@@ -386,7 +388,8 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
                     label: "Delivery Time",
                   }}
                   value={deliveryTime}
-                />                              
+                />{" "}
+                              
               </Row>
               <Row Icon={LocationOnIcon} classes={classes}>
                 <Grid container direction="row">

From 09584cb83e6a522cdcb4506e89224b9d2419f241 Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 16:06:38 -0500
Subject: [PATCH 06/14] Fixed AddrssInputField default values.

---
 src/app/dashboard/Missions/MissionEditView.jsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index df0433f0..1f21104b 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -224,11 +224,6 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
 
   const volunteerEditable = volunteerStatus.includes(mission.status);
 
-  useEffect(() => {
-    document.getElementById("pickup-address-id").value = values.pickUpLocation?.address;
-    document.getElementById("delivery-address-id").value = values.deliveryLocation?.address;
-  }, []);
-
   function changeFormValue(name, value) {
     handleChange({ target: { name, value } });
   }
@@ -366,6 +361,7 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
                         stage={values.pickUpLocation}
                         setStage={handleChangeLocation.bind(null, "pickUpLocation")}
                         setLocation={handleChangeLocation}
+                        value={values.pickUpLocation?.address}
                       />
                     </Grid>
                   </Grid>
@@ -401,6 +397,7 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
                       stage={values.deliveryLocation}
                       setStage={handleChangeLocation.bind(null, "deliveryLocation")}
                       setLocation={handleChangeLocation}
+                      value={values.deliveryLocation?.address}
                     />
                   </Grid>
                 </Grid>

From f7004ff529bece25516f990b6d203232517da729 Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 16:13:08 -0500
Subject: [PATCH 07/14] removed console.logs

---
 src/app/dashboard/Missions/MissionEditView.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index 1f21104b..a4886a18 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -207,15 +207,11 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
     date: values.deliveryWindow.startTime,
     location: "",
   });
-  console.log("mission tentative:" + mission.tentativeVolunteerUid);
-  console.log(mission);
   const [selectedVolunteer, setSelectedVolunteer] = useState(
     volunteers.find(
       (el) => el.id === mission.volunteerUid || el.id === mission.tentativeVolunteerUid
     )
   );
-  console.log("selected is ...");
-  console.log(selectedVolunteer);
   const [selectedGroup, setSelectedGroup] = useState(
     groups.find((el) => el.id === mission.groupUid)
   );

From 6d437cbfaf74f665217b629fdbdb6373fa232fc1 Mon Sep 17 00:00:00 2001
From: "D. Alvarado" <laredotornado@gmail.com>
Date: Fri, 22 May 2020 16:36:24 -0500
Subject: [PATCH 08/14] Removed spaces.

---
 src/app/dashboard/Missions/MissionEditView.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index a4886a18..021c620e 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -366,8 +366,6 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
             </Card>
             <Card label="Delivery Details" classes={classes}>
               <Row Icon={ScheduleIcon} classes={classes}>
-                {" "}
-                                   
                 <DateTimeInput
                   dateInputProps={{
                     id: "date-delivery",
@@ -380,8 +378,7 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
                     label: "Delivery Time",
                   }}
                   value={deliveryTime}
-                />{" "}
-                              
+                />
               </Row>
               <Row Icon={LocationOnIcon} classes={classes}>
                 <Grid container direction="row">
@@ -445,8 +442,6 @@ const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteer
             </Card>
 
             <Row classes={classes}>
-              {" "}
-                                 
               <Grid container direction="row" spacing={1} className={classes.rowBody}>
                 <Grid item>
                   <Switch

From 20ed71c57ea4d696f138344ad6ace21e6ffc0850 Mon Sep 17 00:00:00 2001
From: mat10tng <mat10tng@gmail.com>
Date: Sat, 30 May 2020 12:06:04 +0200
Subject: [PATCH 09/14] change search to Search for groupAutoCOmplete
 placeholder

---
 src/app/dashboard/Missions/component/GroupAutoComplete.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/Missions/component/GroupAutoComplete.jsx b/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
index f129a2cc..398790f9 100644
--- a/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
+++ b/src/app/dashboard/Missions/component/GroupAutoComplete.jsx
@@ -28,7 +28,7 @@ const GroupAutoComplete = ({ classes, groups, handleChange, selected }) => {
               type: "search",
             }}
             label="Search/Create a group"
-            placeholder="search group by name"
+            placeholder="Search group by name"
             variant="outlined"
           />
         )}

From 0b0c073db846e35b979833126d5f768232114b2d Mon Sep 17 00:00:00 2001
From: mat10tng <mat10tng@gmail.com>
Date: Sat, 30 May 2020 12:06:56 +0200
Subject: [PATCH 10/14] remove unused variable

---
 src/app/dashboard/Missions/MissionFundedStatusRow.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
index f711e736..c076cca8 100644
--- a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
+++ b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
@@ -17,7 +17,6 @@ const Row = ({ children, Icon }) => {
 
 const MissionFundedStatusRow = ({ classes, mission }) => {
   let missionFundedStatusText;
-  let fundedDateText = mission.fundedDate ? " on " + mission.fundedDate : "";
   switch (mission?.fundedStatus) {
     case Mission.FundedStatus.fundedbydonation:
       missionFundedStatusText = "Funded By Donation ${fundedDateText}";
@@ -42,3 +41,4 @@ const MissionFundedStatusRow = ({ classes, mission }) => {
 };
 
 export default MissionFundedStatusRow;
+

From 07d4b4323e72f6aea8bdd079c817fc1ea8119293 Mon Sep 17 00:00:00 2001
From: mat10tng <mat10tng@gmail.com>
Date: Sat, 30 May 2020 12:08:17 +0200
Subject: [PATCH 11/14] resolve wrong syntax for literal evaluation

---
 src/app/dashboard/Missions/MissionFundedStatusRow.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
index c076cca8..e612fe3b 100644
--- a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
+++ b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
@@ -19,10 +19,10 @@ const MissionFundedStatusRow = ({ classes, mission }) => {
   let missionFundedStatusText;
   switch (mission?.fundedStatus) {
     case Mission.FundedStatus.fundedbydonation:
-      missionFundedStatusText = "Funded By Donation ${fundedDateText}";
+      missionFundedStatusText = `Funded By Donation ${fundedDateText}`;
       break;
     case Mission.FundedStatus.fundedbyrecipient:
-      missionFundedStatusText = "Funded By Recipient ${fundedDateText}";
+      missionFundedStatusText = `Funded By Recipient ${fundedDateText}`;
       break;
     case Mission.FundedStatus.fundingnotneeded:
       missionFundedStatusText = "Funding Not Needed";
@@ -41,4 +41,3 @@ const MissionFundedStatusRow = ({ classes, mission }) => {
 };
 
 export default MissionFundedStatusRow;
-

From bdf0492f089ff331e678d0a3ecc55472c1877bf6 Mon Sep 17 00:00:00 2001
From: mat10tng <mat10tng@gmail.com>
Date: Sat, 30 May 2020 15:06:15 +0200
Subject: [PATCH 12/14] remove details view as we only use edit view from now
 on

---
 src/app/dashboard/Missions/DetailsView.jsx    | 234 ------------------
 src/app/dashboard/Missions/ListView.jsx       |  21 +-
 .../dashboard/Missions/MissionEditView.jsx    |   2 +-
 .../Missions/MissionFundedStatusRow.jsx       |   6 +-
 4 files changed, 7 insertions(+), 256 deletions(-)
 delete mode 100644 src/app/dashboard/Missions/DetailsView.jsx

diff --git a/src/app/dashboard/Missions/DetailsView.jsx b/src/app/dashboard/Missions/DetailsView.jsx
deleted file mode 100644
index 89c0fb34..00000000
--- a/src/app/dashboard/Missions/DetailsView.jsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import { Box, Container, Grid, Paper } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
-import AccessTimeIcon from "@material-ui/icons/AccessTime";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import LocationOnIcon from "@material-ui/icons/LocationOn";
-import PanToolIcon from "@material-ui/icons/PanTool";
-import PersonIcon from "@material-ui/icons/Person";
-import React from "react";
-import { isEmpty, isLoaded } from "react-redux-firebase";
-import EditIcon from "@material-ui/icons/Edit";
-import Button from "@material-ui/core/Button";
-import MissionFundedStatusRow from "./MissionFundedStatusRow";
-
-import { Body2, H3 } from "../../component";
-import { Mission } from "../../model";
-import _ from "../../utils/lodash";
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    textAlign: "left",
-    height: "100%",
-    overflow: "auto",
-    padding: `0px ${theme.spacing(1)}px`,
-  },
-  image: {
-    height: 0,
-    paddingTop: "56.25%", // 16:9
-  },
-  missionTypeText: {
-    paddingTop: theme.spacing(0.5),
-  },
-  rowLabel: {
-    fontWeight: 600,
-    marginTop: theme.spacing(2),
-  },
-  deliveryDetails: {
-    marginTop: theme.spacing(0.5),
-  },
-
-  missionImage: {
-    margin: theme.spacing(1),
-    width: "100%",
-    maxHeight: "200px",
-  },
-  foodBoxDetailContainer: {
-    border: "1px solid lightgrey",
-    borderRadius: "4px",
-    fontSize: "18px",
-    color: "black",
-    fontWeight: "bold",
-    marginBottom: theme.spacing(1),
-  },
-  foodBoxDetailQuantity: {
-    padding: theme.spacing(1),
-    borderRight: "1px solid lightgrey",
-  },
-  foodBoxDetailName: {
-    padding: theme.spacing(1),
-  },
-  buttonBox: {
-    spacing: theme.spacing(1),
-    display: "flex",
-    justifyContent: "center",
-  },
-}));
-
-/**=====BASE COMPONENTs======**/
-
-const Label = ({ children, classes }) => {
-  if (!children) return null;
-  return (
-    <Body2 align="left" className={classes.rowLabel} color="textPrimary">
-      <b>{children}</b>
-    </Body2>
-  );
-};
-
-const Row = ({ children, Icon }) => {
-  if (!children) return null;
-  return (
-    <Grid container wrap="nowrap" alignItems="center">
-      <Box marginRight="5px" width="20px">
-        {Icon && <Icon color="primary" />}
-      </Box>
-      {children}
-    </Grid>
-  );
-};
-
-const Card = ({ children, classes, label }) => {
-  if (!children) return null;
-  return (
-    <>
-      <Label classes={classes}>{label}</Label>
-      {children}
-    </>
-  );
-};
-
-/**=====ROW COMPONENTS=======*/
-
-const MissionImage = ({ classes, mission }) => {
-  const imageUrl = mission?.image;
-  if (!imageUrl) return null;
-
-  return (
-    <Container>
-      <img src={imageUrl} className={classes.missionImage} alt="details" />
-    </Container>
-  );
-};
-
-const MissionTypeRow = ({ classes, mission }) => {
-  let missionTypeText;
-  switch (mission?.type) {
-    case Mission.Type.resource:
-      missionTypeText = "Foodbox";
-      break;
-    case Mission.Type.errand:
-      missionTypeText = "General Errand";
-      break;
-    default:
-      missionTypeText = "Mission Name";
-  }
-  return (
-    <Box marginTop="32px">
-      <H3>{missionTypeText}</H3>
-    </Box>
-  );
-};
-
-const VolunteerRow = ({ mission }) => {
-  const { tentativeVolunteerDisplayName, volunteerDisplayName } = mission;
-  let assigned = "";
-  if (volunteerDisplayName) {
-    assigned = volunteerDisplayName + " - accepted";
-  } else if (tentativeVolunteerDisplayName) {
-    assigned = tentativeVolunteerDisplayName + " - tentative";
-  } else {
-    assigned = "Looking for volunteer";
-  }
-  return <Row Icon={PanToolIcon}>{assigned}</Row>;
-};
-
-const FoodBoxDetailsRow = ({ details }) => {
-  return (
-    <Box>
-      {details?.map((box) => (
-        <Body2 key={box.resourceUid}>
-          {box?.quantity} x {box?.displayName}
-        </Body2>
-      ))}
-    </Box>
-  );
-};
-
-const MissionDetailsRow = ({ mission }) => {
-  let type = mission?.type;
-  let details = mission?.details;
-  if (type === "resource") {
-    return <FoodBoxDetailsRow details={details} />;
-  }
-  return null;
-};
-
-/**
- * Component for displaying mission details as a card
- * @component
- */
-const MissionDetailsCard = ({ mission, toEditView, toListView }) => {
-  const classes = useStyles();
-  const recipientPhoneNumber = _.get(mission, "recipientPhoneNumber");
-
-  const props = { classes: classes, mission: mission };
-  return (
-    <Box height="100%" width="100%">
-      <Paper className={classes.root} elevation={0}>
-        <Box position="absolute" onClick={toListView}>
-          <ArrowBackIcon />
-        </Box>
-        {isLoaded(mission) && !isEmpty(mission) && (
-          <Box>
-            <MissionImage {...props} />
-
-            <MissionTypeRow {...props} />
-            <VolunteerRow {...props} />
-            <MissionFundedStatusRow {...props} />
-            <MissionDetailsRow {...props} />
-
-            <Card label="Pick Up Details" classes={classes}>
-              <Row Icon={LocationOnIcon} classes={classes}>
-                {mission?.pickUpLocation?.address}
-              </Row>
-              <Row Icon={AccessTimeIcon} classes={classes}>
-                {mission?.pickUpWindow?.startTime}
-              </Row>
-            </Card>
-
-            <Card label="Delivery Details" classes={classes}>
-              <Row Icon={LocationOnIcon} classes={classes}>
-                {mission?.deliveryLocation?.address}
-              </Row>
-              <Row Icon={AccessTimeIcon} classes={classes}>
-                {mission?.deliveryWindow?.startTime}
-              </Row>
-              <Row Icon={PersonIcon} classes={classes}>
-                {mission?.recipientName}
-              </Row>
-              <Row classes={classes}>
-                {recipientPhoneNumber && (
-                  <a href={`tel:"${recipientPhoneNumber}"`}>{recipientPhoneNumber}</a>
-                )}
-              </Row>
-            </Card>
-
-            <Label classes={classes}>Notes</Label>
-            <Row classes={classes}>{mission?.deliveryNotes || "No additional informations"}</Row>
-            <Box className={classes.buttonGroupBox}>
-              <Grid container direction="row" spacing={2} alignItems="center">
-                <Grid item>
-                  <Button disableElevation onClick={toEditView} className={classes.buttonBox}>
-                    <EditIcon className={classes.icon} /> Edit
-                  </Button>
-                </Grid>
-              </Grid>
-            </Box>
-          </Box>
-        )}
-      </Paper>
-    </Box>
-  );
-};
-
-export default MissionDetailsCard;
diff --git a/src/app/dashboard/Missions/ListView.jsx b/src/app/dashboard/Missions/ListView.jsx
index 1a1b99eb..94df06bc 100644
--- a/src/app/dashboard/Missions/ListView.jsx
+++ b/src/app/dashboard/Missions/ListView.jsx
@@ -12,7 +12,6 @@ import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import Card from "@material-ui/core/Card";
 import Paper from "@material-ui/core/Paper";
 
-import DetailsView from "./DetailsView";
 import ListItem from "./ListItem";
 import { Mission } from "../../model";
 import _ from "../../utils/lodash";
@@ -131,9 +130,6 @@ const MissionsListView = ({
     if (!group?.missions) return null;
     const color = _.randomColor(group.groupDisplayName);
 
-    /**
-     * Will be add another icon later, remove this for now
-     */
     return (
       <Card key={group.groupUid} className={classes.expansion} elevation={0}>
         <MuiExpansionPanel defaultExpanded={true}>
@@ -174,25 +170,14 @@ const MissionsListView = ({
   return (
     <Paper className={classes.root}>
       <Box hidden={view !== Views.details} width="100%">
-        <DetailsView
+        <EditView
+          groups={groups}
           mission={currentMission}
           setSelectedMission={setSelectedMission}
-          toEditView={() => setView(Views.edit)}
           toListView={() => setView(Views.list)}
+          volunteers={volunteers}
         />
       </Box>
-      <Box hidden={view !== Views.edit}>
-        {currentMission && (
-          <EditView
-            groups={groups}
-            mission={currentMission}
-            setSelectedMission={setSelectedMission}
-            toListView={() => setView(Views.list)}
-            toDetailsView={toDetailsView}
-            volunteers={volunteers}
-          />
-        )}
-      </Box>
       <Box hidden={view !== Views.list} width="100%">
         <Grid container direction="column">
           {groups?.map(toList)}
diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
index 021c620e..2f769df1 100644
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ b/src/app/dashboard/Missions/MissionEditView.jsx
@@ -5,7 +5,7 @@ import LocationOnIcon from "@material-ui/icons/LocationOn";
 import PanToolIcon from "@material-ui/icons/PanTool";
 import CancelIcon from "@material-ui/icons/Cancel";
 import PersonIcon from "@material-ui/icons/Person";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { isEmpty, isLoaded } from "react-redux-firebase";
 import { Button, Body2, H3 } from "../../component";
 import Switch from "@material-ui/core/Switch";
diff --git a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
index e612fe3b..8a3fa73f 100644
--- a/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
+++ b/src/app/dashboard/Missions/MissionFundedStatusRow.jsx
@@ -19,10 +19,10 @@ const MissionFundedStatusRow = ({ classes, mission }) => {
   let missionFundedStatusText;
   switch (mission?.fundedStatus) {
     case Mission.FundedStatus.fundedbydonation:
-      missionFundedStatusText = `Funded By Donation ${fundedDateText}`;
+      missionFundedStatusText = `Funded By Donation ${mission.fundedDateText}`;
       break;
     case Mission.FundedStatus.fundedbyrecipient:
-      missionFundedStatusText = `Funded By Recipient ${fundedDateText}`;
+      missionFundedStatusText = `Funded By Recipient ${mission.fundedDateText}`;
       break;
     case Mission.FundedStatus.fundingnotneeded:
       missionFundedStatusText = "Funding Not Needed";
@@ -31,7 +31,7 @@ const MissionFundedStatusRow = ({ classes, mission }) => {
       missionFundedStatusText = "Not Yet Funded";
       break;
     default:
-      throw Error("mission funded status not exist", mission.fundedStatus);
+      missionFundedStatusText = "No Funded Status";
   }
   return (
     <Row Icon={AttachMoneyIcon} classes={classes}>

From 45650466382d61ec521591bf66db518bd839c3f1 Mon Sep 17 00:00:00 2001
From: mat10tng <mat10tng@gmail.com>
Date: Sat, 30 May 2020 16:03:41 +0200
Subject: [PATCH 13/14] add order type and quantity

---
 src/app/dashboard/Missions/ListView.jsx       |  18 +-
 .../MissionDetailsEdit/MissionDetailsEdit.jsx | 473 ++++++++++++++++
 .../MissionDetailsEdit/MissionDetailsRow.tsx  |  38 ++
 .../Missions/MissionDetailsEdit/index.jsx     |   2 +
 .../dashboard/Missions/MissionEditView.jsx    | 517 ------------------
 5 files changed, 523 insertions(+), 525 deletions(-)
 create mode 100644 src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx
 create mode 100644 src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsRow.tsx
 create mode 100644 src/app/dashboard/Missions/MissionDetailsEdit/index.jsx
 delete mode 100644 src/app/dashboard/Missions/MissionEditView.jsx

diff --git a/src/app/dashboard/Missions/ListView.jsx b/src/app/dashboard/Missions/ListView.jsx
index 94df06bc..41f5ad8b 100644
--- a/src/app/dashboard/Missions/ListView.jsx
+++ b/src/app/dashboard/Missions/ListView.jsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import React, { useEffect, useState } from "react";
 import GroupWorkIcon from "@material-ui/icons/GroupWork";
 import Divider from "@material-ui/core/Divider";
-import EditView from "./MissionEditView";
+import EditView from "./MissionDetailsEdit";
 
 import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
 import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
@@ -170,13 +170,15 @@ const MissionsListView = ({
   return (
     <Paper className={classes.root}>
       <Box hidden={view !== Views.details} width="100%">
-        <EditView
-          groups={groups}
-          mission={currentMission}
-          setSelectedMission={setSelectedMission}
-          toListView={() => setView(Views.list)}
-          volunteers={volunteers}
-        />
+        {currentMission && (
+          <EditView
+            groups={groups}
+            mission={currentMission}
+            setSelectedMission={setSelectedMission}
+            toListView={() => setView(Views.list)}
+            volunteers={volunteers}
+          />
+        )}
       </Box>
       <Box hidden={view !== Views.list} width="100%">
         <Grid container direction="column">
diff --git a/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx b/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx
new file mode 100644
index 00000000..2b604d4a
--- /dev/null
+++ b/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx
@@ -0,0 +1,473 @@
+import { Box, Container, Grid, Paper, TextField } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import MissionDetailsRow from "./MissionDetailsRow";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import LocationOnIcon from "@material-ui/icons/LocationOn";
+import PanToolIcon from "@material-ui/icons/PanTool";
+import CancelIcon from "@material-ui/icons/Cancel";
+import PersonIcon from "@material-ui/icons/Person";
+import React, { useState } from "react";
+import { Button, Body2, H3, H2 } from "../../../component";
+import Switch from "@material-ui/core/Switch";
+import DateTimeInput from "../../../component/DateTimeInput";
+import ScheduleIcon from "@material-ui/icons/Schedule";
+import { Mission } from "../../../model";
+import _ from "../../../utils/lodash";
+import AddressInput from "../../../component/AddressInput";
+import UsersAutocomplete from "../../../component/UsersAutocomplete";
+import GroupAutoComplete from "../component/GroupAutoComplete";
+import { useForm } from "../../../hooks";
+import { MissionStatus } from "../../../model/schema";
+import MissionFundedStatusRow from "../MissionFundedStatusRow";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    textAlign: "left",
+    height: "100%",
+    overflow: "auto",
+    padding: `0px ${theme.spacing(1)}px`,
+  },
+  image: {
+    height: 0,
+    paddingTop: "56.25%", // 16:9
+  },
+  missionTypeText: {
+    paddingTop: theme.spacing(0.5),
+  },
+  label: {
+    fontWeight: 600,
+  },
+  rowLabel: {
+    fontWeight: 600,
+    marginTop: theme.spacing(2),
+  },
+  deliveryDetails: {
+    marginTop: theme.spacing(0.5),
+  },
+  rowBody: {
+    flexWrap: "nowrap",
+    alignItems: "center",
+    width: "100%",
+  },
+  textField: {
+    width: "100%",
+    backgroundColor: "black",
+  },
+  missionImage: {
+    margin: theme.spacing(1),
+    width: "100%",
+    maxHeight: "200px",
+  },
+  foodBoxDetailContainer: {
+    border: "1px solid lightgrey",
+    borderRadius: "4px",
+    fontSize: "18px",
+    color: "black",
+    fontWeight: "bold",
+    marginBottom: theme.spacing(1),
+  },
+  foodBoxDetailQuantity: {
+    padding: theme.spacing(1),
+    borderRight: "1px solid lightgrey",
+  },
+  foodBoxDetailName: {
+    padding: theme.spacing(1),
+  },
+  missionInput: {
+    width: "100%",
+  },
+  fullWidth: {
+    width: "100%",
+  },
+}));
+
+/**=====BASE COMPONENTs======**/
+
+const Label = ({ children, classes }) => {
+  if (!children) return null;
+  return (
+    <Body2 align="left" className={classes.rowLabel} color="textPrimary">
+      <b>{children}</b>
+    </Body2>
+  );
+};
+
+const Row = ({ children, classes, Icon }) => {
+  if (!children) return null;
+  return (
+    <Grid container className={classes.rowBody}>
+      {Icon && (
+        <Box marginRight="20px" width="20px">
+          <Icon color="primary" />
+        </Box>
+      )}
+      {children}
+    </Grid>
+  );
+};
+
+const Card = ({ children, classes, label }) => {
+  if (!children) return null;
+  return (
+    <>
+      <Label classes={classes}>{label}</Label>
+      {children}
+    </>
+  );
+};
+
+/**=====ROW COMPONENTS=======*/
+
+const MissionImage = ({ classes, mission }) => {
+  const imageUrl = mission?.image;
+  if (!imageUrl) return null;
+
+  return (
+    <Container>
+      <img src={imageUrl} className={classes.missionImage} alt="details" />
+    </Container>
+  );
+};
+
+const MissionStatusRow = ({ classes, mission }) => {
+  let status = mission?.status;
+  let missionStatusText;
+  switch (status) {
+    case Mission.Status.unassigned:
+      missionStatusText = "Looking for volunteer";
+      break;
+    default:
+      missionStatusText = status;
+      break;
+  }
+  return (
+    <Row Icon={PanToolIcon} classes={classes}>
+      {missionStatusText}
+    </Row>
+  );
+};
+
+const volunteerStatus = [MissionStatus.unassigned, MissionStatus.tentative, MissionStatus.assigned];
+
+const getVolunteerAttribute = (selectedVolunteer, attr, tentativeClause) => {
+  if (selectedVolunteer && tentativeClause) {
+    return selectedVolunteer[attr];
+  }
+  return "";
+};
+
+/**
+ * Component for editing mission details
+ * @component
+ */
+const MissionEditView = ({ groups, mission, toListView, volunteers }) => {
+  const classes = useStyles();
+
+  const { handleChange, values } = useForm(mission);
+  const [pickUp, setPickUp] = React.useState({
+    time: new Date(),
+    date: values?.pickUpWindow?.startTime,
+    location: "",
+  });
+  const [deliveryTime, setDeliveryTime] = React.useState({
+    time: new Date(),
+    date: values?.deliveryWindow?.startTime,
+    location: "",
+  });
+  const [selectedVolunteer, setSelectedVolunteer] = useState(
+    volunteers?.find(
+      (el) => el.id === mission.volunteerUid || el.id === mission.tentativeVolunteerUid
+    )
+  );
+  const [selectedGroup, setSelectedGroup] = useState(
+    groups?.find((el) => el.id === mission?.groupUid)
+  );
+
+  const props = { classes, mission };
+
+  const volunteerEditable = volunteerStatus.includes(mission?.status);
+
+  function changeFormValue(name, value) {
+    handleChange({ target: { name, value } });
+  }
+
+  function handleChangeLocation(data) {
+    const { location } = data;
+    changeFormValue("location", location);
+  }
+
+  function handleChangeReadyToStart(e) {
+    changeFormValue("readyToStart", e.target.checked);
+  }
+
+  function handleSave(e) {
+    e.preventDefault();
+    const pickUpTime = new Date(pickUp.date);
+    pickUpTime.setHours(pickUp.time.getHours());
+    pickUpTime.setMinutes(pickUp.time.getMinutes());
+    pickUpTime.setSeconds(pickUp.time.getSeconds());
+
+    const delivery = new Date(deliveryTime.date);
+    delivery.setHours(deliveryTime.time.getHours());
+    delivery.setMinutes(deliveryTime.time.getMinutes());
+    delivery.setSeconds(deliveryTime.time.getSeconds());
+    Mission.update(mission.id, {
+      pickUpLocation: values.pickUpLocation,
+      deliveryLocation: values.deliveryLocation,
+      recipientDisplayName: values.recipientDisplayName,
+      recipientPhoneNumber: values.recipientPhoneNumber,
+      deliveryNotes: values.deliveryNotes,
+      pickUpWindow: {
+        startTime: pickUpTime.toString(),
+      },
+      deliveryWindow: {
+        startTime: delivery.toString(),
+      },
+      groupUid: selectedGroup ? selectedGroup.id : "",
+      groupDisplayName: selectedGroup ? selectedGroup.displayName : "",
+      volunteerUid: getVolunteerAttribute(
+        selectedVolunteer,
+        "id",
+        values.status !== MissionStatus.tentative
+      ),
+      volunteerDisplayname: getVolunteerAttribute(
+        selectedVolunteer,
+        "displayName",
+        values.status !== MissionStatus.tentative
+      ),
+      volunteerPhoneNumber: getVolunteerAttribute(
+        selectedVolunteer,
+        "phoneNumber",
+        values.status !== MissionStatus.tentative
+      ),
+      tentativeVolunteerUid: getVolunteerAttribute(
+        selectedVolunteer,
+        "id",
+        values.status === MissionStatus.tentative
+      ),
+      tentativeVolunteerDisplayName: getVolunteerAttribute(
+        selectedVolunteer,
+        "displayName",
+        values.status === MissionStatus.tentative
+      ),
+      tentativeVolunteerPhoneNumber: getVolunteerAttribute(
+        selectedVolunteer,
+        "phoneNumber",
+        values.status === MissionStatus.tentative
+      ),
+      readyToStart: values.readyToStart,
+    }).then((result) => {});
+  }
+
+  return (
+    <Box height="100%" width="100%">
+      <Paper className={classes.root} elevation={0}>
+        <Box position="relative" textAlign="center" paddingTop="2rem">
+          <Box onClick={toListView} position="absolute">
+            <CancelIcon />
+          </Box>
+          <H2>Mission Details</H2>
+        </Box>
+
+        <Box>
+          <MissionImage {...props} />
+          <MissionDetailsRow {...props} />
+          <MissionFundedStatusRow {...props} />
+          <MissionStatusRow {...props} />
+
+          <Card label="Pick Up Details" classes={classes}>
+            <Row Icon={ScheduleIcon} classes={classes}>
+              <DateTimeInput
+                dateInputProps={{
+                  id: "date-pickup",
+                  label: "Pickup Date",
+                }}
+                onChange={setPickUp}
+                required
+                timeInputProps={{
+                  id: "time-pickup",
+                  label: "Pickup Time",
+                }}
+                value={pickUp}
+              />
+            </Row>
+            <Grid
+              container
+              direction="row"
+              alignItems="top"
+              spacing={1}
+              className={classes.fullWidth}
+            >
+              <Grid item>
+                <LocationOnIcon />
+              </Grid>
+              <Grid item style={{ width: "90%" }}>
+                <Grid container direction="column" alignItems="center">
+                  <Grid item className={classes.fullWidth}>
+                    <TextField
+                      className={`${classes.rootInput} ${classes.input}`}
+                      id="pickupLocation.label"
+                      name="pickupLocation.label"
+                      value={values.pickUpLocationLabel}
+                      placeholder="Location Name"
+                      variant="outlined"
+                      disabled={false}
+                      onChange={handleChange}
+                      fullWidth
+                    />
+                  </Grid>
+                  <Grid item className={classes.fullWidth}>
+                    <AddressInput
+                      className={classes.textField}
+                      id="pickup-address-id"
+                      placeholder={values.pickUpLocation?.address}
+                      stage={values.pickUpLocation}
+                      setStage={handleChangeLocation.bind(null, "pickUpLocation")}
+                      setLocation={handleChangeLocation}
+                      value={values.pickUpLocation?.address}
+                    />
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Card>
+          <Card label="Delivery Details" classes={classes}>
+            <Row Icon={ScheduleIcon} classes={classes}>
+              <DateTimeInput
+                dateInputProps={{
+                  id: "date-delivery",
+                  label: "Delivery Date",
+                }}
+                onChange={setDeliveryTime}
+                required
+                timeInputProps={{
+                  id: "time-delivery",
+                  label: "Delivery Time",
+                }}
+                value={deliveryTime}
+              />
+            </Row>
+            <Row Icon={LocationOnIcon} classes={classes}>
+              <Grid container direction="row">
+                <Grid item className={classes.fullWidth}>
+                  <AddressInput
+                    className={classes.textField}
+                    id="delivery-address-id"
+                    placeholder={values.deliveryLocation?.address}
+                    stage={values.deliveryLocation}
+                    setStage={handleChangeLocation.bind(null, "deliveryLocation")}
+                    setLocation={handleChangeLocation}
+                    value={values.deliveryLocation?.address}
+                  />
+                </Grid>
+              </Grid>
+            </Row>
+            <Grid container direction="row" alignItems="top" spacing={1}>
+              <Grid item>
+                <PersonIcon />
+              </Grid>
+              <Grid item style={{ width: "90%" }}>
+                <Grid container direction="column" alignItems="center">
+                  <Grid item className={classes.fullWidth}>
+                    <TextField
+                      className={`${classes.rootInput} ${classes.input}`}
+                      id="recipientDisplayName"
+                      name="recipientDisplayName"
+                      value={values.recipientDisplayName}
+                      placeholder="Recipient"
+                      variant="outlined"
+                      disabled={false}
+                      onChange={handleChange}
+                      fullWidth
+                    />
+                  </Grid>
+                  <Grid item className={classes.fullWidth}>
+                    <TextField
+                      className={`${classes.rootInput} ${classes.input}`}
+                      id="recipientPhoneNumber"
+                      name="recipientPhoneNumber"
+                      value={values.recipientPhoneNumber}
+                      placeholder="Phone Number"
+                      variant="outlined"
+                      disabled={false}
+                      onChange={handleChange}
+                      fullWidth
+                    />
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Card>
+
+          <Card label="Volunteer Information" classes={classes}>
+            <UsersAutocomplete
+              editable={volunteerEditable}
+              handleChange={setSelectedVolunteer}
+              users={volunteers}
+              selected={selectedVolunteer}
+            />
+          </Card>
+
+          <Row classes={classes}>
+            <Grid container direction="row" spacing={1} className={classes.rowBody}>
+              <Grid item>
+                <Switch
+                  size="normal"
+                  name="readyToStart"
+                  checked={values.readyToStart}
+                  onChange={handleChangeReadyToStart}
+                />
+              </Grid>
+              <Grid item className={classes.label}>
+                Ready To Start?
+              </Grid>
+            </Grid>
+          </Row>
+
+          <Card label="Group" classes={classes}>
+            <GroupAutoComplete
+              classes={classes}
+              groups={groups}
+              handleChange={setSelectedGroup}
+              selected={selectedGroup}
+            />
+          </Card>
+
+          <Label classes={classes}>Delivery Notes</Label>
+          <Row classes={classes}>
+            <TextField
+              variant="outlined"
+              value={values.deliveryNotes}
+              name="deliveryNotes"
+              onChange={handleChange}
+              placeholder="Notes"
+              multiline
+              className={classes.fullWidth}
+              rows={4}
+            />
+          </Row>
+          <Box
+            style={{
+              marginTop: "3rem",
+              marginLeft: "1rem",
+              display: "flex",
+              justifyContent: "center",
+              spacing: 1,
+            }}
+          >
+            <Button
+              onClick={handleSave}
+              variant="contained"
+              color="primary"
+              style={{ margin: ".5em" }}
+            >
+              Save Changes
+            </Button>
+          </Box>
+        </Box>
+      </Paper>
+    </Box>
+  );
+};
+
+export default MissionEditView;
diff --git a/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsRow.tsx b/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsRow.tsx
new file mode 100644
index 00000000..c02f7fc9
--- /dev/null
+++ b/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsRow.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { MissionInterface, MissionType } from "../../../model/schema";
+import { Box, TextField } from "@material-ui/core";
+import { H3 } from "../../../component";
+import styled from "styled-components";
+
+const Row = styled(Box)`
+  margin-top: 1rem;
+`;
+const OrderName = styled(TextField)`
+  width: 16rem;
+`;
+const QuantityField = styled(TextField)`
+  width: 6rem;
+  margin-left: auto;
+  float: right;
+`;
+
+const MissionDetailsRow = ({ mission }: { mission: MissionInterface }) => {
+  let type = mission.type;
+  let details = mission.details;
+  if (type === MissionType.resource) {
+    return (
+      <Box>
+        <H3>Orders</H3>
+        {details?.map((box) => (
+          <Row key={box.resourceUid} width="100%">
+            <OrderName label="Order Type" value={box.displayName} variant="outlined" />
+            <QuantityField label="Quantity" value={box.quantity} variant="outlined" />
+          </Row>
+        ))}
+      </Box>
+    );
+  }
+  return null;
+};
+
+export default MissionDetailsRow;
diff --git a/src/app/dashboard/Missions/MissionDetailsEdit/index.jsx b/src/app/dashboard/Missions/MissionDetailsEdit/index.jsx
new file mode 100644
index 00000000..e73e3354
--- /dev/null
+++ b/src/app/dashboard/Missions/MissionDetailsEdit/index.jsx
@@ -0,0 +1,2 @@
+import MissionDetailsEdit from "./MissionDetailsEdit";
+export default MissionDetailsEdit;
diff --git a/src/app/dashboard/Missions/MissionEditView.jsx b/src/app/dashboard/Missions/MissionEditView.jsx
deleted file mode 100644
index 2f769df1..00000000
--- a/src/app/dashboard/Missions/MissionEditView.jsx
+++ /dev/null
@@ -1,517 +0,0 @@
-import { Box, Container, Grid, Paper, TextField } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import LocationOnIcon from "@material-ui/icons/LocationOn";
-import PanToolIcon from "@material-ui/icons/PanTool";
-import CancelIcon from "@material-ui/icons/Cancel";
-import PersonIcon from "@material-ui/icons/Person";
-import React, { useState } from "react";
-import { isEmpty, isLoaded } from "react-redux-firebase";
-import { Button, Body2, H3 } from "../../component";
-import Switch from "@material-ui/core/Switch";
-import DateTimeInput from "../../component/DateTimeInput";
-import ScheduleIcon from "@material-ui/icons/Schedule";
-import { Mission } from "../../model";
-import _ from "../../utils/lodash";
-import AddressInput from "../../component/AddressInput";
-import UsersAutocomplete from "../../component/UsersAutocomplete";
-import GroupAutoComplete from "./component/GroupAutoComplete";
-import { useForm } from "../../hooks";
-import { MissionStatus } from "../../model/schema";
-import MissionFundedStatusRow from "./MissionFundedStatusRow";
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    textAlign: "left",
-    height: "100%",
-    overflow: "auto",
-    padding: `0px ${theme.spacing(1)}px`,
-  },
-  image: {
-    height: 0,
-    paddingTop: "56.25%", // 16:9
-  },
-  missionTypeText: {
-    paddingTop: theme.spacing(0.5),
-  },
-  label: {
-    fontWeight: 600,
-  },
-  rowLabel: {
-    fontWeight: 600,
-    marginTop: theme.spacing(2),
-  },
-  deliveryDetails: {
-    marginTop: theme.spacing(0.5),
-  },
-  rowBody: {
-    flexWrap: "nowrap",
-    alignItems: "center",
-    width: "100%",
-  },
-  textField: {
-    width: "100%",
-    backgroundColor: "black",
-  },
-  missionImage: {
-    margin: theme.spacing(1),
-    width: "100%",
-    maxHeight: "200px",
-  },
-  foodBoxDetailContainer: {
-    border: "1px solid lightgrey",
-    borderRadius: "4px",
-    fontSize: "18px",
-    color: "black",
-    fontWeight: "bold",
-    marginBottom: theme.spacing(1),
-  },
-  foodBoxDetailQuantity: {
-    padding: theme.spacing(1),
-    borderRight: "1px solid lightgrey",
-  },
-  foodBoxDetailName: {
-    padding: theme.spacing(1),
-  },
-  missionInput: {
-    width: "100%",
-  },
-  fullWidth: {
-    width: "100%",
-  },
-}));
-
-/**=====BASE COMPONENTs======**/
-
-const Label = ({ children, classes }) => {
-  if (!children) return null;
-  return (
-    <Body2 align="left" className={classes.rowLabel} color="textPrimary">
-      <b>{children}</b>
-    </Body2>
-  );
-};
-
-const Row = ({ children, classes, Icon }) => {
-  if (!children) return null;
-  return (
-    <Grid container className={classes.rowBody}>
-      {Icon && (
-        <Box marginRight="20px" width="20px">
-          <Icon color="primary" />
-        </Box>
-      )}
-      {children}
-    </Grid>
-  );
-};
-
-const Card = ({ children, classes, label }) => {
-  if (!children) return null;
-  return (
-    <>
-      <Label classes={classes}>{label}</Label>
-      {children}
-    </>
-  );
-};
-
-/**=====ROW COMPONENTS=======*/
-
-const MissionImage = ({ classes, mission }) => {
-  const imageUrl = mission?.image;
-  if (!imageUrl) return null;
-
-  return (
-    <Container>
-      <img src={imageUrl} className={classes.missionImage} alt="details" />
-    </Container>
-  );
-};
-const MissionTypeRow = ({ classes, mission }) => {
-  let missionType;
-  switch (mission?.type) {
-    case "foodbox":
-    default:
-      missionType = "Food Box";
-  }
-  return (
-    <Box marginTop="32px">
-      <H3>{missionType}</H3>
-    </Box>
-  );
-};
-const MissionStatusRow = ({ classes, mission }) => {
-  let status = mission?.status;
-  let missionStatusText;
-  switch (status) {
-    case Mission.Status.unassigned:
-      missionStatusText = "Looking for volunteer";
-      break;
-    default:
-      missionStatusText = status;
-      break;
-  }
-  return (
-    <Row Icon={PanToolIcon} classes={classes}>
-      {missionStatusText}
-    </Row>
-  );
-};
-
-const FoodBoxDetailsRow = ({ details }) => {
-  return (
-    <Box>
-      {details?.map((box) => (
-        <Body2 key={box.resourceUid}>
-          {box?.quantity} x {box?.displayName}
-        </Body2>
-      ))}
-    </Box>
-  );
-};
-
-const MissionDetailsRow = ({ mission }) => {
-  let type = mission?.type;
-  let details = mission?.details;
-  if (type === "resource") {
-    return <FoodBoxDetailsRow details={details} />;
-  }
-  return null;
-};
-
-const volunteerStatus = [MissionStatus.unassigned, MissionStatus.tentative, MissionStatus.assigned];
-
-const getVolunteerAttribute = (selectedVolunteer, attr, tentativeClause) => {
-  if (selectedVolunteer && tentativeClause) {
-    return selectedVolunteer[attr];
-  }
-  return "";
-};
-
-/**
- * Component for editing mission details
- * @component
- */
-const MissionEditView = ({ groups, mission, toDetailsView, toListView, volunteers }) => {
-  const classes = useStyles();
-
-  const { handleChange, values } = useForm(mission);
-  const [pickUp, setPickUp] = React.useState({
-    time: new Date(),
-    date: values.pickUpWindow.startTime,
-    location: "",
-  });
-  const [deliveryTime, setDeliveryTime] = React.useState({
-    time: new Date(),
-    date: values.deliveryWindow.startTime,
-    location: "",
-  });
-  const [selectedVolunteer, setSelectedVolunteer] = useState(
-    volunteers.find(
-      (el) => el.id === mission.volunteerUid || el.id === mission.tentativeVolunteerUid
-    )
-  );
-  const [selectedGroup, setSelectedGroup] = useState(
-    groups.find((el) => el.id === mission.groupUid)
-  );
-
-  const props = { classes, mission };
-
-  const volunteerEditable = volunteerStatus.includes(mission.status);
-
-  function changeFormValue(name, value) {
-    handleChange({ target: { name, value } });
-  }
-
-  function handleChangeLocation(data) {
-    const { location } = data;
-    changeFormValue("location", location);
-  }
-
-  function handleChangeReadyToStart(e) {
-    changeFormValue("readyToStart", e.target.checked);
-  }
-
-  function handleSave(e) {
-    e.preventDefault();
-    const pickUpTime = new Date(pickUp.date);
-    pickUpTime.setHours(pickUp.time.getHours());
-    pickUpTime.setMinutes(pickUp.time.getMinutes());
-    pickUpTime.setSeconds(pickUp.time.getSeconds());
-
-    const delivery = new Date(deliveryTime.date);
-    delivery.setHours(deliveryTime.time.getHours());
-    delivery.setMinutes(deliveryTime.time.getMinutes());
-    delivery.setSeconds(deliveryTime.time.getSeconds());
-    Mission.update(mission.id, {
-      pickUpLocation: values.pickUpLocation,
-      deliveryLocation: values.deliveryLocation,
-      recipientDisplayName: values.recipientDisplayName,
-      recipientPhoneNumber: values.recipientPhoneNumber,
-      deliveryNotes: values.deliveryNotes,
-      pickUpWindow: {
-        startTime: pickUpTime.toString(),
-      },
-      deliveryWindow: {
-        startTime: delivery.toString(),
-      },
-      groupUid: selectedGroup ? selectedGroup.id : "",
-      groupDisplayName: selectedGroup ? selectedGroup.displayName : "",
-      volunteerUid: getVolunteerAttribute(
-        selectedVolunteer,
-        "id",
-        values.status !== MissionStatus.tentative
-      ),
-      volunteerDisplayname: getVolunteerAttribute(
-        selectedVolunteer,
-        "displayName",
-        values.status !== MissionStatus.tentative
-      ),
-      volunteerPhoneNumber: getVolunteerAttribute(
-        selectedVolunteer,
-        "phoneNumber",
-        values.status !== MissionStatus.tentative
-      ),
-      tentativeVolunteerUid: getVolunteerAttribute(
-        selectedVolunteer,
-        "id",
-        values.status === MissionStatus.tentative
-      ),
-      tentativeVolunteerDisplayName: getVolunteerAttribute(
-        selectedVolunteer,
-        "displayName",
-        values.status === MissionStatus.tentative
-      ),
-      tentativeVolunteerPhoneNumber: getVolunteerAttribute(
-        selectedVolunteer,
-        "phoneNumber",
-        values.status === MissionStatus.tentative
-      ),
-      readyToStart: values.readyToStart,
-    }).then((result) => {
-      toDetailsView();
-    });
-  }
-
-  return (
-    <Box height="100%" width="100%">
-      <Paper className={classes.root} elevation={0}>
-        <Box position="absolute" onClick={toListView}>
-          <ArrowBackIcon />
-        </Box>
-        {isLoaded(mission) && !isEmpty(mission) && (
-          <Box>
-            <MissionImage {...props} />
-            <MissionTypeRow {...props} />
-            <MissionDetailsRow {...props} />
-            <MissionFundedStatusRow {...props} />
-            <MissionStatusRow {...props} />
-
-            <Card label="Pick Up Details" classes={classes}>
-              <Row Icon={ScheduleIcon} classes={classes}>
-                <DateTimeInput
-                  dateInputProps={{
-                    id: "date-pickup",
-                    label: "Pickup Date",
-                  }}
-                  onChange={setPickUp}
-                  required
-                  timeInputProps={{
-                    id: "time-pickup",
-                    label: "Pickup Time",
-                  }}
-                  value={pickUp}
-                />
-              </Row>
-              <Grid
-                container
-                direction="row"
-                alignItems="top"
-                spacing={1}
-                className={classes.fullWidth}
-              >
-                <Grid item>
-                  <LocationOnIcon />
-                </Grid>
-                <Grid item style={{ width: "90%" }}>
-                  <Grid container direction="column" alignItems="center">
-                    <Grid item className={classes.fullWidth}>
-                      <TextField
-                        className={`${classes.rootInput} ${classes.input}`}
-                        id="pickupLocation.label"
-                        name="pickupLocation.label"
-                        value={values.pickUpLocationLabel}
-                        placeholder="Location Name"
-                        variant="outlined"
-                        disabled={false}
-                        onChange={handleChange}
-                        fullWidth
-                      />
-                    </Grid>
-                    <Grid item className={classes.fullWidth}>
-                      <AddressInput
-                        className={classes.textField}
-                        id="pickup-address-id"
-                        placeholder={values.pickUpLocation?.address}
-                        stage={values.pickUpLocation}
-                        setStage={handleChangeLocation.bind(null, "pickUpLocation")}
-                        setLocation={handleChangeLocation}
-                        value={values.pickUpLocation?.address}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </Grid>
-            </Card>
-            <Card label="Delivery Details" classes={classes}>
-              <Row Icon={ScheduleIcon} classes={classes}>
-                <DateTimeInput
-                  dateInputProps={{
-                    id: "date-delivery",
-                    label: "Delivery Date",
-                  }}
-                  onChange={setDeliveryTime}
-                  required
-                  timeInputProps={{
-                    id: "time-delivery",
-                    label: "Delivery Time",
-                  }}
-                  value={deliveryTime}
-                />
-              </Row>
-              <Row Icon={LocationOnIcon} classes={classes}>
-                <Grid container direction="row">
-                  <Grid item className={classes.fullWidth}>
-                    <AddressInput
-                      className={classes.textField}
-                      id="delivery-address-id"
-                      placeholder={values.deliveryLocation?.address}
-                      stage={values.deliveryLocation}
-                      setStage={handleChangeLocation.bind(null, "deliveryLocation")}
-                      setLocation={handleChangeLocation}
-                      value={values.deliveryLocation?.address}
-                    />
-                  </Grid>
-                </Grid>
-              </Row>
-              <Grid container direction="row" alignItems="top" spacing={1}>
-                <Grid item>
-                  <PersonIcon />
-                </Grid>
-                <Grid item style={{ width: "90%" }}>
-                  <Grid container direction="column" alignItems="center">
-                    <Grid item className={classes.fullWidth}>
-                      <TextField
-                        className={`${classes.rootInput} ${classes.input}`}
-                        id="recipientDisplayName"
-                        name="recipientDisplayName"
-                        value={values.recipientDisplayName}
-                        placeholder="Recipient"
-                        variant="outlined"
-                        disabled={false}
-                        onChange={handleChange}
-                        fullWidth
-                      />
-                    </Grid>
-                    <Grid item className={classes.fullWidth}>
-                      <TextField
-                        className={`${classes.rootInput} ${classes.input}`}
-                        id="recipientPhoneNumber"
-                        name="recipientPhoneNumber"
-                        value={values.recipientPhoneNumber}
-                        placeholder="Phone Number"
-                        variant="outlined"
-                        disabled={false}
-                        onChange={handleChange}
-                        fullWidth
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </Grid>
-            </Card>
-
-            <Card label="Volunteer Information" classes={classes}>
-              <UsersAutocomplete
-                editable={volunteerEditable}
-                handleChange={setSelectedVolunteer}
-                users={volunteers}
-                selected={selectedVolunteer}
-              />
-            </Card>
-
-            <Row classes={classes}>
-              <Grid container direction="row" spacing={1} className={classes.rowBody}>
-                <Grid item>
-                  <Switch
-                    size="normal"
-                    name="readyToStart"
-                    checked={values.readyToStart}
-                    onChange={handleChangeReadyToStart}
-                  />
-                </Grid>
-                <Grid item className={classes.label}>
-                  Ready To Start?
-                </Grid>
-              </Grid>
-            </Row>
-
-            <Card label="Group" classes={classes}>
-              <GroupAutoComplete
-                classes={classes}
-                groups={groups}
-                handleChange={setSelectedGroup}
-                selected={selectedGroup}
-              />
-            </Card>
-
-            <Label classes={classes}>Delivery Notes</Label>
-            <Row classes={classes}>
-              <TextField
-                variant="outlined"
-                value={values.deliveryNotes}
-                name="deliveryNotes"
-                onChange={handleChange}
-                placeholder="Notes"
-                multiline
-                className={classes.fullWidth}
-                rows={4}
-              />
-            </Row>
-            <Box
-              style={{
-                marginTop: "3rem",
-                marginLeft: "1rem",
-                display: "flex",
-                justifyContent: "center",
-                spacing: 1,
-              }}
-            >
-              <Button
-                onClick={handleSave}
-                variant="contained"
-                color="primary"
-                style={{ margin: ".5em" }}
-              >
-                SAVE
-              </Button>
-
-              <Button
-                onClick={toDetailsView}
-                startIcon={<CancelIcon />}
-                variant="contained"
-                color="primary"
-                style={{ margin: ".5em" }}
-              >
-                CANCEL
-              </Button>
-            </Box>
-          </Box>
-        )}
-      </Paper>
-    </Box>
-  );
-};
-
-export default MissionEditView;

From 1015f4bae57715ba4672699ac72d2ee544d2a0da Mon Sep 17 00:00:00 2001
From: mat10tng <mat10tng@gmail.com>
Date: Tue, 9 Jun 2020 10:53:43 +0200
Subject: [PATCH 14/14] update datetime component

---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 .../component/DateTimeInput/DateTimeInput.jsx | 73 -------------------
 .../component/DateTimeInput/DateTimeInput.tsx | 67 +++++++++++++++++
 src/app/component/index.js                    |  3 +
 .../MissionDetailsEdit/MissionDetailsEdit.jsx | 47 +++---------
 .../MissionDetailsEdit/PickupInformation.tsx  | 49 +++++++++++++
 .../RecipientInformation.tsx                  | 59 +++++++++++++++
 .../Missions/MissionDetailsEdit/styles.ts     | 32 ++++++++
 src/theme.js                                  |  7 +-
 10 files changed, 232 insertions(+), 111 deletions(-)
 delete mode 100644 src/app/component/DateTimeInput/DateTimeInput.jsx
 create mode 100644 src/app/component/DateTimeInput/DateTimeInput.tsx
 create mode 100644 src/app/dashboard/Missions/MissionDetailsEdit/PickupInformation.tsx
 create mode 100644 src/app/dashboard/Missions/MissionDetailsEdit/RecipientInformation.tsx
 create mode 100644 src/app/dashboard/Missions/MissionDetailsEdit/styles.ts

diff --git a/package-lock.json b/package-lock.json
index a154dc27..bba91755 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17822,6 +17822,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
+      "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index abf1df66..d807ef6c 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "leaflet-routing-machine": "^3.2.12",
     "lodash": "^4.17.15",
     "material-ui-phone-number": "^2.2.6",
+    "moment": "^2.26.0",
     "path": "^0.12.7",
     "querystring-browser": "^1.0.4",
     "react": "^16.13.1",
diff --git a/src/app/component/DateTimeInput/DateTimeInput.jsx b/src/app/component/DateTimeInput/DateTimeInput.jsx
deleted file mode 100644
index 55169baf..00000000
--- a/src/app/component/DateTimeInput/DateTimeInput.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import MomentUtils from "@date-io/date-fns";
-import { KeyboardTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
-import KeyDatePickerContainer from "../../page/MissionCreate/KeyDatePickerContainer";
-import PropTypes from "prop-types";
-import React from "react";
-
-/**
- * Wrapper component for KeybardDatePickerContainer and KeyboadTimePicker
- * which accepts a value object that has 'time' and 'date' props and will
- * update that object via the onChange handler
- * @function
- * @param {object} dateInputProps
- * @param {object} timeInputProps
- * @param {string} value
- * @param {func} onChange
- */
-const DateTimeInput = ({ dateInputProps, onChange, required, timeInputProps, value }) => {
-  const handleChange = (field, newValue) => {
-    onChange({
-      ...value,
-      [field]: newValue,
-    });
-  };
-
-  const datePickerContainerProps = {
-    id: "datetime-input-date",
-    label: "Date",
-    margin: "normal",
-    ...dateInputProps,
-  };
-
-  const timePickerProps = {
-    id: "datetime-input-time",
-    label: "Time",
-    margin: "normal",
-    ...timeInputProps,
-  };
-
-  return (
-    <MuiPickersUtilsProvider utils={MomentUtils}>
-      <KeyDatePickerContainer
-        onChange={(val) => handleChange("date", val)}
-        required={required}
-        value={value.date}
-        margin="normal"
-        format="MM/dd/yyyy"
-        KeyboardButtonProps={{
-          "aria-label": "change date",
-        }}
-        {...datePickerContainerProps}
-      />
-      <KeyboardTimePicker
-        value={value.time}
-        required={required}
-        onChange={(val) => handleChange("time", val)}
-        KeyboardButtonProps={{ "aria-label": "change time" }}
-        {...timePickerProps}
-      />
-    </MuiPickersUtilsProvider>
-  );
-};
-
-DateTimeInput.propTypes = {
-  dateInputProps: PropTypes.object,
-  timeInputProps: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.shape({
-    time: PropTypes.object,
-    date: PropTypes.object,
-  }).isRequired, // Strict shape not enforced, object can contain other properties (like 'location')
-};
-
-export default DateTimeInput;
diff --git a/src/app/component/DateTimeInput/DateTimeInput.tsx b/src/app/component/DateTimeInput/DateTimeInput.tsx
new file mode 100644
index 00000000..63715202
--- /dev/null
+++ b/src/app/component/DateTimeInput/DateTimeInput.tsx
@@ -0,0 +1,67 @@
+import MomentUtils from "@date-io/date-fns";
+import { Box } from "@material-ui/core";
+import {
+  DatePicker as MuiDatePicker,
+  TimePicker as MuiTimePicker,
+  MuiPickersUtilsProvider,
+} from "@material-ui/pickers";
+import React from "react";
+import styled from "styled-components";
+
+const DatePicker = styled(MuiDatePicker)`
+  flex-grow: 1;
+  margin-right: 30px;
+`;
+const TimePicker = styled(MuiTimePicker)`
+  flex-grow: 1;
+`;
+
+/**
+ * Wrapper component for KeybardDatePickerContainer and KeyboadTimePicker
+ * which accepts a value object that has 'time' and 'date' props and will
+ * update that object via the onChange handler
+ * @function
+ * @param {string} value
+ * @param {func} onChange
+ */
+const DateTimeInput = ({ onChange, value }: { value: string | null; onChange: Function }) => {
+  function getDateTime(time: string | null) {
+    if (!time) {
+      return null;
+    }
+    return new Date(time);
+  }
+  const time = getDateTime(value);
+
+  const handleChange = (date: any) => {
+    if (date === null) {
+      onChange("");
+    } else {
+      onChange(date.toISOString());
+    }
+  };
+
+  return (
+    <MuiPickersUtilsProvider utils={MomentUtils}>
+      <Box display="flex">
+        <DatePicker
+          clearable
+          onChange={handleChange}
+          value={time}
+          format="MM/dd/yyyy"
+          id="datetime-input-date"
+          label="Date"
+        />
+        <TimePicker
+          id="datetime-input-time"
+          label="Time"
+          value={time}
+          onChange={handleChange}
+          clearable
+        />
+      </Box>
+    </MuiPickersUtilsProvider>
+  );
+};
+
+export default DateTimeInput;
diff --git a/src/app/component/index.js b/src/app/component/index.js
index f49f3568..57040b07 100644
--- a/src/app/component/index.js
+++ b/src/app/component/index.js
@@ -3,6 +3,8 @@ import Button from "./Button";
 import Chip from "./Chip";
 import { FoodBoxIcon } from "./icons";
 
+import DateTimeInput from "./DateTimeInput";
+
 import MissionCard from "./MissionComponent/MissionCard";
 import MissionGroup from "./MissionComponent/MissionGroup";
 import MissionList from "./MissionComponent/MissionList";
@@ -41,4 +43,5 @@ export {
   Body2,
   Div,
   TypographyWrapper,
+  DateTimeInput,
 };
diff --git a/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx b/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx
index 2b604d4a..0e164455 100644
--- a/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx
+++ b/src/app/dashboard/Missions/MissionDetailsEdit/MissionDetailsEdit.jsx
@@ -1,15 +1,12 @@
 import { Box, Container, Grid, Paper, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import MissionDetailsRow from "./MissionDetailsRow";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import LocationOnIcon from "@material-ui/icons/LocationOn";
 import PanToolIcon from "@material-ui/icons/PanTool";
-import CancelIcon from "@material-ui/icons/Cancel";
 import PersonIcon from "@material-ui/icons/Person";
 import React, { useState } from "react";
-import { Button, Body2, H3, H2 } from "../../../component";
+import { Button, Body2, H2 } from "../../../component";
 import Switch from "@material-ui/core/Switch";
-import DateTimeInput from "../../../component/DateTimeInput";
 import ScheduleIcon from "@material-ui/icons/Schedule";
 import { Mission } from "../../../model";
 import _ from "../../../utils/lodash";
@@ -18,7 +15,9 @@ import UsersAutocomplete from "../../../component/UsersAutocomplete";
 import GroupAutoComplete from "../component/GroupAutoComplete";
 import { useForm } from "../../../hooks";
 import { MissionStatus } from "../../../model/schema";
-import MissionFundedStatusRow from "../MissionFundedStatusRow";
+import MissionDetailsRow from "./MissionDetailsRow";
+import RecipientInformation from "./RecipientInformation";
+import PickupInformation from "./PickupInformation";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -264,7 +263,7 @@ const MissionEditView = ({ groups, mission, toListView, volunteers }) => {
       <Paper className={classes.root} elevation={0}>
         <Box position="relative" textAlign="center" paddingTop="2rem">
           <Box onClick={toListView} position="absolute">
-            <CancelIcon />
+            <ArrowBackIcon />
           </Box>
           <H2>Mission Details</H2>
         </Box>
@@ -272,25 +271,13 @@ const MissionEditView = ({ groups, mission, toListView, volunteers }) => {
         <Box>
           <MissionImage {...props} />
           <MissionDetailsRow {...props} />
-          <MissionFundedStatusRow {...props} />
-          <MissionStatusRow {...props} />
+          <Box>
+            <RecipientInformation {...props} />
+            <PickupInformation {...props} />
+          </Box>
 
           <Card label="Pick Up Details" classes={classes}>
-            <Row Icon={ScheduleIcon} classes={classes}>
-              <DateTimeInput
-                dateInputProps={{
-                  id: "date-pickup",
-                  label: "Pickup Date",
-                }}
-                onChange={setPickUp}
-                required
-                timeInputProps={{
-                  id: "time-pickup",
-                  label: "Pickup Time",
-                }}
-                value={pickUp}
-              />
-            </Row>
+            <Row Icon={ScheduleIcon} classes={classes}></Row>
             <Grid
               container
               direction="row"
@@ -333,19 +320,7 @@ const MissionEditView = ({ groups, mission, toListView, volunteers }) => {
           </Card>
           <Card label="Delivery Details" classes={classes}>
             <Row Icon={ScheduleIcon} classes={classes}>
-              <DateTimeInput
-                dateInputProps={{
-                  id: "date-delivery",
-                  label: "Delivery Date",
-                }}
-                onChange={setDeliveryTime}
-                required
-                timeInputProps={{
-                  id: "time-delivery",
-                  label: "Delivery Time",
-                }}
-                value={deliveryTime}
-              />
+              >
             </Row>
             <Row Icon={LocationOnIcon} classes={classes}>
               <Grid container direction="row">
diff --git a/src/app/dashboard/Missions/MissionDetailsEdit/PickupInformation.tsx b/src/app/dashboard/Missions/MissionDetailsEdit/PickupInformation.tsx
new file mode 100644
index 00000000..1304fa4e
--- /dev/null
+++ b/src/app/dashboard/Missions/MissionDetailsEdit/PickupInformation.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { MissionInterface } from "../../../model/schema";
+import { Box, TextField } from "@material-ui/core";
+import styled from "styled-components";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import useStyles from "./styles";
+import { DateTimeInput } from "../../../component";
+
+const MainField = styled(TextField)`
+  width: 13rem;
+  margin-top: 1rem;
+`;
+const SecondaryField = styled(TextField)`
+  margin-top: 1rem;
+  width: 10rem;
+  float: right;
+`;
+const RecipientInformation = ({ mission }: { mission: MissionInterface }) => {
+  const classes = useStyles();
+
+  const [pickUpTime, setPickUpTime] = React.useState(mission.pickUpWindow?.startTime || null);
+
+  return (
+    <MuiExpansionPanel
+      elevation={0}
+      classes={{ root: classes.expansion, expanded: classes.expanded }}
+    >
+      <ExpansionPanelSummary
+        expandIcon={<ExpandMoreIcon />}
+        classes={{ root: classes.summary, expanded: classes.summaryExpanded }}
+      >
+        <b>Pick Up Information</b>
+      </ExpansionPanelSummary>
+      <MuiExpansionPanelDetails classes={{ root: classes.details }}>
+        <Box>
+          <DateTimeInput
+            value={pickUpTime}
+            onChange={(value: string | null) => setPickUpTime(value)}
+          />
+        </Box>
+      </MuiExpansionPanelDetails>
+    </MuiExpansionPanel>
+  );
+};
+
+export default RecipientInformation;
diff --git a/src/app/dashboard/Missions/MissionDetailsEdit/RecipientInformation.tsx b/src/app/dashboard/Missions/MissionDetailsEdit/RecipientInformation.tsx
new file mode 100644
index 00000000..2e6b900e
--- /dev/null
+++ b/src/app/dashboard/Missions/MissionDetailsEdit/RecipientInformation.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { MissionInterface } from "../../../model/schema";
+import { Box, TextField } from "@material-ui/core";
+import styled from "styled-components";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import useStyles from "./styles";
+
+const MainField = styled(TextField)`
+  width: 13rem;
+  margin-top: 1rem;
+`;
+const SecondaryField = styled(TextField)`
+  margin-top: 1rem;
+  width: 10rem;
+  float: right;
+`;
+const RecipientInformation = ({ mission }: { mission: MissionInterface }) => {
+  const classes = useStyles();
+  return (
+    <MuiExpansionPanel
+      elevation={0}
+      classes={{ root: classes.expansion, expanded: classes.expanded }}
+    >
+      <ExpansionPanelSummary
+        expandIcon={<ExpandMoreIcon />}
+        classes={{ root: classes.summary, expanded: classes.summaryExpanded }}
+      >
+        <b>Recipient Information</b>
+      </ExpansionPanelSummary>
+      <MuiExpansionPanelDetails classes={{ root: classes.details }}>
+        <Box>
+          <MainField
+            value={mission.recipientDisplayName}
+            label="Name"
+            variant="outlined"
+            size="small"
+          />
+          <SecondaryField
+            value={mission.recipientPhoneNumber}
+            label="Phone"
+            variant="outlined"
+            size="small"
+          />
+          <MainField
+            value={mission.recipientEmailAddress}
+            label="Email"
+            variant="outlined"
+            size="small"
+          />
+        </Box>
+      </MuiExpansionPanelDetails>
+    </MuiExpansionPanel>
+  );
+};
+
+export default RecipientInformation;
diff --git a/src/app/dashboard/Missions/MissionDetailsEdit/styles.ts b/src/app/dashboard/Missions/MissionDetailsEdit/styles.ts
new file mode 100644
index 00000000..6ac2c266
--- /dev/null
+++ b/src/app/dashboard/Missions/MissionDetailsEdit/styles.ts
@@ -0,0 +1,32 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+// sometime the override classes come after the actuall class, so
+// we actually have to write !important to overwrite that.
+const useStyles = makeStyles((theme: any) => ({
+  expansion: {
+    margin: "0px !important",
+    border: `1px solid ${theme.color.blueSecondary}`,
+    boxShadow: "none",
+    "&:not(:last-child)": {
+      borderBottom: 0,
+    },
+    "&:before": {
+      display: "none",
+    },
+  },
+  expanded: {
+    backgroundColor: theme.color.lilacLight,
+  },
+  details: {
+    padding: 0,
+  },
+  summary: {
+    height: "3rem",
+    padding: "0px 14px",
+  },
+  summaryExpanded: {
+    minHeight: "0px",
+  },
+}));
+
+export default useStyles;
diff --git a/src/theme.js b/src/theme.js
index 24777725..183df4c2 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -4,11 +4,9 @@ export const color = {
   purple: "#150E60", //TODO remove unnecessary colors
   deepPurple: "#150E60",
   vibrantPurple: "#3739B5",
-  secondaryBlue: "#B4B6F1",
   black: "#090808",
   white: "#FFF",
   pink: "#ffefef",
-  blue: "#3739B5",
   red: "#DA0B46",
   redlines: "#E8178A",
   green: "#024b30",
@@ -17,7 +15,12 @@ export const color = {
   greenToast: "#4caf50",
   darkOrange: "#f2994a",
   orange: "#fce1c9",
+  blue: "#3739B5",
+  blueSecondary: "#B4B6F1",
   darkBlue: "#110079",
+  secondaryBlue: "#B4B6F1",
+  lilacSecondary: "#D4D6FE",
+  lilacLight: "#EFF3FB",
   lightgrey: "#F2F2F2",
   gray3: "#828282",
 };