diff --git a/frontend/package.json b/frontend/package.json index 40c7533..459c388 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,6 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-infinite-scroll-reverse": "^1.0.3", - "react-infinite-scroller": "^1.2.4", "react-linkify": "^1.0.0-alpha", "react-modal-image": "^2.5.0", "react-router-dom": "^5.2.0", diff --git a/frontend/src/components/Tickets/index.js b/frontend/src/components/Tickets/index.js index 05d2159..ed7d7a7 100644 --- a/frontend/src/components/Tickets/index.js +++ b/frontend/src/components/Tickets/index.js @@ -3,7 +3,6 @@ import { useHistory, useParams } from "react-router-dom"; import openSocket from "socket.io-client"; import { format } from "date-fns"; import { toast } from "react-toastify"; -import InfiniteScroll from "react-infinite-scroller"; import { makeStyles } from "@material-ui/core/styles"; import Paper from "@material-ui/core/Paper"; @@ -27,7 +26,7 @@ import TabPanel from "../TabPanel"; import api from "../../services/api"; const useStyles = makeStyles(theme => ({ - contactsWrapper: { + ticketsWrapper: { position: "relative", display: "flex", height: "100%", @@ -330,6 +329,15 @@ const Tickets = () => { setTab("search"); }; + const handleScroll = e => { + if (count === tickets.length || loading) return; + const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; + + if (scrollHeight - (scrollTop + 100) < clientHeight) { + loadMore(); + } + }; + const handleChangeTab = (event, newValue) => { setTab(newValue); }; @@ -357,38 +365,8 @@ const Tickets = () => { return ticketsFound; }; - const CustomInfiniteScroll = ({ children, loadingKey }) => { - return ( - !loading && loadMore()} - hasMore={count > tickets.length} - useWindow={false} - initialLoad={false} - threshold={100} - loader={} - > - {children} - - ); - }; - - const CustomTicketList = ({ ...rest }) => { - return ( - - ); - }; - return ( - + setNewTicketModalOpen(false)} @@ -433,8 +411,13 @@ const Tickets = () => { /> - - + + Atendendo @@ -464,19 +447,27 @@ const Tickets = () => { - {loading ? ( - - ) : ( - - )} + + {loading && } - + Aguardando @@ -484,7 +475,13 @@ const Tickets = () => { - { - - - - - + + + + + - - - - + + + - + + {loading && } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 77836c0..ce48f89 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -9012,7 +9012,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.4" -prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -9249,13 +9249,6 @@ react-infinite-scroll-reverse@^1.0.3: dependencies: prop-types "15.7.2" -react-infinite-scroller@^1.2.4: - version "1.2.4" - resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9" - integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw== - dependencies: - prop-types "^15.5.8" - react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"