#48: Support pinning files to cache [partial]

src/containers/PinnedManager/PinnedManager.js

@@ -7,13 +7,19 @@ import {notifyError, notifyInfo} from '../../redux/actions/error_actions';
 import Box from '../../components/UI/Box/Box';
 import {displayPinnedManager} from '../../redux/actions/pinned_manager_actions';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-  faCheckSquare, faChevronDown,
-  faChevronRight, faFile, faFolder, faFolderOpen,
-  faHSquare, faMinusSquare, faPlusSquare,
-  faSquare
-} from '@fortawesome/free-solid-svg-icons';
+import {faFolder} from '@fortawesome/free-solid-svg-icons';
 import Button from '../../components/UI/Button/Button';
+import CheckBox from '../../components/UI/CheckBox/CheckBox';
+
+const Constants = require('../../constants');
+
+const mapStateToProps = state => {
+  return {
+    DisplayConfiguration: state.mounts.DisplayConfiguration,
+    DisplayRemoteConfiguration: state.mounts.DisplayRemoteConfiguration,
+    DisplayS3Configuration: state.mounts.DisplayS3Configuration,
+  }
+};
 
 const mapDispatchToProps = dispatch => {
   return {
@@ -24,20 +30,115 @@ const mapDispatchToProps = dispatch => {
   }
 };
 
-export default connect(null, mapDispatchToProps)(class extends IPCContainer {
+export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCContainer {
   state = {
     active_directory: '/',
     items: [],
+    previous_directory: '',
   }
 
   componentDidMount() {
+    this.setRequestHandler(Constants.IPC_Get_Directory_Items_Reply, this.onGetDirectoryItemsReply);
+    this.grabDirectoryItems();
   }
 
   componentWillUnmount() {
     super.componentWillUnmount();
   }
 
+  grabDirectoryItems = () => {
+    this.sendRequest(Constants.IPC_Get_Directory_Items, {
+      Provider: this.props.DisplayConfiguration,
+      Remote: this.props.DisplayRemoteConfiguration,
+      S3: this.props.DisplayS3Configuration,
+      Version: this.props.version,
+      Path: this.state.active_directory,
+    });
+  }
+
+  onGetDirectoryItemsReply = (_, {data}) => {
+    if (data.Success) {
+      const items = data.Items
+      .filter(i => i.path !== '.' && (this.state.active_directory !== '/' || (i.path.substr(0, 1) !== '.')))
+      .map(i => {
+        return {
+          ...i,
+          name: i.path === '..' ? i.path : '\'' + i.path.substr(i.path.lastIndexOf('/') + 1) + '\'',
+          meta: {
+            ...i.meta,
+            pinned: i.meta.pinned === '1',
+          }
+        }
+      });
+      this.setState({
+        items,
+      });
+    } else {
+      this.props.notifyError(data.Error, false, () => {
+        this.props.displayPinnedManager(false);
+      });
+    }
+  }
+
+  createDirectory = (name, path, idx, total, item_idx) => {
+    const style = {}
+    if (item_idx + 1 !== total) {
+      style.marginBottom = '4px';
+    }
+    return (
+      <div key={'dir_' + idx} style={{...style}}>
+        <Button buttonStyles={{textAlign: 'left'}}
+                clicked={() => {
+                  const current_path = path === '..' ? '' : this.state.active_directory;
+                  this.setState({
+                    items: [],
+                    active_directory: path === '..' ? this.state.previous_directory : path,
+                    previous_directory: current_path,
+                  }, () => {
+                    this.grabDirectoryItems();
+                  });
+                }}>
+          <FontAwesomeIcon icon={faFolder}
+                           fixedWidth
+                           color={'var(--heading_text_color)'}
+                           style={{padding: 0, margin: 0}}/>
+          &nbsp;{name}
+        </Button>
+      </div>
+    );
+  }
+
+  createFile = (name, pinned, idx, total, item_idx) => {
+    const style = {textAlign: 'left'}
+    if (item_idx + 1 !== total) {
+      style.marginBottom = '2px';
+    }
+    return (
+      <div key={'file_' + idx} style={{...style}}>
+        <CheckBox checked={pinned}
+                  changed={() => {
+                    const items = JSON.parse(JSON.stringify(this.state.items));
+                    items[item_idx].meta.pinned = !items[item_idx].meta.pinned;
+                    this.setState({
+                      items
+                    }, () => {
+                      this.sendSyncRequest(Constants.IPC_Set_Pinned, {
+                        Provider: this.props.DisplayConfiguration,
+                        Remote: this.props.DisplayRemoteConfiguration,
+                        S3: this.props.DisplayS3Configuration,
+                        Version: this.props.version,
+                        Path: items[item_idx].path,
+                        Pinned: items[item_idx].meta.pinned,
+                      });
+                    });
+                  }}
+                  label={name}/>
+      </div>
+    );
+  }
+
   render() {
+    let idx = 0;
     return (
       <Box dxDark dxStyle={{
         height: 'calc(100vh - (var(--default_spacing) * 4)',
@@ -58,8 +159,15 @@ export default connect(null, mapDispatchToProps)(class extends IPCContainer {
              style={{cursor: 'pointer'}}>X</a>
         </div>
         <h1 style={{width: '100%', textAlign: 'center'}}>{'Pinned File Manager'}</h1>
+        <h2 className={'PinnedManagerActiveDirectory'}>{this.state.active_directory}</h2>
         <div className={'PinnedManagerItems'}>
-
+          {
+            this.state.items.map((i, k) => {
+              return i.directory ?
+                this.createDirectory(i.name, i.path, idx++, this.state.items.length, k) :
+                this.createFile(i.name, i.meta.pinned, idx++, this.state.items.length, k);
+            })
+          }
         </div>
       </Box>
     )