🗂Better folder structure on frontend

frontend/src/components/ContactModal/index.js

@@ -17,7 +17,7 @@ import { green } from "@material-ui/core/colors";
 
 import { makeStyles } from "@material-ui/core/styles";
 
-import api from "../../util/api";
+import api from "../../services/api";
 
 const useStyles = makeStyles(theme => ({
 	root: {

frontend/src/components/MainDrawer/index.js

@@ -21,7 +21,7 @@ import AccountCircle from "@material-ui/icons/AccountCircle";
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
 
-import { AuthContext } from "../../Context/Auth/AuthContext";
+import { AuthContext } from "../../context/Auth/AuthContext";
 
 const drawerWidth = 240;
 

frontend/src/components/MessageInput/index.js

@@ -18,7 +18,7 @@ import MicIcon from "@material-ui/icons/Mic";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
 import HighlightOffIcon from "@material-ui/icons/HighlightOff";
 
-import api from "../../../../util/api";
+import api from "../../services/api";
 import RecordingTimer from "./RecordingTimer";
 
 const Mp3Recorder = new MicRecorder({ bitRate: 128 });
@@ -102,7 +102,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const MessagesInput = ({ searchParam }) => {
+const MessageInput = ({ searchParam }) => {
 	const classes = useStyles();
 	const { ticketId } = useParams();
 	const userId = localStorage.getItem("userId");
@@ -378,4 +378,4 @@ const MessagesInput = ({ searchParam }) => {
 	}
 };
 
-export default MessagesInput;
+export default MessageInput;

frontend/src/components/MessagesList/index.js

@@ -27,12 +27,12 @@ import Skeleton from "@material-ui/lab/Skeleton";
 
 import Drawer from "@material-ui/core/Drawer";
 
-import whatsBackground from "../../../../Images/wa-background.png";
+import whatsBackground from "../../assets/wa-background.png";
 
-import LinkifyWithTargetBlank from "../../../../components/LinkifyWithTargetBlank";
+import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
-import api from "../../../../util/api";
+import api from "../../services/api";
 
-import MessagesInput from "../MessagesInput/MessagesInput";
+import MessageInput from "../MessageInput/";
 
 const drawerWidth = 320;
 
@@ -593,7 +593,7 @@ const MessagesList = () => {
 					>
 						{messagesList.length > 0 ? renderMessages() : []}
 					</InfiniteScrollReverse>
-					<MessagesInput searchParam={searchParam} />
+					<MessageInput searchParam={searchParam} />
 					{loading ? (
 						<div>
 							<CircularProgress className={classes.circleLoading} />

frontend/src/components/SessionInfo/index.js

@@ -9,7 +9,7 @@ const useStyles = makeStyles({
 	},
 });
 
-const Bateryinfo = ({ session }) => {
+const SessionInfo = ({ session }) => {
 	const classes = useStyles();
 	return (
 		<React.Fragment>
@@ -31,4 +31,4 @@ const Bateryinfo = ({ session }) => {
 	);
 };
 
-export default Bateryinfo;
+export default SessionInfo;

frontend/src/components/TicketsList/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { useHistory, useParams } from "react-router-dom";
-import api from "../../../../util/api";
 import openSocket from "socket.io-client";
 
 import { parseISO, format } from "date-fns";
@@ -24,9 +23,10 @@ import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import MoveToInboxIcon from "@material-ui/icons/MoveToInbox";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
-
 import TicketSkeleton from "./TicketSkeleton";
 
+import api from "../../services/api";
+
 const useStyles = makeStyles(theme => ({
 	contactsWrapper: {
 		position: "relative",
@@ -533,8 +533,8 @@ const TicketsList = () => {
 				</Paper>
 			)}
 			<audio id="sound" preload="auto">
-				<source src={require("../../../../util/sound.mp3")} type="audio/mpeg" />
+				<source src={require("../../assets/sound.mp3")} type="audio/mpeg" />
-				<source src={require("../../../../util/sound.ogg")} type="audio/ogg" />
+				<source src={require("../../assets/sound.ogg")} type="audio/ogg" />
 				<embed hidden={true} autostart="false" loop={false} src="./sound.mp3" />
 			</audio>
 		</Paper>

frontend/src/context/Auth/useAuth.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 
-import api from "../../util/api";
+import api from "../../services/api";
 
 const useAuth = () => {
 	const history = useHistory();

frontend/src/pages/Chat/index.js

@@ -4,8 +4,8 @@ import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 
-import TicketsList from "./components/TicketsList/TicketsList";
+import TicketsList from "../../components/TicketsList/";
-import MessagesList from "./components/MessagesList/MessagesList";
+import MessagesList from "../../components/MessagesList/";
 
 const useStyles = makeStyles(theme => ({
 	chatContainer: {

frontend/src/pages/Contacts/index.js

@@ -22,12 +22,11 @@ import IconButton from "@material-ui/core/IconButton";
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import EditIcon from "@material-ui/icons/Edit";
 
-import PaginationActions from "./PaginationActions";
+import PaginationActions from "../../components/PaginationActions";
-import api from "../../util/api";
+import api from "../../services/api";
-import ContactModal from "./ContactModal";
+import ContactsSekeleton from "../../components/ContactsSekeleton";
-import ContactsSekeleton from "./ContactsSekeleton";
+import ContactModal from "../../components/ContactModal";
-
+import ConfirmationModal from "../../components/ConfirmationModal/";
-import ConfirmationModal from "../../components/ConfirmationModal/ConfirmationModal";
 
 const useStyles = makeStyles(theme => ({
 	mainContainer: {

frontend/src/pages/Login/index.js

@@ -15,7 +15,7 @@ import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 
-import { AuthContext } from "../../Context/Auth/AuthContext";
+import { AuthContext } from "../../context/Auth/AuthContext";
 
 const Copyright = () => {
 	return (

frontend/src/pages/Signup/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import { useHistory } from "react-router-dom";
-import api from "../../util/api";
+import api from "../../services/api";
 import { Link as RouterLink } from "react-router-dom";
 
 import Avatar from "@material-ui/core/Avatar";

frontend/src/pages/WhatsAuth/WhatsAuth.js

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
-import api from "../../util/api";
+import api from "../../services/api";
 import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
 
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
-import Bateryinfo from "./components/Bateryinfo";
+import SessionInfo from "../../components/SessionInfo";
-import Qrcode from "./components/Qrcode";
+import Qrcode from "../../components/Qrcode";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -88,7 +88,7 @@ const WhatsAuth = () => {
 				) : (
 					<Grid item xs={6}>
 						<Paper className={classes.paper}>
-							<Bateryinfo sessio={session} />
+							<SessionInfo sessio={session} />
 						</Paper>
 					</Grid>
 				)}

frontend/src/routes.js

@@ -5,15 +5,14 @@ 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 MainDrawer from "./components/MainDrawer";
-import Dashboard from "./pages/Home/Dashboard";
+import Dashboard from "./pages/Dashboard/";
-import Chat from "./pages/Chat/Chat";
+import Chat from "./pages/Chat/";
-import Profile from "./pages/Profile/Profile";
+import Signup from "./pages/Signup/";
-import Signup from "./pages/Signup/Signup";
+import Login from "./pages/Login/";
-import Login from "./pages/Login/Login";
 import WhatsAuth from "./pages/WhatsAuth/WhatsAuth";
-import ContactsList from "./pages/Contacts/ContactsList";
+import Contacts from "./pages/Contacts/";
-import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext";
+import { AuthContext, AuthProvider } from "./context/Auth/AuthContext";
 
 const useStyles = makeStyles(theme => ({
 	backdrop: {
@@ -84,9 +83,8 @@ const Routes = () => {
 					<MainDrawer>
 						<PrivateRoute exact path="/" component={Dashboard} />
 						<PrivateRoute exact path="/chat/:ticketId?" component={Chat} />
-						<PrivateRoute exact path="/profile" component={Profile} />
 						<PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
-						<PrivateRoute exact path="/contacts" component={ContactsList} />
+						<PrivateRoute exact path="/contacts" component={Contacts} />
 					</MainDrawer>
 				</Switch>
 			</AuthProvider>