Client: Fixed re-render tile

packages/client/package.json

@@ -73,6 +73,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@svgr/webpack": "^5.5.0",
+    "@types/element-resize-detector": "^1.1.6",
     "@types/eslint": "^8.44.7",
     "@types/he": "^1.2.3",
     "@typescript-eslint/eslint-plugin": "^6.12.0",

packages/client/src/components/EmptyContainer/index.js

@@ -23,10 +23,12 @@
 // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import { useContext } from "react";
 
 import { observer, inject } from "mobx-react";
 //import { useLocation } from "react-router-dom";
 
+import { Context } from "@docspace/shared/utils";
 import { Events, FileExtensions } from "@docspace/shared/enums";
 
 import RootFolderContainer from "./RootFolderContainer";
@@ -49,7 +51,6 @@ const EmptyContainer = ({
   theme,
   type,
 
-  sectionWidth,
   isRoomNotFoundOrMoved,
   isGracePeriod,
   setQuotaWarningDialogVisible,
@@ -60,6 +61,8 @@ const EmptyContainer = ({
 }) => {
   //const location = useLocation();
 
+  const { sectionWidth } = useContext(Context);
+
   linkStyles.color = theme.filesEmptyContainer.linkColor;
 
   const onCreate = (e) => {

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js

@@ -25,12 +25,13 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
-import { useMemo } from "react";
+import { useMemo, useContext } from "react";
 import { inject, observer } from "mobx-react";
 
 import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 
 import { Base } from "@docspace/shared/themes";
+import { Context } from "@docspace/shared/utils";
 import { RowContainer } from "@docspace/shared/components/row-container";
 
 import SimpleFilesRow from "./SimpleFilesRow";
@@ -62,7 +63,6 @@ StyledRowContainer.defaultProps = { theme: Base };
 
 const FilesRowContainer = ({
   filesList,
-  sectionWidth,
   viewAs,
   setViewAs,
   infoPanelVisible,
@@ -75,6 +75,8 @@ const FilesRowContainer = ({
   highlightFile,
   currentDeviceType,
 }) => {
+  const { sectionWidth } = useContext(Context);
+
   useViewEffect({
     view: viewAs,
     setView: setViewAs,

packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -28,13 +28,20 @@ import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
 import { useNavigate, useLocation } from "react-router-dom";
 import elementResizeDetectorMaker from "element-resize-detector";
-import React, { useEffect, useRef, useCallback, useMemo } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  useContext,
+} from "react";
 
 import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 
 import { Base } from "@docspace/shared/themes";
 import { TableContainer } from "@docspace/shared/components/table";
 import { TableBody } from "@docspace/shared/components/table";
+import { Context } from "@docspace/shared/utils";
 
 import TableRow from "./TableRow";
 import TableHeader from "./TableHeader";
@@ -121,7 +128,6 @@ const elementResizeDetector = elementResizeDetectorMaker({
 
 const Table = ({
   filesList,
-  sectionWidth,
   viewAs,
   setViewAs,
   setFirsElemChecked,
@@ -142,6 +148,8 @@ const Table = ({
   const [tagCount, setTagCount] = React.useState(null);
   const [hideColumns, setHideColumns] = React.useState(false);
 
+  const { sectionWidth } = useContext(Context);
+
   const ref = useRef(null);
   const tagRef = useRef(null);
 

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -24,14 +24,17 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import React, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
+
 import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
+import { Context } from "@docspace/shared/utils";
 
 import Tile from "./sub-components/Tile";
 import FilesTileContent from "./FilesTileContent";
+import { FileTileContext } from "./FileTile.provider";
 
 import withFileActions from "../../../../../HOCs/withFileActions";
 import withQuickButtons from "../../../../../HOCs/withQuickButtons";
@@ -45,7 +48,6 @@ const StyledDragAndDrop = styled(DragAndDrop)`
 const FileTile = (props) => {
   const {
     item,
-    sectionWidth,
     dragging,
     onContentFileSelect,
     fileContextClick,
@@ -70,12 +72,12 @@ const FileTile = (props) => {
     t,
     getContextModel,
     onHideContextMenu,
-    thumbSize,
+    // thumbSize,
     setSelection,
     id,
     onSelectTag,
     onSelectOption,
-    columnCount,
+    // columnCount,
     isRooms,
     withCtrlSelect,
     withShiftSelect,
@@ -86,6 +88,10 @@ const FileTile = (props) => {
     badgeUrl,
   } = props;
 
+  const { sectionWidth } = useContext(Context);
+
+  const { columnCount, thumbSize } = useContext(FileTileContext);
+
   const temporaryExtension =
     item.id === -1 ? `.${item.fileExst}` : item.fileExst;
 

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.provider.tsx

@@ -0,0 +1,28 @@
+import { createContext, PropsWithChildren, useMemo } from "react";
+
+type FileTileContextType = {
+  thumbSize: string;
+  columnCount: null | number;
+};
+
+export const FileTileContext = createContext<FileTileContextType>({
+  columnCount: null,
+  thumbSize: "",
+});
+
+export const FileTileProvider = ({
+  children,
+  columnCount,
+  thumbSize,
+}: PropsWithChildren<FileTileContextType>) => {
+  const value = useMemo(
+    () => ({ columnCount, thumbSize }),
+    [thumbSize, columnCount],
+  );
+
+  return (
+    <FileTileContext.Provider value={value}>
+      {children}
+    </FileTileContext.Provider>
+  );
+};

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.utils.ts

@@ -0,0 +1,30 @@
+import elementResizeDetectorMaker from "element-resize-detector";
+
+export const getThumbSize = (width: number): string => {
+  let imgWidth = 216;
+
+  if (width >= 240 && width < 264) {
+    imgWidth = 240;
+  } else if (width >= 264 && width < 288) {
+    imgWidth = 264;
+  } else if (width >= 288 && width < 312) {
+    imgWidth = 288;
+  } else if (width >= 312 && width < 336) {
+    imgWidth = 312;
+  } else if (width >= 336 && width < 360) {
+    imgWidth = 336;
+  } else if (width >= 360 && width < 400) {
+    imgWidth = 360;
+  } else if (width >= 400 && width < 440) {
+    imgWidth = 400;
+  } else if (width >= 440) {
+    imgWidth = 440;
+  }
+
+  return `${imgWidth}x156`;
+};
+
+export const elementResizeDetector = elementResizeDetectorMaker({
+  strategy: "scroll",
+  callOnAdd: false,
+});

packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js

@@ -32,43 +32,16 @@ import React, {
   useMemo,
 } from "react";
 import { inject, observer } from "mobx-react";
-import elementResizeDetectorMaker from "element-resize-detector";
+
-import TileContainer from "./sub-components/TileContainer";
 import FileTile from "./FileTile";
+import { FileTileProvider } from "./FileTile.provider";
+import { elementResizeDetector, getThumbSize } from "./FileTile.utils";
 
-const getThumbSize = (width) => {
+import TileContainer from "./sub-components/TileContainer";
-  let imgWidth = 216;
-
-  if (width >= 240 && width < 264) {
-    imgWidth = 240;
-  } else if (width >= 264 && width < 288) {
-    imgWidth = 264;
-  } else if (width >= 288 && width < 312) {
-    imgWidth = 288;
-  } else if (width >= 312 && width < 336) {
-    imgWidth = 312;
-  } else if (width >= 336 && width < 360) {
-    imgWidth = 336;
-  } else if (width >= 360 && width < 400) {
-    imgWidth = 360;
-  } else if (width >= 400 && width < 440) {
-    imgWidth = 400;
-  } else if (width >= 440) {
-    imgWidth = 440;
-  }
-
-  return `${imgWidth}x156`;
-};
-
-const elementResizeDetector = elementResizeDetectorMaker({
-  strategy: "scroll",
-  callOnAdd: false,
-});
 
 const FilesTileContainer = ({
   filesList,
   t,
-  sectionWidth,
   withPaging,
   thumbnails1280x720,
 }) => {
@@ -139,10 +112,7 @@ const FilesTileContainer = ({
           }
           item={item}
           itemIndex={index}
-          sectionWidth={sectionWidth}
           selectableRef={onSetTileRef}
-          thumbSize={thumbSize}
-          columnCount={columnCount}
           withRef={true}
         />
       ) : (
@@ -153,24 +123,23 @@ const FilesTileContainer = ({
           }
           item={item}
           itemIndex={index}
-          sectionWidth={sectionWidth}
-          thumbSize={thumbSize}
-          columnCount={columnCount}
         />
       );
     });
-  }, [filesList, sectionWidth, onSetTileRef, thumbSize, columnCount]);
+  }, [filesList, onSetTileRef]);
 
   return (
-    <TileContainer
+    <FileTileProvider columnCount={columnCount} thumbSize={thumbSize}>
-      className="tile-container"
+      <TileContainer
-      draggable
+        className="tile-container"
-      useReactWindow={!withPaging}
+        draggable
-      headingFolders={t("Translations:Folders")}
+        useReactWindow={!withPaging}
-      headingFiles={t("Translations:Files")}
+        headingFolders={t("Translations:Folders")}
-    >
+        headingFiles={t("Translations:Files")}
-      {filesListNode}
+      >
-    </TileContainer>
+        {filesListNode}
+      </TileContainer>
+    </FileTileProvider>
   );
 };
 

packages/client/src/pages/Home/Section/Body/index.js

@@ -26,9 +26,8 @@
 
 import React, { useEffect } from "react";
 import { withTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-
 import { observer, inject } from "mobx-react";
+
 import FilesRowContainer from "./RowsView/FilesRowContainer";
 import FilesTileContainer from "./TilesView/FilesTileContainer";
 import EmptyContainer from "../../../../components/EmptyContainer";
@@ -37,7 +36,6 @@ import TableView from "./TableView/TableContainer";
 import withHotkeys from "../../../../HOCs/withHotkeys";
 import {
   clearEdgeScrollingTimer,
-  Consumer,
   isMobile,
   isTablet,
   onEdgeScrolling,
@@ -307,36 +305,18 @@ const SectionBodyContent = (props) => {
 
   if (isEmptyFilesList && movingInProgress) return <></>;
 
-  const showEmptyPage = isEmptyFilesList;
+  if (isEmptyFilesList) return <EmptyContainer isEmptyPage={isEmptyPage} />;
 
   return (
-    <Consumer>
+    <>
-      {(context) =>
+      {viewAs === "tile" ? (
-        showEmptyPage ? (
+        <FilesTileContainer t={t} />
-          <>
+      ) : viewAs === "table" ? (
-            <EmptyContainer
+        <TableView tReady={tReady} />
-              sectionWidth={context.sectionWidth}
+      ) : (
-              isEmptyPage={isEmptyPage}
+        <FilesRowContainer tReady={tReady} />
-            />
+      )}
-          </>
+    </>
-        ) : viewAs === "tile" ? (
-          <>
-            <FilesTileContainer sectionWidth={context.sectionWidth} t={t} />
-          </>
-        ) : viewAs === "table" ? (
-          <>
-            <TableView sectionWidth={context.sectionWidth} tReady={tReady} />
-          </>
-        ) : (
-          <>
-            <FilesRowContainer
-              sectionWidth={context.sectionWidth}
-              tReady={tReady}
-            />
-          </>
-        )
-      }
-    </Consumer>
   );
 };
 

yarn.lock

@@ -2580,6 +2580,7 @@ __metadata:
     "@babel/preset-typescript": "npm:^7.21.0"
     "@codemirror/lang-javascript": "npm:^6.2.2"
     "@svgr/webpack": "npm:^5.5.0"
+    "@types/element-resize-detector": "npm:^1.1.6"
     "@types/eslint": "npm:^8.44.7"
     "@types/he": "npm:^1.2.3"
     "@typescript-eslint/eslint-plugin": "npm:^6.12.0"
@@ -7627,6 +7628,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/element-resize-detector@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@types/element-resize-detector@npm:1.1.6"
+  checksum: 10/62967c4933ce6dc717608aa498bfbbf2567c3778958203621b1981f5804eb519cf16b8f677d3c92c9b2a9d791191b514dd60298e276fcbf6b1660542209dd299
+  languageName: node
+  linkType: hard
+
 "@types/emscripten@npm:^1.39.6":
   version: 1.39.10
   resolution: "@types/emscripten@npm:1.39.10"