+
}
+ defaultEndIcon={
}
+ defaultCollapseIcon={<>

>}
+ defaultExpandIcon={<>

>}
+ >
+ {RenderTree(root, metadirs, handleClick)}
+
+
+
+ );
+}
+
+export default FileExplorerComponent;
\ No newline at end of file
diff --git a/src/components/FilePickerDialog.tsx b/src/components/FilePickerDialog.tsx
index e143ffe5a..1bd6d73f0 100644
--- a/src/components/FilePickerDialog.tsx
+++ b/src/components/FilePickerDialog.tsx
@@ -2,7 +2,6 @@ import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Button from '@material-ui/core/Button';
import { remote } from 'electron';
-
import { RootState } from '../store/root';
import { loadCard } from '../containers/handlers';
import { extractMetafile } from '../containers/metafiles';
diff --git a/src/components/FolderPicker.tsx b/src/components/FolderPicker.tsx
new file mode 100644
index 000000000..4cbced1ac
--- /dev/null
+++ b/src/components/FolderPicker.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import Button from '@material-ui/core/Button';
+import { remote } from 'electron';
+import { generateFileTreeActions } from '../containers/explorer';
+import { ActionKeys } from '../store/actions';
+import { loadFE } from '../containers/handlers';
+
+const FolderPicker: React.FunctionComponent = () => {
+ const dispatch = useDispatch();
+
+ const handleClick = async (e: React.MouseEvent) => {
+ e.preventDefault();
+ const paths = await remote.dialog.showOpenDialog({ properties: ['openDirectory'] });
+
+ if (!paths.canceled && paths.filePaths) {
+ const rootPath: string = paths.filePaths[0];
+ const actions = await generateFileTreeActions(rootPath);
+ actions.map((action) => {
+ dispatch(action);
+ });
+ if (actions[0].type === ActionKeys.ADD_FE) dispatch(loadFE(actions[0].metadir));
+ }
+ };
+
+ return (
+