Merge pull request #11 from krsbx/fix-save-file

fix: save files functions
krsbx · Dec 23, 2022 · 260ff2f · 260ff2f
2 parents 3c359cb + 489e674
commit 260ff2f
Showing 18 changed files with 179 additions and 150 deletions.
diff --git a/electron-builder.json5 b/electron-builder.json5
@@ -13,13 +13,13 @@
   files: ['dist', 'dist-electron'],
   extraFiles: [
     {
-      from: 'electron/resources',
-      to: 'resources',
+      from: 'electron/files',
+      to: 'files',
       filter: ['**/*'],
     },
     {
       from: 'node_modules/yarn',
-      to: 'yarn',
+      to: 'files/yarn',
       filter: ['**/*'],
     },
   ],

diff --git a/electron/resources/package.json → electron/files/package.json b/electron/resources/package.json → electron/files/package.json
diff --git a/electron/resources/tsconfig.json → electron/files/tsconfig.json b/electron/resources/tsconfig.json → electron/files/tsconfig.json
diff --git a/electron/ipc/read-write.ts b/electron/ipc/read-write.ts
@@ -1,53 +1,7 @@
 import { ipcMain } from 'electron';
 import _ from 'lodash';
 import fs from 'fs-extra';
-import { ExecException } from 'child_process';
-import { execAsync, getFileDirPath } from '../../src/utils/common/main';
 import { READ_WRITE } from '../../src/utils/constant/ipc';
-import { declarationErrorHandler } from '../../src/utils/error';
-import { YARN } from '../../src/utils/constant/main';
-
-ipcMain.handle(
-  READ_WRITE.COMPILE_RUN,
-  async (event, content: string, filePath: string, configPath: string = '') => {
-    try {
-      const dirPath = getFileDirPath(filePath);
-
-      if (!fs.existsSync(dirPath)) await fs.mkdirp(dirPath);
-
-      await fs.writeFile(filePath, content);
-
-      const commands = [`${YARN} ts-node-esm`];
-
-      if (!_.isEmpty(configPath)) commands.push(`--project ${configPath}`);
-      commands.push(filePath);
-
-      const results = (
-        await execAsync(commands.join(' '), {
-          cwd: dirPath,
-        })
-      ).stdout.split('\n');
-
-      const result = results.slice(2, -2);
-      result.push('\n');
-
-      return result.join('\n');
-    } catch (err) {
-      const isDeclarationError = (err as ExecException).message.includes(
-        'error TS7016'
-      );
-
-      if (isDeclarationError) {
-        return {
-          declaration: true,
-          message: declarationErrorHandler((err as ExecException).message),
-        };
-      }
-
-      return;
-    }
-  }
-);
 
 ipcMain.handle(
   READ_WRITE.READ_FILE,

diff --git a/electron/ipc/utility.ts b/electron/ipc/utility.ts
@@ -1,11 +1,14 @@
 import { ipcMain } from 'electron';
 import _ from 'lodash';
+import fs from 'fs-extra';
+import { ExecException } from 'child_process';
 import {
   checkPackageExist,
   execAsync,
   getFileDirPath,
 } from '../../src/utils/common/main';
 import { UTILITY } from '../../src/utils/constant/ipc';
+import { declarationErrorHandler } from '../../src/utils/error';
 import { YARN } from '../../src/utils/constant/main';
 
 ipcMain.handle(UTILITY.FILE_DIR_PATH, (event, filePath) => {
@@ -54,3 +57,45 @@ ipcMain.handle(UTILITY.SYNCHRONIZE_PACKAGE, async (event, cwd: string) => {
     cwd,
   });
 });
+
+ipcMain.handle(
+  UTILITY.COMPILE_RUN,
+  async (event, content: string, filePath: string, configPath: string = '') => {
+    try {
+      const dirPath = getFileDirPath(filePath);
+
+      if (!fs.existsSync(dirPath)) await fs.mkdirp(dirPath);
+
+      await fs.writeFile(filePath, content);
+
+      const commands = [`${YARN} ts-node-esm`];
+
+      if (!_.isEmpty(configPath)) commands.push(`--project ${configPath}`);
+      commands.push(filePath);
+
+      const results = (
+        await execAsync(commands.join(' '), {
+          cwd: dirPath,
+        })
+      ).stdout.split('\n');
+
+      const result = results.slice(2, -2);
+      result.push('\n');
+
+      return result.join('\n');
+    } catch (err) {
+      const isDeclarationError = (err as ExecException).message.includes(
+        'error TS7016'
+      );
+
+      if (isDeclarationError) {
+        return {
+          declaration: true,
+          message: declarationErrorHandler((err as ExecException).message),
+        };
+      }
+
+      return;
+    }
+  }
+);
diff --git a/electron/main/setup.ts b/electron/main/setup.ts
@@ -5,10 +5,10 @@ import { getAppDataPath, getFileDirPath } from '../../src/utils/common/main';
 import { INSTALLED_PATH } from '../../src/utils/constant/main';
 
 const copyResourceFile = async (fileName: string) => {
-  let src = path.resolve('electron/resources', fileName);
+  let src = path.resolve('electron/files', fileName);
 
   if (app.isPackaged) {
-    src = path.join(INSTALLED_PATH, 'resources', fileName);
+    src = path.join(INSTALLED_PATH, 'files', fileName);
   }
 
   const dest = path.join(getAppDataPath(), fileName);

diff --git a/electron/resources/icon.icns b/electron/resources/icon.icns
diff --git a/electron/resources/icon.ico b/electron/resources/icon.ico
diff --git a/electron/resources/installerIcon.ico b/electron/resources/installerIcon.ico
diff --git a/electron/resources/uninstallerIcon.ico b/electron/resources/uninstallerIcon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Box, Flex } from '@chakra-ui/react';
-import { EditorProps } from '@monaco-editor/react';
 import { Pane } from 'split-pane-react';
 import useEditorContext from './hooks/useContext/useEditorContext';
 import useFileContext from './hooks/useContext/useFileContext';
@@ -9,44 +8,17 @@ import SideBar from './components/SideBar';
 import SplitPane from './components/SplitPane';
 import Editor from './components/Editor';
 import useCompiler from './hooks/useCompiler';
-import useFileAction from './hooks/useFileAction';
-import useUtility from './hooks/useUtility';
 import { chakraColor } from './utils/theme';
 import useAutoInstaller from './hooks/useAutoInstaller';
-import useWindowAction from './hooks/useWindowAction';
+import useOnEditorOnMount from './hooks/useOnEditorOnMount';
 
 const App = () => {
   const { sizes, setSizes, bgColor } = useEditorContext();
-  const { filePath, currentCode } = useFileContext();
-  const { updateCode, removeCurrentCode, quickChangeTab } = useFileContext();
-  const { saveFile, saveFileAs, openFile } = useFileAction();
-  const { closeApp } = useWindowAction();
-  const { getFileDirPath } = useUtility();
+  const { currentCode } = useFileContext();
+  const { updateCode } = useFileContext();
+  const onEditorMount = useOnEditorOnMount();
   const codeResult = useCompiler(currentCode);
 
-  const onMount: EditorProps['onMount'] = (editor, monaco) => {
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () =>
-      saveFile()
-    );
-    editor.addCommand(
-      monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyS,
-      async () => saveFileAs(await getFileDirPath(filePath))
-    );
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyO, async () =>
-      openFile(undefined, await getFileDirPath(filePath))
-    );
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyW, () =>
-      removeCurrentCode()
-    );
-    editor.addCommand(
-      monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyW,
-      () => closeApp()
-    );
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Tab, () =>
-      quickChangeTab()
-    );
-  };
-
   return (
     <Flex
       width={'100vw'}
@@ -70,7 +42,7 @@ const App = () => {
               value={currentCode}
               setValue={updateCode}
               fontSize={22}
-              onMount={onMount}
+              onMount={onEditorMount}
               style={{
                 borderRight: `1px solid ${chakraColor('gray', '700')}`,
                 height: 'calc(100vh - 40px)',

diff --git a/src/components/Modal/Settings.tsx b/src/components/Modal/Settings.tsx
@@ -157,8 +157,8 @@ const Settings = ({ isOpen, onClose, packageJson }: Props) => {
           size={'sm'}
           {...(!isProcessing && { onClick: onClose })}
           position={'absolute'}
-          right={0}
-          top={0}
+          right={1}
+          top={1}
           w={'40px'}
           h={'40px'}
         >
@@ -176,9 +176,18 @@ const Settings = ({ isOpen, onClose, packageJson }: Props) => {
                 value={packageName}
                 onChange={(e) => setPackageName(e.target.value)}
                 placeholder={'Package Name...'}
+                autoFocus
               />
               <InputRightElement width={'75px'}>
-                <Button width={'100%'} type={'submit'}>
+                <Button
+                  width={'100%'}
+                  type={'submit'}
+                  variant={'main'}
+                  bgColor={'whiteAlpha.100'}
+                  _hover={{
+                    bgColor: 'whiteAlpha.300',
+                  }}
+                >
                   Add
                 </Button>
               </InputRightElement>
@@ -231,19 +240,19 @@ const Settings = ({ isOpen, onClose, packageJson }: Props) => {
                 </GridItem>
               </Grid>
             ))}
-            {_.map(packageJson ?? {}, (version, name) => (
-              <Grid
-                templateColumns={'repeat(2, 1fr)'}
-                gap={1}
-                key={`${name}@${version}`}
-              >
-                <GridItem px={1}>
-                  <Text color={'whiteAlpha.700'}>
-                    {name}@{version}
-                  </Text>
-                </GridItem>
-                <GridItem px={1} display={'flex'} justifyContent={'flex-end'}>
-                  {!_.includes(_.values(EXCLUDED_PACKAGE), name) ? (
+            {_.map(packageJson ?? {}, (version, name) =>
+              !_.includes(_.values(EXCLUDED_PACKAGE), name) ? (
+                <Grid
+                  templateColumns={'repeat(2, 1fr)'}
+                  gap={1}
+                  key={`${name}@${version}`}
+                >
+                  <GridItem px={1}>
+                    <Text color={'whiteAlpha.700'}>
+                      {name}@{version}
+                    </Text>
+                  </GridItem>
+                  <GridItem px={1} display={'flex'} justifyContent={'flex-end'}>
                     <Checkbox
                       borderRadius={'lg'}
                       onChange={() => dropPackage(name)}
@@ -254,16 +263,21 @@ const Settings = ({ isOpen, onClose, packageJson }: Props) => {
                         ) !== -1
                       }
                     />
-                  ) : null}
-                </GridItem>
-              </Grid>
-            ))}
+                  </GridItem>
+                </Grid>
+              ) : null
+            )}
           </Stack>
           <Button
             width={'100%'}
             onClick={onUpdate}
             isLoading={isProcessing}
             disabled={isProcessing}
+            variant={'main'}
+            bgColor={'whiteAlpha.100'}
+            _hover={{
+              bgColor: 'whiteAlpha.300',
+            }}
           >
             Update
           </Button>

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
@@ -35,7 +35,7 @@ const TopBar = () => {
         visibility={{ base: 'hidden', sm: 'visible' }}
         userSelect={'none'}
       >
-        {APP_NAME}
+        Run TS
       </Text>
       <Stack
         position={'absolute'}