Folder doesn't get reloaded when it is renamed. #4223

import React, { useEffect } from "react";

import { useHandleBoxToken } from "~/hooks";

const BoxClass = (props) => {
  const [viewChanged, setViewChanged] = React.useState(0);

  useEffect(() => {
    // start the Explorer
    let contentExplorer = new Box.ContentExplorer();

    // Show the content explorer
    contentExplorer.show(props.rootFolderId, props.token, {
      container: `.content-explorer___${props.entityId}`,
      ...(props?.isMobile && {
        // [NOTE]: we need this hack because the prop documented by Box is not working
        // hide some action if is mobile
        canDownload: false, // hide link in drop-down menuy
        onPreview: () => {
          setTimeout(() => {
            // wait for print icon
            const controls = document.querySelector(
              ".bcpr-PreviewHeader-controls",
            );
            [...(controls?.children ?? [])].forEach(function (el) {
              // get headers buttons
              if (!el.classList.contains("bcpr-PreviewHeader-button-close"))
                el.style.display = "none"; // remove all actions but the close button
            });
          }, 100);
        },
      }),
      contentUploaderProps: {
        isFolderUploadEnabled: true,
        fileLimit: 500,
      },
      canShare: false,
      logoUrl: "",
      canDelete: props.canDelete === undefined ? true : props.canDelete,
      canRename: props.canRename === undefined ? true : props.canRename,
      canUpload: props.canUpload === undefined ? true : props.canUpload,
      canCreateNewFolder:
        props.canCreateNewFolder === undefined
          ? true
          : props.canCreateNewFolder,
      responseInterceptor: (response) => {
        const { data } = response;
        if (data.name && !data.parent?.etag && !data.parent?.sequence_id) {
          data.name = props.entityName;
        }

        if (data.modified_by) {
          data.modified_by = {};
        }

        if (data.parent) {
          data.parent.name = props.entityName;
        }

        if (data?.item_collection?.entries) {
          data.item_collection.entries = data.item_collection.entries.map(
            (item) => {
              if (item.modified_by) {
                item.modified_by = {};
              }

              if (item.parent.name) {
                item.parent.name = props.entityName;
              }

              if (item.path_collection?.entries[1]?.name) {
                item.path_collection.entries[1].name = props.entityName;
              }
              return item;
            },
          );
        }

        if (data.entries) {
          data.entries = data.entries.map((item) => {
            if (item.modified_by) {
              item.modified_by = {};
            }

            if (item.parent.name) {
              item.parent.name = props.entityName;
            }

            if (item.path_collection?.entries[1]?.name) {
              item.path_collection.entries[1].name = props.entityName;
            }

            return item;
          });
        }

        if (data.path_collection?.entries[1]?.name) {
          data.path_collection.entries[1].name = props.entityName;
        }

        setViewChanged((prev) => prev + 1);

        return response;
      },
    });

    if (props.onSearchActive) {
      const searchElements = document.getElementsByClassName("be-search");
      if (searchElements?.length) {
        const inputChild = searchElements[0].firstChild;
        if (inputChild)
          inputChild.addEventListener("focus", props.onSearchActive);
      }
    }
  }, [
    props.rootFolderId,
    props.token,
    props.entityId,
    props.isMobile,
    props.canDelete,
    props.canRename,
    props.canUpload,
    props.canCreateNewFolder,
    props.entityName,
    props.onSearchActive,
  ]);

  useEffect(() => {
    setTimeout(() => {
      const breadCrumbs = document.getElementsByClassName(
        "bdl-Breadcrumb-title",
      );
      if (breadCrumbs?.[0]) {
        breadCrumbs[0].innerHTML = props.entityName;
      }
    }, 1);
  }, [viewChanged]);

  return (
    <div
      className={`content-explorer___${props.entityId} box-documents-container`}
    ></div>
  );
};

export default (props) => {
  const [boxScriptLoaded, setBoxScriptLoaded] = React.useState(false);
  const { token, loading } = useHandleBoxToken(props?.token);
  const { isMobile } = props || {};

  React.useEffect(() => {
    const boxScriptLoadedInterval = setInterval(() => {
      if (
        typeof Box != typeof undefined &&
        "ContentExplorer" in (Box || {}) &&
        "Preview" in (Box || {})
      ) {
        setBoxScriptLoaded(true);
        clearInterval(boxScriptLoadedInterval);
      }
    }, 500);
    return () => {
      clearInterval(boxScriptLoadedInterval);
    };
  }, []);

  if ((!isMobile && ((!token && !props.token) || loading)) || !boxScriptLoaded)
    return <p className="text-sm h-screen">Connecting to folder....</p>;
  return <BoxClass key={props.token} {...props} token={props.token} />;
};