18787: WIP -- commit to test jenkins test pipeline.

[arvados-workbench2.git] / src / components / collection-panel-files / collection-panel-files.tsx

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 3c064973a8e6e3a82f00a17f9b5905184ce71a39..4e2e08cd8cf48a3245c3f4d08e2d89f0939ba7a5 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -22,12 +22,11 @@ import { setCollectionFiles } from 'store/collection-panel/collection-panel-file
 import { sortBy } from 'lodash';
 import { formatFileSize } from 'common/formatters';
 import { getInlineFileUrl, sanitizeToken } from 'views-components/context-menu/actions/helpers';
+import _ from 'lodash';
 
 export interface CollectionPanelFilesProps {
     items: any;
     isWritable: boolean;
-    isLoading: boolean;
-    tooManyFiles: boolean;
     onUploadDataClick: (targetLocation?: string) => void;
     onSearchChange: (searchValue: string) => void;
     onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
@@ -35,7 +34,6 @@ export interface CollectionPanelFilesProps {
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
     onFileClick: (id: string) => void;
-    loadFilesFunc: () => void;
     currentItemUuid: any;
     dispatch: Function;
     collectionPanelFiles: any;
@@ -177,11 +175,25 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
 
 const pathPromise = {};
 
+let prevState = {};
+function difference(object, base) {
+       function changes(object, base) {
+               return _.transform(object, function(result, value, key) {
+                       if (!_.isEqual(value, base[key])) {
+                               result[key] = (_.isObject(value) && _.isObject(base[key])) ? changes(value, base[key]) : value;
+                       }
+               });
+       }
+       return changes(object, base);
+}
 export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState) => ({
     auth: state.auth,
     collectionPanel: state.collectionPanel,
     collectionPanelFiles: state.collectionPanelFiles,
 }))((props: CollectionPanelFilesProps & WithStyles<CssRules> & { auth: AuthState }) => {
+    const diff = difference(props, prevState);
+    prevState = props;
+    console.log('---> render CollectionPanel <------', diff);
     const { classes, onItemMenuOpen, onUploadDataClick, isWritable, dispatch, collectionPanelFiles, collectionPanel } = props;
     const { apiToken, config } = props.auth;
 
@@ -212,6 +224,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
 
     React.useEffect(() => {
         if (props.currentItemUuid) {
+            console.log(' --> useEffect current UUID: ', props.currentItemUuid);
             setPathData({});
             setPath([props.currentItemUuid]);
         }
@@ -244,6 +257,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
         .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) => {
@@ -273,6 +287,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
 
     React.useEffect(() => {
         if (rightKey) {
+            console.log('---> useEffect rightKey:', rightKey);
             fetchData(rightKey);
             setLeftSearch('');
             setRightSearch('');
@@ -282,12 +297,19 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
     const currentPDH = (collectionPanel.item || {}).portableDataHash;
     React.useEffect(() => {
         if (currentPDH) {
-            fetchData([leftKey, rightKey], true);
+            console.log('---> useEffect PDH change:', currentPDH);
+            // Avoid fetching the same content level twice
+            if (leftKey !== rightKey) {
+                fetchData([leftKey, rightKey], true);
+            } else {
+                fetchData(rightKey, true);
+            }
         }
     }, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
 
     React.useEffect(() => {
         if (rightData) {
+            console.log('---> useEffect rightData:', rightData, 'search:', rightSearch);
             const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
             setCollectionFiles(filtered, false)(dispatch);
         }
@@ -324,6 +346,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
         let node = null;
 
         if (parentRef && parentRef.current) {
+            console.log('---> useEffect parentRef:', parentRef);
             node = parentRef.current;
             (node as any).addEventListener('contextmenu', handleRightClick);
         }
@@ -574,6 +597,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                 <div className={classes.dataWrapper}>{ rightData && !isLoading
                     ? <AutoSizer defaultHeight={500}>{({ height, width }) => {
                         const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+                        console.log("Right Data: ", filtered);
 
                         return !!filtered.length
                         ? <FixedSizeList height={height} itemCount={filtered.length}