Toolbar

src/renderer/frontend/App.tsx

@@ -1,55 +1,34 @@
-import {
-  Breadcrumbs,
-  IBreadcrumbProps,
-  InputGroup,
-  Button,
-} from '@blueprintjs/core';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import FileList from './components/FileList';
 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 {}
+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 id={'layoutContainer'} className={`${themeClass}`}>
-      <Outliner />
-
-      <main>
-        <div className="header">
-          <Breadcrumbs items={breadcrumbs} />
-
-          {/* This can be replaced with the custom SearchBar component later */}
-          <InputGroup type="search" leftIcon="search" placeholder="Search" />
+    <div id="layoutContainer" className={`${themeClass}`}>
+      <ErrorBoundary>
+        <Toolbar />
 
-          <Button
-            icon="info-sign"
-            onClick={() => {
-              uiStore.isInspectorOpen = !uiStore.isInspectorOpen;
-            }}
-          />
-        </div>
+        <Outliner />
 
-        <br />
+        <main>
+          <div className="header">
+          </div>
 
-        <FileList />
-      </main>
+          <FileList />
+        </main>
 
-      <Inspector />
+        <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

@@ -48,7 +48,7 @@ const SingleFileInfo = observer(({ file }: { file: ClientFile }) => {
   );
 
   return (
-    <section className="fileInfo">
+    <section id="fileInfo">
       {fileInfoList.map(({ key, value }) => [
         <div key={`fileInfoKey-${key}`} className="inpectorHeading">
           {key}

src/renderer/frontend/components/FileTag.tsx

@@ -109,7 +109,7 @@ const Multi = observer(({ files }: IFileTagProps) => {
 
 const FileTag = ({ files }: IFileTagProps) => {
   return (
-    <section className="fileTag">
+    <section id="fileTag">
       <div className="inpectorHeading">Tags</div>
       {files.length === 1 ? (
         <Single file={files[0]} />

src/renderer/frontend/components/Inspector.tsx

@@ -48,11 +48,11 @@ const Inspector = ({ rootStore: { uiStore } }: IInspectorProps) => {
   if (selectedFiles.length > 0) {
     return (
       <aside
-        id={'inspector'}
+        id="inspector"
         className={`${uiStore.isInspectorOpen ? 'inspectorOpen' : ''}`}>
-        <section className="filePreview">{selectionPreview}</section>
+        <section id="filePreview">{selectionPreview}</section>
 
-        <section className="fileOverview">
+        <section id="fileOverview">
           <div className="inpectorHeading">{headerText}</div>
           <small>{headerSubtext}</small>
         </section>
@@ -64,11 +64,11 @@ const Inspector = ({ rootStore: { uiStore } }: IInspectorProps) => {
   } else {
     return (
       <aside
-        id={'inspector'}
+        id="inspector"
         className={`${uiStore.isInspectorOpen ? 'inspectorOpen' : ''}`}
       >
-        <section className="filePreview" />
-        <section className="fileOverview">
+        <section id="filePreview" />
+        <section id="fileOverview">
           <div className="inpectorHeading">{headerText}</div>
         </section>
       </aside>

src/renderer/frontend/components/LocationsTree.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import { Tree, ITreeNode } from '@blueprintjs/core';
+import { observer } from 'mobx-react-lite';
+import { useContext } from 'react';
+
+import os from 'os';
+import path from 'path';
+
+import StoreContext from '../contexts/StoreContext';
+
+const platform = os.platform();
+const homeDir = os.homedir();
+
+const systemDirs = {
+  pictures: 'Pictures',
+  documents: 'Documents',
+  downloads: 'Downloads',
+  videos: 'Videos',
+};
+
+// We can add exceptions here if platforms behave differently
+// Other option, use dependency: Platform agnostic user directories
+// https://www.npmjs.com/package/platform-folders
+if (platform === 'win32') { // Windows
+} else if (platform === 'darwin') { // Mac
+} else if (platform === 'linux') { // Linix
+} else {
+  console.error('Platform unsupported', platform);
+}
+
+const LocationsTree = () => {
+  // Todo: Add Location entity to DB, so we can have user-picked directories as well
+  // Todo: Also show sub-directories in tree
+
+  const { fileStore } = useContext(StoreContext);
+
+  const [activeLocation, setActiveLocation] = useState<string | undefined>(undefined);
+
+  const treeContents = useMemo(
+    () => Object.values(systemDirs)
+      .map((dir): ITreeNode => ({
+        id: dir,
+        label: dir,
+        isSelected: activeLocation === dir,
+      }),
+    ),
+    [activeLocation],
+  );
+
+  const handleNodeClick = useCallback(
+    (node: ITreeNode) => {
+      setActiveLocation(`${node.id}`);
+      fileStore.loadLocation(path.join(homeDir, `${node.id}`));
+    },
+    [],
+  );
+
+  // Select the first directory when this component mounts
+  useEffect(() => handleNodeClick(treeContents[0]), []);
+
+  return (
+    <Tree
+      contents={treeContents}
+      onNodeClick={handleNodeClick}
+    />
+  );
+};
+
+export default observer(LocationsTree);

src/renderer/frontend/components/Outliner.tsx

@@ -1,11 +1,31 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import TagList from './TagList';
+import StoreContext from '../contexts/StoreContext';
+import { observer } from 'mobx-react-lite';
+import LocationsTree from './LocationsTree';
+import SearchForm from './SearchForm';
 
-const Outliner = () => (
-  <nav>
-    <h4 className="bp3-heading">All tags</h4>
-    <TagList />
-  </nav>
-);
+const Outliner = () => {
+  const { uiStore } = useContext(StoreContext);
 
-export default Outliner;
+  return (
+    <nav className={'outlinerOpen'}>
+      {uiStore.outlinerPage === 'LOCATIONS' && (<>
+        <h4 className="bp3-heading">Locations</h4>
+        <LocationsTree />
+      </>)}
+
+      {uiStore.outlinerPage === 'TAGS' && (<>
+        <h4 className="bp3-heading">Tags</h4>
+        <TagList />
+      </>)}
+
+      {uiStore.outlinerPage === 'SEARCH' && (<>
+        <h4 className="bp3-heading">Search</h4>
+        <SearchForm />
+      </>)}
+    </nav>
+  );
+};
+
+export default observer(Outliner);

src/renderer/frontend/components/SearchForm.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+import MultiTagSelector from './MultiTagSelector';
+import { FormGroup, InputGroup, Button } from '@blueprintjs/core';
+
+const SearchForm = () => {
+  return (
+    <>
+      {/* Tags */}
+      <FormGroup label="Tags" >
+        {/* Todo: Also search through collections */}
+        <MultiTagSelector
+          selectedTags={[]}
+          onTagSelect={() => console.log('select')}
+          onTagDeselect={() => console.log('deselect')}
+          onClearSelection={() => console.log('clear')}
+        />
+        <MultiTagSelector
+          selectedTags={[]}
+          onTagSelect={() => console.log('select')}
+          onTagDeselect={() => console.log('deselect')}
+          onClearSelection={() => console.log('clear')}
+        />
+      </FormGroup>
+
+      {/* Filenames */}
+      <FormGroup label="Filename">
+        <InputGroup placeholder="Include" />
+        <InputGroup placeholder="Exclude"/>
+      </FormGroup>
+
+      {/* Location */}
+      <FormGroup label="Location" >
+        <InputGroup placeholder="Include" />
+        <InputGroup placeholder="Exclude" />
+      </FormGroup>
+
+      {/* File type */}
+      <FormGroup label="File type" labelFor="file-type-input">
+        <InputGroup id="file-type-input" placeholder="Include" />
+        <InputGroup id="file-type-input" placeholder="Exclude" />
+      </FormGroup>
+
+      <Button fill disabled>Reset</Button>
+    </>
+  );
+};
+
+export default observer(SearchForm);