feat: open directory with electron

Author: aboccag

app/components/Home.tsx

@@ -6,8 +6,11 @@ import {
   Stack,
   IStackTokens,
 } from 'office-ui-fabric-react';
+import { remote } from 'electron';
 import routes from '../constants/routes.json';
 
+const { dialog } = remote;
+
 export interface IButtonExampleProps {
   // These are set based on the toggles shown above the examples (not needed in real code)
   disabled?: boolean;
@@ -18,12 +21,19 @@ export interface IButtonExampleProps {
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
 export default function Home(): JSX.Element {
-  const [state] = useState<string>('Hi');
+  const [state] = useState<string>('Please select backup directory');
+  const [directory, setDirectory] = useState<string>('t');
 
   const alertClicked = (): void => {
     alert('Clicked');
   };
-
+  const onButtonClick = () => {
+    const path = dialog.showOpenDialog({
+      properties: ['openDirectory'],
+    });
+    // eslint-disable-next-line promise/catch-or-return
+    path.then((res) => setDirectory(res.filePaths[0]));
+  };
   useEffect(() => {
     // axios
     //   .get('http://localhost:5000')
@@ -36,16 +46,17 @@ export default function Home(): JSX.Element {
       <h2>{state}</h2>
       <Stack horizontal tokens={stackTokens}>
         <DefaultButton
-          text="Standard"
-          onClick={alertClicked}
+          text="Directory"
+          onClick={onButtonClick}
           allowDisabledFocus
         />
         <PrimaryButton
-          text="Primary"
+          text="BACKUP"
           onClick={alertClicked}
           allowDisabledFocus
         />
       </Stack>
+      <div>{directory}</div>
       <Link to={routes.COUNTER}>counter</Link>
     </div>
   );

app/main.dev.ts

@@ -71,21 +71,26 @@ const createWindow = async () => {
     return path.join(RESOURCES_PATH, ...paths);
   };
 
+  const webPreferences =
+    (process.env.NODE_ENV === 'development' ||
+      process.env.E2E_BUILD === 'true') &&
+    process.env.ERB_SECURE !== 'true'
+      ? {
+          nodeIntegration: true,
+        }
+      : {
+          preload: path.join(__dirname, 'dist/renderer.prod.js'),
+        };
+
   mainWindow = new BrowserWindow({
     show: false,
     width: 1024,
     height: 728,
     icon: getAssetPath('icon.png'),
-    webPreferences:
-      (process.env.NODE_ENV === 'development' ||
-        process.env.E2E_BUILD === 'true') &&
-      process.env.ERB_SECURE !== 'true'
-        ? {
-            nodeIntegration: true,
-          }
-        : {
-            preload: path.join(__dirname, 'dist/renderer.prod.js'),
-          },
+    webPreferences: {
+      ...webPreferences,
+      enableRemoteModule: true,
+    },
   });
 
   mainWindow.loadURL(`file://${__dirname}/app.html`);