feat: start the implementation of the Commands

ReidyT · ReidyT · commit 714de8547018 · 2024-02-08T17:22:26.000+01:00
diff --git a/src/commands/commands.ts b/src/commands/commands.ts
@@ -0,0 +1,148 @@
+/* eslint-disable max-classes-per-file */
+
+type PostType = {
+  action: 'post';
+  name: string;
+};
+
+type PatchType = {
+  action: 'patch';
+  id: string;
+};
+
+type DeleteType = {
+  action: 'delete';
+  id: string;
+};
+
+export type CommandDataType = {
+  data: { [key: string]: unknown };
+} & (PostType | PatchType | DeleteType);
+
+export type PostCommandDataType = {
+  data: { [key: string]: unknown };
+} & PostType;
+
+export type PatchCommandDataType = {
+  data: { [key: string]: unknown };
+} & PatchType;
+
+export type DeleteCommandDataType = {
+  data: { [key: string]: unknown };
+} & DeleteType;
+
+export interface APIContext<T> {
+  patch(data: T): void;
+  post(data: T): void;
+  delete(data: T): void;
+}
+
+export abstract class Command<T> {
+  protected apiContext: APIContext<T>;
+
+  constructor(apiContext: APIContext<T>) {
+    this.apiContext = apiContext;
+  }
+
+  abstract execute(): void;
+
+  abstract undo(): void;
+
+  abstract getInfo(): string;
+}
+
+type FormattedCommand<T> = {
+  type: string;
+  command: Command<T>;
+  message: string;
+};
+
+export class HistoryCommand<T extends CommandDataType> extends Command<T> {
+  private prevState;
+
+  private currState;
+
+  constructor({
+    prevState,
+    currState,
+    apiContext,
+  }: {
+    prevState?: T;
+    currState: T;
+    apiContext: APIContext<T>;
+  }) {
+    super(apiContext);
+    this.prevState = prevState;
+    this.currState = currState;
+  }
+
+  // TODO: improve the way to chose post. patch and delete
+  execute(): void {
+    // check if it is the first data for the app
+    if (this.currState.action === 'post') {
+      this.apiContext.post(this.currState);
+    } else {
+      this.apiContext.patch(this.currState);
+    }
+  }
+
+  undo(): void {
+    if (!this.prevState) {
+      this.apiContext.delete(this.currState);
+    } else {
+      this.apiContext.patch(this.prevState);
+    }
+  }
+
+  getInfo(): string {
+    return `Command ${JSON.stringify(this.currState)}`;
+  }
+}
+
+export class HistoryManager<T extends CommandDataType> {
+  private prevStates: Command<T>[] = [];
+
+  private nextStates: Command<T>[] = [];
+
+  public execute(command: Command<T>): void {
+    this.nextStates = [];
+    command.execute();
+    this.prevStates = [...this.prevStates, command];
+  }
+
+  public redo(): void {
+    if (!this.nextStates.length) return;
+
+    const lastCommand = this.nextStates[this.nextStates.length - 1];
+    lastCommand.execute();
+
+    this.prevStates = [...this.prevStates, lastCommand];
+    this.nextStates = this.nextStates.slice(0, -1);
+  }
+
+  public undo(): void {
+    if (!this.prevStates.length) return;
+
+    const lastCommand = this.prevStates[this.prevStates.length - 1];
+    lastCommand.execute();
+
+    this.nextStates = [...this.nextStates, lastCommand];
+    this.prevStates = this.prevStates.slice(0, -1);
+  }
+
+  public formattedBackHistory(): FormattedCommand<T>[] {
+    return this.prevStates.map((command) => ({
+      type: 'undo',
+      command,
+      message: command.getInfo(),
+    }));
+  }
+
+  public formattedForwardHistory(): FormattedCommand<T>[] {
+    return [...this.nextStates].reverse().map((command) => ({
+      type: 'redo',
+      command,
+      message: command.getInfo(),
+    }));
+  }
+}
diff --git a/src/components/context/AppSettingContext.tsx b/src/components/context/AppSettingContext.tsx
@@ -2,34 +2,28 @@ import React, { FC, PropsWithChildren, createContext, useMemo } from 'react';
 
 import { AppSetting } from '@graasp/sdk';
 
+import {
+  APIContext,
+  CommandDataType,
+  DeleteCommandDataType,
+  PatchCommandDataType,
+  PostCommandDataType,
+} from '@/commands/commands';
+
 import { hooks, mutations } from '../../config/queryClient';
 import Loader from '../common/Loader';
 
-type PostAppSettingType = {
-  data: { [key: string]: unknown };
-  name: string;
-};
-
-type PatchAppSettingType = {
-  data: { [key: string]: unknown };
-  id: string;
-};
-
-type DeleteAppSettingType = {
-  id: string;
-};
-
 export type AppSettingContextType = {
-  postAppSetting: (payload: PostAppSettingType) => void;
-  patchAppSetting: (payload: PatchAppSettingType) => void;
-  deleteAppSetting: (payload: DeleteAppSettingType) => void;
+  settingContext: APIContext<CommandDataType>;
   appSettingArray: AppSetting[];
 };
 
 const defaultContextValue = {
-  postAppSetting: () => null,
-  patchAppSetting: () => null,
-  deleteAppSetting: () => null,
+  settingContext: {
+    patch: () => null,
+    post: () => null,
+    delete: () => null,
+  },
   appSettingArray: [],
 };
 
@@ -42,14 +36,36 @@ export const AppSettingProvider: FC<PropsWithChildren> = ({ children }) => {
   const { mutate: postAppSetting } = mutations.usePostAppSetting();
   const { mutate: patchAppSetting } = mutations.usePatchAppSetting();
   const { mutate: deleteAppSetting } = mutations.useDeleteAppSetting();
+
+  const settingContext: APIContext<CommandDataType> = useMemo(
+    () => ({
+      patch: (payload: PatchCommandDataType) => {
+        patchAppSetting({
+          data: { ...payload.data },
+          id: payload.id,
+        });
+      },
+      post: (payload: PostCommandDataType) => {
+        postAppSetting({
+          data: { ...payload.data },
+          name: payload.name,
+        });
+      },
+      delete: (payload: DeleteCommandDataType) => {
+        deleteAppSetting({
+          id: payload.id,
+        });
+      },
+    }),
+    [deleteAppSetting, patchAppSetting, postAppSetting],
+  );
+
   const contextValue: AppSettingContextType = useMemo(
     () => ({
-      postAppSetting,
-      patchAppSetting,
-      deleteAppSetting,
+      settingContext,
       appSettingArray: appSetting.data || [],
     }),
-    [appSetting.data, deleteAppSetting, patchAppSetting, postAppSetting],
+    [appSetting.data, settingContext],
   );
 
   if (appSetting.isLoading) {
diff --git a/src/components/views/admin/BuilderView.tsx b/src/components/views/admin/BuilderView.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Alert, Box, Button, Stack, Typography } from '@mui/material';
 
+import { HistoryCommand, HistoryManager } from '@/commands/commands';
 import GraaspButton from '@/components/common/settings/GraaspButton';
 import { TEXT_ANALYSIS } from '@/langs/constants';
 
@@ -100,8 +101,9 @@ const BuilderView: FC = () => {
     setIsClean(stateIsClean);
   };
 
-  const { patchAppSetting, postAppSetting, appSettingArray } =
-    useAppSettingContext();
+  // const { patchAppSetting, postAppSetting, appSettingArray } =
+  const { appSettingArray, settingContext } = useAppSettingContext();
+  const history = new HistoryManager();
 
   useEffect(() => {
     if (isClean) {
@@ -117,48 +119,76 @@ const BuilderView: FC = () => {
     }
   }, [appSettingArray, isClean]);
 
+  const hasKeyChanged = (settingKey: SettingKey): boolean => {
+    const { value, dataKey } = settings[settingKey];
+    const appSettingDataValue = getAppSetting(appSettingArray, settingKey)
+      ?.data[dataKey];
+
+    if (dataKey === DATA_KEYS.KEYWORDS) {
+      const k1 = value;
+      const k2 = (appSettingDataValue ?? []) as Keyword[];
+
+      const isKeywordListEqual: boolean =
+        k1.length === k2.length &&
+        k1.every((e1) =>
+          k2.some((e2) => e1.word === e2.word && e1.def === e2.def),
+        );
+      return !isKeywordListEqual;
+    }
+
+    return value !== appSettingDataValue;
+  };
+
   const saveSettings = (): void => {
     settingKeys.forEach((settingKey) => {
       const appSetting = getAppSetting(appSettingArray, settingKey);
       const { value, dataKey } = settings[settingKey];
 
       if (appSetting) {
-        patchAppSetting({
-          data: { [dataKey]: value },
-          id: appSetting.id,
-        });
+        // patchAppSetting({
+        //   data: { [dataKey]: value },
+        //   id: appSetting.id,
+        // });
+        // TODO: move the history in on changed instead of saved to have previous state
+        if (!hasKeyChanged(settingKey)) {
+          return;
+        }
+
+        history.execute(
+          new HistoryCommand({
+            apiContext: settingContext,
+            currState: {
+              data: { [dataKey]: value },
+              action: 'patch',
+              id: appSetting.id,
+            },
+          }),
+        );
       } else {
-        postAppSetting({
-          data: { [dataKey]: value },
-          name: settingKey,
-        });
+        //   postAppSetting({
+        //     data: { [dataKey]: value },
+        //     name: settingKey,
+        //   });
+        history.execute(
+          new HistoryCommand({
+            apiContext: settingContext,
+            currState: {
+              data: { [dataKey]: value },
+              action: 'post',
+              name: settingKey,
+            },
+          }),
+        );
       }
+
+      console.log(history.formattedBackHistory());
+      console.log(history.formattedForwardHistory());
     });
 
     setIsClean(true);
   };
 
-  const isChanged = settingKeys
-    .map((settingKey) => {
-      const { value, dataKey } = settings[settingKey];
-      const appSettingDataValue = getAppSetting(appSettingArray, settingKey)
-        ?.data[dataKey];
-
-      if (dataKey === DATA_KEYS.KEYWORDS) {
-        const k1 = value;
-        const k2 = (appSettingDataValue ?? []) as Keyword[];
-
-        const isKeywordListEqual: boolean =
-          k1.length === k2.length &&
-          k1.every((e1) =>
-            k2.some((e2) => e1.word === e2.word && e1.def === e2.def),
-          );
-        return !isKeywordListEqual;
-      }
-
-      return value !== appSettingDataValue;
-    })
-    .some((v) => v);
+  const isChanged = settingKeys.map(hasKeyChanged).some((v) => v);
 
   return (
     <Stack
