diff --git a/frontend/public/index.html b/frontend/public/index.html index be0ea5d..9573fcf 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -2,6 +2,10 @@ React App + diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index 0b4c7b2..0000000 --- a/frontend/src/App.css +++ /dev/null @@ -1,11 +0,0 @@ -button:active { - opacity: 0.5; -} - -button:focus { - outline: 0; -} - -img:active { - opacity: 0.5; -} diff --git a/frontend/src/App.js b/frontend/src/App.js index 2dc6bf6..f3b4b50 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -2,8 +2,6 @@ import React from "react"; import Routes from "./routes"; import "dotenv/config"; -import "./App.css"; - const App = () => { return ; }; diff --git a/frontend/src/components/Layout/MainListItems.js b/frontend/src/components/Layout/MainListItems.js index 370ec0b..a2d975a 100644 --- a/frontend/src/components/Layout/MainListItems.js +++ b/frontend/src/components/Layout/MainListItems.js @@ -11,14 +11,12 @@ import Collapse from "@material-ui/core/Collapse"; import DashboardIcon from "@material-ui/icons/Dashboard"; import WhatsAppIcon from "@material-ui/icons/WhatsApp"; -// import PeopleIcon from "@material-ui/icons/People"; import SyncAltIcon from "@material-ui/icons/SyncAlt"; import ChatIcon from "@material-ui/icons/Chat"; -import BarChartIcon from "@material-ui/icons/BarChart"; import LayersIcon from "@material-ui/icons/Layers"; -// import AssignmentIcon from "@material-ui/icons/Assignment"; import ExpandLess from "@material-ui/icons/ExpandLess"; import ExpandMore from "@material-ui/icons/ExpandMore"; +import ContactPhoneIcon from "@material-ui/icons/ContactPhone"; const useStyles = makeStyles(theme => ({ nested: { @@ -82,13 +80,11 @@ const MainListItems = () => { /> - - - - - - - + } + /> diff --git a/frontend/src/index.js b/frontend/src/index.js index a7eef3a..8b5f35d 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from "react-dom"; -// import "bootstrap/dist/css/bootstrap.min.css"; import CssBaseline from "@material-ui/core/CssBaseline"; import App from "./App"; diff --git a/frontend/src/pages/Chat/Chat.js b/frontend/src/pages/Chat/Chat.js index d503786..1160193 100644 --- a/frontend/src/pages/Chat/Chat.js +++ b/frontend/src/pages/Chat/Chat.js @@ -49,7 +49,7 @@ const Chat = () => { return (
- + diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js new file mode 100644 index 0000000..0b7454d --- /dev/null +++ b/frontend/src/pages/Contacts/index.js @@ -0,0 +1,326 @@ +import React, { useState, useEffect } from "react"; + +import Link from "@material-ui/core/Link"; +import { makeStyles } from "@material-ui/core/styles"; +import TableContainer from "@material-ui/core/TableContainer"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Grid from "@material-ui/core/Grid"; +import Paper from "@material-ui/core/Paper"; +import Button from "@material-ui/core/Button"; +import Avatar from "@material-ui/core/Avatar"; +import TableFooter from "@material-ui/core/TableFooter"; +import TablePagination from "@material-ui/core/TablePagination"; +import FirstPageIcon from "@material-ui/icons/FirstPage"; +import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft"; +import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; +import LastPageIcon from "@material-ui/icons/LastPage"; + +import IconButton from "@material-ui/core/IconButton"; +import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"; +import EditIcon from "@material-ui/icons/Edit"; + +const useStyles1 = makeStyles(theme => ({ + root: { + flexShrink: 0, + marginLeft: theme.spacing(2.5), + }, +})); + +const TablePaginationActions = ({ count, page, rowsPerPage, onChangePage }) => { + const classes = useStyles1(); + + const handleFirstPageButtonClick = event => { + onChangePage(event, 0); + }; + + const handleBackButtonClick = event => { + onChangePage(event, page - 1); + }; + + const handleNextButtonClick = event => { + onChangePage(event, page + 1); + }; + + const handleLastPageButtonClick = event => { + onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); + }; + + return ( +
+ + {} + + + {} + + = Math.ceil(count / rowsPerPage) - 1} + aria-label="next page" + > + {} + + = Math.ceil(count / rowsPerPage) - 1} + aria-label="last page" + > + {} + +
+ ); +}; + +const useStyles = makeStyles(theme => ({ + mainContainer: { + flex: 1, + // backgroundColor: "#eee", + padding: theme.spacing(4), + height: `calc(100% - 48px)`, + overflowY: "hidden", + }, + + contactsHeader: { + display: "flex", + alignItems: "center", + padding: "0px 6px 6px 6px", + }, + + actionButtons: { + marginLeft: "auto", + "& > *": { + margin: theme.spacing(0.5), + }, + }, + + mainPaper: { + height: "100%", + overflowY: "scroll", + }, +})); + +const Contacts = () => { + const classes = useStyles(); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [contacts, setContacts] = useState([ + // { + // id: 1, + // name: "Cassio", + // number: "5513991428988", + // profilePicUrl: + // "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33", + // createdAt: "2020-07-17T16:16:59.000Z", + // updatedAt: "2020-07-22T12:23:58.000Z", + // }, + // { + // id: 2, + // name: "Luana", + // number: "5513991264923", + // profilePicUrl: null, + // createdAt: "2020-07-17T17:48:01.000Z", + // updatedAt: "2020-07-17T17:48:01.000Z", + // }, + // { + // id: 3, + // name: "551333074319", + // number: "551333074319", + // profilePicUrl: + // "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A", + // createdAt: "2020-07-17T18:13:15.000Z", + // updatedAt: "2020-07-20T19:44:33.000Z", + // }, + // { + // id: 1, + // name: "Cassio", + // number: "5513991428988", + // profilePicUrl: + // "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33", + // createdAt: "2020-07-17T16:16:59.000Z", + // updatedAt: "2020-07-22T12:23:58.000Z", + // }, + // { + // id: 2, + // name: "Luana", + // number: "5513991264923", + // profilePicUrl: null, + // createdAt: "2020-07-17T17:48:01.000Z", + // updatedAt: "2020-07-17T17:48:01.000Z", + // }, + // { + // id: 3, + // name: "551333074319", + // number: "551333074319", + // profilePicUrl: + // "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A", + // createdAt: "2020-07-17T18:13:15.000Z", + // updatedAt: "2020-07-20T19:44:33.000Z", + // }, + // { + // id: 1, + // name: "Cassio", + // number: "5513991428988", + // profilePicUrl: + // "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33", + // createdAt: "2020-07-17T16:16:59.000Z", + // updatedAt: "2020-07-22T12:23:58.000Z", + // }, + // { + // id: 2, + // name: "Luana", + // number: "5513991264923", + // profilePicUrl: null, + // createdAt: "2020-07-17T17:48:01.000Z", + // updatedAt: "2020-07-17T17:48:01.000Z", + // }, + // { + // id: 3, + // name: "551333074319", + // number: "551333074319", + // profilePicUrl: + // "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A", + // createdAt: "2020-07-17T18:13:15.000Z", + // updatedAt: "2020-07-20T19:44:33.000Z", + // }, + { + id: 1, + name: "Cassio", + number: "5513991428988", + profilePicUrl: + "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33", + createdAt: "2020-07-17T16:16:59.000Z", + updatedAt: "2020-07-22T12:23:58.000Z", + }, + { + id: 2, + name: "Luana", + number: "5513991264923", + profilePicUrl: null, + createdAt: "2020-07-17T17:48:01.000Z", + updatedAt: "2020-07-17T17:48:01.000Z", + }, + { + id: 3, + name: "551333074319", + number: "551333074319", + profilePicUrl: + "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A", + createdAt: "2020-07-17T18:13:15.000Z", + updatedAt: "2020-07-20T19:44:33.000Z", + }, + { + id: 1, + name: "Cassio", + number: "5513991428988", + profilePicUrl: + "https://pps.whatsapp.net/v/t61.24694-24/69475768_2460671290686732_6259438857054322688_n.jpg?oh=ec972d658eae256f9d0675852d8cf9a3&oe=5F1CDD33", + createdAt: "2020-07-17T16:16:59.000Z", + updatedAt: "2020-07-22T12:23:58.000Z", + }, + { + id: 2, + name: "Luana", + number: "5513991264923", + profilePicUrl: null, + createdAt: "2020-07-17T17:48:01.000Z", + updatedAt: "2020-07-17T17:48:01.000Z", + }, + { + id: 3, + name: "551333074319", + number: "551333074319", + profilePicUrl: + "https://pps.whatsapp.net/v/t61.24694-24/56106113_757880717947097_7376625555153616896_n.jpg?oh=287b4d0de2810cca361af7eaa1381076&oe=5F1ABC3A", + createdAt: "2020-07-17T18:13:15.000Z", + updatedAt: "2020-07-20T19:44:33.000Z", + }, + ]); + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = event => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + return ( +
+ +
+

Todos os contatos

+
+ + +
+
+ + + + + Nome + Telefone + Email + Ações + + + + {contacts.map(contact => ( + + {} + {contact.name} + {contact.number} + {contact.updatedAt} + + + + + + + + + + ))} + + + + + + +
+ +
+ ); +}; + +export default Contacts; diff --git a/frontend/src/pages/WhatsAuth/WhatsAuth.js b/frontend/src/pages/WhatsAuth/WhatsAuth.js index f4102b8..8a11220 100644 --- a/frontend/src/pages/WhatsAuth/WhatsAuth.js +++ b/frontend/src/pages/WhatsAuth/WhatsAuth.js @@ -18,7 +18,6 @@ const useStyles = makeStyles(theme => ({ content: { flexGrow: 1, - overflow: "auto", }, paper: { diff --git a/frontend/src/routes.js b/frontend/src/routes.js index 9d5659d..2a7690a 100644 --- a/frontend/src/routes.js +++ b/frontend/src/routes.js @@ -1,7 +1,9 @@ import React, { useContext } from "react"; import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"; -import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext"; +import Backdrop from "@material-ui/core/Backdrop"; +import CircularProgress from "@material-ui/core/CircularProgress"; +import { makeStyles } from "@material-ui/core/styles"; import MainDrawer from "./components/Layout/MainDrawer"; import Dashboard from "./pages/Home/Dashboard"; @@ -10,9 +12,8 @@ import Profile from "./pages/Profile/Profile"; import Signup from "./pages/Signup/Signup"; import Login from "./pages/Login/Login"; import WhatsAuth from "./pages/WhatsAuth/WhatsAuth"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; -import { makeStyles } from "@material-ui/core/styles"; +import Contacts from "./pages/Contacts"; +import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext"; const useStyles = makeStyles(theme => ({ backdrop: { @@ -85,6 +86,7 @@ const Routes = () => { +