From 033319fc92e2fcdd299ec370db5f3265dffaa4b5 Mon Sep 17 00:00:00 2001
From: Tereshchenko Aleksandr <aleteres@lx3-500-30148.ad.helsinki.fi>
Date: Mon, 30 Sep 2024 16:03:43 +0300
Subject: [PATCH] Scroll down on thesis row click to show thesis details

---
 src/client/components/ThesisPage/ThesesPage.tsx      | 12 ++++++++++--
 .../components/ThesisPage/ViewThesisFooter.tsx       |  5 +++--
 src/client/types.tsx                                 |  2 ++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/client/components/ThesisPage/ThesesPage.tsx b/src/client/components/ThesisPage/ThesesPage.tsx
index 3f15d66..11e51ea 100644
--- a/src/client/components/ThesisPage/ThesesPage.tsx
+++ b/src/client/components/ThesisPage/ThesesPage.tsx
@@ -42,6 +42,7 @@ const PAGE_SIZE = 25
 
 const ThesesPage = () => {
   const apiRef = useGridApiRef()
+  const footerRef = useRef<HTMLDivElement>(null)
   const { t, i18n } = useTranslation()
   const { language } = i18n as { language: TranslationLanguage }
   const { user, isLoading: loggedInUserLoading } = useLoggedInUser()
@@ -100,6 +101,12 @@ const ThesesPage = () => {
     }
   }, [user.thesesTableFilters])
 
+  useEffect(() => {
+    if (rowSelectionModel.length > 0) {
+      footerRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [rowSelectionModel])
+
   const columns: GridColDef<Thesis>[] = [
     {
       field: 'programId',
@@ -256,9 +263,9 @@ const ThesesPage = () => {
           paginationModel={paginationModel}
           onPaginationModelChange={(newModel) => setPaginationModel(newModel)}
           rowSelectionModel={rowSelectionModel}
-          onRowSelectionModelChange={(newSelection: GridRowSelectionModel) =>
+          onRowSelectionModelChange={(newSelection: GridRowSelectionModel) => {
             setRowSelectionModel(newSelection)
-          }
+          }}
           localeText={
             dataGridLocale.components.MuiDataGrid.defaultProps.localeText
           }
@@ -274,6 +281,7 @@ const ThesesPage = () => {
               showOnlyOwnTheses,
             },
             footer: {
+              footerRef,
               rowSelectionModel,
               handleEditThesis: initializeThesisEdit,
               handleDeleteThesis: initializeThesisDelete,
diff --git a/src/client/components/ThesisPage/ViewThesisFooter.tsx b/src/client/components/ThesisPage/ViewThesisFooter.tsx
index 4dcda77..a781ce6 100644
--- a/src/client/components/ThesisPage/ViewThesisFooter.tsx
+++ b/src/client/components/ThesisPage/ViewThesisFooter.tsx
@@ -357,7 +357,8 @@ const PreviewSkeleton = () => (
 const ViewThesisFooter = (
   props: GridSlotProps['footer'] & ThesisFooterProps
 ) => {
-  const { rowSelectionModel, handleEditThesis, handleDeleteThesis } = props
+  const { rowSelectionModel, footerRef, handleEditThesis, handleDeleteThesis } =
+    props
 
   const { t } = useTranslation()
   const { thesis, isLoading: thesisLoading } = useSingleThesis(
@@ -366,7 +367,7 @@ const ViewThesisFooter = (
 
   return (
     <>
-      <GridFooter />
+      <GridFooter ref={footerRef} />
       {thesis ? (
         <Box sx={{ m: 2 }}>
           <Stack
diff --git a/src/client/types.tsx b/src/client/types.tsx
index 1c95dc5..18084e5 100644
--- a/src/client/types.tsx
+++ b/src/client/types.tsx
@@ -1,3 +1,4 @@
+import { MutableRefObject } from 'react'
 import { User } from '@backend/types'
 import { GridRowSelectionModel } from '@mui/x-data-grid/models/gridRowSelectionModel'
 
@@ -17,6 +18,7 @@ export interface SupervisorSelection {
 }
 
 export interface ThesisFooterProps {
+  footerRef: MutableRefObject<HTMLDivElement>
   rowSelectionModel: GridRowSelectionModel[]
   handleEditThesis: () => void
   handleDeleteThesis: () => void