Remove class variables

src/commands/index.ts

@@ -1,14 +1,11 @@
 import { firestore } from "../firebase";
 import { Item } from '../editor'
 
-type State = any;
-type GetState = () => State;
-
-export interface Command {
-  invoke(): Promise<void>;
-  undo(args?: any): Promise<void>;
+export interface Command<T = any> {
+  name: string
+  invoke(...args: any): Promise<T>;
+  undo(payload: T): Promise<void>;
   redo(): Promise<void>;
-  record(): any
 }
 
 const updateStoreItem = (itemId: string, item: any) => {
@@ -27,89 +24,72 @@ const deleteStoreItem = (itemId: string) => {
     .delete();
 };
 
-export class updateItem implements Command {
-  before: any;
-  constructor(public item: Item, public content: any) {}
+type UpdateItemPayload = {
+  id: string,
+  before: Item
+}
+export class updateItem implements Command<UpdateItemPayload> {
+  name = 'updateItem'
 
-  async invoke() {
-    return updateStoreItem(this.item.id, this.content);
+  async invoke(item: Item, content: Partial<Item>) {
+    updateStoreItem(item.id, content);
+    return { id: item.id, before: item }
   }
-  async undo({ id, before }: any) {
-    return updateStoreItem(id, before);
+  async undo({ id, before }: UpdateItemPayload) {
+    updateStoreItem(id, before);
   }
   async redo() {
     throw new Error("Method not implemented.");
   }
-  record() {
-    return {
-      name: 'updateItem',
-      payload: {
-        id: this.item.id,
-        before: this.item,
-      }
-    }
-  }
 }
 
-export class deleteItem implements Command {
-  before: any;
+type DeleteItemPayload = {
+  id: string
+  before: Item
+}
 
-  constructor(public item: Item) {}
+export class deleteItem implements Command<DeleteItemPayload> {
+  name = 'deleteItem'
 
-  async invoke() {
-    this.before = this.item
-    deleteStoreItem(this.item.id);
+  async invoke(item: Item) {
+    deleteStoreItem(item.id);
+    return {
+      id: item.id, before: item
+    }
   }
-  async undo({ id, before }: any){
+  async undo({ id, before }: DeleteItemPayload){
     updateStoreItem(id, before);
   }
   async redo() {
     throw new Error("Method not implemented.");
   }
-  record() {
-    return {
-      name: 'deleteItem',
-      payload: {
-        id: this.item.id,
-        before: this.before,
-      }
-    }
-  }
 }
 
-export class createItem implements Command {
-  itemId: string;
-
-  constructor() {
-    this.itemId = String(Number(new Date()));
-  }
+export class createItem implements Command<string> {
+  name = 'createItem'
 
   async invoke() {
+    const itemId = String(Number(new Date()));
     const item = {
-      id: this.itemId,
+      id: itemId,
       type: "text",
       label: "title",
       placeholder: "",
     };
 
-    updateStoreItem(this.itemId, item);
+    updateStoreItem(itemId, item);
+    return itemId
   }
-  async undo(payload: any) {
+  async undo(payload: string) {
     deleteStoreItem(payload);
   }
   async redo() {
     throw new Error("Method not implemented.");
   }
-  record() {
-    return {
-      name: 'createItem',
-      payload: this.itemId
-    }
-  }
 }
 
 export const undoCommands: Record<string, Command> = {
   'createItem': new createItem(),
-  'deleteItem': new deleteItem({} as any),
-  'updateItem': new updateItem({} as any, {})
+  'deleteItem': new deleteItem(),
+  'updateItem': new updateItem()
 }

src/editor.tsx

@@ -170,9 +170,10 @@ export class EditorClass extends React.Component<{}, State> {
 
 const useSetStore = () => {
   const [histories, setHistories] = useState<any>([]);
-  const invoke = (action: Command) => {
-    action.invoke();
-    setHistories((hist: any[]) => [...hist, action.record()]);
+  const invoke = async (action: Command, ...args: any) => {
+    const name = action.name
+    const payload = await action.invoke(...args);
+    setHistories((hist: any[]) => [ ...hist, { name, payload, }, ]);
   };
 
   const undo = () => {
@@ -194,12 +195,12 @@ export const Editor: React.FC<{
     invoke(cmd);
   };
   const updateItem = useCallback((item: Item, content: any) => {
-    const cmd = new updateItemCommand(item, content);
-    invoke(cmd);
+    const cmd = new updateItemCommand();
+    invoke(cmd, item, content);
   }, []);
   const deleteItem = useCallback((item: Item) => {
-    const cmd = new deleteItemCommand(item);
-    invoke(cmd);
+    const cmd = new deleteItemCommand();
+    invoke(cmd, item);
   }, []);
 
   return (