Skip to content

Commit

Permalink
fix: fix resizing loop of analytics view
Browse files Browse the repository at this point in the history
  • Loading branch information
LinaYahya committed Apr 23, 2024
1 parent 288a201 commit 43ef05f
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 17 deletions.
21 changes: 4 additions & 17 deletions src/components/Analytics/AnalyticsMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@ import {
buildAnalyticsDetailedQuestionTabMenuCy,
} from '../../config/selectors';
import { useElementWidth } from '../../hooks/useElementWidth';
import {
useMaxAvailableHeightInWindow,
useMaxAvailableHeightWithParentHeight,
} from '../../hooks/useMaxAvailableHeight';
import { QUIZ_TRANSLATIONS } from '../../langs/constants';
import { getFirstOrUndefined } from '../../utils/array';
import { QuizContext } from '../context/QuizContext';
Expand Down Expand Up @@ -62,13 +58,8 @@ const AnalyticsMenu = (): JSX.Element => {
const chartContainerRef = useRef(null);
const stackElem = useRef(null);
const sideMenuElem = useRef(null);

const chartTabs = useRef(null);
const maxResultViewHeight = useMaxAvailableHeightInWindow(null);
const maxHeightScrollableMenu = useMaxAvailableHeightWithParentHeight(
maxResultViewHeight,
chartTabs.current
);

const [tab, setTab] = useState(0);

const questionById = useMemo(
Expand Down Expand Up @@ -186,23 +177,20 @@ const AnalyticsMenu = (): JSX.Element => {

return order.length > 0 ? (
responses && nValidResponses && nValidResponses > 0 ? (
<Box data-cy={ANALYTICS_CONTAINER_CY} sx={{ height: '100%' }}>
<Stack direction="row" ref={stackElem} sx={{ height: '100%' }}>
<Box data-cy={ANALYTICS_CONTAINER_CY}>
<Stack direction="row" ref={stackElem}>
<Box
ref={sideMenuElem}
sx={{
minWidth: '8em',
maxWidth: '12em',
maxHeight: maxResultViewHeight,
}}
>
<Box
sx={{
borderBottom: 1,
borderColor: 'divider',
mb: 4,
maxHeight: maxResultViewHeight / 2,
overflow: 'auto',
}}
ref={chartTabs}
>
Expand Down Expand Up @@ -235,7 +223,7 @@ const AnalyticsMenu = (): JSX.Element => {
})}
</Tabs>
</Box>
<Box sx={{ overflow: 'auto', maxHeight: maxHeightScrollableMenu }}>
<Box>
<AutoScrollableMenu
links={charts}
elemRefs={chartRefs}
Expand All @@ -248,7 +236,6 @@ const AnalyticsMenu = (): JSX.Element => {
sx={{
overflow: 'auto',
width: '100%',
height: maxResultViewHeight,
scrollBehavior: 'smooth',
}}
ref={chartContainerRef}
Expand Down
9 changes: 9 additions & 0 deletions src/components/navigation/AutoScrollableMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const AutoScrollableMenu = ({
triggerVal
);

console.log(highlightedLink, 'higlitedlink');
/**
* Helper function to handle the click on a link
*
Expand All @@ -94,6 +95,7 @@ const AutoScrollableMenu = ({
* @param {string} link The label of the question we clicked on
*/
const handleLinkClicked = (link: string) => {
console.log(link, 'link');
clickOnLink(link);
};

Expand All @@ -115,6 +117,13 @@ const AutoScrollableMenu = ({
}
}, [initiallyClickedId, clickOnLink]);

useEffect(() => {
const el = document.getElementById(highlightedLink);
if (el) {
el.scrollIntoView(true);
}
}, [highlightedLink]);

return (
<Stack data-cy={AUTO_SCROLLABLE_MENU_LINK_LIST_CY}>
{links?.map(({ label, id, link }) => {
Expand Down

0 comments on commit 43ef05f

Please sign in to comment.