@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/client/itemsRepository.ts

@@ -0,0 +1,574 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  Field,
+  FieldDescriptor,
+  FullItem,
+  ItemDescriptor,
+  ItemStub,
+} from "../pageModel";
+
+import { fetchItems, fetchItemStubs } 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[]>;
+  getItemsStubs: (descriptors: ItemDescriptor[]) => Promise<ItemStub[]>;
+  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;
+  clear: () => 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 stubsMap = useRef<Map<string, ItemStub>>(new Map());
+  const fallbackDependencyMap = useRef<Map<string, ItemDescriptor[]>>(
+    new Map(),
+  );
+  const pendingRequests = useRef<Map<string, Promise<void>>>(new Map());
+  const pendingStubsRequests = 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, getItemDescriptor(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 () => {
+        try {
+          const fetchedItems = await fetchItems(itemsToFetch);
+
+          if (!fetchedItems) return;
+
+          fetchedItems.forEach((item, index) => {
+            if (!item) return;
+            const descriptor = getItemDescriptor(item);
+            const itemToStore = {
+              ...item,
+              descriptor,
+            };
+
+            const primaryKey = generateKey(item);
+            itemsMap.current.set(primaryKey, itemToStore);
+
+            // Only store version 0 if the current item isn't already version 0
+            if (itemsToFetch[index]?.version === 0 && item.version !== 0) {
+              const versionZeroKey = generateKey(itemsToFetch[index]);
+              itemsMap.current.set(versionZeroKey, 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],
+                      );
+                    }
+                  });
+                }
+              });
+            }
+          });
+        } catch (error) {
+          console.error("Error fetching items:", error);
+          throw error;
+        }
+      })();
+
+      // 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));
+        });
+      }
+    },
+    [],
+  );
+
+  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);
+    },
+    [fetchItemsFromServer],
+  );
+
+  const fetchStubsFromServer = 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]) => !pendingStubsRequests.current.has(key))
+        .map(([_, item]) => item);
+
+      if (itemsToFetch.length === 0) {
+        // Wait for all pending requests to complete
+        await Promise.all(Array.from(pendingStubsRequests.current.values()));
+        return;
+      }
+
+      const fetchPromise = (async () => {
+        try {
+          const fetchedStubs = await fetchItemStubs(itemsToFetch);
+
+          if (!fetchedStubs) return;
+
+          fetchedStubs.forEach((stub, index) => {
+            if (!stub) return;
+            const primaryKey = generateKey(stub);
+            stubsMap.current.set(primaryKey, stub);
+
+            // Only store version 0 if the current stub isn't already version 0
+            if (itemsToFetch[index]?.version === 0 && stub.version !== 0) {
+              const versionZeroKey = generateKey(itemsToFetch[index]);
+              stubsMap.current.set(versionZeroKey, stub);
+            }
+          });
+        } catch (error) {
+          console.error("Error fetching stubs:", error);
+          throw error;
+        }
+      })();
+
+      // Store the promise for each item being fetched
+      itemsToFetch.forEach((item) => {
+        const key = generateKey(item);
+        pendingStubsRequests.current.set(key, fetchPromise);
+      });
+
+      try {
+        await fetchPromise;
+      } finally {
+        // Clean up pending requests
+        itemsToFetch.forEach((item) => {
+          pendingStubsRequests.current.delete(generateKey(item));
+        });
+      }
+    },
+    [],
+  );
+
+  const getItemsStubs = useCallback(
+    async (descriptors: ItemDescriptor[]): Promise<ItemStub[]> => {
+      const keys = descriptors.map((x) => ({
+        key: generateKey(x),
+        descriptor: x,
+      }));
+
+      // First try to get stubs from full items if available
+      const result: ItemStub[] = [];
+      const itemsToFetch: ItemDescriptor[] = [];
+
+      for (const { key, descriptor } of keys) {
+        // If we have the full item, use it
+        const fullItem = itemsMap.current.get(key);
+        if (fullItem) {
+          result.push(fullItem);
+          continue;
+        }
+
+        // If we have a cached stub, use it
+        const cachedStub = stubsMap.current.get(key);
+        if (cachedStub) {
+          result.push(cachedStub);
+          continue;
+        }
+
+        // Otherwise, fetch it
+        itemsToFetch.push(descriptor);
+      }
+
+      if (itemsToFetch.length > 0) {
+        await fetchStubsFromServer(itemsToFetch);
+
+        // Add fetched stubs to the result
+        for (const descriptor of itemsToFetch) {
+          const key = generateKey(descriptor);
+          const stub = stubsMap.current.get(key);
+          if (stub) {
+            result.push(stub);
+          }
+        }
+      }
+
+      return result;
+    },
+    [fetchStubsFromServer],
+  );
+
+  const getItem = useCallback(
+    async (descriptor: ItemDescriptor) => {
+      const items = await getItems([descriptor]);
+      return items[0];
+    },
+    [getItems],
+  );
+
+  const getField = useCallback(
+    async (fieldDescriptor: FieldDescriptor): Promise<Field | undefined> => {
+      try {
+        const item = await getItem(fieldDescriptor.item);
+        return item?.fields.find((x) => x.id === fieldDescriptor.fieldId);
+      } catch (error) {
+        console.error("Error getting field:", error);
+        return undefined;
+      }
+    },
+    [getItem],
+  );
+
+  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;
+
+      // Update the field value in the item copy
+      const updatedItem = {
+        ...item,
+        fields: item.fields.map((f) =>
+          f.id === field.fieldId
+            ? {
+                ...f,
+                rawValue: rawValue !== undefined ? rawValue : String(value),
+                value,
+              }
+            : f,
+        ),
+      };
+
+      itemsMap.current.set(generateKey(field.item), updatedItem);
+
+      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);
+    },
+    [getItem, setModifiedFields, setLastEditedFields],
+  );
+
+  const refreshItems = useCallback(
+    async (items: ItemDescriptor[]) => {
+      // Filter to only include items that are already cached
+      const itemsToFetch = items.filter((item) =>
+        itemsMap.current.has(generateKey(item)),
+      );
+
+      // Also include version 0 items if they're cached
+      items.forEach((item) => {
+        if (itemsMap.current.has(generateKey({ ...item, version: 0 }))) {
+          itemsToFetch.push({ ...item, version: 0 });
+        }
+      });
+
+      // Clear stub cache for these items
+      items.forEach((item) => {
+        stubsMap.current.delete(generateKey(item));
+        // Also clear version 0 stubs
+        stubsMap.current.delete(generateKey({ ...item, version: 0 }));
+      });
+
+      if (itemsToFetch.length !== 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);
+        setRevision((prev) => prev + 1);
+      }
+      triggerItemsChangedEvent(
+        items.map((x) => ({ item: x, action: "update" })),
+      );
+    },
+    [setRevision, fetchItemsFromServer, setModifiedFields],
+  );
+
+  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, refreshItems],
+  );
+
+  const onItemsDeleted = useCallback(
+    (items: DeletedItem[]) => {
+      items.forEach((item) => {
+        const key = generateKey(item.item);
+        itemsMap.current.delete(key);
+        stubsMap.current.delete(key);
+      });
+
+      triggerItemsChangedEvent(
+        items.map((x) => ({
+          item: x.item,
+          action: "delete",
+          parentId: x.parentId,
+        })),
+      );
+      setRevision((prev) => prev + 1);
+    },
+    [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 clear = useCallback(() => {
+    itemsMap.current.clear();
+    stubsMap.current.clear();
+    fallbackDependencyMap.current.clear();
+    //setRevision((x) => x + 1);
+  }, []);
+
+  const repo = useMemo(() => {
+    return {
+      getItems,
+      getItemsStubs,
+      getItem,
+      getField,
+      updateFieldValue,
+      //     addToModifiedFields,
+      refreshItems,
+      revision,
+      onFieldSaved,
+      onItemsDeleted,
+      subscribeItemsChanged,
+      clear,
+    };
+  }, [
+    getItems,
+    getItemsStubs,
+    getItem,
+    getField,
+    revision,
+    updateFieldValue,
+    refreshItems,
+    onFieldSaved,
+    onItemsDeleted,
+    subscribeItemsChanged,
+    clear,
+  ]);
+
+  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();
+}