@alpaca-editor/core 1.0.0

package/src/editor/client/itemsRepository.ts

@@ -0,0 +1,391 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Field, FieldDescriptor, FullItem, ItemDescriptor } from "../pageModel";
+
+import { fetchItems } from "../services/contentService";
+import { getItemDescriptor } from "../utils";
+import { EditedField, ModifiedField } from "./editContext";
+import { User } from "../../types";
+
+export type ItemChange = {
+  item: ItemDescriptor;
+  action: "add" | "delete" | "update";
+  parentId?: string;
+};
+export type DeletedItem = { item: ItemDescriptor; parentId: string };
+
+export type ItemsRepository = {
+  getItems: (descriptors: ItemDescriptor[]) => Promise<FullItem[]>;
+  getItem: (descriptor: ItemDescriptor) => Promise<FullItem | undefined>;
+  getField: (fieldDescriptor: FieldDescriptor) => Promise<Field | undefined>;
+  updateFieldValue: (
+    fieldDescriptor: FieldDescriptor,
+    user: User,
+    isDirty: boolean,
+    value: any | null,
+    rawValue?: string | null
+  ) => void;
+
+  refreshItems: (items: ItemDescriptor[]) => Promise<void>;
+  revision: number;
+  onFieldSaved: (field: FieldDescriptor, value: string | null) => void;
+  onItemsDeleted: (items: DeletedItem[]) => void;
+  //addToModifiedFields: (fieldDescriptors: FieldDescriptor[]) => void;
+  subscribeItemsChanged: (
+    callback: (changes: ItemChange[]) => void
+  ) => () => void;
+};
+
+export function useItemsRepository(
+  setModifiedFields: React.Dispatch<React.SetStateAction<ModifiedField[]>>,
+  setLastEditedFields: React.Dispatch<React.SetStateAction<EditedField[]>>
+): ItemsRepository {
+  const itemsMap = useRef<Map<string, FullItem>>(new Map());
+  const fallbackDependencyMap = useRef<Map<string, ItemDescriptor[]>>(
+    new Map()
+  );
+  const pendingRequests = useRef<Map<string, Promise<void>>>(new Map());
+
+  const [revision, setRevision] = useState(0);
+  const itemsChangedListeners = useRef<Set<(changes: ItemChange[]) => void>>(
+    new Set()
+  );
+  const fetchItemsFromServer = useCallback(
+    async (itemsToLoad: ItemDescriptor[]) => {
+      // Group items by their keys to deduplicate requests
+      const requestGroups = new Map<string, ItemDescriptor>();
+      itemsToLoad.forEach((item) => {
+        const key = generateKey(item);
+        if (!requestGroups.has(key)) {
+          requestGroups.set(key, item);
+        }
+      });
+
+      // Create a single promise for all non-pending items
+      const itemsToFetch = Array.from(requestGroups.entries())
+        .filter(([key]) => !pendingRequests.current.has(key))
+        .map(([_, item]) => item);
+
+      if (itemsToFetch.length === 0) {
+        // Wait for all pending requests to complete
+        await Promise.all(Array.from(pendingRequests.current.values()));
+        return;
+      }
+
+      const fetchPromise = (async () => {
+        const fetchedItems = await fetchItems(itemsToFetch);
+
+        if (!fetchedItems) return;
+
+        fetchedItems.forEach((item, index) => {
+          if (!item) return;
+          const descriptor = getItemDescriptor(item);
+          const itemToStore = {
+            ...item,
+            descriptor,
+          };
+
+          itemsMap.current.set(generateKey(item), itemToStore);
+
+          if (itemsToFetch[index]?.version === 0) {
+            const key = generateKey(itemsToFetch[index]);
+            itemsMap.current.set(key, itemToStore);
+          }
+
+          if (item.fields) {
+            item.fields.forEach((field) => {
+              if (field.fallbackChain) {
+                const descriptor = getItemDescriptor(item);
+                field.fallbackChain.forEach((fallback) => {
+                  const prev = fallbackDependencyMap.current.get(
+                    getItemIdLanguageKey(fallback.item)
+                  );
+
+                  if (
+                    !prev?.find(
+                      (x) =>
+                        x.id === descriptor.id &&
+                        x.language === descriptor.language &&
+                        x.version === descriptor.version
+                    )
+                  ) {
+                    fallbackDependencyMap.current.set(
+                      getItemIdLanguageKey(fallback.item),
+                      [...(prev || []), descriptor]
+                    );
+                  }
+                });
+              }
+            });
+          }
+        });
+      })();
+
+      // Store the promise for each item being fetched
+      itemsToFetch.forEach((item) => {
+        const key = generateKey(item);
+        pendingRequests.current.set(key, fetchPromise);
+      });
+
+      try {
+        await fetchPromise;
+      } finally {
+        // Clean up pending requests
+        itemsToFetch.forEach((item) => {
+          pendingRequests.current.delete(generateKey(item));
+        });
+      }
+    },
+    [itemsMap.current]
+  );
+
+  const getItems = useCallback(
+    async (descriptors: ItemDescriptor[]): Promise<FullItem[]> => {
+      const keys = descriptors.map((x) => ({
+        key: generateKey(x),
+        descriptor: x,
+      }));
+
+      const itemsMissing = keys.filter(
+        (item) => !itemsMap.current.has(item.key)
+      );
+      const map = itemsMap;
+
+      if (itemsMissing.length > 0) {
+        await fetchItemsFromServer(itemsMissing.map((x) => x.descriptor));
+      }
+
+      return descriptors
+        .map((x) => map.current.get(generateKey(x)))
+        .filter((x): x is FullItem => x !== undefined);
+    },
+    [itemsMap.current, fetchItemsFromServer]
+  );
+
+  const getField = useCallback(
+    async (fieldDescriptor: FieldDescriptor): Promise<Field | undefined> => {
+      const item = await getItem(fieldDescriptor.item);
+      return item?.fields.find((x) => x.id === fieldDescriptor.fieldId);
+    },
+    [itemsMap.current]
+  );
+
+  const getItem = useCallback(
+    async (descriptor: ItemDescriptor) => {
+      const items = await getItems([descriptor]);
+      return items[0];
+    },
+    [getItems]
+  );
+
+  const updateFieldValue = useCallback(
+    async (
+      field: FieldDescriptor,
+      user: User,
+      isDirty: boolean,
+      value: any,
+      rawValue?: string | null
+    ) => {
+      const item = await getItem(field.item);
+      if (!item) return;
+
+      const fieldToUpdate = item.fields.find((x) => x.id === field.fieldId);
+      if (!fieldToUpdate) return;
+
+      itemsMap.current.set(generateKey(field.item), { ...item });
+
+      setModifiedFields((prevModifiedFields) => {
+        const val = rawValue !== undefined ? rawValue : value;
+        const modifiedField = prevModifiedFields.find(
+          (x) =>
+            x.fieldId === field.fieldId &&
+            x.item.id === field.item.id &&
+            x.item.language === field.item.language &&
+            x.item.version === field.item.version
+        );
+        if (!modifiedField) {
+          return [
+            ...prevModifiedFields,
+            {
+              ...field,
+              value: val,
+              isDirty: isDirty,
+              modifiedBy: user,
+              timestamp: Date.now(),
+            },
+          ];
+        } else {
+          modifiedField.isDirty = isDirty;
+          modifiedField.value = val;
+          modifiedField.modifiedBy = user;
+          modifiedField.timestamp = Date.now();
+        }
+
+        return [...prevModifiedFields];
+      });
+
+      setLastEditedFields((prevEditedFields) => {
+        return [
+          ...prevEditedFields.filter(
+            (x) =>
+              x.timestamp > Date.now() - 30000 &&
+              (x.fieldId !== field.fieldId ||
+                x.item.id !== field.item.id ||
+                x.item.language !== field.item.language ||
+                x.item.version !== field.item.version)
+          ),
+          { ...field, timestamp: Date.now(), user },
+        ];
+      });
+
+      //      setRevision((prev) => prev + 1);
+    },
+    [itemsMap, fetchItemsFromServer]
+  );
+
+  const refreshItems = useCallback(
+    async (items: ItemDescriptor[]) => {
+      const itemsToFetch = [...items];
+
+      items.forEach((item) => {
+        if (itemsMap.current.has(generateKey({ ...item, version: 0 }))) {
+          itemsToFetch.push({ ...item, version: 0 });
+        }
+      });
+
+      const time = Date.now();
+      await fetchItemsFromServer(itemsToFetch);
+
+      const getFieldValue = (
+        ItemDescriptor: ItemDescriptor,
+        fieldId: string
+      ) => {
+        const item = itemsMap.current.get(generateKey(ItemDescriptor));
+        if (!item) return null;
+        const field = item.fields?.find((f) => f.id === fieldId);
+        if (!field) return null;
+        return field.rawValue ?? null;
+      };
+
+      const updateModifiedFields = (
+        prevModifiedFields: ModifiedField[]
+      ): ModifiedField[] => {
+        return prevModifiedFields.map((x) => {
+          if (
+            itemsToFetch.find(
+              (y) =>
+                y.id === x.item.id &&
+                y.language === x.item.language &&
+                y.version === x.item.version
+            ) &&
+            isOutdated(x)
+          )
+            return { ...x, value: getFieldValue(x.item, x.fieldId) };
+          return x;
+        });
+      };
+
+      const isOutdated = (x: ModifiedField) => {
+        if (x.timestamp > time) return false;
+        const item = itemsMap.current.get(generateKey(x.item));
+        if (!item) return true;
+        const field = item.fields?.find((f) => f.id === x.fieldId);
+        if (!field) return true;
+        return field.rawValue !== x.value;
+      };
+
+      setModifiedFields(updateModifiedFields);
+
+      triggerItemsChangedEvent(
+        items.map((x) => ({ item: x, action: "update" }))
+      );
+      setRevision((prev) => prev + 1);
+    },
+    [setRevision]
+  );
+
+  const onFieldSaved = useCallback(
+    (field: FieldDescriptor, value: string | null) => {
+      setModifiedFields((prevModifiedFields) => {
+        const modifiedField = prevModifiedFields.find(
+          (x) =>
+            x.fieldId === field.fieldId &&
+            x.item.id === field.item.id &&
+            x.item.language === field.item.language &&
+            x.item.version === field.item.version
+        );
+        if (modifiedField) {
+          if (modifiedField.value === value) modifiedField.isDirty = false;
+          return [...prevModifiedFields];
+        }
+        return prevModifiedFields;
+      });
+      const dependencies = fallbackDependencyMap.current.get(
+        getItemIdLanguageKey(field.item)
+      );
+      if (dependencies) {
+        refreshItems(dependencies);
+      }
+      triggerItemsChangedEvent([{ item: field.item, action: "update" }]);
+    },
+    [setModifiedFields]
+  );
+
+  const onItemsDeleted = useCallback(
+    (items: DeletedItem[]) => {
+      items.forEach((item) => {
+        itemsMap.current.delete(generateKey(item.item));
+      });
+      triggerItemsChangedEvent(
+        items.map((x) => ({
+          item: x.item,
+          action: "delete",
+          parentId: x.parentId,
+        }))
+      );
+      setRevision((prev) => prev + 1);
+    },
+    [itemsMap, setRevision]
+  );
+
+  const subscribeItemsChanged = useCallback(
+    (callback: (changes: ItemChange[]) => void) => {
+      itemsChangedListeners.current.add(callback);
+
+      // Return an unsubscribe function
+      return () => {
+        itemsChangedListeners.current.delete(callback);
+      };
+    },
+    []
+  );
+
+  const triggerItemsChangedEvent = (changes: ItemChange[]) => {
+    const listeners = itemsChangedListeners.current;
+    if (listeners) {
+      listeners.forEach((callback) => callback(changes));
+    }
+  };
+
+  const repo = useMemo(() => {
+    return {
+      getItems,
+      getItem,
+      getField,
+      updateFieldValue,
+      //     addToModifiedFields,
+      refreshItems,
+      revision,
+      onFieldSaved,
+      onItemsDeleted,
+      subscribeItemsChanged,
+    };
+  }, [getItems, getItem, getField, revision, updateFieldValue, onItemsDeleted]);
+
+  return repo;
+}
+function generateKey(descriptor: ItemDescriptor): string {
+  return `${descriptor.id}-${descriptor.language}-${descriptor.version}`.toLowerCase();
+}
+function getItemIdLanguageKey(descriptor: ItemDescriptor): string {
+  return `${descriptor.id}${descriptor.language}`.toLowerCase();
+}