jams-react-client: refactor Drawer and PasswordDialog

Change-Id: I28a127a9cff72aae239ddd5b3796833706a2cb7d

jams-react-client/src/components/Drawer/Drawer.tsx

-import React, { useCallback } from "react";
+import React, { FC, useCallback } from "react";
 import clsx from "clsx";
+import { debounce } from "lodash";
 import { makeStyles } from "@mui/styles";
-import CustomInput from "components/CustomInput/CustomInput";
-import Drawer from "@mui/material/Drawer";
-import List from "@mui/material/List";
-import Divider from "@mui/material/Divider";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import Avatar from "@mui/material/Avatar";
 
-import noProfilePicture from "assets/img/faces/no-profile-picture.png";
+import {
+  Drawer,
+  List,
+  Divider,
+  ListItem,
+  ListItemText,
+  Avatar,
+} from "@mui/material";
 
-import { debounce } from "lodash";
+import CustomInput from "components/CustomInput/CustomInput";
+import noProfilePicture from "assets/img/faces/no-profile-picture.png";
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -35,27 +37,47 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function TemporaryDrawer(props) {
+interface TemporaryDrawerProps {
+  openDrawer: boolean;
+  setOpenDrawer: (open: boolean) => void;
+  type: "user" | "group";
+  targets: any[];
+  existingTargets: any[];
+  addElementToTarget: (target: any) => void;
+  searchTargets: (searchValue: string) => void;
+  direction: "top" | "bottom" | "left" | "right";
+  placeholder: string;
+}
+
+const TemporaryDrawer: FC<TemporaryDrawerProps> = ({
+  openDrawer,
+  setOpenDrawer,
+  type,
+  targets,
+  existingTargets,
+  addElementToTarget,
+  searchTargets,
+  direction,
+  placeholder,
+}) => {
   const classes = useStyles();
 
   const listUsers = () => (
     <List>
-      {props.type === "user"
-        ? props.targets &&
-          props.targets
+      {type === "user"
+        ? targets &&
+          targets
             .filter(
               (target) =>
-                !props.existingTargets.some(
-                  (t) => target.username === t.username
-                )
+                !existingTargets.some((t) => target.username === t.username)
             )
             .map((target) => (
               <ListItem
                 button
                 key={target.username}
                 onClick={() => {
-                  props.addElementToTarget(target);
-                  props.setOpenDrawer(false);
+                  addElementToTarget(target);
+                  setOpenDrawer(false);
                 }}
               >
                 <Avatar
@@ -78,19 +100,18 @@ export default function TemporaryDrawer(props) {
                 />
               </ListItem>
             ))
-        : props.targets &&
-          props.targets
+        : targets &&
+          targets
             .filter(
-              (target) =>
-                !props.existingTargets.some((t) => target.name === t.name)
+              (target) => !existingTargets.some((t) => target.name === t.name)
             )
             .map((target) => (
               <ListItem
                 button
                 key={target.name}
                 onClick={() => {
-                  props.addElementToTarget(target);
-                  props.setOpenDrawer(false);
+                  addElementToTarget(target);
+                  setOpenDrawer(false);
                 }}
               >
                 <ListItemText primary={target.name} />
@@ -99,10 +120,7 @@ export default function TemporaryDrawer(props) {
     </List>
   );
 
-  const initSearchTargets = useCallback(
-    debounce((searchValue) => props.searchTargets(searchValue), 500),
-    []
-  );
+  const initSearchTargets = useCallback(debounce(searchTargets, 500), []);
 
   const handleSearchTargets = (e) => {
     const searchValue = e.target.value;
@@ -111,18 +129,17 @@ export default function TemporaryDrawer(props) {
 
   return (
     <div>
-      <React.Fragment key={props.direction}>
+      <React.Fragment key={direction}>
         <Drawer
           anchor="right"
-          open={props.openDrawer}
+          open={openDrawer}
           onClose={() => {
-            props.setOpenDrawer(false);
+            setOpenDrawer(false);
           }}
         >
           <div
             className={clsx(classes.list, {
-              [classes.fullList]:
-                props.direction === "top" || props.direction === "bottom",
+              [classes.fullList]: direction === "top" || direction === "bottom",
             })}
             role="presentation"
           >
@@ -132,9 +149,9 @@ export default function TemporaryDrawer(props) {
                   className: classes.margin + " " + classes.search,
                 }}
                 inputProps={{
-                  placeholder: props.placeholder,
+                  placeholder: placeholder,
                   inputProps: {
-                    "aria-label": props.placeholder,
+                    "aria-label": placeholder,
                   },
                   onKeyUp: handleSearchTargets,
                 }}
@@ -147,4 +164,6 @@ export default function TemporaryDrawer(props) {
       </React.Fragment>
     </div>
   );
-}
+};
+
+export default TemporaryDrawer;

jams-react-client/src/components/PasswordDialog/PasswordDialog.tsx

-import React, { useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 // @mui/material components
 import { makeStyles } from "@mui/styles";
 // core components
@@ -51,7 +51,17 @@ const styles = (theme) => ({
 
 const useStyles = makeStyles(styles);
 
-export default function PasswordDialog(props) {
+interface PasswordDialogProps {
+  username: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+const PasswordDialog: FC<PasswordDialogProps> = ({
+  username,
+  open,
+  onClose,
+}) => {
   const classes = useStyles();
 
   const [copied, setCopied] = useState(false);
@@ -69,23 +79,17 @@ export default function PasswordDialog(props) {
 
   const changePassword = (values) => {
     const data = {
-      username: props.username,
+      username: username,
       password: values.password,
     };
 
     axios(configApiCall(api_path_put_update_user, "PUT", data, null))
-      .then(() => {
-        props.setChangePasswordOpen(false);
-      })
+      .then(onClose)
       .catch((error) => {
         console.log(
-          "Updating user " +
-            props.username +
-            " password failed with error: " +
-            error
+          "Updating user " + username + " password failed with error: " + error
         );
       });
-    props.setChangePasswordOpen(false);
   };
 
   const passwordSchema = Yup.object().shape({
@@ -141,8 +145,8 @@ export default function PasswordDialog(props) {
   return (
     <div>
       <Dialog
-        open={props.changePasswordOpen}
-        onClose={props.handleClosechangePassword}
+        open={open}
+        onClose={onClose}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
@@ -158,7 +162,7 @@ export default function PasswordDialog(props) {
             <form onSubmit={handleSubmit}>
               <DialogContent>
                 <DialogContentText id="change-password-description">
-                  Change <strong>{props.username}&apos;s</strong> password
+                  Change <strong>{username}&apos;s</strong> password
                 </DialogContentText>
                 <FormikField
                   name="password"
@@ -262,10 +266,7 @@ export default function PasswordDialog(props) {
                     </CopyToClipboard>
                   </Grid>
                   <Grid item className={classes.actionButtons}>
-                    <Button
-                      onClick={props.handleClosechangePassword}
-                      color="primary"
-                    >
+                    <Button onClick={onClose} color="primary">
                       Cancel
                     </Button>
                     <Button
@@ -286,4 +287,6 @@ export default function PasswordDialog(props) {
       </Dialog>
     </div>
   );
-}
+};
+
+export default PasswordDialog;

jams-react-client/src/views/Contacts/Contacts.tsx

@@ -309,7 +309,6 @@ export default function Users(props) {
         targets={users}
         existingTargets={contacts}
         addElementToTarget={addContactToUser}
-        targetName={props.username}
         type="user"
       />
       <Dialog

jams-react-client/src/views/Groups/EditGroup.tsx

@@ -370,7 +370,6 @@ export default function EditGroup(props) {
         targets={users}
         existingTargets={groupMembers}
         addElementToTarget={addUserInGroup}
-        targetName={name}
         type="user"
       />
       <GridContainer>