Skip to content
Snippets Groups Projects
Commit 88d29354 authored by Léo Banno-Cloutier's avatar Léo Banno-Cloutier Committed by Sébastien Blin
Browse files

jams-react-client: refactor Drawer and PasswordDialog

Change-Id: I28a127a9cff72aae239ddd5b3796833706a2cb7d
parent feee4cdc
No related branches found
No related tags found
No related merge requests found
import React, { useCallback } from "react"; import React, { FC, useCallback } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { debounce } from "lodash";
import { makeStyles } from "@mui/styles"; 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) => ({ const useStyles = makeStyles((theme) => ({
list: { list: {
...@@ -35,27 +37,47 @@ const useStyles = makeStyles((theme) => ({ ...@@ -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 classes = useStyles();
const listUsers = () => ( const listUsers = () => (
<List> <List>
{props.type === "user" {type === "user"
? props.targets && ? targets &&
props.targets targets
.filter( .filter(
(target) => (target) =>
!props.existingTargets.some( !existingTargets.some((t) => target.username === t.username)
(t) => target.username === t.username
)
) )
.map((target) => ( .map((target) => (
<ListItem <ListItem
button button
key={target.username} key={target.username}
onClick={() => { onClick={() => {
props.addElementToTarget(target); addElementToTarget(target);
props.setOpenDrawer(false); setOpenDrawer(false);
}} }}
> >
<Avatar <Avatar
...@@ -78,19 +100,18 @@ export default function TemporaryDrawer(props) { ...@@ -78,19 +100,18 @@ export default function TemporaryDrawer(props) {
/> />
</ListItem> </ListItem>
)) ))
: props.targets && : targets &&
props.targets targets
.filter( .filter(
(target) => (target) => !existingTargets.some((t) => target.name === t.name)
!props.existingTargets.some((t) => target.name === t.name)
) )
.map((target) => ( .map((target) => (
<ListItem <ListItem
button button
key={target.name} key={target.name}
onClick={() => { onClick={() => {
props.addElementToTarget(target); addElementToTarget(target);
props.setOpenDrawer(false); setOpenDrawer(false);
}} }}
> >
<ListItemText primary={target.name} /> <ListItemText primary={target.name} />
...@@ -99,10 +120,7 @@ export default function TemporaryDrawer(props) { ...@@ -99,10 +120,7 @@ export default function TemporaryDrawer(props) {
</List> </List>
); );
const initSearchTargets = useCallback( const initSearchTargets = useCallback(debounce(searchTargets, 500), []);
debounce((searchValue) => props.searchTargets(searchValue), 500),
[]
);
const handleSearchTargets = (e) => { const handleSearchTargets = (e) => {
const searchValue = e.target.value; const searchValue = e.target.value;
...@@ -111,18 +129,17 @@ export default function TemporaryDrawer(props) { ...@@ -111,18 +129,17 @@ export default function TemporaryDrawer(props) {
return ( return (
<div> <div>
<React.Fragment key={props.direction}> <React.Fragment key={direction}>
<Drawer <Drawer
anchor="right" anchor="right"
open={props.openDrawer} open={openDrawer}
onClose={() => { onClose={() => {
props.setOpenDrawer(false); setOpenDrawer(false);
}} }}
> >
<div <div
className={clsx(classes.list, { className={clsx(classes.list, {
[classes.fullList]: [classes.fullList]: direction === "top" || direction === "bottom",
props.direction === "top" || props.direction === "bottom",
})} })}
role="presentation" role="presentation"
> >
...@@ -132,9 +149,9 @@ export default function TemporaryDrawer(props) { ...@@ -132,9 +149,9 @@ export default function TemporaryDrawer(props) {
className: classes.margin + " " + classes.search, className: classes.margin + " " + classes.search,
}} }}
inputProps={{ inputProps={{
placeholder: props.placeholder, placeholder: placeholder,
inputProps: { inputProps: {
"aria-label": props.placeholder, "aria-label": placeholder,
}, },
onKeyUp: handleSearchTargets, onKeyUp: handleSearchTargets,
}} }}
...@@ -147,4 +164,6 @@ export default function TemporaryDrawer(props) { ...@@ -147,4 +164,6 @@ export default function TemporaryDrawer(props) {
</React.Fragment> </React.Fragment>
</div> </div>
); );
} };
export default TemporaryDrawer;
import React, { useEffect, useState } from "react"; import React, { FC, useEffect, useState } from "react";
// @mui/material components // @mui/material components
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
// core components // core components
...@@ -51,7 +51,17 @@ const styles = (theme) => ({ ...@@ -51,7 +51,17 @@ const styles = (theme) => ({
const useStyles = makeStyles(styles); 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 classes = useStyles();
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
...@@ -69,23 +79,17 @@ export default function PasswordDialog(props) { ...@@ -69,23 +79,17 @@ export default function PasswordDialog(props) {
const changePassword = (values) => { const changePassword = (values) => {
const data = { const data = {
username: props.username, username: username,
password: values.password, password: values.password,
}; };
axios(configApiCall(api_path_put_update_user, "PUT", data, null)) axios(configApiCall(api_path_put_update_user, "PUT", data, null))
.then(() => { .then(onClose)
props.setChangePasswordOpen(false);
})
.catch((error) => { .catch((error) => {
console.log( console.log(
"Updating user " + "Updating user " + username + " password failed with error: " + error
props.username +
" password failed with error: " +
error
); );
}); });
props.setChangePasswordOpen(false);
}; };
const passwordSchema = Yup.object().shape({ const passwordSchema = Yup.object().shape({
...@@ -141,8 +145,8 @@ export default function PasswordDialog(props) { ...@@ -141,8 +145,8 @@ export default function PasswordDialog(props) {
return ( return (
<div> <div>
<Dialog <Dialog
open={props.changePasswordOpen} open={open}
onClose={props.handleClosechangePassword} onClose={onClose}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
> >
...@@ -158,7 +162,7 @@ export default function PasswordDialog(props) { ...@@ -158,7 +162,7 @@ export default function PasswordDialog(props) {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<DialogContent> <DialogContent>
<DialogContentText id="change-password-description"> <DialogContentText id="change-password-description">
Change <strong>{props.username}&apos;s</strong> password Change <strong>{username}&apos;s</strong> password
</DialogContentText> </DialogContentText>
<FormikField <FormikField
name="password" name="password"
...@@ -262,10 +266,7 @@ export default function PasswordDialog(props) { ...@@ -262,10 +266,7 @@ export default function PasswordDialog(props) {
</CopyToClipboard> </CopyToClipboard>
</Grid> </Grid>
<Grid item className={classes.actionButtons}> <Grid item className={classes.actionButtons}>
<Button <Button onClick={onClose} color="primary">
onClick={props.handleClosechangePassword}
color="primary"
>
Cancel Cancel
</Button> </Button>
<Button <Button
...@@ -286,4 +287,6 @@ export default function PasswordDialog(props) { ...@@ -286,4 +287,6 @@ export default function PasswordDialog(props) {
</Dialog> </Dialog>
</div> </div>
); );
} };
export default PasswordDialog;
...@@ -309,7 +309,6 @@ export default function Users(props) { ...@@ -309,7 +309,6 @@ export default function Users(props) {
targets={users} targets={users}
existingTargets={contacts} existingTargets={contacts}
addElementToTarget={addContactToUser} addElementToTarget={addContactToUser}
targetName={props.username}
type="user" type="user"
/> />
<Dialog <Dialog
......
...@@ -370,7 +370,6 @@ export default function EditGroup(props) { ...@@ -370,7 +370,6 @@ export default function EditGroup(props) {
targets={users} targets={users}
existingTargets={groupMembers} existingTargets={groupMembers}
addElementToTarget={addUserInGroup} addElementToTarget={addUserInGroup}
targetName={name}
type="user" type="user"
/> />
<GridContainer> <GridContainer>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment