Fix snippet page bugs, Implement Snippet editing modal box

jopemachine-arvis · Oct 29, 2021 · 55656fe · 55656fe
1 parent 340aa6e
commit 55656fe
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 58 deletions.
diff --git a/CHANGE_LOG.md b/CHANGE_LOG.md
@@ -1,3 +1,10 @@
+# 0.14.2
+
+## What’s Changed
+
+- [fix] Fix Snippet page's bugs
+- [feature] Add Snippet editing modal box
+
 # 0.14.1
 
 ## What’s Changed

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arvis",
   "productName": "Arvis",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Extendable cross-platform launcher that aims to help you run, edit, create any workflow simply",
   "homepage": "https://jopemachine.github.io/arvis.com/",
   "scripts": {

diff --git a/src/app/containers/Preference/Snippet/index.tsx b/src/app/containers/Preference/Snippet/index.tsx
@@ -22,6 +22,7 @@ import useItemList, { ItemInfo } from '@hooks/useItemList';
 import { createGlobalConfigChangeHandler } from '@utils/createGlobalConfigChangeHandler';
 import * as style from './style';
 import CollectionInfoModal from './collectionInfoModal';
+import SnippetInfoModal from './snippetInfoModal';
 import SnippetTable from './snippetTable';
 import {
   OuterContainer,
@@ -33,22 +34,35 @@ import {
 } from './components';
 import './index.css';
 
-export default function Snippet(props: any) {
+type IProps = {
+  snippets: SnippetItem[];
+  snippetCollectionInfos: Map<CollectionName, SnippetCollectionInfo>;
+  reloadSnippets: () => void;
+};
+
+export default function Snippet(props: IProps) {
   const { snippets, snippetCollectionInfos, reloadSnippets } = props;
 
   const snippetsByCollection = useMemo(
     () => _.groupBy(snippets, 'collection'),
     [snippets]
   );
 
+  useEffect(() => console.log(snippets), snippets);
+
   const [isSpinning, setSpinning] = useContext(SpinnerContext) as any;
 
-  const selectedCollection = useRef<string | undefined>();
+  const selectedCollection = useRef<CollectionName | undefined>();
   const selectedCollectionInfo = useRef<SnippetCollectionInfo | undefined>();
 
   const [collectionEditModalOpened, setCollectionEditModalOpened] =
     useState<boolean>(false);
 
+  const [snippetInfoModalOpened, setSnippetInfoModalOpened] =
+    useState<boolean>(false);
+
+  const [clickedSnippetIdx, setClickedSnippetIdx] = useState<number>(0);
+
   const forceUpdate = useForceUpdate();
 
   const { snippet_window_hotkey } = useSelector(
@@ -197,6 +211,11 @@ export default function Snippet(props: any) {
     };
   }, []);
 
+  const snippetTableDoubleClickHandler = (idx: number) => {
+    setClickedSnippetIdx(idx);
+    setSnippetInfoModalOpened(true);
+  };
+
   return (
     <OuterContainer
       id="snippet-page-container"
@@ -227,18 +246,18 @@ export default function Snippet(props: any) {
             />
           </FormGroup>
         </Form>
-
         {itemList}
       </SnippetListView>
       <SnippetSettingContainer>
         <SnippetTable
+          collectionInfo={selectedCollectionInfo.current}
+          reloadSnippets={reloadSnippets}
+          snippetTableDoubleClickHandler={snippetTableDoubleClickHandler}
           snippets={
             selectedCollection.current
               ? snippetsByCollection[selectedCollection.current]
               : undefined
           }
-          collectionInfo={selectedCollectionInfo.current}
-          reloadSnippets={reloadSnippets}
         />
       </SnippetSettingContainer>
 
@@ -269,6 +288,12 @@ export default function Snippet(props: any) {
         collectionInfo={selectedCollectionInfo.current}
         reloadSnippets={reloadSnippets}
       />
+      <SnippetInfoModal
+        snippetInfo={snippets[clickedSnippetIdx]}
+        opened={snippetInfoModalOpened}
+        setOpened={setSnippetInfoModalOpened}
+        reloadSnippets={reloadSnippets}
+      />
     </OuterContainer>
   );
 }
diff --git a/src/app/containers/Preference/Snippet/snippetInfoModal/components.tsx b/src/app/containers/Preference/Snippet/snippetInfoModal/components.tsx
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const OuterContainer = styled.div``;
diff --git a/src/app/containers/Preference/Snippet/snippetInfoModal/index.tsx b/src/app/containers/Preference/Snippet/snippetInfoModal/index.tsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  FormGroup,
+  Input,
+  Label,
+} from 'reactstrap';
+import { OuterContainer } from './components';
+import * as styles from './style';
+import { snippetInfoChangeHandler } from '../utils';
+
+type IProps = {
+  opened: boolean;
+  setOpened: (opened: boolean) => void;
+  snippetInfo: SnippetItem;
+  reloadSnippets: () => void;
+};
+
+const SnippetInfoModal = (props: IProps) => {
+  const { opened, setOpened, snippetInfo, reloadSnippets } = props;
+
+  const toggle = () => setOpened(!opened);
+
+  const [snippet, setSnippet] = useState<string>('');
+
+  useEffect(() => {
+    if (snippetInfo.snippet) {
+      setSnippet(snippetInfo.snippet);
+    } else {
+      setSnippet('');
+    }
+  }, [snippetInfo]);
+
+  const editSnippetInfo = () => {
+    snippetInfoChangeHandler(snippetInfo, 'snippet', snippet).then(() => {
+      reloadSnippets();
+      return null;
+    });
+  };
+
+  const saveBtnHandler = () => {
+    editSnippetInfo();
+    toggle();
+  };
+
+  return (
+    <OuterContainer>
+      <Modal
+        fade
+        centered
+        isOpen={opened}
+        toggle={toggle}
+        style={{
+          color: '#212529',
+          minHeight: 500,
+        }}
+      >
+        <ModalHeader toggle={toggle}>Edit snippet information</ModalHeader>
+        <ModalBody>
+          <FormGroup check>
+            <Label check style={styles.labelStyle}>
+              Snippet
+            </Label>
+            <Input
+              name="text"
+              type="textarea"
+              value={snippet}
+              onChange={(e) => setSnippet(e.target.value)}
+            />
+          </FormGroup>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            style={styles.btnStyle}
+            color="primary"
+            onClick={saveBtnHandler}
+          >
+            Save
+          </Button>
+          <Button style={styles.btnStyle} color="secondary" onClick={toggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </OuterContainer>
+  );
+};
+
+export default SnippetInfoModal;
diff --git a/src/app/containers/Preference/Snippet/snippetInfoModal/style.tsx b/src/app/containers/Preference/Snippet/snippetInfoModal/style.tsx
@@ -0,0 +1,3 @@
+export const labelStyle = { width: '80%', marginBottom: 15 };
+
+export const btnStyle = { fontSize: 14 };
diff --git a/src/app/containers/Preference/Snippet/snippetTable/editableCell.tsx b/src/app/containers/Preference/Snippet/snippetTable/editableCell.tsx
@@ -3,21 +3,28 @@ import { Input } from 'reactstrap';
 import StyledInput from '@components/styledInput';
 import './index.css';
 
+type SnippetTableCellOptions = {
+  collectionInfo?: SnippetCollectionInfo;
+  onDoubleClickHandler?: () => void;
+};
+
 export const EditableCell = ({
   value: initialValue,
   row: { index },
   column: { id },
   updateSnippet,
   type,
-  collectionInfo,
+  options = {},
 }: {
   value: any;
   row: any;
   column: any;
   updateSnippet: any;
   type: string;
-  collectionInfo?: SnippetCollectionInfo;
+  options: SnippetTableCellOptions;
 }) => {
+  const { collectionInfo, onDoubleClickHandler } = options;
+
   const prefix = collectionInfo
     ? collectionInfo.snippetKeywordPrefix ?? ''
     : '';
@@ -78,6 +85,7 @@ export const EditableCell = ({
       onChange={onChangeHandler}
       onBlur={onBlurHandler}
       onFocus={onFocusHandler}
+      onDoubleClick={onDoubleClickHandler}
       style={{
         height: 20,
         padding: 3,
@@ -91,7 +99,3 @@ export const EditableCell = ({
     />
   );
 };
-
-EditableCell.defaultProps = {
-  collectionInfo: undefined,
-};
diff --git a/src/app/containers/Preference/Snippet/snippetTable/index.tsx b/src/app/containers/Preference/Snippet/snippetTable/index.tsx
@@ -13,24 +13,27 @@ import { arvisSnippetCollectionPath } from '@config/path';
 import { IPCRendererEnum } from '@ipc/ipcEventEnum';
 import { OuterContainer } from './components';
 import { EditableCell } from './editableCell';
-import { filenamifyPath } from '../utils';
+import { filenamifyPath, snippetInfoChangeHandler } from '../utils';
 
 type IProps = {
   snippets?: SnippetItem[];
   reloadSnippets: () => void;
   collectionInfo?: SnippetCollectionInfo;
+  snippetTableDoubleClickHandler: (idx: number) => void;
 };
 
 function SnippetTable({
   columns,
   data,
   updateSnippet,
   collectionInfo,
+  snippetTableDoubleClickHandler,
 }: {
   columns: any;
   data: SnippetItem[];
   updateSnippet: any;
   collectionInfo?: SnippetCollectionInfo;
+  snippetTableDoubleClickHandler: (idx: number) => void;
 }) {
   const dataRef = useRef<any>(data);
   const collectionInfoRef =
@@ -39,13 +42,18 @@ function SnippetTable({
   const defaultColumn = React.useMemo(
     () => ({
       Cell: (cellArgs: any) => {
-        if (!dataRef.current[cellArgs.row.index]) return null;
-        const { type } = dataRef.current[cellArgs.row.index];
+        const snippetIdx = cellArgs.row.index;
+        if (!dataRef.current[snippetIdx]) return null;
+        const { type } = dataRef.current[snippetIdx];
 
         return EditableCell({
-          type,
-          collectionInfo: collectionInfoRef.current,
           ...cellArgs,
+          type,
+          options: {
+            collectionInfo: collectionInfoRef.current,
+            onDoubleClickHandler: () =>
+              snippetTableDoubleClickHandler(snippetIdx),
+          },
         });
       },
     }),
@@ -124,7 +132,12 @@ function SnippetTable({
 }
 
 export default function (props: IProps) {
-  const { snippets, reloadSnippets, collectionInfo } = props;
+  const {
+    snippets,
+    reloadSnippets,
+    collectionInfo,
+    snippetTableDoubleClickHandler,
+  } = props;
 
   const columns = React.useMemo(
     () => [
@@ -168,43 +181,6 @@ export default function (props: IProps) {
     return fse.rename(oldPath, newPath);
   };
 
-  const snippetInfoChangeHandler = (
-    snippet: SnippetItem,
-    target: string,
-    value: string | boolean
-  ) => {
-    // Update snippet by updating json file
-    const snippetFileName = filenamifyPath(
-      `${snippet.name} [${snippet.uid}].json`
-    );
-
-    const snippetPath = path.resolve(
-      arvisSnippetCollectionPath,
-      snippet.collection,
-      snippetFileName
-    );
-
-    const data: Record<string, any> = {
-      snippet: snippet.snippet,
-      dontautoexpand: !snippet.useAutoExpand,
-      name: snippet.name,
-      keyword: snippet.keyword,
-      uid: snippet.uid,
-    };
-
-    if (target === 'useAutoExpand') {
-      data.dontautoexpand = value;
-    } else {
-      data[target] = value;
-    }
-
-    return fse.writeJson(
-      snippetPath,
-      { arvissnippet: data },
-      { encoding: 'utf8', spaces: 4 }
-    );
-  };
-
   const updateSnippet = (
     rowIndex: number,
     columnId: string,
@@ -232,6 +208,7 @@ export default function (props: IProps) {
         data={snippets ?? []}
         updateSnippet={updateSnippet}
         collectionInfo={collectionInfo}
+        snippetTableDoubleClickHandler={snippetTableDoubleClickHandler}
       />
     </OuterContainer>
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import styled from 'styled-components';

		export const OuterContainer = styled.div``;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export const labelStyle = { width: '80%', marginBottom: 15 };

		export const btnStyle = { fontSize: 14 };