box / box/box-ui-elements

Folder doesn't get reloaded when it is renamed.

Open
#4,223 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
551
Forks
351
Avg merge
5d 9h
Merged PRs (30d)
31

Description

**Environment:**
React with vite, using script to load box explorer

- Elements version:
- Box Content Explorer 23.0.0

**Desktop (please complete the following information):**

- OS: mac OS 15.5
- Browser: chrome
- Version: 138.0.7204.185

**Steps to reproduce the problem:**
- Create a folder
- Add a file inside the folder
- Go back and rename the folder
- The folder won't get renamed, need to refresh.

**What is the expected behavior? (Screenshots can be helpful here)**
Folder should be renamed in real time.

**What went wrong? (Screenshots, console logs, or HAR files can be helpful here)**

https://github.com/user-attachments/assets/9507b85c-650f-44bf-8fb2-4c6af94b17e3

**Link to application or sample code:**

```
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 (


);
};

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

Connecting to folder....

;
return ;
};

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.