Implement to create a new workspace

Author: newrun

src/ipcEvents.ts

@@ -1,4 +1,6 @@
 export enum IpcEvents {
+  NEW_WORKSPACE = 'NEW_WORKSPACE',
+  NEW_WORKSPACE_CONFIRM = 'NEW_WORKSPACE_CONFIRM',
   NEW_BROWSER_TAB = 'NEW_BROWSER_TAB',
   RELOAD_BROWSER_TAB = 'RELOAD_BROWSER_TAB',
   STOP_BROWSER_TAB = 'STOP_BROWSER_TAB',
@@ -11,7 +13,8 @@ export enum IpcEvents {
   SAVE_TEXT_FILE = 'SAVE_TEXT_FILE',
   LOAD_TEXT_FILE = 'LOAD_TEXT_FILE',
   GET_CURRENT_WORKSPACE = 'GET_CURRENT_WORKSPACE',
-  WORKSPACE_CHANGED = 'WORKSPACE_CHANGED',
+  WORKSPACE_CHANGE = 'WORKSPACE_CHANGE',
+  WORKSPACE_SWITCH = 'WORKSPACE_SWITCH',
   ENABLE_WORKSPACE = 'ENABLE_WORKSPACE',
   SET_WORKSPACE_VALUE = 'SET_WORKSPACE_VALUE',
   OPEN_SETTINGS = 'OPEN_SETTINGS',
@@ -23,12 +26,14 @@ export const ipcMainEvents = [
   IpcEvents.SET_MENU_ITEM_OPTIONS,
   IpcEvents.SAVE_TEXT_FILE,
   IpcEvents.LOAD_TEXT_FILE,
+  IpcEvents.NEW_WORKSPACE,
   IpcEvents.GET_CURRENT_WORKSPACE,
   IpcEvents.ENABLE_WORKSPACE,
   IpcEvents.SET_WORKSPACE_VALUE,
 ];
 
 export const ipcRendererEvents = [
+  IpcEvents.NEW_WORKSPACE_CONFIRM,
   IpcEvents.NEW_BROWSER_TAB,
   IpcEvents.MONACO_SAVE_FILE,
   IpcEvents.RELOAD_BROWSER_TAB,
@@ -37,5 +42,6 @@ export const ipcRendererEvents = [
   IpcEvents.TOGGLE_DEV_TOOLS,
   IpcEvents.SELECT_ALL_IN_EDITOR,
   IpcEvents.OPEN_SETTINGS,
-  IpcEvents.WORKSPACE_CHANGED,
+  IpcEvents.WORKSPACE_CHANGE,
+  IpcEvents.WORKSPACE_SWITCH,
 ];

src/main/main.ts

@@ -18,6 +18,7 @@ import { setupDevTools } from './devtools';
 import { getOrCreateMainWindow } from './windows';
 import {
   initializeWorkspace,
+  newWorkspace,
   getCurrentWorkspace,
   enableWorkspace,
   setWorkspaceValue,
@@ -80,6 +81,11 @@ function setupWorkspaceHandler() {
       saveTextFile(filePath, value);
     }
   );
+
+  ipcMainManager.handle(IpcEvents.NEW_WORKSPACE, async (_) => {
+    newWorkspace();
+  });
+
   ipcMainManager.handle(IpcEvents.GET_CURRENT_WORKSPACE, async (_) => {
     return getCurrentWorkspace();
   });

src/main/menu.ts

@@ -153,12 +153,18 @@ function getDebugMenu(): MenuItemConstructorOptions {
 function getFileMenu(): MenuItemConstructorOptions {
   const fileMenu: Array<MenuItemConstructorOptions> = [
     {
-      label: 'New Code',
-      accelerator: 'CmdOrCtrl+N',
-      enabled: false,
+      label: 'New Workspace',
+      click: () => {
+        return ipcMainManager.send(IpcEvents.NEW_WORKSPACE_CONFIRM);
+      },
     },
+    // {
+    //   label: 'New Code',
+    //   accelerator: 'CmdOrCtrl+N',
+    //   enabled: false,
+    // },
     {
-      label: 'New Browser Tab',
+      label: 'New Tab',
       click: () => {
         return ipcMainManager.send(IpcEvents.NEW_BROWSER_TAB);
       },

src/main/store.js

@@ -10,7 +10,7 @@ export function setStoreValue(key, value) {
   store.set(key, value);
 }
 
-export function deleteStoreKey(key) {
+export function deleteStoreValue(key) {
   store.delete(key);
 }
 

src/main/workspace.js

@@ -1,11 +1,11 @@
 import { app } from 'electron';
 import { v4 as uuidv4 } from 'uuid';
-import fs from 'fs';
+import fs from 'fs-extra';
 import path from 'path';
 import {
   getStoreValue,
   setStoreValue,
-  deleteStoreKey,
+  deleteStoreValue,
   subscribeKey,
 } from './store';
 import { IpcEvents } from '../ipcEvents';
@@ -15,7 +15,7 @@ import { getFileNameFromPath, getRelativePath } from './util';
 const userDataPath = app.getPath('userData');
 
 export function initializeWorkspace() {
-  //deleteStoreKey('workspace'); // DEBUGGING
+  //deleteStoreValue('workspace'); // DEBUGGING
   if (!getStoreValue('workspace')) {
     setStoreValue('workspace', {});
     const id = createWorkspace();
@@ -50,8 +50,32 @@ export function createWorkspace() {
   return id;
 }
 
-export function getCurrentWorkspace() {
-  const workspaceId = getStoreValue('workspace.current');
+export function newWorkspace() {
+  const oldWorkspaceId = getCurrentWorkspaceId();
+
+  const newWorkspaceId = createWorkspace();
+  if (getWorkspace(newWorkspaceId)) {
+    setCurrentWorkspaceId(newWorkspaceId);
+  }
+  setTimeout(() => {
+    deleteWorkspace(oldWorkspaceId);
+  }, 0);
+}
+
+export function deleteWorkspace(id) {
+  if (!id) return;
+
+  const currentWorkspaceId = getCurrentWorkspaceId();
+  if (currentWorkspaceId === id) {
+    setStoreValue(`workspace.current`, null);
+  }
+  deleteStoreValue(`workspace.${id}`);
+  setTimeout(() => {
+    deleteWorkspaceDirectories(id);
+  }, 1000);
+}
+
+export function getWorkspace(workspaceId) {
   if (!workspaceId) return null;
 
   const workspace = getStoreValue(`workspace.${workspaceId}`);
@@ -60,6 +84,21 @@ export function getCurrentWorkspace() {
   return workspace;
 }
 
+export function getCurrentWorkspace() {
+  const workspaceId = getCurrentWorkspaceId();
+  return getWorkspace(workspaceId);
+}
+
+export function getCurrentWorkspaceId() {
+  const workspaceId = getStoreValue('workspace.current');
+  return workspaceId || null;
+}
+
+export function setCurrentWorkspaceId(id) {
+  if (!id) return;
+  setStoreValue('workspace.current', id);
+}
+
 export function enableWorkspace(workspaceId, value) {
   if (!workspaceId) return;
   setStoreValue(`workspace.${workspaceId}.enabled`, value);
@@ -85,6 +124,13 @@ function createWorkspaceDirectories(workspaceId) {
   createDirectory(project);
 }
 
+function deleteWorkspaceDirectories(workspaceId) {
+  if (!workspaceId) return;
+
+  const home = path.join(userDataPath, 'workspaces', workspaceId);
+  fs.remove(home).catch((err) => console.error(err));
+}
+
 function createProjectFiles(projectPath) {
   const mainJsPath = path.join(projectPath, 'main.js');
   if (!fs.existsSync(mainJsPath)) {
@@ -115,7 +161,11 @@ function getFileInfo(projectPath, localPath, remotePath) {
 }
 
 function notifyWorkspaceChange(newValue, oldValue) {
-  ipcMainManager.send(IpcEvents.WORKSPACE_CHANGED, [newValue]);
+  if (oldValue['current'] !== newValue['current']) {
+    ipcMainManager.send(IpcEvents.WORKSPACE_SWITCH, [newValue]);
+  } else {
+    ipcMainManager.send(IpcEvents.WORKSPACE_CHANGE, [newValue]);
+  }
 }
 
 const mainjs = `/**

src/renderer/workspace/useWorkspace.js

@@ -1,8 +1,24 @@
 import { useState, useMemo, useEffect } from 'react';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { Modal } from 'antd';
 import { createContext } from '../hooks/context';
 import { ipcRendererManager, useIpcRendererListener } from '../ipc';
 import { IpcEvents } from '../../ipcEvents';
 
+const { confirm } = Modal;
+
+const showNewWorkspaceConfirm = () => {
+  confirm({
+    title: 'Do you want to create a new workspace?',
+    icon: <ExclamationCircleOutlined />,
+    content: 'Your changes will be lost.',
+    onOk() {
+      ipcRendererManager.invoke(IpcEvents.NEW_WORKSPACE);
+    },
+    onCancel() {},
+  });
+};
+
 export const [WorkspaceProvider, useWorkspaceContext] = createContext({
   name: 'WorkspaceContext',
 });
@@ -23,12 +39,23 @@ export function useWorkspaceProvider() {
     })();
   }, []);
 
-  useIpcRendererListener(IpcEvents.WORKSPACE_CHANGED, (newValue) => {
+  useIpcRendererListener(IpcEvents.WORKSPACE_CHANGE, (newValue) => {
     if (workspace && newValue[workspace.id]) {
       setWorkspace(newValue[workspace.id]);
     }
   });
 
+  useIpcRendererListener(IpcEvents.WORKSPACE_SWITCH, (newValue) => {
+    const currentWorkspaceId = newValue['current'];
+    if (currentWorkspaceId) {
+      setWorkspace(newValue[currentWorkspaceId]);
+    }
+  });
+
+  useIpcRendererListener(IpcEvents.NEW_WORKSPACE_CONFIRM, () => {
+    showNewWorkspaceConfirm();
+  });
+
   const [scriptVersionId, setScriptVersionId] = useState(1);
   const [consoleLogs, setConsoleLogs] = useState([]);
   const [activityIndex, setActivityIndex] = useState(