diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..562cc64 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/frontend/src/assets/icons/SearchInput/search.svg b/frontend/src/assets/icons/SearchInput/search.svg new file mode 100644 index 0000000..6636c58 --- /dev/null +++ b/frontend/src/assets/icons/SearchInput/search.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/components/Base/BTN/Btn.jsx b/frontend/src/components/Base/BTN/Btn.jsx deleted file mode 100644 index 9755fa4..0000000 --- a/frontend/src/components/Base/BTN/Btn.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import BtnBaseStyled from "./Btn.styled"; - -const BtnComponent = ({ text, bgcolor, fontcolor,...props }) => { - return ( - - {text} - - ); -}; - -export default BtnComponent; diff --git a/frontend/src/components/Base/Btn/Btn.jsx b/frontend/src/components/Base/Btn/Btn.jsx new file mode 100644 index 0000000..4f81980 --- /dev/null +++ b/frontend/src/components/Base/Btn/Btn.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import BtnBaseStyled from "./Btn.styled"; + +const BtnComponent = ({ text, bgcolor, fontSize, fontcolor, ...props }) => { + return ( + + {text} + + ); +}; + +export default BtnComponent; + diff --git a/frontend/src/components/Base/BTN/Btn.styled.jsx b/frontend/src/components/Base/Btn/Btn.styled.jsx similarity index 90% rename from frontend/src/components/Base/BTN/Btn.styled.jsx rename to frontend/src/components/Base/Btn/Btn.styled.jsx index 9773520..e5beb3d 100644 --- a/frontend/src/components/Base/BTN/Btn.styled.jsx +++ b/frontend/src/components/Base/Btn/Btn.styled.jsx @@ -8,7 +8,7 @@ const BtnBaseStyled = styled.button` padding: 6px 16px 3px; border-radius: 5px; margin: 12px 0; - font-size: 18px; + font-size: ${({ fontSize }) => fontSize ? fontSize: "18px"}; font-family: "Helvetica55"; vertical-align: baseline; transition: all 0.2s linear; diff --git a/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx index 0f8d424..7db3110 100644 --- a/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx +++ b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx @@ -1,5 +1,5 @@ import React from "react"; -import BtnComponent from "../Base/BTN/Btn"; +import BtnComponent from "../Base/Btn/Btn"; import { ConfirmationModalStyled, diff --git a/frontend/src/components/LoadingScreen/Loading.jsx b/frontend/src/components/LoadingScreen/Loading.jsx deleted file mode 100644 index ca2e960..0000000 --- a/frontend/src/components/LoadingScreen/Loading.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -import LoadingStyled from "./Loading.style" - -const Loading = () => { - return ; -}; - -export default Loading; diff --git a/frontend/src/components/LoadingScreen/LoadingScreen.jsx b/frontend/src/components/LoadingScreen/LoadingScreen.jsx new file mode 100644 index 0000000..3b72d76 --- /dev/null +++ b/frontend/src/components/LoadingScreen/LoadingScreen.jsx @@ -0,0 +1,8 @@ +import React from "react"; +import LoadingStyled from "./LoadingScreen.style" + +const LoadingScreen = () => { + return ; +}; + +export default LoadingScreen; diff --git a/frontend/src/components/LoadingScreen/Loading.style.jsx b/frontend/src/components/LoadingScreen/LoadingScreen.style.jsx similarity index 100% rename from frontend/src/components/LoadingScreen/Loading.style.jsx rename to frontend/src/components/LoadingScreen/LoadingScreen.style.jsx diff --git a/frontend/src/components/Ticket/Ticket.jsx b/frontend/src/components/Ticket/Ticket.jsx index 738e433..1f3d74c 100644 --- a/frontend/src/components/Ticket/Ticket.jsx +++ b/frontend/src/components/Ticket/Ticket.jsx @@ -1,9 +1,8 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import { useParams, useHistory } from "react-router-dom"; import { toast } from "react-toastify"; import openSocket from "socket.io-client"; -import clsx from "clsx"; import ContactDrawer from "../ContactDrawer"; import MessageInput from "../MessageInput"; @@ -19,14 +18,14 @@ const Ticket = () => { const { ticketId } = useParams(); const history = useHistory(); - const [drawerOpen, setDrawerOpen] = useState(false); - const [loading, setLoading] = useState(true); - const [contact, setContact] = useState({}); - const [ticket, setTicket] = useState({}); + const [drawerOpen, setDrawerOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + const [contact, setContact] = React.useState({}); + const [ticket, setTicket] = React.useState({}); - const [statusChatEnd, setStatusChatEnd] = useState({}); + const [statusChatEnd, setStatusChatEnd] = React.useState({}); - useEffect(() => { + React.useEffect(() => { setLoading(true); const delayDebounceFn = setTimeout(() => { const fetchTicket = async () => { @@ -49,7 +48,7 @@ const Ticket = () => { return () => clearTimeout(delayDebounceFn); }, [ticketId, history]); - useEffect(() => { + React.useEffect(() => { const socket = openSocket(process.env.REACT_APP_BACKEND_URL); socket.on("connect", () => socket.emit("joinChatBox", ticketId)); diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx index d5e2f72..265672f 100644 --- a/frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx @@ -1,9 +1,9 @@ import React from 'react' import TicketSearchInput from './TicketSearchInput/TicketSearchInput' -const TicketSearch = ({setNewTicketModalOpen, handleSearch}) => { +const TicketSearch = ({spinning,setNewTicketModalOpen, handleSearch}) => { return ( - + ) } diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx index 3edf9f6..f2127ef 100644 --- a/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx @@ -1,11 +1,21 @@ import React from "react"; -import TicketSearchBtn from "../TicketSearchBtn/TicketSearchBtn"; -import { TicketSearchDivStyled, TicketSearchInputStyled } from "./TicketSearchInput.styled"; -const TicketSearchInput = ({ setNewTicketModalOpen, handleSearch }) => { +import { + TicketSearchDivStyled, + TicketSearchInputBoxStyled, + TicketSearchInputStyled, +} from "./TicketSearchInput.styled"; + +import { ReactComponent as SearchIcon } from "../../../../assets/icons/SearchInput/search.svg"; +import TicketSearchBtn from "../TicketSearchBtn/TicketSearchBtn"; + +const TicketSearchInput = ({ spinning, setNewTicketModalOpen, handleSearch }) => { return ( - + + + + ); diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx index 98a7f49..1ef953d 100644 --- a/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx @@ -6,12 +6,53 @@ export const TicketSearchDivStyled = styled.div` display: flex; flex-direction: row; `; -export const TicketSearchInputStyled = styled.input` +export const TicketSearchInputBoxStyled = styled.div` + position: relative; + display: flex; + align-items: center; width: 100%; margin-right: 12px; background-color: ${color.complement.azulOscuro}; border: 2px solid ${color.pricinpal.blanco}; color: ${color.pricinpal.blanco}; border-radius: 4px; - padding: 4px; + padding: 6px; + & svg { + fill: ${color.gradient.border}; + } + &:after { + position: absolute; + right: 6px; + content: ""; + display: ${({ spinning }) => (!spinning ? "none" : "block")}; + width: 16px; + height: 16px; + border-top: 2px solid ${color.gradient.border}; + border-left: 2px solid ${color.gradient.border}; + border-bottom: 2px solid ${color.gradient.border}; + border-right: 2px solid ${color.pricinpal.naranja}; + border-radius: 50%; + animation: spining 0.5s infinite linear; + } + @keyframes spining { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } `; +export const TicketSearchInputStyled = styled.input` + width: 100%; + border: none; + color: ${color.pricinpal.blanco}; + background-color: ${color.complement.azulOscuro}; + &:focus, + &:focus-visible { + border: none; + background-color: ${color.complement.azulOscuro}; + outline: none; + } +`; + diff --git a/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.jsx b/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.jsx deleted file mode 100644 index 48ffecd..0000000 --- a/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const TicketSkeleton = () => { - return ( -
TicketSkeleton
- ) -} - -export default TicketSkeleton \ No newline at end of file diff --git a/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.style.jsx b/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.style.jsx deleted file mode 100644 index 51fb82d..0000000 --- a/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.style.jsx +++ /dev/null @@ -1,4 +0,0 @@ -import styled from "styled-components"; -import {color} from "../../../style/varibles" - -export const TicketSkeletonStyled = styled.div``; diff --git a/frontend/src/components/Ticket/TicketListItem/TicketListItem.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/TicketListItem.jsx similarity index 64% rename from frontend/src/components/Ticket/TicketListItem/TicketListItem.jsx rename to frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/TicketListItem.jsx index 1a0a397..ce86ef4 100644 --- a/frontend/src/components/Ticket/TicketListItem/TicketListItem.jsx +++ b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/TicketListItem.jsx @@ -1,22 +1,23 @@ -import React, { useState, useEffect, useRef, useContext } from "react"; - -import { useHistory, useParams } from "react-router-dom"; +import React from "react"; +import {color} from "../../../../../style/varibles"; +import { useHistory } from "react-router-dom"; import { parseISO, format, isSameDay } from "date-fns"; -import { i18n } from "../../../translate/i18n"; +import { i18n } from "../../../../../translate/i18n"; -import api from "../../../services/api"; -import { AuthContext } from "../../../context/Auth/AuthContext"; -import toastError from "../../../errors/toastError"; +import api from "../../../../../services/api"; +import { AuthContext } from "../../../../../context/Auth/AuthContext"; +import toastError from "../../../../../errors/toastError"; +import Btn from "../../../../Base/Btn/Btn" import { TicketDateStyled, TicketImgStyled, TicketListItemStyled, TicketTitleStyled, } from "./TicketListItem.style"; -import Loading from "../../LoadingScreen/Loading"; -import BadgeComponent from "../../Base/Badge/BadgeComponent"; -import DefaultUser from "../../../assets/images/User/clientDefault.png"; +import LoadingScreen from "../../../../LoadingScreen/LoadingScreen"; +import BadgeComponent from "../../../../Base/Badge/BadgeComponent"; +import DefaultUser from "../../../../../assets/images/User/clientDefault.png"; const TicketListItem = ({ tickets }) => { const history = useHistory(); @@ -24,37 +25,39 @@ const TicketListItem = ({ tickets }) => { const isMounted = React.useRef(true); const { user } = React.useContext(AuthContext); - useEffect(() => { + React.useEffect(() => { return () => { isMounted.current = false; }; }, []); const handleAcepptTicket = async (id) => { - setLoading(true); + setLoading(true) try { await api.put(`/tickets/${id}`, { - status: tickets.status, + status: "open", userId: user?.id, }); + console.log("Passou no try", tickets.status, user?.id, id); } catch (err) { setLoading(false); toastError(err); } + if (isMounted.current) { setLoading(false); } + history.push(`/tickets/${id}`); }; const handleSelectTicket = (id) => { - history.push(`/tickets/${tickets.id}`); + history.push(`/tickets/${id}`); }; - console.log(tickets); - if (!tickets) return ; + if (loading) return ; return ( - + handleSelectTicket(tickets.id)}> {tickets.contact.profilePicUrl ? ( ) : ( @@ -82,6 +85,11 @@ const TicketListItem = ({ tickets }) => { <>{format(parseISO(tickets.updatedAt), "dd/MM/yyyy")} )} + {tickets.status === "pending" ? ( + + ) : ( + "" + )} ); diff --git a/frontend/src/components/Ticket/TicketListItem/TicketListItem.style.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/TicketListItem.style.jsx similarity index 95% rename from frontend/src/components/Ticket/TicketListItem/TicketListItem.style.jsx rename to frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/TicketListItem.style.jsx index 8162421..33b14e8 100644 --- a/frontend/src/components/Ticket/TicketListItem/TicketListItem.style.jsx +++ b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/TicketListItem.style.jsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { color } from "../../../style/varibles"; +import { color } from "../../../../../style/varibles"; export const TicketListItemStyled = styled.li` cursor: pointer; @@ -59,6 +59,7 @@ export const TicketDateStyled = styled.div` font-family: "Helvetica55"; display: block; color: white; + margin-right: 1rem; `; export const TicketImgStyled = styled.img` diff --git a/frontend/src/components/Ticket/TicketListItem/index.js b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/index.js similarity index 100% rename from frontend/src/components/Ticket/TicketListItem/index.js rename to frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/index.js diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx index 234f42a..d1bf84e 100644 --- a/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx +++ b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx @@ -1,10 +1,11 @@ import React from "react"; -import { useHistory } from "react-router-dom"; + import openSocket from "socket.io-client"; +import TicketListStyled from "./TicketsList.style"; import useTickets from "../../../../hooks/useTickets"; -import TicketListItem from "../../TicketListItem/TicketListItem"; -import TicketsListSkeleton from "../../../TicketsListSkeleton"; +import TicketListItem from "../TicketsList/TicketListItem/TicketListItem"; +import TicketsListSkeleton from "../TicketsListSkeleton/TicketListSkeleton"; import { i18n } from "../../../../translate/i18n"; import { AuthContext } from "../../../../context/Auth/AuthContext"; @@ -94,11 +95,10 @@ const reducer = (state, action) => { } }; const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount }) => { - const history = useHistory(); const [pageNumber, setPageNumber] = React.useState(1); const [ticketsList, dispatch] = React.useReducer(reducer, []); const { user } = React.useContext(AuthContext); - const { tickets, hasMore, loading } = useTickets({ + const { tickets, loading } = useTickets({ pageNumber, searchParam, status, @@ -184,15 +184,13 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou }; }, [status, showAll, user, selectedQueueIds]); - - if (ticketsList <= 0) return

carregando

; - + if (loading) return ; return ( -
    + {ticketsList.map((ticket) => ( ))} -
+ ); }; diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.style.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.style.jsx new file mode 100644 index 0000000..141ae52 --- /dev/null +++ b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.style.jsx @@ -0,0 +1,10 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +const TicketListStyled = styled.ul` + background-color: ${color.gradient.border}; + height: 100vh; + margin-top: 16px; +`; + +export default TicketListStyled; diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/TicketListSkeleton.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/TicketListSkeleton.jsx new file mode 100644 index 0000000..43ac9f6 --- /dev/null +++ b/frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/TicketListSkeleton.jsx @@ -0,0 +1,42 @@ +import React from "react"; +import { + TicketListSkeletonStyled, + TicketSkeletonItemStyled, + TicketSkeletonTitleStyled, + TicketSkeletonDateStyled, + TicketSkeletonImgStyled, +} from "./TicketListSkeleton.style"; + +const TicketsSkeleton = () => { + return ( + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + ); +}; + +export default TicketsSkeleton; + diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/TicketListSkeleton.style.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/TicketListSkeleton.style.jsx new file mode 100644 index 0000000..5dca19e --- /dev/null +++ b/frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/TicketListSkeleton.style.jsx @@ -0,0 +1,80 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +export const TicketListSkeletonStyled = styled.ul` + background-color: ${color.gradient.border}; + height: 100vh; + margin-top: 16px; +`; + +export const TicketSkeletonItemStyled = styled.li` + cursor: pointer; + position: relative; + background-color: ${color.complement.azulOscuro}; + display: flex; + align-items: center; + padding: 0.5rem 6px; + border-bottom: 1.5px solid ${color.gradient.border}; + height: fit-content; + transition: filter 0.2s linear; + &:nth-child(1) { + margin-top: 6px; + } + &:hover { + filter: brightness(1.2); + transition: filter 0.2s linear; + } +`; + +export const TicketSkeletonTitleStyled = styled.div` + position: relative; + display: flex; + flex-direction: column; + flex-grow: 1; + row-gap: 6px; + opacity: 0.1; + & div { + color: ${color.pricinpal.blanco}; + width: 190px; + font-size: 12px; + &:nth-child(1) { + width: 150px; + height: 18px; + background: linear-gradient(to right, ${color.gradient.border}, ${color.pricinpal.blanco}); + animation: wave 0.8s infinite; + } + &:nth-child(2) { + width: 150px; + height: 18px; + background: linear-gradient(to right, ${color.gradient.border}, ${color.pricinpal.blanco}); + animation: wave 0.8s infinite; + } + } + @keyframes wave { + to { + background-position: 150px; + } + } +`; +export const TicketSkeletonDateStyled = styled.div` + background: linear-gradient(to right, ${color.gradient.border}, ${color.pricinpal.blanco}); + animation: wave 0.8s infinite; + opacity: 0.1; + display: block; + width: 40px; + height: 18px; + font-size: 12px; + margin-right: 1rem; +`; + +export const TicketSkeletonImgStyled = styled.div` + background: linear-gradient(to right, ${color.gradient.border}, ${color.pricinpal.blanco}); + animation: wave 0.8s infinite; + opacity: 0.1; + width: 40px; + height: 40px; + object-fit: contain; + border-radius: 50%; + margin: 0 6px; +`; + diff --git a/frontend/src/components/TicketsListSkeleton/index.js b/frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/index.js similarity index 100% rename from frontend/src/components/TicketsListSkeleton/index.js rename to frontend/src/components/Ticket/TicketsManager/TicketsListSkeleton/index.js diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx index cbdf41f..ff74461 100644 --- a/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx +++ b/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx @@ -4,35 +4,39 @@ import TicketsManagerStyled from "./TicketsManager.style"; import TicketsTabs from "./TicketsTabs/TicketsTabs"; import TicketsList from "./TicketsList/TicketsList"; import NewTicketModal from "../../NewTicketModal"; - +import useTickets from "../../../hooks/useTickets"; import { AuthContext } from "../../../context/Auth/AuthContext"; import TicketSearch from "../TicketSearch/TicketSearch"; const TicketsManager = () => { const [valueTab, setValueTab] = React.useState("open"); const [searchParam, setSearchParam] = React.useState(""); - + const [spinning, setSpinning] = React.useState(false); const [newTicketModalOpen, setNewTicketModalOpen] = React.useState(false); const [showAllTickets, setShowAllTickets] = React.useState(false); const { user } = React.useContext(AuthContext); - const userQueueIds = user.queues.map((q) => q.id); const [selectedQueueIds, setSelectedQueueIds] = React.useState(userQueueIds || []); + const { tickets } = useTickets({ + searchParam + }); let searchTimeout; const handleSearch = (e) => { + setSpinning(true); const searchedTerm = e.target.value.toLowerCase(); clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { + setSearchParam(searchedTerm); + setSpinning(false); + }, 200); + if (searchedTerm === "") { setSearchParam(searchedTerm); return; } - - searchTimeout = setTimeout(() => { - setSearchParam(searchedTerm); - }, 200); }; React.useEffect(() => { @@ -40,11 +44,15 @@ const TicketsManager = () => { setShowAllTickets(true); } }, [user.profile]); + return ( - - - + + { +const TicketsTabs = ({ tickets, setValueTab, valueTab }) => { + if (!setValueTab) return null; return ( diff --git a/frontend/src/components/UserModal/UserModal.jsx b/frontend/src/components/UserModal/UserModal.jsx index efa0c0f..f3cd056 100644 --- a/frontend/src/components/UserModal/UserModal.jsx +++ b/frontend/src/components/UserModal/UserModal.jsx @@ -6,7 +6,7 @@ import api from "../../services/api"; import { AuthContext } from "../../context/Auth/AuthContext"; import { Can } from "../Can"; -import BtnComponent from "../Base/BTN/Btn"; +import BtnComponent from "../Base/Btn/Btn"; import FormComponent from "../Base/Form/FormComponent"; import InputComponent from "../Base/Form/Input/InputComponent"; import UserModalComponent from "./UserModalImg/UserModalComponent"; diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index 2dd0ea9..cfc1d04 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -1,6 +1,6 @@ import React from "react"; -import Loading from "../components/LoadingScreen/Loading"; +import LoadingScreen from "../components/LoadingScreen/LoadingScreen"; import MainContainer from "../components/Base/MainContainer/MainContainer"; import { AuthContext } from "../context/Auth/AuthContext"; import { i18n } from "../translate/i18n"; @@ -10,7 +10,7 @@ const LoggedInLayout = ({ children }) => { const { loading, user } = React.useContext(AuthContext); if (loading) { - return ; + return ; } return ( diff --git a/frontend/src/routes/Route.js b/frontend/src/routes/Route.js index 788501e..8aa58b5 100644 --- a/frontend/src/routes/Route.js +++ b/frontend/src/routes/Route.js @@ -2,7 +2,7 @@ import React, { useContext } from "react"; import { Route as RouterRoute, Redirect } from "react-router-dom"; import { AuthContext } from "../context/Auth/AuthContext"; -import Loading from "../components/LoadingScreen/Loading" +import LoadingScreen from "../components/LoadingScreen/LoadingScreen" const Route = ({ component: Component, isPrivate = false, ...rest }) => { const { isAuth, loading } = useContext(AuthContext); @@ -10,7 +10,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { if (!isAuth && isPrivate) { return ( <> - {loading && } + {loading && } ); @@ -19,7 +19,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { if (isAuth && !isPrivate) { return ( <> - {loading && } + {loading && } ; ); @@ -27,7 +27,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { return ( <> - {loading && } + {loading && } );