fix: remove useMaxAvailableHeightInWindow

graasp · Nov 5, 2024 · 739a063 · 739a063
1 parent 4c12afb
commit 739a063
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 166 deletions.
diff --git a/cypress/e2e/Admin/results/TableByQuestion.cy.ts b/cypress/e2e/Admin/results/TableByQuestion.cy.ts
@@ -89,11 +89,11 @@ describe('Table by Question', () => {
     const orderedResponseText = getSettingsByName(
       APP_SETTINGS_FEW_QUESTIONS,
       APP_SETTING_NAMES.QUESTION_LIST
-    )[0].data.list.map((elem) => {
-      return APP_SETTINGS_FEW_QUESTIONS.find(
-        (el) => el.data.questionId === elem
-      ).data.question;
-    });
+    )[0].data.list.map(
+      (elem) =>
+        APP_SETTINGS_FEW_QUESTIONS.find((el) => el.data.questionId === elem)
+          .data.question
+    );
 
     cy.get(dataCyWrapper(AUTO_SCROLLABLE_MENU_LINK_LIST_CY))
       .children('a')
@@ -191,9 +191,7 @@ describe('Table by Question', () => {
         ])
       ).values(),
     ];
-    users.sort(({ name: a }, { name: b }) => {
-      return a > b ? 1 : -1;
-    });
+    users.sort(({ name: a }, { name: b }) => (a > b ? 1 : -1));
     for (const [i] of users.entries()) {
       // navigate to the table by user
       cy.get(dataCyWrapper(RESULT_TABLES_RESULT_BY_QUESTION_BUTTON_CY)).click();

diff --git a/cypress/e2e/Admin/results/TableByUser.cy.ts b/cypress/e2e/Admin/results/TableByUser.cy.ts
@@ -234,11 +234,10 @@ const testTableHeader = (uId: string, ascending: string) => {
  *
  * @return list of tuple containing the user id along with its name, sorted by name
  */
-const getUserNamesFromAppData = (appData: AppData[]) => {
-  return [...new Set(appData.map((data) => data.member))].sort(
+const getUserNamesFromAppData = (appData: AppData[]) =>
+  [...new Set(appData.map((data) => data.member))].sort(
     getComparator({ order: Order.ASC, comp: comparatorArrayByElemName })
   );
-};
 
 const isOrdered = (arr: string[], asc = true) => {
   const orderComparison = (a: string, b: string) =>

diff --git a/cypress/e2e/Analytics/AnalyticsDetailedCharts.cy.ts b/cypress/e2e/Analytics/AnalyticsDetailedCharts.cy.ts
@@ -1,8 +1,5 @@
 import { getSettingsByName } from '../../../src/components/context/utilities';
-import {
-  APP_SETTING_NAMES,
-  QuestionType,
-} from '../../../src/config/constants';
+import { APP_SETTING_NAMES, QuestionType } from '../../../src/config/constants';
 import {
   buildAnalyticsDetailedChartCy,
   buildAnalyticsDetailedQuestionTabMenuCy,
@@ -15,7 +12,6 @@ import { MEMBERS_RESULT_TABLES } from '../../fixtures/members';
 import { verifySelectedMenu } from '../../utils/autoScrollableMenuSelected';
 
 describe('Analytics Detailed', () => {
-
   it('Selecting detailed chart display correct answer frequency chart based on question type', () => {
     cy.setupAnalyticsForCheck(
       APP_SETTINGS_LOT_QUESTIONS,
@@ -39,9 +35,9 @@ describe('Analytics Detailed', () => {
         case QuestionType.FILL_BLANKS:
           q.data.text
             .match(ANSWER_REGEXP)
-            .map((word, idx) => 
+            .map((word, idx) =>
               // todo: use id instead of label
-               ({
+              ({
                 label: `Question answer frequency blank ${idx + 1}`,
                 id: `Question answer frequency blank ${idx + 1}`,
               })

diff --git a/src/components/results/ResultTables.tsx b/src/components/results/ResultTables.tsx
@@ -18,10 +18,6 @@ import { Member } from '@graasp/sdk';
 
 import { hooks } from '../../config/queryClient';
 import { TABLE_BY_QUESTION_CONTAINER_CY } from '../../config/selectors';
-import {
-  useMaxAvailableHeightInWindow,
-  useMaxAvailableHeightWithParentHeight,
-} from '../../hooks/useMaxAvailableHeight';
 import { getFirstOrUndefined } from '../../utils/array';
 import {
   Order,
@@ -75,11 +71,6 @@ const ResultTables = ({ headerElem }: Props) => {
   const userContainerRef = useRef<null | HTMLElement>(null);
   const [tab, setTab] = useState(0);
   const tableMenuElem = useRef<HTMLElement | undefined>(undefined);
-  const maxResultViewHeight = useMaxAvailableHeightInWindow(headerElem.current);
-  const maxHeightScrollableMenu = useMaxAvailableHeightWithParentHeight(
-    maxResultViewHeight,
-    tableMenuElem.current
-  );
   // Use a ref here, so that we can reset it from the child component (AutoScrollableMenu), without triggering a
   //re-render. We have to reset it in the child component, so that it only scroll to this value only once
   const initiallyClickedQuestion = useRef<string | null>(null);
@@ -206,13 +197,13 @@ const ResultTables = ({ headerElem }: Props) => {
   return order.length > 0 ? (
     usersId && usersId.length > 0 ? (
       <Stack direction="row" spacing={5}>
-        <Box sx={{ maxHeight: maxResultViewHeight }}>
+        <Box>
           <ResultTablesMenu
             tab={tab}
             setTab={setTab}
             tableMenuElem={tableMenuElem}
           />
-          <Box sx={{ maxHeight: maxHeightScrollableMenu, overflow: 'auto' }}>
+          <Box>
             <TabPanel tab={tab} index={TABLE_BY_QUESTION_PANEL_IDX}>
               <AutoScrollableMenu
                 links={order?.reduce((accumulator, qId) => {
@@ -251,11 +242,8 @@ const ResultTables = ({ headerElem }: Props) => {
         <TabPanel tab={tab} index={TABLE_BY_QUESTION_PANEL_IDX}>
           <Box
             sx={{
-              overflow: 'auto',
               width: '100%',
-              height: maxResultViewHeight,
               pr: 1,
-              scrollBehavior: 'smooth',
             }}
             ref={questionContainerRef}
           >
@@ -288,11 +276,8 @@ const ResultTables = ({ headerElem }: Props) => {
         <TabPanel tab={tab} index={TABLE_BY_USER_PANEL_IDX}>
           <Box
             sx={{
-              overflow: 'auto',
               width: '100%',
-              height: maxResultViewHeight,
               pr: 1,
-              scrollBehavior: 'smooth',
             }}
             ref={userContainerRef}
           >

diff --git a/src/hooks/useMaxAvailableHeight.tsx b/src/hooks/useMaxAvailableHeight.tsx