smooth scroll land

This commit is contained in:
Luke Berndt
2023-01-26 07:36:04 -05:00
parent e8b81f77a1
commit 28ac40b3c7
2 changed files with 36 additions and 13 deletions

View File

@@ -6,7 +6,7 @@ import CalendarModal from "./components/CalendarModal";
import CallPlayer from "./CallPlayer";
import { useSelector, useDispatch } from 'react-redux'
import { setLive, setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice";
import { getCalls, addCall } from "../features/calls/callsSlice";
import { getCalls, addCall, getOlderCalls, getNewerCalls } from "../features/calls/callsSlice";
import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
import {
@@ -107,7 +107,7 @@ function Calls(props) {
case 'calls':
if (positionRef.current) {
pageYOffset.current = positionRef.current.clientHeight;
pageYOffset.current = {direction: "top", position: positionRef.current.clientHeight};
}
setSelectCallId(message._id);
dispatch(addCall(message));
@@ -195,6 +195,34 @@ function Calls(props) {
}
const handleNewer = () => {
if (positionRef.current && !live) {
pageYOffset.current = {direction: "top", position: positionRef.current.clientHeight};
}
dispatch(getNewerCalls({}));
}
const handleOlder = () => {
if (positionRef.current) {
pageYOffset.current = {direction: "bottom", position: positionRef.current.clientHeight};
}
dispatch(getOlderCalls({}));
}
useLayoutEffect(() => {
if (pageYOffset.current) {
const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current.position);
if (pageYOffset.current.direction == "top") {
window.scrollBy(0, scrollAmount);
} else {
//window.scrollBy(0, -1 * scrollAmount);
}
}
}, [callsData])
const setStateFromUri = async () => {
let filter = {
filterDate: false,
@@ -307,12 +335,6 @@ function Calls(props) {
useLayoutEffect(() => {
const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current);
window.scrollBy(0, scrollAmount);
}, [callsData])
let archiveLabel = "";
@@ -381,7 +403,7 @@ function Calls(props) {
</Menu.Item>
</Menu.Menu>
</Menu>
<CallPlayer callsData={callsData} selectCallId={selectCallId} />
<CallPlayer callsData={callsData} selectCallId={selectCallId} handleNewer={handleNewer} handleOlder={handleOlder} />
</div>
);
}