Feat/edit mission organizer details

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",

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,

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;

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 } from "./";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -31,8 +32,11 @@ 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;
+
+  if (!editable) {
+    return <H6>{selected.displayName + " " + selected.phoneNumber}</H6>;
+  }
 
   return (
     <Autocomplete
@@ -42,7 +46,6 @@ const SearchUsers = ({ editable, handleChange, selected, users }) => {
       classes={{ root: classes.root }}
       getOptionLabel={(user) => user.searchString}
       onChange={(event, newValue) => handleChange(newValue)}
-      value={value}
       defaultValue={defaultValue}
       renderInput={(params) => (
         <TextField

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,
 };