mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-18 03:39:29 +00:00
layout responsivo 2ª parte
This commit is contained in:
ertprs
@@ -2,46 +2,46 @@ import React, { useState, useEffect } from "react";
|
||||
import Routes from "./routes";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
|
||||
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
|
||||
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
|
||||
import { ptBR } from "@material-ui/core/locale";
|
||||
|
||||
const App = () => {
|
||||
const [locale, setLocale] = useState();
|
||||
const [locale, setLocale] = useState();
|
||||
|
||||
const theme = createMuiTheme(
|
||||
{
|
||||
scrollbarStyles: {
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
primary: { main: "#2576d2" },
|
||||
},
|
||||
},
|
||||
locale
|
||||
);
|
||||
const theme = createTheme(
|
||||
{
|
||||
scrollbarStyles: {
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
primary: { main: "#2576d2" },
|
||||
},
|
||||
},
|
||||
locale
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const i18nlocale = localStorage.getItem("i18nextLng");
|
||||
const browserLocale =
|
||||
i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
|
||||
useEffect(() => {
|
||||
const i18nlocale = localStorage.getItem("i18nextLng");
|
||||
const browserLocale =
|
||||
i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
|
||||
|
||||
if (browserLocale === "ptBR") {
|
||||
setLocale(ptBR);
|
||||
}
|
||||
}, []);
|
||||
if (browserLocale === "ptBR") {
|
||||
setLocale(ptBR);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Routes />
|
||||
</ThemeProvider>
|
||||
);
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Routes />
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -4,28 +4,28 @@ import React, { useState } from "react";
|
||||
import { GithubPicker } from "react-color";
|
||||
|
||||
const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
|
||||
const [selectedColor, setSelectedColor] = useState(currentColor);
|
||||
const [selectedColor, setSelectedColor] = useState(currentColor);
|
||||
|
||||
const handleChange = color => {
|
||||
setSelectedColor(color.hex);
|
||||
handleClose();
|
||||
};
|
||||
const handleChange = (color) => {
|
||||
setSelectedColor(color.hex);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
onClose={handleClose}
|
||||
aria-labelledby="simple-dialog-title"
|
||||
open={open}
|
||||
>
|
||||
<GithubPicker
|
||||
width={"100%"}
|
||||
triangle="hide"
|
||||
color={selectedColor}
|
||||
onChange={handleChange}
|
||||
onChangeComplete={color => onChange(color.hex)}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog
|
||||
onClose={handleClose}
|
||||
aria-labelledby="simple-dialog-title"
|
||||
open={open}
|
||||
>
|
||||
<GithubPicker
|
||||
width={"100%"}
|
||||
triangle="hide"
|
||||
color={selectedColor}
|
||||
onChange={handleChange}
|
||||
onChangeComplete={(color) => onChange(color.hex)}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorPicker;
|
||||
|
||||
@@ -3,29 +3,31 @@ import React from "react";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Container from "@material-ui/core/Container";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainContainer: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(2),
|
||||
height: `calc(100% - 48px)`,
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
mainContainer: {
|
||||
flex: 1,
|
||||
// padding: theme.spacing(2),
|
||||
// height: `calc(100% - 48px)`,
|
||||
padding: 0,
|
||||
height: "100%",
|
||||
},
|
||||
|
||||
contentWrapper: {
|
||||
height: "100%",
|
||||
overflowY: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
contentWrapper: {
|
||||
height: "100%",
|
||||
overflowY: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
}));
|
||||
|
||||
const MainContainer = ({ children }) => {
|
||||
const classes = useStyles();
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<Container className={classes.mainContainer}>
|
||||
<div className={classes.contentWrapper}>{children}</div>
|
||||
</Container>
|
||||
);
|
||||
return (
|
||||
<Container className={classes.mainContainer} maxWidth={false}>
|
||||
<div className={classes.contentWrapper}>{children}</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainContainer;
|
||||
|
||||
@@ -12,6 +12,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import { green } from "@material-ui/core/colors";
|
||||
import AttachFileIcon from "@material-ui/icons/AttachFile";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import MoreVert from "@material-ui/icons/MoreVert";
|
||||
import MoodIcon from "@material-ui/icons/Mood";
|
||||
import SendIcon from "@material-ui/icons/Send";
|
||||
import CancelIcon from "@material-ui/icons/Cancel";
|
||||
@@ -19,7 +20,13 @@ import ClearIcon from "@material-ui/icons/Clear";
|
||||
import MicIcon from "@material-ui/icons/Mic";
|
||||
import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
|
||||
import HighlightOffIcon from "@material-ui/icons/HighlightOff";
|
||||
import { FormControlLabel, Switch } from "@material-ui/core";
|
||||
import {
|
||||
FormControlLabel,
|
||||
Hidden,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Switch,
|
||||
} from "@material-ui/core";
|
||||
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
|
||||
|
||||
import { i18n } from "../../translate/i18n";
|
||||
@@ -39,6 +46,11 @@ const useStyles = makeStyles((theme) => ({
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
borderTop: "1px solid rgba(0, 0, 0, 0.12)",
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
},
|
||||
},
|
||||
|
||||
newMessageBox: {
|
||||
@@ -56,6 +68,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
display: "flex",
|
||||
borderRadius: 20,
|
||||
flex: 1,
|
||||
position: "relative",
|
||||
},
|
||||
|
||||
messageInput: {
|
||||
@@ -200,6 +213,7 @@ const MessageInput = ({ ticketStatus }) => {
|
||||
const [quickAnswers, setQuickAnswer] = useState([]);
|
||||
const [typeBar, setTypeBar] = useState(false);
|
||||
const inputRef = useRef();
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const { setReplyingMessage, replyingMessage } =
|
||||
useContext(ReplyMessageContext);
|
||||
const { user } = useContext(AuthContext);
|
||||
@@ -363,6 +377,14 @@ const MessageInput = ({ ticketStatus }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenMenuClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleMenuItemClick = (event) => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const renderReplyingMessage = (message) => {
|
||||
return (
|
||||
<div className={classes.replyginMsgWrapper}>
|
||||
@@ -429,60 +451,126 @@ const MessageInput = ({ ticketStatus }) => {
|
||||
<Paper square elevation={0} className={classes.mainWrapper}>
|
||||
{replyingMessage && renderReplyingMessage(replyingMessage)}
|
||||
<div className={classes.newMessageBox}>
|
||||
<IconButton
|
||||
aria-label="emojiPicker"
|
||||
component="span"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
onClick={(e) => setShowEmoji((prevState) => !prevState)}
|
||||
>
|
||||
<MoodIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
{showEmoji ? (
|
||||
<div className={classes.emojiBox}>
|
||||
<ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
|
||||
<Picker
|
||||
perLine={16}
|
||||
showPreview={false}
|
||||
showSkinTones={false}
|
||||
onSelect={handleAddEmoji}
|
||||
/>
|
||||
</ClickAwayListener>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<input
|
||||
multiple
|
||||
type="file"
|
||||
id="upload-button"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
className={classes.uploadInput}
|
||||
onChange={handleChangeMedias}
|
||||
/>
|
||||
<label htmlFor="upload-button">
|
||||
<Hidden only={["sm", "xs"]}>
|
||||
<IconButton
|
||||
aria-label="upload"
|
||||
aria-label="emojiPicker"
|
||||
component="span"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
onClick={(e) => setShowEmoji((prevState) => !prevState)}
|
||||
>
|
||||
<AttachFileIcon className={classes.sendMessageIcons} />
|
||||
<MoodIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
</label>
|
||||
<FormControlLabel
|
||||
style={{ marginRight: 7, color: "gray" }}
|
||||
label={i18n.t("messagesInput.signMessage")}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={signMessage}
|
||||
onChange={(e) => {
|
||||
setSignMessage(e.target.checked);
|
||||
}}
|
||||
name="showAllTickets"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{showEmoji ? (
|
||||
<div className={classes.emojiBox}>
|
||||
<ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
|
||||
<Picker
|
||||
perLine={16}
|
||||
showPreview={false}
|
||||
showSkinTones={false}
|
||||
onSelect={handleAddEmoji}
|
||||
/>
|
||||
</ClickAwayListener>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<input
|
||||
multiple
|
||||
type="file"
|
||||
id="upload-button"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
className={classes.uploadInput}
|
||||
onChange={handleChangeMedias}
|
||||
/>
|
||||
<label htmlFor="upload-button">
|
||||
<IconButton
|
||||
aria-label="upload"
|
||||
component="span"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
>
|
||||
<AttachFileIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
</label>
|
||||
<FormControlLabel
|
||||
style={{ marginRight: 7, color: "gray" }}
|
||||
label={i18n.t("messagesInput.signMessage")}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={signMessage}
|
||||
onChange={(e) => {
|
||||
setSignMessage(e.target.checked);
|
||||
}}
|
||||
name="showAllTickets"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Hidden>
|
||||
<Hidden only={["md", "lg", "xl"]}>
|
||||
<IconButton
|
||||
aria-controls="simple-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenMenuClick}
|
||||
>
|
||||
<MoreVert></MoreVert>
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="simple-menu"
|
||||
keepMounted
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuItemClick}
|
||||
>
|
||||
<MenuItem onClick={handleMenuItemClick}>
|
||||
<IconButton
|
||||
aria-label="emojiPicker"
|
||||
component="span"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
onClick={(e) => setShowEmoji((prevState) => !prevState)}
|
||||
>
|
||||
<MoodIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleMenuItemClick}>
|
||||
<input
|
||||
multiple
|
||||
type="file"
|
||||
id="upload-button"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
className={classes.uploadInput}
|
||||
onChange={handleChangeMedias}
|
||||
/>
|
||||
<label htmlFor="upload-button">
|
||||
<IconButton
|
||||
aria-label="upload"
|
||||
component="span"
|
||||
disabled={loading || recording || ticketStatus !== "open"}
|
||||
>
|
||||
<AttachFileIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
</label>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleMenuItemClick}>
|
||||
<FormControlLabel
|
||||
style={{ marginRight: 7, color: "gray" }}
|
||||
label={i18n.t("messagesInput.signMessage")}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={signMessage}
|
||||
onChange={(e) => {
|
||||
setSignMessage(e.target.checked);
|
||||
}}
|
||||
name="showAllTickets"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Hidden>
|
||||
<div className={classes.messageInputWrapper}>
|
||||
<InputBase
|
||||
inputRef={(input) => {
|
||||
|
||||
@@ -10,62 +10,62 @@ import { ReplyMessageContext } from "../../context/ReplyingMessage/ReplyingMessa
|
||||
import toastError from "../../errors/toastError";
|
||||
|
||||
const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
|
||||
const { setReplyingMessage } = useContext(ReplyMessageContext);
|
||||
const [confirmationOpen, setConfirmationOpen] = useState(false);
|
||||
const { setReplyingMessage } = useContext(ReplyMessageContext);
|
||||
const [confirmationOpen, setConfirmationOpen] = useState(false);
|
||||
|
||||
const handleDeleteMessage = async () => {
|
||||
try {
|
||||
await api.delete(`/messages/${message.id}`);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
const handleDeleteMessage = async () => {
|
||||
try {
|
||||
await api.delete(`/messages/${message.id}`);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
|
||||
const hanldeReplyMessage = () => {
|
||||
setReplyingMessage(message);
|
||||
handleClose();
|
||||
};
|
||||
const hanldeReplyMessage = () => {
|
||||
setReplyingMessage(message);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleOpenConfirmationModal = e => {
|
||||
setConfirmationOpen(true);
|
||||
handleClose();
|
||||
};
|
||||
const handleOpenConfirmationModal = (e) => {
|
||||
setConfirmationOpen(true);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
title={i18n.t("messageOptionsMenu.confirmationModal.title")}
|
||||
open={confirmationOpen}
|
||||
onClose={setConfirmationOpen}
|
||||
onConfirm={handleDeleteMessage}
|
||||
>
|
||||
{i18n.t("messageOptionsMenu.confirmationModal.message")}
|
||||
</ConfirmationModal>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
getContentAnchorEl={null}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={menuOpen}
|
||||
onClose={handleClose}
|
||||
>
|
||||
{message.fromMe && (
|
||||
<MenuItem onClick={handleOpenConfirmationModal}>
|
||||
{i18n.t("messageOptionsMenu.delete")}
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem onClick={hanldeReplyMessage}>
|
||||
{i18n.t("messageOptionsMenu.reply")}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
title={i18n.t("messageOptionsMenu.confirmationModal.title")}
|
||||
open={confirmationOpen}
|
||||
onClose={setConfirmationOpen}
|
||||
onConfirm={handleDeleteMessage}
|
||||
>
|
||||
{i18n.t("messageOptionsMenu.confirmationModal.message")}
|
||||
</ConfirmationModal>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
getContentAnchorEl={null}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={menuOpen}
|
||||
onClose={handleClose}
|
||||
>
|
||||
{message.fromMe && (
|
||||
<MenuItem onClick={handleOpenConfirmationModal}>
|
||||
{i18n.t("messageOptionsMenu.delete")}
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem onClick={hanldeReplyMessage}>
|
||||
{i18n.t("messageOptionsMenu.reply")}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageOptionsMenu;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -19,144 +19,167 @@ import toastError from "../../errors/toastError";
|
||||
|
||||
const drawerWidth = 320;
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
},
|
||||
|
||||
mainWrapper: {
|
||||
flex: 1,
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: "0",
|
||||
marginRight: -drawerWidth,
|
||||
transition: theme.transitions.create("margin", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
},
|
||||
ticketInfo: {
|
||||
maxWidth: "50%",
|
||||
flexBasis: "50%",
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
maxWidth: "80%",
|
||||
flexBasis: "80%",
|
||||
},
|
||||
},
|
||||
ticketActionButtons: {
|
||||
maxWidth: "50%",
|
||||
flexBasis: "50%",
|
||||
display: "flex",
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
maxWidth: "100%",
|
||||
flexBasis: "100%",
|
||||
marginBottom: "5px",
|
||||
},
|
||||
},
|
||||
|
||||
mainWrapperShift: {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
transition: theme.transitions.create("margin", {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
marginRight: 0,
|
||||
},
|
||||
mainWrapper: {
|
||||
flex: 1,
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: "0",
|
||||
marginRight: -drawerWidth,
|
||||
transition: theme.transitions.create("margin", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
},
|
||||
|
||||
mainWrapperShift: {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
transition: theme.transitions.create("margin", {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
marginRight: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
const Ticket = () => {
|
||||
const { ticketId } = useParams();
|
||||
const history = useHistory();
|
||||
const classes = useStyles();
|
||||
const { ticketId } = useParams();
|
||||
const history = useHistory();
|
||||
const classes = useStyles();
|
||||
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [contact, setContact] = useState({});
|
||||
const [ticket, setTicket] = useState({});
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [contact, setContact] = useState({});
|
||||
const [ticket, setTicket] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchTicket = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/tickets/" + ticketId);
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchTicket = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/tickets/" + ticketId);
|
||||
|
||||
setContact(data.contact);
|
||||
setTicket(data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
fetchTicket();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [ticketId, history]);
|
||||
setContact(data.contact);
|
||||
setTicket(data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
fetchTicket();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [ticketId, history]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.on("connect", () => socket.emit("joinChatBox", ticketId));
|
||||
socket.on("connect", () => socket.emit("joinChatBox", ticketId));
|
||||
|
||||
socket.on("ticket", data => {
|
||||
if (data.action === "update") {
|
||||
setTicket(data.ticket);
|
||||
}
|
||||
socket.on("ticket", (data) => {
|
||||
if (data.action === "update") {
|
||||
setTicket(data.ticket);
|
||||
}
|
||||
|
||||
if (data.action === "delete") {
|
||||
toast.success("Ticket deleted sucessfully.");
|
||||
history.push("/tickets");
|
||||
}
|
||||
});
|
||||
if (data.action === "delete") {
|
||||
toast.success("Ticket deleted sucessfully.");
|
||||
history.push("/tickets");
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("contact", data => {
|
||||
if (data.action === "update") {
|
||||
setContact(prevState => {
|
||||
if (prevState.id === data.contact?.id) {
|
||||
return { ...prevState, ...data.contact };
|
||||
}
|
||||
return prevState;
|
||||
});
|
||||
}
|
||||
});
|
||||
socket.on("contact", (data) => {
|
||||
if (data.action === "update") {
|
||||
setContact((prevState) => {
|
||||
if (prevState.id === data.contact?.id) {
|
||||
return { ...prevState, ...data.contact };
|
||||
}
|
||||
return prevState;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [ticketId, history]);
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [ticketId, history]);
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setDrawerOpen(true);
|
||||
};
|
||||
const handleDrawerOpen = () => {
|
||||
setDrawerOpen(true);
|
||||
};
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
setDrawerOpen(false);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setDrawerOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.root} id="drawer-container">
|
||||
<Paper
|
||||
variant="outlined"
|
||||
elevation={0}
|
||||
className={clsx(classes.mainWrapper, {
|
||||
[classes.mainWrapperShift]: drawerOpen,
|
||||
})}
|
||||
>
|
||||
<TicketHeader loading={loading}>
|
||||
<TicketInfo
|
||||
contact={contact}
|
||||
ticket={ticket}
|
||||
onClick={handleDrawerOpen}
|
||||
/>
|
||||
<TicketActionButtons ticket={ticket} />
|
||||
</TicketHeader>
|
||||
<ReplyMessageProvider>
|
||||
<MessagesList
|
||||
ticketId={ticketId}
|
||||
isGroup={ticket.isGroup}
|
||||
></MessagesList>
|
||||
<MessageInput ticketStatus={ticket.status} />
|
||||
</ReplyMessageProvider>
|
||||
</Paper>
|
||||
<ContactDrawer
|
||||
open={drawerOpen}
|
||||
handleDrawerClose={handleDrawerClose}
|
||||
contact={contact}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={classes.root} id="drawer-container">
|
||||
<Paper
|
||||
variant="outlined"
|
||||
elevation={0}
|
||||
className={clsx(classes.mainWrapper, {
|
||||
[classes.mainWrapperShift]: drawerOpen,
|
||||
})}
|
||||
>
|
||||
<TicketHeader loading={loading}>
|
||||
<div className={classes.ticketInfo}>
|
||||
<TicketInfo
|
||||
contact={contact}
|
||||
ticket={ticket}
|
||||
onClick={handleDrawerOpen}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.ticketActionButtons}>
|
||||
<TicketActionButtons ticket={ticket} />
|
||||
</div>
|
||||
</TicketHeader>
|
||||
<ReplyMessageProvider>
|
||||
<MessagesList
|
||||
ticketId={ticketId}
|
||||
isGroup={ticket.isGroup}
|
||||
></MessagesList>
|
||||
<MessageInput ticketStatus={ticket.status} />
|
||||
</ReplyMessageProvider>
|
||||
</Paper>
|
||||
<ContactDrawer
|
||||
open={drawerOpen}
|
||||
handleDrawerClose={handleDrawerClose}
|
||||
contact={contact}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ticket;
|
||||
|
||||
@@ -1,32 +1,44 @@
|
||||
import React from "react";
|
||||
|
||||
import { Card } from "@material-ui/core";
|
||||
import { Card, Button } from "@material-ui/core";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import TicketHeaderSkeleton from "../TicketHeaderSkeleton";
|
||||
import ArrowBackIos from "@material-ui/icons/ArrowBackIos";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
ticketHeader: {
|
||||
display: "flex",
|
||||
backgroundColor: "#eee",
|
||||
flex: "none",
|
||||
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
ticketHeader: {
|
||||
display: "flex",
|
||||
backgroundColor: "#eee",
|
||||
flex: "none",
|
||||
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const TicketHeader = ({ loading, children }) => {
|
||||
const classes = useStyles();
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
const handleBack = () => {
|
||||
history.push("/tickets");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
<TicketHeaderSkeleton />
|
||||
) : (
|
||||
<Card square className={classes.ticketHeader}>
|
||||
{children}
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
<TicketHeaderSkeleton />
|
||||
) : (
|
||||
<Card square className={classes.ticketHeader}>
|
||||
<Button color="primary" onClick={handleBack}>
|
||||
<ArrowBackIos />
|
||||
</Button>
|
||||
{children}
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketHeader;
|
||||
|
||||
@@ -22,215 +22,215 @@ import { Can } from "../Can";
|
||||
import TicketsQueueSelect from "../TicketsQueueSelect";
|
||||
import { Button } from "@material-ui/core";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
ticketsWrapper: {
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
ticketsWrapper: {
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
|
||||
tabsHeader: {
|
||||
flex: "none",
|
||||
backgroundColor: "#eee",
|
||||
},
|
||||
tabsHeader: {
|
||||
flex: "none",
|
||||
backgroundColor: "#eee",
|
||||
},
|
||||
|
||||
settingsIcon: {
|
||||
alignSelf: "center",
|
||||
marginLeft: "auto",
|
||||
padding: 8,
|
||||
},
|
||||
settingsIcon: {
|
||||
alignSelf: "center",
|
||||
marginLeft: "auto",
|
||||
padding: 8,
|
||||
},
|
||||
|
||||
tab: {
|
||||
minWidth: 120,
|
||||
width: 120,
|
||||
},
|
||||
tab: {
|
||||
minWidth: 120,
|
||||
width: 120,
|
||||
},
|
||||
|
||||
ticketOptionsBox: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
background: "#fafafa",
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
ticketOptionsBox: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
background: "#fafafa",
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
|
||||
serachInputWrapper: {
|
||||
flex: 1,
|
||||
background: "#fff",
|
||||
display: "flex",
|
||||
borderRadius: 40,
|
||||
padding: 4,
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
serachInputWrapper: {
|
||||
flex: 1,
|
||||
background: "#fff",
|
||||
display: "flex",
|
||||
borderRadius: 40,
|
||||
padding: 4,
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
|
||||
searchIcon: {
|
||||
color: "grey",
|
||||
marginLeft: 6,
|
||||
marginRight: 6,
|
||||
alignSelf: "center",
|
||||
},
|
||||
searchIcon: {
|
||||
color: "grey",
|
||||
marginLeft: 6,
|
||||
marginRight: 6,
|
||||
alignSelf: "center",
|
||||
},
|
||||
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
border: "none",
|
||||
borderRadius: 30,
|
||||
},
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
border: "none",
|
||||
borderRadius: 30,
|
||||
},
|
||||
}));
|
||||
|
||||
const TicketsManager = () => {
|
||||
const classes = useStyles();
|
||||
const classes = useStyles();
|
||||
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [tab, setTab] = useState("open");
|
||||
const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
|
||||
const [showAllTickets, setShowAllTickets] = useState(false);
|
||||
const searchInputRef = useRef();
|
||||
const { user } = useContext(AuthContext);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [tab, setTab] = useState("open");
|
||||
const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
|
||||
const [showAllTickets, setShowAllTickets] = useState(false);
|
||||
const searchInputRef = useRef();
|
||||
const { user } = useContext(AuthContext);
|
||||
|
||||
const userQueueIds = user.queues.map(q => q.id);
|
||||
const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
|
||||
const userQueueIds = user.queues.map((q) => q.id);
|
||||
const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
|
||||
|
||||
useEffect(() => {
|
||||
if (tab === "search") {
|
||||
searchInputRef.current.focus();
|
||||
}
|
||||
}, [tab]);
|
||||
useEffect(() => {
|
||||
if (tab === "search") {
|
||||
searchInputRef.current.focus();
|
||||
}
|
||||
}, [tab]);
|
||||
|
||||
let searchTimeout;
|
||||
let searchTimeout;
|
||||
|
||||
const handleSearch = e => {
|
||||
const searchedTerm = e.target.value.toLowerCase();
|
||||
const handleSearch = (e) => {
|
||||
const searchedTerm = e.target.value.toLowerCase();
|
||||
|
||||
clearTimeout(searchTimeout);
|
||||
clearTimeout(searchTimeout);
|
||||
|
||||
if (searchedTerm === "") {
|
||||
setSearchParam(searchedTerm);
|
||||
setTab("open");
|
||||
return;
|
||||
}
|
||||
if (searchedTerm === "") {
|
||||
setSearchParam(searchedTerm);
|
||||
setTab("open");
|
||||
return;
|
||||
}
|
||||
|
||||
searchTimeout = setTimeout(() => {
|
||||
setSearchParam(searchedTerm);
|
||||
}, 500);
|
||||
};
|
||||
searchTimeout = setTimeout(() => {
|
||||
setSearchParam(searchedTerm);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleChangeTab = (e, newValue) => {
|
||||
setTab(newValue);
|
||||
};
|
||||
const handleChangeTab = (e, newValue) => {
|
||||
setTab(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
|
||||
<NewTicketModal
|
||||
modalOpen={newTicketModalOpen}
|
||||
onClose={e => setNewTicketModalOpen(false)}
|
||||
/>
|
||||
<Paper elevation={0} square className={classes.tabsHeader}>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onChange={handleChangeTab}
|
||||
variant="fullWidth"
|
||||
indicatorColor="primary"
|
||||
textColor="primary"
|
||||
aria-label="icon label tabs example"
|
||||
>
|
||||
<Tab
|
||||
value={"open"}
|
||||
icon={<MoveToInboxIcon />}
|
||||
label={i18n.t("tickets.tabs.open.title")}
|
||||
classes={{ root: classes.tab }}
|
||||
/>
|
||||
<Tab
|
||||
value={"closed"}
|
||||
icon={<CheckBoxIcon />}
|
||||
label={i18n.t("tickets.tabs.closed.title")}
|
||||
classes={{ root: classes.tab }}
|
||||
/>
|
||||
<Tab
|
||||
value={"search"}
|
||||
icon={<SearchIcon />}
|
||||
label={i18n.t("tickets.tabs.search.title")}
|
||||
classes={{ root: classes.tab }}
|
||||
/>
|
||||
</Tabs>
|
||||
</Paper>
|
||||
<Paper square elevation={0} className={classes.ticketOptionsBox}>
|
||||
{tab === "search" ? (
|
||||
<div className={classes.serachInputWrapper}>
|
||||
<SearchIcon className={classes.searchIcon} />
|
||||
<InputBase
|
||||
className={classes.searchInput}
|
||||
inputRef={searchInputRef}
|
||||
placeholder={i18n.t("tickets.search.placeholder")}
|
||||
type="search"
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={() => setNewTicketModalOpen(true)}
|
||||
>
|
||||
{i18n.t("ticketsManager.buttons.newTicket")}
|
||||
</Button>
|
||||
<Can
|
||||
role={user.profile}
|
||||
perform="tickets-manager:showall"
|
||||
yes={() => (
|
||||
<FormControlLabel
|
||||
label={i18n.t("tickets.buttons.showAll")}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={showAllTickets}
|
||||
onChange={() =>
|
||||
setShowAllTickets(prevState => !prevState)
|
||||
}
|
||||
name="showAllTickets"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<TicketsQueueSelect
|
||||
style={{ marginLeft: 6 }}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
userQueues={user?.queues}
|
||||
onChange={values => setSelectedQueueIds(values)}
|
||||
/>
|
||||
</Paper>
|
||||
<TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
|
||||
<TicketsList
|
||||
status="open"
|
||||
showAll={showAllTickets}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
/>
|
||||
<TicketsList status="pending" selectedQueueIds={selectedQueueIds} />
|
||||
</TabPanel>
|
||||
<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
|
||||
<TicketsList
|
||||
status="closed"
|
||||
showAll={true}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
|
||||
<TicketsList
|
||||
searchParam={searchParam}
|
||||
showAll={true}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
/>
|
||||
</TabPanel>
|
||||
</Paper>
|
||||
);
|
||||
return (
|
||||
<Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
|
||||
<NewTicketModal
|
||||
modalOpen={newTicketModalOpen}
|
||||
onClose={(e) => setNewTicketModalOpen(false)}
|
||||
/>
|
||||
<Paper elevation={0} square className={classes.tabsHeader}>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onChange={handleChangeTab}
|
||||
variant="fullWidth"
|
||||
indicatorColor="primary"
|
||||
textColor="primary"
|
||||
aria-label="icon label tabs example"
|
||||
>
|
||||
<Tab
|
||||
value={"open"}
|
||||
icon={<MoveToInboxIcon />}
|
||||
label={i18n.t("tickets.tabs.open.title")}
|
||||
classes={{ root: classes.tab }}
|
||||
/>
|
||||
<Tab
|
||||
value={"closed"}
|
||||
icon={<CheckBoxIcon />}
|
||||
label={i18n.t("tickets.tabs.closed.title")}
|
||||
classes={{ root: classes.tab }}
|
||||
/>
|
||||
<Tab
|
||||
value={"search"}
|
||||
icon={<SearchIcon />}
|
||||
label={i18n.t("tickets.tabs.search.title")}
|
||||
classes={{ root: classes.tab }}
|
||||
/>
|
||||
</Tabs>
|
||||
</Paper>
|
||||
<Paper square elevation={0} className={classes.ticketOptionsBox}>
|
||||
{tab === "search" ? (
|
||||
<div className={classes.serachInputWrapper}>
|
||||
<SearchIcon className={classes.searchIcon} />
|
||||
<InputBase
|
||||
className={classes.searchInput}
|
||||
inputRef={searchInputRef}
|
||||
placeholder={i18n.t("tickets.search.placeholder")}
|
||||
type="search"
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={() => setNewTicketModalOpen(true)}
|
||||
>
|
||||
{i18n.t("ticketsManager.buttons.newTicket")}
|
||||
</Button>
|
||||
<Can
|
||||
role={user.profile}
|
||||
perform="tickets-manager:showall"
|
||||
yes={() => (
|
||||
<FormControlLabel
|
||||
label={i18n.t("tickets.buttons.showAll")}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={showAllTickets}
|
||||
onChange={() =>
|
||||
setShowAllTickets((prevState) => !prevState)
|
||||
}
|
||||
name="showAllTickets"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<TicketsQueueSelect
|
||||
style={{ marginLeft: 6 }}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
userQueues={user?.queues}
|
||||
onChange={(values) => setSelectedQueueIds(values)}
|
||||
/>
|
||||
</Paper>
|
||||
<TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
|
||||
<TicketsList
|
||||
status="open"
|
||||
showAll={showAllTickets}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
/>
|
||||
<TicketsList status="pending" selectedQueueIds={selectedQueueIds} />
|
||||
</TabPanel>
|
||||
<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
|
||||
<TicketsList
|
||||
status="closed"
|
||||
showAll={true}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
|
||||
<TicketsList
|
||||
searchParam={searchParam}
|
||||
showAll={true}
|
||||
selectedQueueIds={selectedQueueIds}
|
||||
/>
|
||||
</TabPanel>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketsManager;
|
||||
|
||||
@@ -36,314 +36,314 @@ import { AuthContext } from "../../context/Auth/AuthContext";
|
||||
import { Can } from "../../components/Can";
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === "LOAD_CONTACTS") {
|
||||
const contacts = action.payload;
|
||||
const newContacts = [];
|
||||
if (action.type === "LOAD_CONTACTS") {
|
||||
const contacts = action.payload;
|
||||
const newContacts = [];
|
||||
|
||||
contacts.forEach(contact => {
|
||||
const contactIndex = state.findIndex(c => c.id === contact.id);
|
||||
if (contactIndex !== -1) {
|
||||
state[contactIndex] = contact;
|
||||
} else {
|
||||
newContacts.push(contact);
|
||||
}
|
||||
});
|
||||
contacts.forEach((contact) => {
|
||||
const contactIndex = state.findIndex((c) => c.id === contact.id);
|
||||
if (contactIndex !== -1) {
|
||||
state[contactIndex] = contact;
|
||||
} else {
|
||||
newContacts.push(contact);
|
||||
}
|
||||
});
|
||||
|
||||
return [...state, ...newContacts];
|
||||
}
|
||||
return [...state, ...newContacts];
|
||||
}
|
||||
|
||||
if (action.type === "UPDATE_CONTACTS") {
|
||||
const contact = action.payload;
|
||||
const contactIndex = state.findIndex(c => c.id === contact.id);
|
||||
if (action.type === "UPDATE_CONTACTS") {
|
||||
const contact = action.payload;
|
||||
const contactIndex = state.findIndex((c) => c.id === contact.id);
|
||||
|
||||
if (contactIndex !== -1) {
|
||||
state[contactIndex] = contact;
|
||||
return [...state];
|
||||
} else {
|
||||
return [contact, ...state];
|
||||
}
|
||||
}
|
||||
if (contactIndex !== -1) {
|
||||
state[contactIndex] = contact;
|
||||
return [...state];
|
||||
} else {
|
||||
return [contact, ...state];
|
||||
}
|
||||
}
|
||||
|
||||
if (action.type === "DELETE_CONTACT") {
|
||||
const contactId = action.payload;
|
||||
if (action.type === "DELETE_CONTACT") {
|
||||
const contactId = action.payload;
|
||||
|
||||
const contactIndex = state.findIndex(c => c.id === contactId);
|
||||
if (contactIndex !== -1) {
|
||||
state.splice(contactIndex, 1);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
const contactIndex = state.findIndex((c) => c.id === contactId);
|
||||
if (contactIndex !== -1) {
|
||||
state.splice(contactIndex, 1);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
|
||||
if (action.type === "RESET") {
|
||||
return [];
|
||||
}
|
||||
if (action.type === "RESET") {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
}));
|
||||
|
||||
const Contacts = () => {
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
const { user } = useContext(AuthContext);
|
||||
const { user } = useContext(AuthContext);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [contacts, dispatch] = useReducer(reducer, []);
|
||||
const [selectedContactId, setSelectedContactId] = useState(null);
|
||||
const [contactModalOpen, setContactModalOpen] = useState(false);
|
||||
const [deletingContact, setDeletingContact] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [contacts, dispatch] = useReducer(reducer, []);
|
||||
const [selectedContactId, setSelectedContactId] = useState(null);
|
||||
const [contactModalOpen, setContactModalOpen] = useState(false);
|
||||
const [deletingContact, setDeletingContact] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({ type: "RESET" });
|
||||
setPageNumber(1);
|
||||
}, [searchParam]);
|
||||
useEffect(() => {
|
||||
dispatch({ type: "RESET" });
|
||||
setPageNumber(1);
|
||||
}, [searchParam]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/contacts/", {
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
|
||||
setHasMore(data.hasMore);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
fetchContacts();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, pageNumber]);
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/contacts/", {
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
|
||||
setHasMore(data.hasMore);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
fetchContacts();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, pageNumber]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.on("contact", data => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
|
||||
}
|
||||
socket.on("contact", (data) => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
|
||||
}
|
||||
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
|
||||
}
|
||||
});
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSearch = event => {
|
||||
setSearchParam(event.target.value.toLowerCase());
|
||||
};
|
||||
const handleSearch = (event) => {
|
||||
setSearchParam(event.target.value.toLowerCase());
|
||||
};
|
||||
|
||||
const handleOpenContactModal = () => {
|
||||
setSelectedContactId(null);
|
||||
setContactModalOpen(true);
|
||||
};
|
||||
const handleOpenContactModal = () => {
|
||||
setSelectedContactId(null);
|
||||
setContactModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseContactModal = () => {
|
||||
setSelectedContactId(null);
|
||||
setContactModalOpen(false);
|
||||
};
|
||||
const handleCloseContactModal = () => {
|
||||
setSelectedContactId(null);
|
||||
setContactModalOpen(false);
|
||||
};
|
||||
|
||||
const handleSaveTicket = async contactId => {
|
||||
if (!contactId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data: ticket } = await api.post("/tickets", {
|
||||
contactId: contactId,
|
||||
userId: user?.id,
|
||||
status: "open",
|
||||
});
|
||||
history.push(`/tickets/${ticket.id}`);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
const handleSaveTicket = async (contactId) => {
|
||||
if (!contactId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data: ticket } = await api.post("/tickets", {
|
||||
contactId: contactId,
|
||||
userId: user?.id,
|
||||
status: "open",
|
||||
});
|
||||
history.push(`/tickets/${ticket.id}`);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const hadleEditContact = contactId => {
|
||||
setSelectedContactId(contactId);
|
||||
setContactModalOpen(true);
|
||||
};
|
||||
const hadleEditContact = (contactId) => {
|
||||
setSelectedContactId(contactId);
|
||||
setContactModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteContact = async contactId => {
|
||||
try {
|
||||
await api.delete(`/contacts/${contactId}`);
|
||||
toast.success(i18n.t("contacts.toasts.deleted"));
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setDeletingContact(null);
|
||||
setSearchParam("");
|
||||
setPageNumber(1);
|
||||
};
|
||||
const handleDeleteContact = async (contactId) => {
|
||||
try {
|
||||
await api.delete(`/contacts/${contactId}`);
|
||||
toast.success(i18n.t("contacts.toasts.deleted"));
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setDeletingContact(null);
|
||||
setSearchParam("");
|
||||
setPageNumber(1);
|
||||
};
|
||||
|
||||
const handleimportContact = async () => {
|
||||
try {
|
||||
await api.post("/contacts/import");
|
||||
history.go(0);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
const handleimportContact = async () => {
|
||||
try {
|
||||
await api.post("/contacts/import");
|
||||
history.go(0);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
setPageNumber(prevState => prevState + 1);
|
||||
};
|
||||
const loadMore = () => {
|
||||
setPageNumber((prevState) => prevState + 1);
|
||||
};
|
||||
|
||||
const handleScroll = e => {
|
||||
if (!hasMore || loading) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
if (!hasMore || loading) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MainContainer className={classes.mainContainer}>
|
||||
<ContactModal
|
||||
open={contactModalOpen}
|
||||
onClose={handleCloseContactModal}
|
||||
aria-labelledby="form-dialog-title"
|
||||
contactId={selectedContactId}
|
||||
></ContactModal>
|
||||
<ConfirmationModal
|
||||
title={
|
||||
deletingContact
|
||||
? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
|
||||
deletingContact.name
|
||||
}?`
|
||||
: `${i18n.t("contacts.confirmationModal.importTitlte")}`
|
||||
}
|
||||
open={confirmOpen}
|
||||
onClose={setConfirmOpen}
|
||||
onConfirm={e =>
|
||||
deletingContact
|
||||
? handleDeleteContact(deletingContact.id)
|
||||
: handleimportContact()
|
||||
}
|
||||
>
|
||||
{deletingContact
|
||||
? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
|
||||
: `${i18n.t("contacts.confirmationModal.importMessage")}`}
|
||||
</ConfirmationModal>
|
||||
<MainHeader>
|
||||
<Title>{i18n.t("contacts.title")}</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<TextField
|
||||
placeholder={i18n.t("contacts.searchPlaceholder")}
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={e => setConfirmOpen(true)}
|
||||
>
|
||||
{i18n.t("contacts.buttons.import")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenContactModal}
|
||||
>
|
||||
{i18n.t("contacts.buttons.add")}
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper
|
||||
className={classes.mainPaper}
|
||||
variant="outlined"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox" />
|
||||
<TableCell>{i18n.t("contacts.table.name")}</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("contacts.table.whatsapp")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("contacts.table.email")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("contacts.table.actions")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<>
|
||||
{contacts.map(contact => (
|
||||
<TableRow key={contact.id}>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
{<Avatar src={contact.profilePicUrl} />}
|
||||
</TableCell>
|
||||
<TableCell>{contact.name}</TableCell>
|
||||
<TableCell align="center">{contact.number}</TableCell>
|
||||
<TableCell align="center">{contact.email}</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleSaveTicket(contact.id)}
|
||||
>
|
||||
<WhatsAppIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => hadleEditContact(contact.id)}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<Can
|
||||
role={user.profile}
|
||||
perform="contacts-page:deleteContact"
|
||||
yes={() => (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={e => {
|
||||
setConfirmOpen(true);
|
||||
setDeletingContact(contact);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{loading && <TableRowSkeleton avatar columns={3} />}
|
||||
</>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
return (
|
||||
<MainContainer className={classes.mainContainer}>
|
||||
<ContactModal
|
||||
open={contactModalOpen}
|
||||
onClose={handleCloseContactModal}
|
||||
aria-labelledby="form-dialog-title"
|
||||
contactId={selectedContactId}
|
||||
></ContactModal>
|
||||
<ConfirmationModal
|
||||
title={
|
||||
deletingContact
|
||||
? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
|
||||
deletingContact.name
|
||||
}?`
|
||||
: `${i18n.t("contacts.confirmationModal.importTitlte")}`
|
||||
}
|
||||
open={confirmOpen}
|
||||
onClose={setConfirmOpen}
|
||||
onConfirm={(e) =>
|
||||
deletingContact
|
||||
? handleDeleteContact(deletingContact.id)
|
||||
: handleimportContact()
|
||||
}
|
||||
>
|
||||
{deletingContact
|
||||
? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
|
||||
: `${i18n.t("contacts.confirmationModal.importMessage")}`}
|
||||
</ConfirmationModal>
|
||||
<MainHeader>
|
||||
<Title>{i18n.t("contacts.title")}</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<TextField
|
||||
placeholder={i18n.t("contacts.searchPlaceholder")}
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={(e) => setConfirmOpen(true)}
|
||||
>
|
||||
{i18n.t("contacts.buttons.import")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenContactModal}
|
||||
>
|
||||
{i18n.t("contacts.buttons.add")}
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper
|
||||
className={classes.mainPaper}
|
||||
variant="outlined"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox" />
|
||||
<TableCell>{i18n.t("contacts.table.name")}</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("contacts.table.whatsapp")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("contacts.table.email")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("contacts.table.actions")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<>
|
||||
{contacts.map((contact) => (
|
||||
<TableRow key={contact.id}>
|
||||
<TableCell style={{ paddingRight: 0 }}>
|
||||
{<Avatar src={contact.profilePicUrl} />}
|
||||
</TableCell>
|
||||
<TableCell>{contact.name}</TableCell>
|
||||
<TableCell align="center">{contact.number}</TableCell>
|
||||
<TableCell align="center">{contact.email}</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleSaveTicket(contact.id)}
|
||||
>
|
||||
<WhatsAppIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => hadleEditContact(contact.id)}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<Can
|
||||
role={user.profile}
|
||||
perform="contacts-page:deleteContact"
|
||||
yes={() => (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
setConfirmOpen(true);
|
||||
setDeletingContact(contact);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{loading && <TableRowSkeleton avatar columns={3} />}
|
||||
</>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contacts;
|
||||
|
||||
@@ -30,105 +30,105 @@ import { AuthContext } from "../../context/Auth/AuthContext";
|
||||
// );
|
||||
// };
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
paper: {
|
||||
marginTop: theme.spacing(8),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
},
|
||||
avatar: {
|
||||
margin: theme.spacing(1),
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
form: {
|
||||
width: "100%", // Fix IE 11 issue.
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
submit: {
|
||||
margin: theme.spacing(3, 0, 2),
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
paper: {
|
||||
marginTop: theme.spacing(8),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
},
|
||||
avatar: {
|
||||
margin: theme.spacing(1),
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
form: {
|
||||
width: "100%", // Fix IE 11 issue.
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
submit: {
|
||||
margin: theme.spacing(3, 0, 2),
|
||||
},
|
||||
}));
|
||||
|
||||
const Login = () => {
|
||||
const classes = useStyles();
|
||||
const classes = useStyles();
|
||||
|
||||
const [user, setUser] = useState({ email: "", password: "" });
|
||||
const [user, setUser] = useState({ email: "", password: "" });
|
||||
|
||||
const { handleLogin } = useContext(AuthContext);
|
||||
const { handleLogin } = useContext(AuthContext);
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
const handleChangeInput = (e) => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handlSubmit = e => {
|
||||
e.preventDefault();
|
||||
handleLogin(user);
|
||||
};
|
||||
const handlSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
handleLogin(user);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<CssBaseline />
|
||||
<div className={classes.paper}>
|
||||
<Avatar className={classes.avatar}>
|
||||
<LockOutlinedIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
{i18n.t("login.title")}
|
||||
</Typography>
|
||||
<form className={classes.form} noValidate onSubmit={handlSubmit}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label={i18n.t("login.form.email")}
|
||||
name="email"
|
||||
value={user.email}
|
||||
onChange={handleChangeInput}
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label={i18n.t("login.form.password")}
|
||||
type="password"
|
||||
id="password"
|
||||
value={user.password}
|
||||
onChange={handleChangeInput}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
>
|
||||
{i18n.t("login.buttons.submit")}
|
||||
</Button>
|
||||
<Grid container>
|
||||
<Grid item>
|
||||
<Link
|
||||
href="#"
|
||||
variant="body2"
|
||||
component={RouterLink}
|
||||
to="/signup"
|
||||
>
|
||||
{i18n.t("login.buttons.register")}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</div>
|
||||
<Box mt={8}>{/* <Copyright /> */}</Box>
|
||||
</Container>
|
||||
);
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<CssBaseline />
|
||||
<div className={classes.paper}>
|
||||
<Avatar className={classes.avatar}>
|
||||
<LockOutlinedIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
{i18n.t("login.title")}
|
||||
</Typography>
|
||||
<form className={classes.form} noValidate onSubmit={handlSubmit}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label={i18n.t("login.form.email")}
|
||||
name="email"
|
||||
value={user.email}
|
||||
onChange={handleChangeInput}
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label={i18n.t("login.form.password")}
|
||||
type="password"
|
||||
id="password"
|
||||
value={user.password}
|
||||
onChange={handleChangeInput}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
>
|
||||
{i18n.t("login.buttons.submit")}
|
||||
</Button>
|
||||
<Grid container>
|
||||
<Grid item>
|
||||
<Link
|
||||
href="#"
|
||||
variant="body2"
|
||||
component={RouterLink}
|
||||
to="/signup"
|
||||
>
|
||||
{i18n.t("login.buttons.register")}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</div>
|
||||
<Box mt={8}>{/* <Copyright /> */}</Box>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
|
||||
@@ -3,16 +3,16 @@ import React, { useEffect, useReducer, useState } from "react";
|
||||
import openSocket from "socket.io-client";
|
||||
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
makeStyles,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
Button,
|
||||
IconButton,
|
||||
makeStyles,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import MainContainer from "../../components/MainContainer";
|
||||
@@ -28,241 +28,241 @@ import QueueModal from "../../components/QueueModal";
|
||||
import { toast } from "react-toastify";
|
||||
import ConfirmationModal from "../../components/ConfirmationModal";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
customTableCell: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
customTableCell: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
}));
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === "LOAD_QUEUES") {
|
||||
const queues = action.payload;
|
||||
const newQueues = [];
|
||||
if (action.type === "LOAD_QUEUES") {
|
||||
const queues = action.payload;
|
||||
const newQueues = [];
|
||||
|
||||
queues.forEach(queue => {
|
||||
const queueIndex = state.findIndex(q => q.id === queue.id);
|
||||
if (queueIndex !== -1) {
|
||||
state[queueIndex] = queue;
|
||||
} else {
|
||||
newQueues.push(queue);
|
||||
}
|
||||
});
|
||||
queues.forEach((queue) => {
|
||||
const queueIndex = state.findIndex((q) => q.id === queue.id);
|
||||
if (queueIndex !== -1) {
|
||||
state[queueIndex] = queue;
|
||||
} else {
|
||||
newQueues.push(queue);
|
||||
}
|
||||
});
|
||||
|
||||
return [...state, ...newQueues];
|
||||
}
|
||||
return [...state, ...newQueues];
|
||||
}
|
||||
|
||||
if (action.type === "UPDATE_QUEUES") {
|
||||
const queue = action.payload;
|
||||
const queueIndex = state.findIndex(u => u.id === queue.id);
|
||||
if (action.type === "UPDATE_QUEUES") {
|
||||
const queue = action.payload;
|
||||
const queueIndex = state.findIndex((u) => u.id === queue.id);
|
||||
|
||||
if (queueIndex !== -1) {
|
||||
state[queueIndex] = queue;
|
||||
return [...state];
|
||||
} else {
|
||||
return [queue, ...state];
|
||||
}
|
||||
}
|
||||
if (queueIndex !== -1) {
|
||||
state[queueIndex] = queue;
|
||||
return [...state];
|
||||
} else {
|
||||
return [queue, ...state];
|
||||
}
|
||||
}
|
||||
|
||||
if (action.type === "DELETE_QUEUE") {
|
||||
const queueId = action.payload;
|
||||
const queueIndex = state.findIndex(q => q.id === queueId);
|
||||
if (queueIndex !== -1) {
|
||||
state.splice(queueIndex, 1);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
if (action.type === "DELETE_QUEUE") {
|
||||
const queueId = action.payload;
|
||||
const queueIndex = state.findIndex((q) => q.id === queueId);
|
||||
if (queueIndex !== -1) {
|
||||
state.splice(queueIndex, 1);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
|
||||
if (action.type === "RESET") {
|
||||
return [];
|
||||
}
|
||||
if (action.type === "RESET") {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const Queues = () => {
|
||||
const classes = useStyles();
|
||||
const classes = useStyles();
|
||||
|
||||
const [queues, dispatch] = useReducer(reducer, []);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [queues, dispatch] = useReducer(reducer, []);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [queueModalOpen, setQueueModalOpen] = useState(false);
|
||||
const [selectedQueue, setSelectedQueue] = useState(null);
|
||||
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
|
||||
const [queueModalOpen, setQueueModalOpen] = useState(false);
|
||||
const [selectedQueue, setSelectedQueue] = useState(null);
|
||||
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await api.get("/queue");
|
||||
dispatch({ type: "LOAD_QUEUES", payload: data });
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await api.get("/queue");
|
||||
dispatch({ type: "LOAD_QUEUES", payload: data });
|
||||
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.on("queue", data => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
|
||||
}
|
||||
socket.on("queue", (data) => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
|
||||
}
|
||||
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_QUEUE", payload: data.queueId });
|
||||
}
|
||||
});
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_QUEUE", payload: data.queueId });
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleOpenQueueModal = () => {
|
||||
setQueueModalOpen(true);
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
const handleOpenQueueModal = () => {
|
||||
setQueueModalOpen(true);
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
|
||||
const handleCloseQueueModal = () => {
|
||||
setQueueModalOpen(false);
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
const handleCloseQueueModal = () => {
|
||||
setQueueModalOpen(false);
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
|
||||
const handleEditQueue = queue => {
|
||||
setSelectedQueue(queue);
|
||||
setQueueModalOpen(true);
|
||||
};
|
||||
const handleEditQueue = (queue) => {
|
||||
setSelectedQueue(queue);
|
||||
setQueueModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseConfirmationModal = () => {
|
||||
setConfirmModalOpen(false);
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
const handleCloseConfirmationModal = () => {
|
||||
setConfirmModalOpen(false);
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
|
||||
const handleDeleteQueue = async queueId => {
|
||||
try {
|
||||
await api.delete(`/queue/${queueId}`);
|
||||
toast.success(i18n.t("Queue deleted successfully!"));
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
const handleDeleteQueue = async (queueId) => {
|
||||
try {
|
||||
await api.delete(`/queue/${queueId}`);
|
||||
toast.success(i18n.t("Queue deleted successfully!"));
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setSelectedQueue(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<MainContainer>
|
||||
<ConfirmationModal
|
||||
title={
|
||||
selectedQueue &&
|
||||
`${i18n.t("queues.confirmationModal.deleteTitle")} ${
|
||||
selectedQueue.name
|
||||
}?`
|
||||
}
|
||||
open={confirmModalOpen}
|
||||
onClose={handleCloseConfirmationModal}
|
||||
onConfirm={() => handleDeleteQueue(selectedQueue.id)}
|
||||
>
|
||||
{i18n.t("queues.confirmationModal.deleteMessage")}
|
||||
</ConfirmationModal>
|
||||
<QueueModal
|
||||
open={queueModalOpen}
|
||||
onClose={handleCloseQueueModal}
|
||||
queueId={selectedQueue?.id}
|
||||
/>
|
||||
<MainHeader>
|
||||
<Title>{i18n.t("queues.title")}</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenQueueModal}
|
||||
>
|
||||
{i18n.t("queues.buttons.add")}
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper className={classes.mainPaper} variant="outlined">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.name")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.color")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.greeting")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.actions")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<>
|
||||
{queues.map(queue => (
|
||||
<TableRow key={queue.id}>
|
||||
<TableCell align="center">{queue.name}</TableCell>
|
||||
<TableCell align="center">
|
||||
<div className={classes.customTableCell}>
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: queue.color,
|
||||
width: 60,
|
||||
height: 20,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<div className={classes.customTableCell}>
|
||||
<Typography
|
||||
style={{ width: 300, align: "center" }}
|
||||
noWrap
|
||||
variant="body2"
|
||||
>
|
||||
{queue.greetingMessage}
|
||||
</Typography>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleEditQueue(queue)}
|
||||
>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
return (
|
||||
<MainContainer>
|
||||
<ConfirmationModal
|
||||
title={
|
||||
selectedQueue &&
|
||||
`${i18n.t("queues.confirmationModal.deleteTitle")} ${
|
||||
selectedQueue.name
|
||||
}?`
|
||||
}
|
||||
open={confirmModalOpen}
|
||||
onClose={handleCloseConfirmationModal}
|
||||
onConfirm={() => handleDeleteQueue(selectedQueue.id)}
|
||||
>
|
||||
{i18n.t("queues.confirmationModal.deleteMessage")}
|
||||
</ConfirmationModal>
|
||||
<QueueModal
|
||||
open={queueModalOpen}
|
||||
onClose={handleCloseQueueModal}
|
||||
queueId={selectedQueue?.id}
|
||||
/>
|
||||
<MainHeader>
|
||||
<Title>{i18n.t("queues.title")}</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenQueueModal}
|
||||
>
|
||||
{i18n.t("queues.buttons.add")}
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper className={classes.mainPaper} variant="outlined">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.name")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.color")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.greeting")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("queues.table.actions")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<>
|
||||
{queues.map((queue) => (
|
||||
<TableRow key={queue.id}>
|
||||
<TableCell align="center">{queue.name}</TableCell>
|
||||
<TableCell align="center">
|
||||
<div className={classes.customTableCell}>
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: queue.color,
|
||||
width: 60,
|
||||
height: 20,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<div className={classes.customTableCell}>
|
||||
<Typography
|
||||
style={{ width: 300, align: "center" }}
|
||||
noWrap
|
||||
variant="body2"
|
||||
>
|
||||
{queue.greetingMessage}
|
||||
</Typography>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleEditQueue(queue)}
|
||||
>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setSelectedQueue(queue);
|
||||
setConfirmModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{loading && <TableRowSkeleton columns={4} />}
|
||||
</>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setSelectedQueue(queue);
|
||||
setConfirmModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{loading && <TableRowSkeleton columns={4} />}
|
||||
</>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Queues;
|
||||
|
||||
@@ -8,69 +8,98 @@ import TicketsManager from "../../components/TicketsManager/";
|
||||
import Ticket from "../../components/Ticket/";
|
||||
|
||||
import { i18n } from "../../translate/i18n";
|
||||
import Hidden from "@material-ui/core/Hidden";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
chatContainer: {
|
||||
flex: 1,
|
||||
// backgroundColor: "#eee",
|
||||
padding: theme.spacing(4),
|
||||
height: `calc(100% - 48px)`,
|
||||
overflowY: "hidden",
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
chatContainer: {
|
||||
flex: 1,
|
||||
// // backgroundColor: "#eee",
|
||||
// padding: theme.spacing(4),
|
||||
height: `calc(100% - 48px)`,
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
chatPapper: {
|
||||
// backgroundColor: "red",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
},
|
||||
chatPapper: {
|
||||
// backgroundColor: "red",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
},
|
||||
|
||||
contactsWrapper: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflowY: "hidden",
|
||||
},
|
||||
messagessWrapper: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
},
|
||||
welcomeMsg: {
|
||||
backgroundColor: "#eee",
|
||||
display: "flex",
|
||||
justifyContent: "space-evenly",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
textAlign: "center",
|
||||
},
|
||||
contactsWrapper: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflowY: "hidden",
|
||||
},
|
||||
contactsWrapperSmall: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflowY: "hidden",
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
display: "none",
|
||||
},
|
||||
},
|
||||
messagessWrapper: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
},
|
||||
welcomeMsg: {
|
||||
backgroundColor: "#eee",
|
||||
display: "flex",
|
||||
justifyContent: "space-evenly",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
textAlign: "center",
|
||||
borderRadius: 0,
|
||||
},
|
||||
ticketsManager: {},
|
||||
ticketsManagerClosed: {
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
display: "none",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const Chat = () => {
|
||||
const classes = useStyles();
|
||||
const { ticketId } = useParams();
|
||||
const classes = useStyles();
|
||||
const { ticketId } = useParams();
|
||||
|
||||
return (
|
||||
<div className={classes.chatContainer}>
|
||||
<div className={classes.chatPapper}>
|
||||
<Grid container spacing={0}>
|
||||
<Grid item xs={4} className={classes.contactsWrapper}>
|
||||
<TicketsManager />
|
||||
</Grid>
|
||||
<Grid item xs={8} className={classes.messagessWrapper}>
|
||||
{ticketId ? (
|
||||
<>
|
||||
<Ticket />
|
||||
</>
|
||||
) : (
|
||||
<Paper square variant="outlined" className={classes.welcomeMsg}>
|
||||
<span>{i18n.t("chat.noTicketMessage")}</span>
|
||||
</Paper>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={classes.chatContainer}>
|
||||
<div className={classes.chatPapper}>
|
||||
<Grid container spacing={0}>
|
||||
{/* <Grid item xs={4} className={classes.contactsWrapper}> */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={4}
|
||||
className={
|
||||
ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
|
||||
}
|
||||
>
|
||||
<TicketsManager />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={8} className={classes.messagessWrapper}>
|
||||
{/* <Grid item xs={8} className={classes.messagessWrapper}> */}
|
||||
{ticketId ? (
|
||||
<>
|
||||
<Ticket />
|
||||
</>
|
||||
) : (
|
||||
<Hidden only={["sm", "xs"]}>
|
||||
<Paper className={classes.welcomeMsg}>
|
||||
{/* <Paper square variant="outlined" className={classes.welcomeMsg}> */}
|
||||
<span>{i18n.t("chat.noTicketMessage")}</span>
|
||||
</Paper>
|
||||
</Hidden>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chat;
|
||||
|
||||
@@ -31,257 +31,257 @@ import ConfirmationModal from "../../components/ConfirmationModal";
|
||||
import toastError from "../../errors/toastError";
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === "LOAD_USERS") {
|
||||
const users = action.payload;
|
||||
const newUsers = [];
|
||||
if (action.type === "LOAD_USERS") {
|
||||
const users = action.payload;
|
||||
const newUsers = [];
|
||||
|
||||
users.forEach(user => {
|
||||
const userIndex = state.findIndex(u => u.id === user.id);
|
||||
if (userIndex !== -1) {
|
||||
state[userIndex] = user;
|
||||
} else {
|
||||
newUsers.push(user);
|
||||
}
|
||||
});
|
||||
users.forEach((user) => {
|
||||
const userIndex = state.findIndex((u) => u.id === user.id);
|
||||
if (userIndex !== -1) {
|
||||
state[userIndex] = user;
|
||||
} else {
|
||||
newUsers.push(user);
|
||||
}
|
||||
});
|
||||
|
||||
return [...state, ...newUsers];
|
||||
}
|
||||
return [...state, ...newUsers];
|
||||
}
|
||||
|
||||
if (action.type === "UPDATE_USERS") {
|
||||
const user = action.payload;
|
||||
const userIndex = state.findIndex(u => u.id === user.id);
|
||||
if (action.type === "UPDATE_USERS") {
|
||||
const user = action.payload;
|
||||
const userIndex = state.findIndex((u) => u.id === user.id);
|
||||
|
||||
if (userIndex !== -1) {
|
||||
state[userIndex] = user;
|
||||
return [...state];
|
||||
} else {
|
||||
return [user, ...state];
|
||||
}
|
||||
}
|
||||
if (userIndex !== -1) {
|
||||
state[userIndex] = user;
|
||||
return [...state];
|
||||
} else {
|
||||
return [user, ...state];
|
||||
}
|
||||
}
|
||||
|
||||
if (action.type === "DELETE_USER") {
|
||||
const userId = action.payload;
|
||||
if (action.type === "DELETE_USER") {
|
||||
const userId = action.payload;
|
||||
|
||||
const userIndex = state.findIndex(u => u.id === userId);
|
||||
if (userIndex !== -1) {
|
||||
state.splice(userIndex, 1);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
const userIndex = state.findIndex((u) => u.id === userId);
|
||||
if (userIndex !== -1) {
|
||||
state.splice(userIndex, 1);
|
||||
}
|
||||
return [...state];
|
||||
}
|
||||
|
||||
if (action.type === "RESET") {
|
||||
return [];
|
||||
}
|
||||
if (action.type === "RESET") {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
mainPaper: {
|
||||
flex: 1,
|
||||
padding: theme.spacing(1),
|
||||
overflowY: "scroll",
|
||||
...theme.scrollbarStyles,
|
||||
},
|
||||
}));
|
||||
|
||||
const Users = () => {
|
||||
const classes = useStyles();
|
||||
const classes = useStyles();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
const [deletingUser, setDeletingUser] = useState(null);
|
||||
const [userModalOpen, setUserModalOpen] = useState(false);
|
||||
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [users, dispatch] = useReducer(reducer, []);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
const [deletingUser, setDeletingUser] = useState(null);
|
||||
const [userModalOpen, setUserModalOpen] = useState(false);
|
||||
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [users, dispatch] = useReducer(reducer, []);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({ type: "RESET" });
|
||||
setPageNumber(1);
|
||||
}, [searchParam]);
|
||||
useEffect(() => {
|
||||
dispatch({ type: "RESET" });
|
||||
setPageNumber(1);
|
||||
}, [searchParam]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/users/", {
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
dispatch({ type: "LOAD_USERS", payload: data.users });
|
||||
setHasMore(data.hasMore);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
fetchUsers();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, pageNumber]);
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/users/", {
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
dispatch({ type: "LOAD_USERS", payload: data.users });
|
||||
setHasMore(data.hasMore);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
fetchUsers();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, pageNumber]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.on("user", data => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
dispatch({ type: "UPDATE_USERS", payload: data.user });
|
||||
}
|
||||
socket.on("user", (data) => {
|
||||
if (data.action === "update" || data.action === "create") {
|
||||
dispatch({ type: "UPDATE_USERS", payload: data.user });
|
||||
}
|
||||
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_USER", payload: +data.userId });
|
||||
}
|
||||
});
|
||||
if (data.action === "delete") {
|
||||
dispatch({ type: "DELETE_USER", payload: +data.userId });
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleOpenUserModal = () => {
|
||||
setSelectedUser(null);
|
||||
setUserModalOpen(true);
|
||||
};
|
||||
const handleOpenUserModal = () => {
|
||||
setSelectedUser(null);
|
||||
setUserModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseUserModal = () => {
|
||||
setSelectedUser(null);
|
||||
setUserModalOpen(false);
|
||||
};
|
||||
const handleCloseUserModal = () => {
|
||||
setSelectedUser(null);
|
||||
setUserModalOpen(false);
|
||||
};
|
||||
|
||||
const handleSearch = event => {
|
||||
setSearchParam(event.target.value.toLowerCase());
|
||||
};
|
||||
const handleSearch = (event) => {
|
||||
setSearchParam(event.target.value.toLowerCase());
|
||||
};
|
||||
|
||||
const handleEditUser = user => {
|
||||
setSelectedUser(user);
|
||||
setUserModalOpen(true);
|
||||
};
|
||||
const handleEditUser = (user) => {
|
||||
setSelectedUser(user);
|
||||
setUserModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteUser = async userId => {
|
||||
try {
|
||||
await api.delete(`/users/${userId}`);
|
||||
toast.success(i18n.t("users.toasts.deleted"));
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setDeletingUser(null);
|
||||
setSearchParam("");
|
||||
setPageNumber(1);
|
||||
};
|
||||
const handleDeleteUser = async (userId) => {
|
||||
try {
|
||||
await api.delete(`/users/${userId}`);
|
||||
toast.success(i18n.t("users.toasts.deleted"));
|
||||
} catch (err) {
|
||||
toastError(err);
|
||||
}
|
||||
setDeletingUser(null);
|
||||
setSearchParam("");
|
||||
setPageNumber(1);
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
setPageNumber(prevState => prevState + 1);
|
||||
};
|
||||
const loadMore = () => {
|
||||
setPageNumber((prevState) => prevState + 1);
|
||||
};
|
||||
|
||||
const handleScroll = e => {
|
||||
if (!hasMore || loading) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
if (!hasMore || loading) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MainContainer>
|
||||
<ConfirmationModal
|
||||
title={
|
||||
deletingUser &&
|
||||
`${i18n.t("users.confirmationModal.deleteTitle")} ${
|
||||
deletingUser.name
|
||||
}?`
|
||||
}
|
||||
open={confirmModalOpen}
|
||||
onClose={setConfirmModalOpen}
|
||||
onConfirm={() => handleDeleteUser(deletingUser.id)}
|
||||
>
|
||||
{i18n.t("users.confirmationModal.deleteMessage")}
|
||||
</ConfirmationModal>
|
||||
<UserModal
|
||||
open={userModalOpen}
|
||||
onClose={handleCloseUserModal}
|
||||
aria-labelledby="form-dialog-title"
|
||||
userId={selectedUser && selectedUser.id}
|
||||
/>
|
||||
<MainHeader>
|
||||
<Title>{i18n.t("users.title")}</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<TextField
|
||||
placeholder={i18n.t("contacts.searchPlaceholder")}
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenUserModal}
|
||||
>
|
||||
{i18n.t("users.buttons.add")}
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper
|
||||
className={classes.mainPaper}
|
||||
variant="outlined"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">{i18n.t("users.table.name")}</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("users.table.email")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("users.table.profile")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("users.table.actions")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<>
|
||||
{users.map(user => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell align="center">{user.name}</TableCell>
|
||||
<TableCell align="center">{user.email}</TableCell>
|
||||
<TableCell align="center">{user.profile}</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleEditUser(user)}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
return (
|
||||
<MainContainer>
|
||||
<ConfirmationModal
|
||||
title={
|
||||
deletingUser &&
|
||||
`${i18n.t("users.confirmationModal.deleteTitle")} ${
|
||||
deletingUser.name
|
||||
}?`
|
||||
}
|
||||
open={confirmModalOpen}
|
||||
onClose={setConfirmModalOpen}
|
||||
onConfirm={() => handleDeleteUser(deletingUser.id)}
|
||||
>
|
||||
{i18n.t("users.confirmationModal.deleteMessage")}
|
||||
</ConfirmationModal>
|
||||
<UserModal
|
||||
open={userModalOpen}
|
||||
onClose={handleCloseUserModal}
|
||||
aria-labelledby="form-dialog-title"
|
||||
userId={selectedUser && selectedUser.id}
|
||||
/>
|
||||
<MainHeader>
|
||||
<Title>{i18n.t("users.title")}</Title>
|
||||
<MainHeaderButtonsWrapper>
|
||||
<TextField
|
||||
placeholder={i18n.t("contacts.searchPlaceholder")}
|
||||
type="search"
|
||||
value={searchParam}
|
||||
onChange={handleSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "gray" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleOpenUserModal}
|
||||
>
|
||||
{i18n.t("users.buttons.add")}
|
||||
</Button>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
<Paper
|
||||
className={classes.mainPaper}
|
||||
variant="outlined"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">{i18n.t("users.table.name")}</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("users.table.email")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("users.table.profile")}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{i18n.t("users.table.actions")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<>
|
||||
{users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell align="center">{user.name}</TableCell>
|
||||
<TableCell align="center">{user.email}</TableCell>
|
||||
<TableCell align="center">{user.profile}</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleEditUser(user)}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={e => {
|
||||
setConfirmModalOpen(true);
|
||||
setDeletingUser(user);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{loading && <TableRowSkeleton columns={4} />}
|
||||
</>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
setConfirmModalOpen(true);
|
||||
setDeletingUser(user);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlineIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{loading && <TableRowSkeleton columns={4} />}
|
||||
</>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Users;
|
||||
|
||||
@@ -5,32 +5,32 @@ import { AuthContext } from "../context/Auth/AuthContext";
|
||||
import BackdropLoading from "../components/BackdropLoading";
|
||||
|
||||
const Route = ({ component: Component, isPrivate = false, ...rest }) => {
|
||||
const { isAuth, loading } = useContext(AuthContext);
|
||||
const { isAuth, loading } = useContext(AuthContext);
|
||||
|
||||
if (!isAuth && isPrivate) {
|
||||
return (
|
||||
<>
|
||||
{loading && <BackdropLoading />}
|
||||
<Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (!isAuth && isPrivate) {
|
||||
return (
|
||||
<>
|
||||
{loading && <BackdropLoading />}
|
||||
<Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (isAuth && !isPrivate) {
|
||||
return (
|
||||
<>
|
||||
{loading && <BackdropLoading />}
|
||||
<Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (isAuth && !isPrivate) {
|
||||
return (
|
||||
<>
|
||||
{loading && <BackdropLoading />}
|
||||
<Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading && <BackdropLoading />}
|
||||
<RouterRoute {...rest} component={Component} />
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{loading && <BackdropLoading />}
|
||||
<RouterRoute {...rest} component={Component} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Route;
|
||||
|
||||
Reference in New Issue
Block a user