Implement Change log modal box

CHANGE_LOG.md

@@ -1,6 +1,9 @@
 # 0.12.0
 
+## What’s Changed
+
 - [feature] Create check for update button, improve app update logic
+- [feature] Implement change log modal box
 - [fix] LargeText window text cutting bug fix
 - [fix] Improve plugin performance significantly through separating plugin executor process from main process
 

src/app/components/changeLogModal/index.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import got from 'got';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import MarkdownRenderer from '../markdownRenderer';
+
+type IProps = {
+  opened: boolean;
+  setOpened: (opened: boolean) => void;
+};
+
+const API =
+  'https://raw.githubusercontent.com/jopemachine/arvis/master/CHANGE_LOG.md';
+
+const ChangeLogModal = (props: IProps) => {
+  const { opened, setOpened } = props;
+  const [content, setContent] = useState<string>();
+
+  const toggle = () => setOpened(!opened);
+
+  useEffect(() => {
+    got.get(API).then((response) => setContent(response.body));
+  }, []);
+
+  return (
+    <Modal
+      fade
+      centered
+      isOpen={opened}
+      toggle={toggle}
+      con="changeLogModal"
+      style={{
+        color: '#212529',
+      }}
+    >
+      <ModalHeader toggle={toggle}>Change Log</ModalHeader>
+      <ModalBody style={{ height: 600 }}>
+        {content && (
+          <MarkdownRenderer
+            width="93%"
+            height="90%"
+            data={content}
+            padding={10}
+          />
+        )}
+        {!content && 'Loading..'}
+      </ModalBody>
+      <ModalFooter>
+        <Button color="primary" onClick={() => setOpened(false)}>
+          Confirm
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default ChangeLogModal;

src/app/components/index.ts

@@ -1,3 +1,4 @@
+import ChangeLogModal from './changeLogModal';
 import ExtensionInfoWebview from './extensionInfoWebview';
 import ExtensionReadmeMarkdownRenderer from './extensionReadmeMarkdownRenderer';
 import ExtensionUserVariableTable from './extensionUserVariableTable';
@@ -14,9 +15,10 @@ import SearchWindowSpinner from './searchWindowSpinner';
 import Spinner from './spinner';
 import StyledInput from './styledInput';
 import TrayBuilder from './tray';
-import WalkThroughModal from './walkThrough';
+import WalkThroughModal from './walkThroughModal';
 
 export {
+  ChangeLogModal,
   ExtensionUserVariableTable,
   ExtensionReadmeMarkdownRenderer,
   ExtensionInfoWebview,

src/app/components/markdownRenderer/index.tsx

@@ -10,8 +10,8 @@ import rehypeRaw from 'rehype-raw';
 import '../../../external/github-markdown-css/dark.css';
 
 type IProps = {
-  width: string;
-  height: string;
+  width: number | string;
+  height: number | string;
   data: string;
   dark?: boolean;
   padding?: number;
@@ -52,6 +52,10 @@ const OuterContainer = styled(({ padding, children, ...rest }) => (
     font-size: 100% !important;
   }
 
+  .markdown-body li {
+    list-style: disc;
+  }
+
   .markdown-body-dark p {
     font-size: 100% !important;
   }

src/app/containers/Preference/index.tsx

@@ -7,7 +7,12 @@ import fse from 'fs-extra';
 import _ from 'lodash';
 import { searchMostTotalDownload } from 'arvis-store';
 import { StateType } from '@redux/reducers/types';
-import { ScreenCover, Spinner, WalkThroughModal } from '@components/index';
+import {
+  ScreenCover,
+  Spinner,
+  WalkThroughModal,
+  ChangeLogModal,
+} from '@components/index';
 import { IPCMainEnum, IPCRendererEnum } from '@ipc/ipcEventEnum';
 import { SpinnerContext } from '@helper/spinnerContext';
 import { checkExtensionsUpdate } from '@helper/extensionUpdateChecker';
@@ -54,6 +59,9 @@ export default function PreferenceWindow() {
   const [walkThroughModalOpened, setWalkThroughModalOpened] =
     useState<boolean>(false);
 
+  const [changeLogModalOpened, setChangeLogModalOpened] =
+    useState<boolean>(false);
+
   const store = useStore();
 
   const dispatch = useDispatch();
@@ -172,6 +180,10 @@ export default function PreferenceWindow() {
     openWalkThroughModalbox: (e: IpcRendererEvent) => {
       setWalkThroughModalOpened(true);
     },
+
+    openChangeLogModalbox: (e: IpcRendererEvent) => {
+      setChangeLogModalOpened(true);
+    },
   };
 
   const preventInvalidReduxState = () => {
@@ -258,6 +270,10 @@ export default function PreferenceWindow() {
       IPCMainEnum.openWalkThroughModalbox,
       ipcCallbackTbl.openWalkThroughModalbox
     );
+    ipcRenderer.on(
+      IPCMainEnum.openChangeLogModalbox,
+      ipcCallbackTbl.openChangeLogModalbox
+    );
 
     return () => {
       ipcRenderer.off(IPCMainEnum.fetchAction, ipcCallbackTbl.fetchAction);
@@ -287,6 +303,10 @@ export default function PreferenceWindow() {
         IPCMainEnum.openWalkThroughModalbox,
         ipcCallbackTbl.openWalkThroughModalbox
       );
+      ipcRenderer.off(
+        IPCMainEnum.openChangeLogModalbox,
+        ipcCallbackTbl.openChangeLogModalbox
+      );
     };
   }, []);
 
@@ -360,6 +380,10 @@ export default function PreferenceWindow() {
           opened={walkThroughModalOpened}
           setOpened={setWalkThroughModalOpened}
         />
+        <ChangeLogModal
+          opened={changeLogModalOpened}
+          setOpened={setChangeLogModalOpened}
+        />
       </SpinnerContext.Provider>
     </OuterContainer>
   );

src/app/helper/handleFirstRun.ts

@@ -15,3 +15,9 @@ export const handleFirstRun = () => {
     .getPreferenceWindow()
     .webContents.send(IPCMainEnum.openWalkThroughModalbox);
 };
+
+export const handleThisVersionFirstRun = () => {
+  WindowManager.getInstance()
+    .getPreferenceWindow()
+    .webContents.send(IPCMainEnum.openChangeLogModalbox);
+};

src/app/ipc/ipcEventEnum.ts

@@ -62,6 +62,7 @@ export enum IPCMainEnum {
   getSystemFontRet                           = '@ipcMain/getSystemFontRet',
   hideSearchWindowByBlurEvent                = '@ipcMain/hideSearchWindowByBlurEvent',
   importThemeRet                             = '@ipcMain/importThemeRet',
+  openChangeLogModalbox                      = '@ipcMain/openChangeLogModalbox',
   openPluginInstallFileDialogRet             = '@ipcMain/openPluginInstallFileDialogRet',
   openSnippetInstallFileDialogRet            = '@ipcMain/openSnippetInstallFileDialogRet',
   openWalkThroughModalbox                    = '@ipcMain/openWalkThroughModalbox',
@@ -71,8 +72,8 @@ export enum IPCMainEnum {
   pinSearchWindow                            = '@ipcMain/pinSearchWindow',
   registerAllShortcuts                       = '@ipcMain/registerAllShortcuts',
   reloadPlugin                               = '@ipcMain/reloadPlugin',
-  reloadWorkflow                             = '@ipcMain/reloadWorkflow',
   reloadSnippet                              = '@ipcMain/reloadSnippet',
+  reloadWorkflow                             = '@ipcMain/reloadWorkflow',
   renewClipboardStore                        = '@ipcMain/renewClipboardStore',
   resetReduxStore                            = '@ipcMain/resetReduxStore',
   resizeCurrentSearchWindowWidth             = '@ipcMain/resizeCurrentSearchWindowWidth',

src/app/utils/isThisVersionFirstLaunching.ts

@@ -0,0 +1,26 @@
+import { app } from 'electron';
+import fse from 'fs-extra';
+import path from 'path';
+import pkg from '../config/pkg';
+
+export const isThisVersionFirstLaunching = (): boolean => {
+  const checkFile = path.join(
+    app.getPath('userData'),
+    `.electron-util--has-app-launched-${pkg.version}`
+  );
+
+  if (fse.existsSync(checkFile)) {
+    return false;
+  }
+
+  try {
+    fse.writeFileSync(checkFile, '');
+  } catch (error: any) {
+    if (error.code === 'ENOENT') {
+      fse.mkdirSync(app.getPath('userData'));
+      return isThisVersionFirstLaunching();
+    }
+  }
+
+  return true;
+};

src/main.dev.ts

@@ -24,9 +24,13 @@ import { startFileWatcher, stopFileWatcher } from './app/helper/fileWatcher';
 import { arvisRenewExtensionFlagFilePath } from './app/config/path';
 import { checkUpdate } from './app/config/appUpdater';
 import MenuBuilder from './app/components/menus';
-import { handleFirstRun } from './app/helper/handleFirstRun';
+import {
+  handleFirstRun,
+  handleThisVersionFirstRun,
+} from './app/helper/handleFirstRun';
 import { openArvisFile } from './app/helper/openArvisFileHandler';
 import { reduxStoreResetHandler } from './app/store/reduxStoreResetHandler';
+import { isThisVersionFirstLaunching } from './app/utils/isThisVersionFirstLaunching';
 
 const gotTheLock = app.requestSingleInstanceLock();
 
@@ -106,6 +110,10 @@ app.on('ready', () => {
 
     if (isFirstAppLaunch()) {
       windowManager.registerFirstRunCallback(handleFirstRun);
+    } else {
+      if (isThisVersionFirstLaunching()) {
+        windowManager.registerFirstRunCallback(handleThisVersionFirstRun);
+      }
     }
 
     startFileWatcher();