WIP: File select and opening

package.json

@@ -48,8 +48,8 @@
     "webpack-cli": "^3.2.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.12.0",
-    "@blueprintjs/select": "^3.6.0",
+    "@blueprintjs/core": "^3.15.0",
+    "@blueprintjs/select": "^3.8.0",
     "fs-extra": "^7.0.1",
     "idb": "^3.0.2",
     "mobx": "^5.9.0",

src/renderer/frontend/App.tsx

@@ -1,42 +1,31 @@
-import { Breadcrumbs, IBreadcrumbProps, InputGroup } from '@blueprintjs/core';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import FileList from './components/FileList';
-import Sidebar from './components/Sidebar';
-import { withRootstore, IRootStoreProp } from './contexts/StoreContext';
+import Outliner from './components/Outliner';
+import { IRootStoreProp, withRootstore } from './contexts/StoreContext';
+import Inspector from './components/Inspector';
+import Toolbar from './components/Toolbar';
+import ErrorBoundary from './components/ErrorBoundary';
 
 interface IAppProps extends IRootStoreProp {}
 
 const App = ({ rootStore: { uiStore } }: IAppProps) => {
-  // Breadcrumbs placeholder
-  const breadcrumbs: IBreadcrumbProps[] = [
-    { icon: 'symbol-square' },
-    { icon: 'folder-close', text: 'Cars' },
-    { icon: 'folder-close', text: 'Yellow' },
-    { icon: 'document', text: 'New' },
-  ];
-
   const themeClass = uiStore.theme === 'DARK' ? 'bp3-dark' : 'bp3-light';
 
   return (
-    <div className={`${themeClass} column`}>
-      <Sidebar />
-
-      <div className="main">
-        <div className="header">
-          <Breadcrumbs items={breadcrumbs} />
+    <div id="layoutContainer" className={`${themeClass}`}>
+      <ErrorBoundary>
+        <Toolbar />
 
-          {/* This can be replaced with the custom SearchBar component later */}
-          <InputGroup type="search" leftIcon="search" placeholder="Search" />
-        </div>
+        <Outliner />
 
-        <br />
-
-        <div className="gallery">
+        <main>
           <FileList />
-        </div>
-      </div>
+        </main>
+
+        <Inspector />
+      </ErrorBoundary>
     </div>
   );
 };

src/renderer/frontend/components/ErrorBoundary.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { remote } from 'electron';
+import { Button, NonIdealState, ButtonGroup, EditableText } from '@blueprintjs/core';
+
+interface IErrorBoundaryState {
+  hasError: boolean;
+  error: string;
+}
+
+class ErrorBoundary extends React.Component<{}, IErrorBoundaryState> {
+  static getDerivedStateFromError(error: any) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error };
+  }
+  state = {
+    hasError: false,
+    error: '',
+  };
+
+  componentDidCatch(error: any, info: any) {
+    // TODO: Send error to logging service
+    const stringifiedError = JSON.stringify(error, Object.getOwnPropertyNames(error), 2);
+    this.setState({ error: stringifiedError });
+  }
+
+  viewInspector() {
+    remote.getCurrentWebContents()
+      .openDevTools();
+  }
+
+  reloadApplication() {
+    remote.getCurrentWindow()
+      .reload();
+  }
+
+  render() {
+    const { hasError, error } = this.state;
+    if (hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div className="error-boundary">
+          <NonIdealState
+            icon={<span>😞</span>}
+            title="Something went wrong."
+            description="You can try one of the following options or contact the maintainers"
+            action={<ButtonGroup>
+              <Button onClick={this.reloadApplication} icon="refresh" intent="primary">
+                Reload
+              </Button>
+              <Button onClick={this.viewInspector} intent="warning" icon="error">
+                View in DevTools
+              </Button>
+              <Button disabled intent="danger" icon="database">
+                Clear database
+              </Button>
+            </ButtonGroup>}
+          >
+            <EditableText
+              className="bp3-intent-danger bp3-monospace-text message"
+              value={error.toString()}
+              isEditing={false}
+              multiline
+            />
+          </NonIdealState>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/renderer/frontend/components/FileInfo.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import fs from 'fs';
+import { observer } from 'mobx-react-lite';
+
+import { ClientFile } from '../../entities/File';
+
+const formatDate = (d: Date) =>
+  `${d.getUTCFullYear()}-${d.getUTCMonth() +
+    1}-${d.getUTCDate()} ${d.getUTCHours()}:${d.getUTCMinutes()}`;
+
+interface IFileInfoProps {
+  files: ClientFile[];
+}
+
+const SingleFileInfo = observer(({ file }: { file: ClientFile }) => {
+  const [fileStats, setFileStats] = useState<fs.Stats | undefined>(undefined);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  // Look up file info when file changes
+  useEffect(
+    () => {
+      fs.stat(file.path, (err, stats) =>
+        err ? setError(err) : setFileStats(stats),
+      );
+    },
+    [file],
+  );
+
+  // Todo: Would be nice to also add tooltips explaining what these mean (e.g. diff between dimensions & resolution)
+  // Or add the units: pixels vs DPI
+  const fileInfoList = useMemo(
+    () => [
+      { key: 'Filename', value: file.path },
+      {
+        key: 'Created',
+        value: fileStats ? formatDate(fileStats.birthtime) : '...',
+      },
+      { key: 'Modified', value: fileStats ? formatDate(fileStats.ctime) : '...' },
+      {
+        key: 'Last Opened',
+        value: fileStats ? formatDate(fileStats.atime) : '...',
+      },
+      { key: 'Dimensions', value: '?' },
+      { key: 'Resolution', value: '?' },
+      { key: 'Color Space', value: '?' },
+    ],
+    [file, fileStats],
+  );
+
+  return (
+    <section id="fileInfo">
+      {fileInfoList.map(({ key, value }) => [
+        <div key={`fileInfoKey-${key}`} className="inpectorHeading">
+          {key}
+        </div>,
+        <div key={`fileInfoValue-${key}`} className="fileInfoValue">
+          {value}
+        </div>,
+      ])}
+
+      {error && (
+        <p>
+          Error: {error.name} <br /> {error.message}
+        </p>
+      )}
+    </section>
+  );
+});
+
+const MultiFileInfo = observer(({ files }: IFileInfoProps) => {
+  return (
+    <section>
+      <p>Selected {files.length} files</p>
+    </section>
+  );
+});
+
+const FileInfo = ({ files }: IFileInfoProps) => {
+  if (files.length === 1) {
+    return <SingleFileInfo file={files[0]} />;
+  } else {
+    return <MultiFileInfo files={files} />;
+  }
+};
+
+export default FileInfo;

src/renderer/frontend/components/FileList.tsx

@@ -1,70 +1,39 @@
-import { remote } from 'electron';
-import fse from 'fs-extra';
-import path from 'path';
-import React from 'react';
-
+import React, { useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Button } from '@blueprintjs/core';
 
 import { withRootstore, IRootStoreProp } from '../contexts/StoreContext';
-import FileStore from '../stores/FileStore';
-
 import Gallery from './Gallery';
-import FileSelectionHeader from './FileSelectionHeader';
+import { Tag, ITagProps } from '@blueprintjs/core';
 
 export interface IFileListProps extends IRootStoreProp {}
 
-const chooseDirectory = async (fileStore: FileStore) => {
-  const dirs = remote.dialog.showOpenDialog({
-    properties: ['openDirectory', 'multiSelections'],
-  });
-
-  if (!dirs) {
-    return;
-  }
-
-  dirs.forEach(async (dir) => {
-    // Check if directory
-    // const stats = await fse.lstat(dirs[0]);
-    const imgExtensions = ['gif', 'png', 'jpg', 'jpeg'];
-
-    const filenames = await fse.readdir(dir);
-    const imgFileNames = filenames.filter((f) =>
-      imgExtensions.some((ext) =>
-        f.toLowerCase()
-          .endsWith(ext)),
-    );
+const FileList = ({ rootStore: { uiStore, fileStore, tagStore } }: IFileListProps) => {
 
-    imgFileNames.forEach(async (filename) => {
-      const joinedPath = path.join(dir, filename);
-      console.log(joinedPath);
-      fileStore.addFile(joinedPath);
-    });
-  });
-};
-
-const FileList = ({ rootStore: { uiStore, fileStore } }: IFileListProps) => {
-  const removeSelectedFiles = async () => {
-    await fileStore.removeFilesById(uiStore.fileSelection);
-    uiStore.fileSelection.clear();
-  };
+  const handleDeselectTag = useCallback(
+    (_, props: ITagProps) => {
+      const clickedTag = tagStore.tagList.find((t) => t.id === props.id);
+      if (clickedTag) {
+        uiStore.deselectTag(clickedTag);
+      }
+    },
+    [],
+  );
 
   return (
-    <div>
-      {uiStore.fileSelection.length > 0 && (
-        <FileSelectionHeader
-          numSelectedFiles={uiStore.fileSelection.length}
-          onCancel={() => uiStore.fileSelection.clear()}
-          onRemove={removeSelectedFiles}
-        />
-      )}
-
-      <Button onClick={() => chooseDirectory(fileStore)} icon="folder-open">
-        Add images to your Visual Library
-      </Button>
-
-      <br />
-      <br />
+    <div className="gallery">
+
+      <div id="query-overview">
+        {uiStore.clientTagSelection.map((tag) => (
+          <Tag
+            key={tag.id}
+            id={tag.id}
+            intent="primary"
+            onRemove={handleDeselectTag}
+          >
+            {tag.name}
+          </Tag>),
+        )}
+      </div>
 
       <Gallery />
     </div>