mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 20:29:17 +00:00
fix: removed deprecated reload function after import contacts
This commit is contained in:
canove
@@ -1,319 +1,318 @@
|
|||||||
import React, { useState, useEffect, useReducer } from "react";
|
import React, { useState, useEffect, useReducer } from "react";
|
||||||
import openSocket from "socket.io-client";
|
import openSocket from "socket.io-client";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
import Table from "@material-ui/core/Table";
|
import Table from "@material-ui/core/Table";
|
||||||
import TableBody from "@material-ui/core/TableBody";
|
import TableBody from "@material-ui/core/TableBody";
|
||||||
import TableCell from "@material-ui/core/TableCell";
|
import TableCell from "@material-ui/core/TableCell";
|
||||||
import TableHead from "@material-ui/core/TableHead";
|
import TableHead from "@material-ui/core/TableHead";
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
import TableRow from "@material-ui/core/TableRow";
|
||||||
import Paper from "@material-ui/core/Paper";
|
import Paper from "@material-ui/core/Paper";
|
||||||
import Button from "@material-ui/core/Button";
|
import Button from "@material-ui/core/Button";
|
||||||
import Avatar from "@material-ui/core/Avatar";
|
import Avatar from "@material-ui/core/Avatar";
|
||||||
|
|
||||||
import SearchIcon from "@material-ui/icons/Search";
|
import SearchIcon from "@material-ui/icons/Search";
|
||||||
import TextField from "@material-ui/core/TextField";
|
import TextField from "@material-ui/core/TextField";
|
||||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||||
|
|
||||||
import IconButton from "@material-ui/core/IconButton";
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
||||||
import EditIcon from "@material-ui/icons/Edit";
|
import EditIcon from "@material-ui/icons/Edit";
|
||||||
|
|
||||||
import api from "../../services/api";
|
import api from "../../services/api";
|
||||||
import TableRowSkeleton from "../../components/TableRowSkeleton";
|
import TableRowSkeleton from "../../components/TableRowSkeleton";
|
||||||
import ContactModal from "../../components/ContactModal";
|
import ContactModal from "../../components/ContactModal";
|
||||||
import ConfirmationModal from "../../components/ConfirmationModal/";
|
import ConfirmationModal from "../../components/ConfirmationModal/";
|
||||||
|
|
||||||
import { i18n } from "../../translate/i18n";
|
import { i18n } from "../../translate/i18n";
|
||||||
import MainHeader from "../../components/MainHeader";
|
import MainHeader from "../../components/MainHeader";
|
||||||
import Title from "../../components/Title";
|
import Title from "../../components/Title";
|
||||||
import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
|
import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
|
||||||
import MainContainer from "../../components/MainContainer";
|
import MainContainer from "../../components/MainContainer";
|
||||||
|
|
||||||
const reducer = (state, action) => {
|
const reducer = (state, action) => {
|
||||||
if (action.type === "LOAD_CONTACTS") {
|
if (action.type === "LOAD_CONTACTS") {
|
||||||
const contacts = action.payload;
|
const contacts = action.payload;
|
||||||
const newContacts = [];
|
const newContacts = [];
|
||||||
|
|
||||||
contacts.forEach(contact => {
|
contacts.forEach(contact => {
|
||||||
const contactIndex = state.findIndex(c => c.id === contact.id);
|
const contactIndex = state.findIndex(c => c.id === contact.id);
|
||||||
if (contactIndex !== -1) {
|
if (contactIndex !== -1) {
|
||||||
state[contactIndex] = contact;
|
state[contactIndex] = contact;
|
||||||
} else {
|
} else {
|
||||||
newContacts.push(contact);
|
newContacts.push(contact);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return [...state, ...newContacts];
|
return [...state, ...newContacts];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action.type === "UPDATE_CONTACTS") {
|
if (action.type === "UPDATE_CONTACTS") {
|
||||||
const contact = action.payload;
|
const contact = action.payload;
|
||||||
const contactIndex = state.findIndex(c => c.id === contact.id);
|
const contactIndex = state.findIndex(c => c.id === contact.id);
|
||||||
|
|
||||||
if (contactIndex !== -1) {
|
if (contactIndex !== -1) {
|
||||||
state[contactIndex] = contact;
|
state[contactIndex] = contact;
|
||||||
return [...state];
|
return [...state];
|
||||||
} else {
|
} else {
|
||||||
return [contact, ...state];
|
return [contact, ...state];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action.type === "DELETE_CONTACT") {
|
if (action.type === "DELETE_CONTACT") {
|
||||||
const contactId = action.payload;
|
const contactId = action.payload;
|
||||||
|
|
||||||
const contactIndex = state.findIndex(c => c.id === contactId);
|
const contactIndex = state.findIndex(c => c.id === contactId);
|
||||||
if (contactIndex !== -1) {
|
if (contactIndex !== -1) {
|
||||||
state.splice(contactIndex, 1);
|
state.splice(contactIndex, 1);
|
||||||
}
|
}
|
||||||
return [...state];
|
return [...state];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action.type === "RESET") {
|
if (action.type === "RESET") {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles(theme => ({
|
||||||
mainPaper: {
|
mainPaper: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
padding: theme.spacing(1),
|
padding: theme.spacing(1),
|
||||||
overflowY: "scroll",
|
overflowY: "scroll",
|
||||||
...theme.scrollbarStyles,
|
...theme.scrollbarStyles,
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const Contacts = () => {
|
const Contacts = () => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [pageNumber, setPageNumber] = useState(1);
|
const [pageNumber, setPageNumber] = useState(1);
|
||||||
const [searchParam, setSearchParam] = useState("");
|
const [searchParam, setSearchParam] = useState("");
|
||||||
const [contacts, dispatch] = useReducer(reducer, []);
|
const [contacts, dispatch] = useReducer(reducer, []);
|
||||||
const [selectedContactId, setSelectedContactId] = useState(null);
|
const [selectedContactId, setSelectedContactId] = useState(null);
|
||||||
const [contactModalOpen, setContactModalOpen] = useState(false);
|
const [contactModalOpen, setContactModalOpen] = useState(false);
|
||||||
const [deletingContact, setDeletingContact] = useState(null);
|
const [deletingContact, setDeletingContact] = useState(null);
|
||||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||||
const [hasMore, setHasMore] = useState(false);
|
const [hasMore, setHasMore] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch({ type: "RESET" });
|
dispatch({ type: "RESET" });
|
||||||
setPageNumber(1);
|
setPageNumber(1);
|
||||||
}, [searchParam]);
|
}, [searchParam]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const delayDebounceFn = setTimeout(() => {
|
const delayDebounceFn = setTimeout(() => {
|
||||||
const fetchContacts = async () => {
|
const fetchContacts = async () => {
|
||||||
try {
|
try {
|
||||||
const { data } = await api.get("/contacts/", {
|
const { data } = await api.get("/contacts/", {
|
||||||
params: { searchParam, pageNumber },
|
params: { searchParam, pageNumber },
|
||||||
});
|
});
|
||||||
dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
|
dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
|
||||||
setHasMore(data.hasMore);
|
setHasMore(data.hasMore);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
if (err.response && err.response.data && err.response.data.error) {
|
if (err.response && err.response.data && err.response.data.error) {
|
||||||
toast.error(err.response.data.error);
|
toast.error(err.response.data.error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
fetchContacts();
|
fetchContacts();
|
||||||
}, 500);
|
}, 500);
|
||||||
return () => clearTimeout(delayDebounceFn);
|
return () => clearTimeout(delayDebounceFn);
|
||||||
}, [searchParam, pageNumber]);
|
}, [searchParam, pageNumber]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||||
socket.on("contact", data => {
|
socket.on("contact", data => {
|
||||||
if (data.action === "update" || data.action === "create") {
|
if (data.action === "update" || data.action === "create") {
|
||||||
dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
|
dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.action === "delete") {
|
if (data.action === "delete") {
|
||||||
dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
|
dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
socket.disconnect();
|
socket.disconnect();
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSearch = event => {
|
const handleSearch = event => {
|
||||||
setSearchParam(event.target.value.toLowerCase());
|
setSearchParam(event.target.value.toLowerCase());
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOpenContactModal = () => {
|
const handleOpenContactModal = () => {
|
||||||
setSelectedContactId(null);
|
setSelectedContactId(null);
|
||||||
setContactModalOpen(true);
|
setContactModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseContactModal = () => {
|
const handleCloseContactModal = () => {
|
||||||
setSelectedContactId(null);
|
setSelectedContactId(null);
|
||||||
setContactModalOpen(false);
|
setContactModalOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const hadleEditContact = contactId => {
|
const hadleEditContact = contactId => {
|
||||||
setSelectedContactId(contactId);
|
setSelectedContactId(contactId);
|
||||||
setContactModalOpen(true);
|
setContactModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteContact = async contactId => {
|
const handleDeleteContact = async contactId => {
|
||||||
try {
|
try {
|
||||||
await api.delete(`/contacts/${contactId}`);
|
await api.delete(`/contacts/${contactId}`);
|
||||||
toast.success("Contact deleted sucessfully!");
|
toast.success("Contact deleted sucessfully!");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
if (err.response && err.response.data && err.response.data.error) {
|
if (err.response && err.response.data && err.response.data.error) {
|
||||||
toast.error(err.response.data.error);
|
toast.error(err.response.data.error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setDeletingContact(null);
|
setDeletingContact(null);
|
||||||
setSearchParam("");
|
setSearchParam("");
|
||||||
setPageNumber(1);
|
setPageNumber(1);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleimportContact = async () => {
|
const handleimportContact = async () => {
|
||||||
try {
|
try {
|
||||||
await api.post("/contacts/import");
|
await api.post("/contacts/import");
|
||||||
window.location.reload(false);
|
} catch (err) {
|
||||||
} catch (err) {
|
console.log(err);
|
||||||
console.log(err);
|
if (err.response && err.response.data && err.response.data.error) {
|
||||||
if (err.response && err.response.data && err.response.data.error) {
|
toast.error(err.response.data.error);
|
||||||
toast.error(err.response.data.error);
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
|
const loadMore = () => {
|
||||||
const loadMore = () => {
|
setPageNumber(prevState => prevState + 1);
|
||||||
setPageNumber(prevState => prevState + 1);
|
};
|
||||||
};
|
|
||||||
|
const handleScroll = e => {
|
||||||
const handleScroll = e => {
|
if (!hasMore || loading) return;
|
||||||
if (!hasMore || loading) return;
|
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
||||||
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
||||||
if (scrollHeight - (scrollTop + 100) < clientHeight) {
|
loadMore();
|
||||||
loadMore();
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
|
return (
|
||||||
return (
|
<MainContainer className={classes.mainContainer}>
|
||||||
<MainContainer className={classes.mainContainer}>
|
<ContactModal
|
||||||
<ContactModal
|
open={contactModalOpen}
|
||||||
open={contactModalOpen}
|
onClose={handleCloseContactModal}
|
||||||
onClose={handleCloseContactModal}
|
aria-labelledby="form-dialog-title"
|
||||||
aria-labelledby="form-dialog-title"
|
contactId={selectedContactId}
|
||||||
contactId={selectedContactId}
|
></ContactModal>
|
||||||
></ContactModal>
|
<ConfirmationModal
|
||||||
<ConfirmationModal
|
title={
|
||||||
title={
|
deletingContact
|
||||||
deletingContact
|
? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
|
||||||
? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
|
deletingContact.name
|
||||||
deletingContact.name
|
}?`
|
||||||
}?`
|
: `${i18n.t("contacts.confirmationModal.importTitlte")}`
|
||||||
: `${i18n.t("contacts.confirmationModal.importTitlte")}`
|
}
|
||||||
}
|
open={confirmOpen}
|
||||||
open={confirmOpen}
|
setOpen={setConfirmOpen}
|
||||||
setOpen={setConfirmOpen}
|
onConfirm={e =>
|
||||||
onConfirm={e =>
|
deletingContact
|
||||||
deletingContact
|
? handleDeleteContact(deletingContact.id)
|
||||||
? handleDeleteContact(deletingContact.id)
|
: handleimportContact()
|
||||||
: handleimportContact()
|
}
|
||||||
}
|
>
|
||||||
>
|
{deletingContact
|
||||||
{deletingContact
|
? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
|
||||||
? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
|
: `${i18n.t("contacts.confirmationModal.importMessage")}`}
|
||||||
: `${i18n.t("contacts.confirmationModal.importMessage")}`}
|
</ConfirmationModal>
|
||||||
</ConfirmationModal>
|
<MainHeader>
|
||||||
<MainHeader>
|
<Title>{i18n.t("contacts.title")}</Title>
|
||||||
<Title>{i18n.t("contacts.title")}</Title>
|
<MainHeaderButtonsWrapper>
|
||||||
<MainHeaderButtonsWrapper>
|
<TextField
|
||||||
<TextField
|
placeholder={i18n.t("contacts.searchPlaceholder")}
|
||||||
placeholder={i18n.t("contacts.searchPlaceholder")}
|
type="search"
|
||||||
type="search"
|
value={searchParam}
|
||||||
value={searchParam}
|
onChange={handleSearch}
|
||||||
onChange={handleSearch}
|
InputProps={{
|
||||||
InputProps={{
|
startAdornment: (
|
||||||
startAdornment: (
|
<InputAdornment position="start">
|
||||||
<InputAdornment position="start">
|
<SearchIcon style={{ color: "gray" }} />
|
||||||
<SearchIcon style={{ color: "gray" }} />
|
</InputAdornment>
|
||||||
</InputAdornment>
|
),
|
||||||
),
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
<Button
|
||||||
<Button
|
variant="contained"
|
||||||
variant="contained"
|
color="primary"
|
||||||
color="primary"
|
onClick={e => setConfirmOpen(true)}
|
||||||
onClick={e => setConfirmOpen(true)}
|
>
|
||||||
>
|
{i18n.t("contacts.buttons.import")}
|
||||||
{i18n.t("contacts.buttons.import")}
|
</Button>
|
||||||
</Button>
|
<Button
|
||||||
<Button
|
variant="contained"
|
||||||
variant="contained"
|
color="primary"
|
||||||
color="primary"
|
onClick={handleOpenContactModal}
|
||||||
onClick={handleOpenContactModal}
|
>
|
||||||
>
|
{i18n.t("contacts.buttons.add")}
|
||||||
{i18n.t("contacts.buttons.add")}
|
</Button>
|
||||||
</Button>
|
</MainHeaderButtonsWrapper>
|
||||||
</MainHeaderButtonsWrapper>
|
</MainHeader>
|
||||||
</MainHeader>
|
<Paper
|
||||||
<Paper
|
className={classes.mainPaper}
|
||||||
className={classes.mainPaper}
|
variant="outlined"
|
||||||
variant="outlined"
|
onScroll={handleScroll}
|
||||||
onScroll={handleScroll}
|
>
|
||||||
>
|
<Table size="small">
|
||||||
<Table size="small">
|
<TableHead>
|
||||||
<TableHead>
|
<TableRow>
|
||||||
<TableRow>
|
<TableCell padding="checkbox" />
|
||||||
<TableCell padding="checkbox" />
|
<TableCell>{i18n.t("contacts.table.name")}</TableCell>
|
||||||
<TableCell>{i18n.t("contacts.table.name")}</TableCell>
|
<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
|
||||||
<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
|
<TableCell>{i18n.t("contacts.table.email")}</TableCell>
|
||||||
<TableCell>{i18n.t("contacts.table.email")}</TableCell>
|
<TableCell align="right">
|
||||||
<TableCell align="right">
|
{i18n.t("contacts.table.actions")}
|
||||||
{i18n.t("contacts.table.actions")}
|
</TableCell>
|
||||||
</TableCell>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHead>
|
||||||
</TableHead>
|
<TableBody>
|
||||||
<TableBody>
|
<>
|
||||||
<>
|
{contacts.map(contact => (
|
||||||
{contacts.map(contact => (
|
<TableRow key={contact.id}>
|
||||||
<TableRow key={contact.id}>
|
<TableCell style={{ paddingRight: 0 }}>
|
||||||
<TableCell style={{ paddingRight: 0 }}>
|
{<Avatar src={contact.profilePicUrl} />}
|
||||||
{<Avatar src={contact.profilePicUrl} />}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>{contact.name}</TableCell>
|
||||||
<TableCell>{contact.name}</TableCell>
|
<TableCell>{contact.number}</TableCell>
|
||||||
<TableCell>{contact.number}</TableCell>
|
<TableCell>{contact.email}</TableCell>
|
||||||
<TableCell>{contact.email}</TableCell>
|
<TableCell align="right">
|
||||||
<TableCell align="right">
|
<IconButton
|
||||||
<IconButton
|
size="small"
|
||||||
size="small"
|
onClick={() => hadleEditContact(contact.id)}
|
||||||
onClick={() => hadleEditContact(contact.id)}
|
>
|
||||||
>
|
<EditIcon />
|
||||||
<EditIcon />
|
</IconButton>
|
||||||
</IconButton>
|
|
||||||
|
<IconButton
|
||||||
<IconButton
|
size="small"
|
||||||
size="small"
|
onClick={e => {
|
||||||
onClick={e => {
|
setConfirmOpen(true);
|
||||||
setConfirmOpen(true);
|
setDeletingContact(contact);
|
||||||
setDeletingContact(contact);
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<DeleteOutlineIcon />
|
||||||
<DeleteOutlineIcon />
|
</IconButton>
|
||||||
</IconButton>
|
</TableCell>
|
||||||
</TableCell>
|
</TableRow>
|
||||||
</TableRow>
|
))}
|
||||||
))}
|
{loading && <TableRowSkeleton />}
|
||||||
{loading && <TableRowSkeleton />}
|
</>
|
||||||
</>
|
</TableBody>
|
||||||
</TableBody>
|
</Table>
|
||||||
</Table>
|
</Paper>
|
||||||
</Paper>
|
</MainContainer>
|
||||||
</MainContainer>
|
);
|
||||||
);
|
};
|
||||||
};
|
|
||||||
|
export default Contacts;
|
||||||
export default Contacts;
|
|
||||||
|
|||||||
Reference in New Issue
Block a user