fix(FOROME-619): fixing last row (#410)

* fix(FOROME-618): fixed request duplication in table
ForomePlatform · Feb 3, 2022 · c418255 · c418255
1 parent 15da129
commit c418255
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "react-table": "7.7.0",
     "react-three-state-checkbox": "1.3.4",
     "react-toastify": "7.0.4",
+    "react-virtualized-auto-sizer": "1.0.6",
     "react-window": "1.8.6",
     "react-window-infinite-loader": "1.0.7",
     "stream": "0.0.2",
@@ -66,6 +67,7 @@
     "@types/react-modal": "3.12.0",
     "@types/react-router-dom": "5.1.7",
     "@types/react-table": "7.7.1",
+    "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.3",
     "@types/react-window-infinite-loader": "1.0.5",
     "@types/styled-components": "5.1.9",

diff --git a/src/components/loader.tsx b/src/components/loader.tsx
@@ -1,23 +1,69 @@
-import { ReactElement } from 'react'
-import styled from 'styled-components'
+import React, { ReactElement } from 'react'
+import styled, { css } from 'styled-components'
 
-const Root = styled.div`
+export interface ILoaderProps {
+  size: 'xl' | 'l' | 'm' | 's' | 'xs'
+}
+
+const loaderSizes: Record<
+  ILoaderProps['size'],
+  Record<'fontSize' | 'width' | 'height' | 'margin', number>
+> = {
+  xl: {
+    fontSize: 13,
+    width: 25,
+    height: 25,
+    margin: 100,
+  },
+  l: {
+    fontSize: 10,
+    width: 20,
+    height: 20,
+    margin: 80,
+  },
+  m: {
+    fontSize: 8,
+    width: 15,
+    height: 15,
+    margin: 40,
+  },
+  s: {
+    fontSize: 5,
+    width: 10,
+    height: 10,
+    margin: 0,
+  },
+  xs: {
+    fontSize: 2,
+    width: 5,
+    height: 5,
+    margin: 0,
+  },
+}
+
+const Root = styled.div<{ size: ILoaderProps['size'] }>`
   width: 100%;
 
   .loader,
   .loader:before,
   .loader:after {
     border-radius: 50%;
-    width: 2.5em;
-    height: 2.5em;
+    ${({ size }) =>
+      css`
+        width: ${loaderSizes[size].width}px;
+        height: ${loaderSizes[size].height}px;
+      `}
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation: load7 1.8s infinite ease-in-out;
     animation: load7 1.8s infinite ease-in-out;
   }
   .loader {
-    font-size: 10px;
-    margin: 80px auto;
+    ${({ size }) =>
+      css`
+        font-size: ${loaderSizes[size].fontSize}px;
+        margin: ${loaderSizes[size].margin}px auto;
+      `}
     position: relative;
     text-indent: -9999em;
     -webkit-transform: translateZ(0);
@@ -62,10 +108,12 @@ const Root = styled.div`
   }
 `
 
-export const Loader = (): ReactElement => {
+export const Loader = ({
+  size = 'l',
+}: React.PropsWithChildren<Partial<ILoaderProps>>): ReactElement => {
   return (
-    <Root>
-      <div className="loader text-blue-bright">{'Loading...'}</div>
+    <Root size={size}>
+      <div className="loader text-blue-bright">Loading...</div>
     </Root>
   )
 }
diff --git a/src/pages/ws/ui/table/table.tsx b/src/pages/ws/ui/table/table.tsx
@@ -2,6 +2,7 @@ import { ReactElement, useCallback, useEffect } from 'react'
 import ScrollContainer from 'react-indiana-drag-scroll'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useBlockLayout, useTable } from 'react-table'
+import Autosizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import InfiniteLoader from 'react-window-infinite-loader'
 import cn from 'classnames'
@@ -38,6 +39,7 @@ export enum RowHeight {
 }
 
 const TABLE_SCROLL_POSITION = 'tableScrollPosition'
+const DEFAULT_HEADER_HEIGHT = 40
 
 export const isRowSelected = (
   rowIndex: number,
@@ -199,7 +201,8 @@ export const Table = observer(({ columns, data }: Props): ReactElement => {
   const RenderRow = useCallback(
     ({ index, style }) => {
       const row = rows[index]
-      const isItemLoaded = index !== rows.length - 1
+
+      const isLoading = datasetStore.isFetchingMore && index === rows.length - 1
 
       prepareRow(row)
 
@@ -217,7 +220,7 @@ export const Table = observer(({ columns, data }: Props): ReactElement => {
               : 'text-black hover:bg-blue-light',
           )}
         >
-          {isItemLoaded ? (
+          {!isLoading ? (
             row.cells.map((cell: any) => {
               const isSampleColumn = cell?.column?.Header === 'Samples'
               const valueNumber = Object.keys(cell.value).length
@@ -256,13 +259,19 @@ export const Table = observer(({ columns, data }: Props): ReactElement => {
               )
             })
           ) : (
-            <Loader />
+            <Loader size="s" />
           )}
         </div>
       )
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleOpenVariant, prepareRow, rows, variantStore.index],
+    [
+      handleOpenVariant,
+      prepareRow,
+      rows,
+      variantStore.index,
+      datasetStore.isFetchingMore,
+    ],
   )
 
   const handleScrollAsync = debounce(async () => {
@@ -289,9 +298,11 @@ export const Table = observer(({ columns, data }: Props): ReactElement => {
       style={{ width: totalColumnsWidth }}
       className="table h-full"
     >
-      <div className="thead">
+      <div style={{ height: `${DEFAULT_HEADER_HEIGHT}px` }} className="thead">
         {headerGroups.map(headerGroup => {
-          const stylesHead = { ...headerGroup.getHeaderGroupProps().style }
+          const stylesHead = {
+            ...headerGroup.getHeaderGroupProps().style,
+          }
 
           stylesHead.width = Number.parseFloat(stylesHead.width as string) - 8
 
@@ -323,34 +334,34 @@ export const Table = observer(({ columns, data }: Props): ReactElement => {
       {renderNoResults()}
 
       {toJS(datasetStore.tabReport).length > 0 && (
-        <div {...getTableBodyProps()} className="text-12 tbody">
-          <InfiniteLoader
-            isItemLoaded={index => index !== rows.length - 1}
-            itemCount={rows.length}
-            loadMoreItems={handleScrollAsync}
-          >
-            {({ onItemsRendered, ref }) => (
-              <FixedSizeList
-                height={
-                  (window.innerHeight ||
-                    document.documentElement.clientHeight ||
-                    document.body.clientHeight) - 200
-                }
-                itemCount={rows.length}
-                itemSize={
-                  columnsStore.viewType === ViewTypeEnum.Compact
-                    ? RowHeight.Compact
-                    : RowHeight.Basic
-                }
-                width={totalColumnsWidth}
-                ref={ref}
-                onItemsRendered={onItemsRendered}
+        <Autosizer>
+          {({ height }) => (
+            <div {...getTableBodyProps()} className="text-12 tbody">
+              <InfiniteLoader
+                isItemLoaded={index => index !== rows.length}
+                itemCount={rows.length + 1}
+                loadMoreItems={handleScrollAsync}
               >
-                {RenderRow}
-              </FixedSizeList>
-            )}
-          </InfiniteLoader>
-        </div>
+                {({ onItemsRendered, ref }) => (
+                  <FixedSizeList
+                    height={height - DEFAULT_HEADER_HEIGHT}
+                    itemCount={rows.length}
+                    itemSize={
+                      columnsStore.viewType === ViewTypeEnum.Compact
+                        ? RowHeight.Compact
+                        : RowHeight.Basic
+                    }
+                    width={totalColumnsWidth}
+                    ref={ref}
+                    onItemsRendered={onItemsRendered}
+                  >
+                    {RenderRow}
+                  </FixedSizeList>
+                )}
+              </InfiniteLoader>
+            </div>
+          )}
+        </Autosizer>
       )}
     </div>
   )

diff --git a/yarn.lock b/yarn.lock
@@ -2331,6 +2331,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-virtualized-auto-sizer@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
+  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-window-infinite-loader@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-window-infinite-loader/-/react-window-infinite-loader-1.0.5.tgz#32469a6a47438d9ebf1b5f5719943f494ea0abdf"
@@ -9625,6 +9632,11 @@ react-toastify@7.0.4:
   dependencies:
     clsx "^1.1.1"
 
+react-virtualized-auto-sizer@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
+  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+
 react-window-infinite-loader@1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/react-window-infinite-loader/-/react-window-infinite-loader-1.0.7.tgz#958ef1a689d20dce122ef377583acd987760aee8"