+const pathPromise = {};
+
+export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState) => ({
+ auth: state.auth,
+ collectionPanel: state.collectionPanel,
+ collectionPanelFiles: state.collectionPanelFiles,
+}))((props: CollectionPanelFilesProps & WithStyles<CssRules> & { auth: AuthState }) => {
+ const { classes, onItemMenuOpen, onUploadDataClick, isWritable, dispatch, collectionPanelFiles, collectionPanel } = props;
+ const { apiToken, config } = props.auth;
+
+ const webdavClient = new WebDAV();
+ webdavClient.defaults.baseURL = config.keepWebServiceUrl;
+ webdavClient.defaults.headers = {
+ Authorization: `Bearer ${apiToken}`
+ };
+
+ const webDAVRequestConfig: WebDAVRequestConfig = {
+ headers: {
+ Depth: '1',
+ },
+ };
+
+ const parentRef = React.useRef(null);
+ const [path, setPath]: any = React.useState([]);
+ const [pathData, setPathData]: any = React.useState({});
+ const [isLoading, setIsLoading] = React.useState(false);
+ const [leftSearch, setLeftSearch] = React.useState('');
+ const [rightSearch, setRightSearch] = React.useState('');
+
+ const leftKey = (path.length > 1 ? path.slice(0, path.length - 1) : path).join('/');
+ const rightKey = path.join('/');
+
+ const leftData = pathData[leftKey] || [];
+ const rightData = pathData[rightKey];
+
+ React.useEffect(() => {
+ console.log(' --> useEffect current UUID: ', props.currentItemUuid);
+ if (props.currentItemUuid) {
+ setPathData({});
+ setPath([props.currentItemUuid]);
+ }
+ }, [props.currentItemUuid]);
+
+ const fetchData = (keys, ignoreCache = false) => {
+ console.log('---> fetchData', keys);
+ const keyArray = Array.isArray(keys) ? keys : [keys];
+
+ Promise.all(keyArray.filter(key => !!key)
+ .map((key) => {
+ const dataExists = !!pathData[key];
+ const runningRequest = pathPromise[key];
+
+ if ((!dataExists || ignoreCache) && (!runningRequest || ignoreCache)) {
+ if (!isLoading) {
+ setIsLoading(true);
+ }
+
+ pathPromise[key] = true;
+
+ console.log('>>> fetching data for key', key);
+ return webdavClient.propfind(`c=${key}`, webDAVRequestConfig);
+ }
+
+ return Promise.resolve(null);
+ })
+ .filter((promise) => !!promise)
+ )
+ .then((requests) => {
+ const newState = requests.map((request, index) => {
+ if (request && request.responseXML != null) {
+ console.log(">>> got data for key", keyArray[index]);
+ const key = keyArray[index];
+ const result: any = extractFilesData(request.responseXML);
+ const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
+ if (n1.type === 'directory' && n2.type !== 'directory') {
+ return -1;
+ }
+ if (n1.type !== 'directory' && n2.type === 'directory') {
+ return 1;
+ }
+ return 0;
+ });
+
+ return { [key]: sortedResult };
+ }
+ return {};
+ }).reduce((prev, next) => {
+ return { ...next, ...prev };
+ }, {});
+
+ setPathData({ ...pathData, ...newState });
+ })
+ .finally(() => {
+ setIsLoading(false);
+ keyArray.forEach(key => delete pathPromise[key]);
+ });
+ };
+
+ React.useEffect(() => {
+ console.log('---> useEffect rightKey', rightKey);
+ if (rightKey) {
+ fetchData(rightKey);
+ setLeftSearch('');
+ setRightSearch('');
+ }
+ }, [rightKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const currentPDH = (collectionPanel.item || {}).portableDataHash;
+ React.useEffect(() => {
+ console.log('---> useEffect PDH change:', currentPDH);
+ if (currentPDH) {
+ fetchData([leftKey, rightKey], true);
+ }
+ }, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ React.useEffect(() => {
+ console.log('---> useEffect rightData:', rightData, dispatch, rightSearch);
+ if (rightData) {
+ const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+ setCollectionFiles(filtered, false)(dispatch);
+ }
+ }, [rightData, dispatch, rightSearch]);
+
+ const handleRightClick = React.useCallback(
+ (event) => {
+ event.preventDefault();
+ let elem = event.target;
+
+ while (elem && elem.dataset && !elem.dataset.item) {
+ elem = elem.parentNode;