@tulip-systems/core 0.5.2 → 0.5.4

package/src/modules/inline-edit/hooks/use-inline.client.tsx

@@ -1,40 +1,105 @@
 "use client";
 
 import { EditorJSONContent } from "@/components/entry";
+import { useLocalIndicator } from "@/lib/entry.client";
 import { useAction } from "@/lib/hooks/use-action";
 import { usePermission } from "@/modules/auth/hooks/use-permission";
 import { Permission } from "@/modules/auth/lib/permissions";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { toast } from "sonner";
+import { useDebouncedCallback } from "use-debounce";
 import { useInlineEditContext } from "./context.client";
 
-export type useInlineEditOptions<TValue> = {
-  initialValue?: TValue;
-  action: (value: { id: string; value: TValue }) => Promise<unknown>;
+type UpdateStrategy =
+  | {
+      mode: "change";
+      delay?: number;
+    }
+  | {
+      mode: "blur";
+    };
+
+const defaultUpdateStrategy: UpdateStrategy = {
+  mode: "blur",
+};
+
+type MaybeValue<TValue, Required extends boolean> = Required extends true ? TValue : TValue | null;
+
+/**
+ * Use the inline edit hook options.
+ */
+export type useInlineEditOptions<TValue, Required extends boolean = false> = {
+  /**
+   * Initial value
+   */
+  initialValue?: MaybeValue<TValue, Required>;
+  /**
+   * Action to execute on update
+   */
+  action: (value: { id: string; value: MaybeValue<TValue, Required> }) => Promise<unknown>;
+  /**
+   * Permission required to edit
+   */
   permission?: Permission;
+  /**
+   * Update strategy
+   * - trigger: when to update the value (default: "blur")
+   * - delay: delay in milliseconds before updating the value (only for "change" trigger)
+   * @default { trigger: "blur" }
+   */
+  updateStrategy?: UpdateStrategy;
+  /**
+   * Is the value required
+   * @default false
+   */
+  isRequired?: Required;
 };
 
+/**
+ * Use the inline edit hook.
+ */
 export function useInlineEdit<
-  TValue extends string | number | Date | boolean | JSON | EditorJSONContent | undefined,
->(props: useInlineEditOptions<TValue>) {
+  TValue extends string | number | Date | boolean | JSON | EditorJSONContent,
+  Required extends boolean = false,
+>(props: useInlineEditOptions<TValue, Required>) {
+  /**
+   * The update strategy.
+   */
+  const strategy = props.updateStrategy ?? defaultUpdateStrategy;
+  const delay = strategy.mode === "change" ? (strategy.delay ?? 0) : 0;
+
   /**
    * The inline edit context.
    */
   const context = useInlineEditContext();
 
-  const { data } = usePermission(props.permission ?? context.permission);
-  const isAllowed = data?.success;
-
   /**
    * The current value of the inline edit.
    */
-  const [value, setValue] = useState(props.initialValue);
+  const [value, setValue] = useState<MaybeValue<TValue, Required> | undefined>(props.initialValue);
+
+  /**
+   * The indicator status.
+   */
+  const { status, setStatus } = useLocalIndicator();
+
+  /**
+   * Permission guard
+   */
+  const { data } = usePermission(props.permission ?? context.permission);
+  const isAllowed = data?.success;
 
   /**
    * Execute the action to update the value.
    */
-  const { mutate, status } = useAction({
+  const mutation = useAction({
     mutationFn: props.action,
+    onMutate: () => {
+      setStatus("pending");
+    },
+    onSuccess: () => {
+      setStatus("success");
+    },
     onError: (error) => {
       setValue(props.initialValue);
       toast.error("Er is iets misgegaan", {
@@ -44,19 +109,73 @@ export function useInlineEdit<
   });
 
   /**
-   * Handle the update of the value.
+   * Handle instant mutate
+   */
+  const handleMutateInstant = useCallback(
+    (value: MaybeValue<TValue, Required>) => {
+      // Permission guard
+      if (!isAllowed) {
+        toast.error("Je hebt geen toestemming om dit te bewerken");
+        return;
+      }
+
+      // If the value is the same as the initial value, do nothing
+      if (value === props.initialValue) return;
+
+      // Update the value
+      return mutation.mutate({ id: context.id, value });
+    },
+    [isAllowed, props.initialValue, mutation, context.id],
+  );
+
+  /**
+   * Handle mutate with debounce
    */
-  const handleUpdate = (value: TValue) => {
-    if (!isAllowed) {
-      toast.error("Je hebt geen toestemming om dit te bewerken");
+  const handleMutateDebounced = useDebouncedCallback(handleMutateInstant, delay);
+
+  /**
+   * Handle change updates
+   */
+  function handleChange(next: MaybeValue<TValue, Required> | null) {
+    // Set value in state
+    setValue(next ?? undefined);
+
+    // If the strategy is not change, exit
+    if (strategy.mode !== "change") return;
+
+    // If it is required and the value is null or empty, reset to initial value
+    if (props.isRequired && next === null) {
+      setValue(props.initialValue ?? undefined);
+      setStatus("error");
+      toast.error("Dit veld is verplicht");
       return;
     }
 
-    // If the value is the same as the initial value, do nothing
-    if (value === props.initialValue) return;
+    // If the strategy is change, update the value after the delay
+    handleMutateDebounced(next as MaybeValue<TValue, Required>);
+  }
+
+  /**
+   * Handle blur updates
+   */
+  function handleBlur(next: MaybeValue<TValue, Required> | null) {
+    // Set value in state
+    setValue(next ?? undefined);
+
+    // If the strategy is not blur, exit
+    if (strategy.mode !== "blur") return;
+
+    // If it is required and the value is null or empty, reset to initial value
+    if (props.isRequired && next === null) {
+      setValue(props.initialValue ?? undefined);
+      setStatus("error");
+      toast.error("Dit veld is verplicht");
+      return;
+    }
 
-    return mutate({ id: context.id, value });
-  };
+    // If the strategy is blur, update the value
+    handleMutateInstant(next as MaybeValue<TValue, Required>);
+  }
 
-  return { value, setValue, handleUpdate, status, isAllowed };
+  return { value, setValue, handleChange, handleBlur, status, isAllowed };
 }

package/src/modules/inline-edit/lib/variants.ts

@@ -7,9 +7,16 @@ export const inlineEditVariants = cva("", {
       table:
         "min-h-9 px-3 py-1 text-base md:text-sm rounded-none h-full w-full border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
     },
+    status: {
+      idle: "",
+      pending: "opacity-70 animate-pulse",
+      success: "",
+      error: "border-destructive text-destructive",
+    },
   },
   defaultVariants: {
     variant: "default",
+    // status: "idle",
   },
 });
 

package/src/modules/storage/components/image-grid.client.tsx

@@ -156,7 +156,7 @@ type ImageGridItemProps = {
 };
 
 function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
-  const { deleteMutation } = useUploadZone();
+  const { uploadClient } = useUploadZone();
 
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
 
@@ -198,7 +198,7 @@ function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
             type="button"
             variant="destructive"
             size="icon"
-            onClick={() => deleteMutation({ ids: [node.id] })}
+            onClick={() => uploadClient.deleteFiles([node.id])}
             className="absolute left-2 top-2 hidden p-1 group-hover:flex"
           >
             <Icons.trash className="size-4" />

package/src/modules/storage/components/upload-zone-context.client.tsx

@@ -1,15 +1,14 @@
 "use client";
 
 import React from "react";
-import { FileNode, Node, PresignFileSchema } from "../lib/validators";
+import { UploadClient } from "../lib/create-upload.client";
+import { FileNode, Node } from "../lib/validators";
 
 /**
  * Upload Zone Context Value
  */
 export type UploadZoneContextValue = {
-  presignMutation: (params: PresignFileSchema) => Promise<{ id: string; presignedUrl: string }>;
-  confirmMutation: (params: { id: string }) => Promise<Node>;
-  deleteMutation: (params: { ids: string[] }) => Promise<unknown>;
+  uploadClient: UploadClient;
   updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
   invalidateQuery: () => Promise<void> | void;
   onUpload: (file: File) => Promise<Node>;

package/src/modules/storage/components/upload-zone.client.tsx

@@ -4,45 +4,28 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/sonner.client";
 import { cn } from "@/lib/entry";
 import { useAction } from "@/lib/hooks/use-action";
-import { generateDefaultUUID } from "@/modules/config/entry";
 import { useQueryClient } from "@tanstack/react-query";
 import { ComponentProps, useCallback, useState } from "react";
-import { FileNode, Node, PresignFileSchema, UploadFileSchema } from "../lib/validators";
+import { UploadClient, UploadFileRequest, UploadHooks } from "../lib/create-upload.client";
+import { FileNode, Node, UploadFileSchema } from "../lib/validators";
 import { UploadZoneContext } from "./upload-zone-context.client";
 
 export type UploadZoneProps = ComponentProps<"div"> & {
-  namespace: string;
-  parentId: string | null;
-  options?: Pick<UploadFileSchema, "readonly" | "hidden" | "mode">;
-
   queryKey: readonly unknown[];
 
-  presignAction: (params: PresignFileSchema) => Promise<{ id: string; presignedUrl: string }>;
-  onPresignStarted?: (file: PresignFileSchema) => Promise<void> | void;
-  onPresignCompleted?: (data: { id: string; presignedUrl: string }) => Promise<void> | void;
-
-  confirmAction: (params: { id: string }) => Promise<Node>;
-  onConfirmStarted?: (id: string) => Promise<void> | void;
-  onConfirmCompleted?: (node: Node) => Promise<void> | void;
-
-  deleteAction: (params: { ids: string[] }) => Promise<unknown>;
+  variables: Pick<UploadFileSchema, "namespace" | "parentId" | "mode" | "hidden" | "readonly">;
+  uploadClient: UploadClient;
+  uploadHooks?: UploadHooks;
 
   onUploadCompleted?: (node: Node) => Promise<void> | void;
   onUploadFailed?: (error: unknown) => Promise<void> | void;
 };
 
 export function UploadZone({
-  namespace,
-  parentId,
-  options,
+  variables,
   queryKey,
-  presignAction,
-  confirmAction,
-  deleteAction,
-  onPresignStarted,
-  onPresignCompleted,
-  onConfirmStarted,
-  onConfirmCompleted,
+  uploadClient,
+  uploadHooks,
   onUploadCompleted,
   onUploadFailed,
   children,
@@ -76,7 +59,7 @@ export function UploadZone({
    * Delete mutation
    */
   const deleteMutation = useAction({
-    mutationFn: deleteAction,
+    mutationFn: async (params: { ids: string[] }) => uploadClient.deleteFiles(params.ids),
     onMutate: async (variables) => {
       await updateData((prev) => prev.filter((node) => !variables.ids.includes(node.id)));
     },
@@ -90,15 +73,10 @@ export function UploadZone({
   });
 
   /**
-   * Presign upload mutation
+   * Upload mutation
    */
-  const presignMutation = useAction({
-    mutationFn: async (params: PresignFileSchema) => {
-      await onPresignStarted?.(params);
-      const data = await presignAction(params);
-      await onPresignCompleted?.(data);
-      return data;
-    },
+  const uploadMutation = useAction({
+    mutationFn: async (params: UploadFileRequest) => uploadClient.upload(params, uploadHooks),
     onMutate: async (variables) => {
       // Generate a new node
       const newNode = {
@@ -109,61 +87,6 @@ export function UploadZone({
 
       await updateData((prev) => [...(prev ?? []), newNode]);
     },
-    onError: async (error, variables) => {
-      await onUploadFailed?.(error);
-
-      console.error("Presign error: ", error);
-      toast.error("Bestand uploaden mislukt", {
-        description: error instanceof Error ? error.message : undefined,
-      });
-
-      console.info("Deleting failed upload");
-      await deleteMutation.mutateAsync({ ids: [variables.id] });
-    },
-  });
-
-  /**
-   * Upload mutation
-   */
-  const uploadMutation = useAction({
-    mutationFn: async (input: { id: string; presignedUrl: string; file: File }) => {
-      /**
-       * Upload the file
-       */
-      const uploadResponse = await fetch(input.presignedUrl, {
-        method: "PUT",
-        headers: { "Content-Type": input.file.type },
-        body: input.file,
-      });
-
-      if (!uploadResponse.ok) {
-        const message = await uploadResponse.text();
-        throw new Error(`Upload failed: ${message}`);
-      }
-    },
-    onError: async (error, variables) => {
-      await onUploadFailed?.(error);
-
-      console.error("Upload error: ", error);
-      toast.error("Bestand uploaden mislukt", {
-        description: error instanceof Error ? error.message : undefined,
-      });
-
-      console.info("Deleting failed upload");
-      await deleteMutation.mutateAsync({ ids: [variables.id] });
-    },
-  });
-
-  /**
-   * Confirm upload mutation
-   */
-  const confirmMutation = useAction({
-    mutationFn: async (params: { id: string }) => {
-      await onConfirmStarted?.(params.id);
-      const data = await confirmAction(params);
-      await onConfirmCompleted?.(data);
-      return data;
-    },
     onSuccess: async (data) => {
       await onUploadCompleted?.(data);
       toast.success(`Succesvol geupload: ${data.name}`);
@@ -171,7 +94,7 @@ export function UploadZone({
     onError: async (error, variables) => {
       await onUploadFailed?.(error);
 
-      console.error("Confirm error: ", error);
+      console.error("Upload error: ", error);
       toast.error("Bestand uploaden mislukt", {
         description: error instanceof Error ? error.message : undefined,
       });
@@ -189,30 +112,10 @@ export function UploadZone({
    */
   const onUpload = useCallback(
     async (file: File) => {
-      /**
-       * Send the presign request
-       */
-      const { id, presignedUrl } = await presignMutation.mutateAsync({
-        ...options,
-        id: generateDefaultUUID(),
-        name: file.name,
-        size: file.size,
-        contentType: file.type,
-        namespace,
-        parentId,
-      });
-
-      /**
-       * Uploading the file
-       */
-      await uploadMutation.mutateAsync({ id, presignedUrl, file });
-
-      /**
-       * Confirming the upload
-       */
-      return await confirmMutation.mutateAsync({ id });
+      const req = uploadClient.prepareUpload({ ...variables, file });
+      return await uploadMutation.mutateAsync(req);
     },
-    [presignMutation, options, namespace, parentId, uploadMutation, confirmMutation],
+    [uploadClient, variables, uploadMutation],
   );
 
   return (
@@ -246,9 +149,7 @@ export function UploadZone({
       )}
       <UploadZoneContext
         value={{
-          presignMutation: (params) => presignMutation.mutateAsync(params),
-          confirmMutation: (params) => confirmMutation.mutateAsync(params),
-          deleteMutation: (params) => deleteMutation.mutateAsync(params),
+          uploadClient,
           onUpload,
           updateData,
           invalidateQuery,

package/src/modules/storage/config/filters.ts

@@ -7,5 +7,6 @@ export const nodesTableFilters = createTableFilters({
   types: parseFilterArray(z.array(z.enum(nodeTypeEnum.enumValues))),
   nodeIds: parseFilterArray(z.array(z.string())),
   isDeleted: parseFilterBoolean(z.boolean()),
+  isOrphaned: parseFilterBoolean(z.boolean()),
   hidden: parseFilterBoolean(z.boolean()),
 });

package/src/modules/storage/entry.client.ts

@@ -8,5 +8,6 @@ export * from "./components/upload-zone-context.client";
 export * from "./components/upload-zone.client";
 
 /**
- * Hooks
+ * Lib
  */
+export * from "./lib/create-upload.client";

package/src/modules/storage/lib/create-upload.client.ts

@@ -0,0 +1,134 @@
+import { generateDefaultUUID } from "@/modules/config/entry";
+import { BulkActionSchema } from "@/modules/router/entry";
+import { PresignFileSchema, SelectNodeSchema, UpdateNodeSchema } from "./validators";
+
+/**
+ * Upload request
+ */
+export type PrepareUploadInput = Omit<UploadFileRequest, "id" | "name" | "size" | "contentType">;
+export type UploadFileRequest = PresignFileSchema & { file: File };
+export type UploadHooks = {
+  beforePresign?: (input: UploadFileRequest) => Promise<void> | void;
+  afterPresign?: (presignResult: { id: string; presignedUrl: string }) => Promise<void> | void;
+  beforeConfirm?: (presignResult: { id: string; presignedUrl: string }) => Promise<void> | void;
+  afterConfirm?: (node: SelectNodeSchema) => Promise<void> | void;
+};
+
+/**
+ * Upload client
+ */
+export type UploadClient = {
+  prepareUpload: (input: PrepareUploadInput) => UploadFileRequest;
+  upload: (input: UploadFileRequest, hooks?: UploadHooks) => Promise<SelectNodeSchema>;
+  deleteFiles: (ids: string[]) => Promise<void>;
+  updateNode: (id: string, data: UpdateNodeSchema) => Promise<SelectNodeSchema>;
+};
+
+/**
+ * Create upload client
+ */
+type CreateUploadClientProps = {
+  endpoints: {
+    presign: (input: PresignFileSchema) => Promise<{ id: string; presignedUrl: string }>;
+    confirm: (input: { id: string }) => Promise<SelectNodeSchema>;
+    deleteNodes: (input: BulkActionSchema) => Promise<void>;
+    updateNode: (input: { id: string; data: UpdateNodeSchema }) => Promise<SelectNodeSchema>;
+  };
+};
+
+export function createUploadClient(props: CreateUploadClientProps): UploadClient {
+  /**
+   * Create input schema for the upload method
+   * @param {PrepareUploadInput} input
+   * @returns {UploadFileRequest}
+   */
+  function prepareUpload(input: PrepareUploadInput): UploadFileRequest {
+    return {
+      ...input,
+      id: generateDefaultUUID(),
+      name: input.file.name,
+      size: input.file.size,
+      contentType: input.file.type,
+    };
+  }
+
+  /**
+   * Upload file to the server
+   * @param {UploadFileRequest} input
+   * @returns {Promise<SelectNodeSchema>}
+   */
+  async function upload(input: UploadFileRequest, hooks?: UploadHooks): Promise<SelectNodeSchema> {
+    try {
+      /**
+       * Presign
+       */
+      await hooks?.beforePresign?.(input);
+      const presignResult = await props.endpoints.presign(input);
+      await hooks?.afterPresign?.(presignResult);
+      /**
+       * Upload the file
+       */
+      const uploadResponse = await fetch(presignResult.presignedUrl, {
+        method: "PUT",
+        headers: { "Content-Type": input.file.type },
+        body: input.file,
+      });
+
+      if (!uploadResponse.ok) {
+        const message = await uploadResponse.text();
+        throw new Error(`Upload failed: ${message}`);
+      }
+
+      /**
+       * Confirm
+       */
+      await hooks?.beforeConfirm?.(presignResult);
+      const node = await props.endpoints.confirm({ id: presignResult.id });
+      await hooks?.afterConfirm?.(node);
+      /**
+       * Return
+       */
+      return node;
+    } catch (err) {
+      console.error("Upload error: ", err);
+
+      /**
+       * Delete if upload failed
+       * */
+      try {
+        await deleteFiles([input.id]);
+      } catch (cleanupErr) {
+        console.error("Cleanup delete failed:", cleanupErr);
+      }
+
+      throw err;
+    }
+  }
+
+  /**
+   * Delete files
+   * @param {string[]} ids
+   */
+  async function deleteFiles(ids: string[]) {
+    await props.endpoints.deleteNodes({ ids });
+  }
+
+  /**
+   * Update node
+   * @param {string} id
+   * @param {UpdateNodeSchema} data
+   */
+  async function updateNode(id: string, data: UpdateNodeSchema) {
+    return props.endpoints.updateNode({ id, data });
+  }
+
+  /**
+   * Upload client
+   */
+  return {
+    prepareUpload,
+    upload,
+    deleteFiles,
+    updateNode,
+  };
+}

package/src/modules/storage/lib/router.server.ts

@@ -100,6 +100,7 @@ export function createDriveBaseProcedures() {
      */
     presign: protectedProcedure
       .input(presignFileSchema)
+      .output(z.object({ id: z.string(), presignedUrl: z.string() }))
       .handler(async ({ context, input }) => context.storage.presignUpload(input)),
     /**
      * Confirm the upload

package/src/modules/storage/lib/schema.ts

@@ -25,6 +25,7 @@ export const nodes = pgTable("nodes", (t) => ({
   createdBy: t.uuid().references(() => users.id, { onDelete: "set null" }),
   isPending: t.boolean().default(false).notNull(),
   isDeleted: t.boolean().default(false).notNull(),
+  orphanedAt: t.timestamp(),
   parentId: t.uuid().references((): AnyPgColumn => nodes.id, { onDelete: "cascade" }),
 }));
 

package/src/modules/storage/lib/service.server.ts

@@ -16,13 +16,14 @@ import {
 } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { addSeconds } from "date-fns";
-import { and, asc, eq, inArray, isNull, SQL } from "drizzle-orm";
+import { and, asc, eq, inArray, isNotNull, isNull, SQL } from "drizzle-orm";
 import { after } from "next/server";
 import { deviceSizes } from "./constants";
 import { getDriveBucketKey, inferNodeSubtype, isFile, isFolder } from "./helpers";
 import { nodePresignedUrls, nodes, nodeVariants } from "./schema";
 import {
   CreateFolderNodeSchema,
+  FileNode,
   GetFileURLSchema,
   getFileURLSchemaDefaults,
   GetNodesByParentIdInput,
@@ -101,8 +102,8 @@ export class StorageService<TSchema extends TDatabaseSchema> {
       Bucket: BUCKET_NAME,
       Key: getDriveBucketKey(input.id, input.variant),
       Body: input.body,
-      ContentType: input.contentType ?? "",
-      ContentLength: input.size ?? 0,
+      ContentType: input.contentType ?? undefined,
+      ContentLength: input.size ?? undefined,
       Metadata: {
         nodeId: input.id,
       },
@@ -139,6 +140,11 @@ export class StorageService<TSchema extends TDatabaseSchema> {
           filters.nodeIds != null ? inArray(nodes.id, filters.nodeIds) : undefined,
           filters.types != null ? inArray(nodes.type, filters.types) : undefined,
           filters.isDeleted != null ? eq(nodes.isDeleted, filters.isDeleted) : undefined,
+          filters.isOrphaned === true
+            ? isNotNull(nodes.orphanedAt)
+            : filters.isOrphaned === false
+              ? isNull(nodes.orphanedAt)
+              : undefined,
           filters.hidden != null ? eq(nodes.hidden, filters.hidden) : undefined,
           filters.parentId ? eq(nodes.parentId, filters.parentId) : isNull(nodes.parentId),
           eq(nodes.namespace, filters.namespace),
@@ -313,7 +319,7 @@ export class StorageService<TSchema extends TDatabaseSchema> {
     // after(async () => {});
     await this.generatePreviews(input);
 
-    return result;
+    return result as FileNode;
   }
 
   /**

package/src/modules/storage/lib/validators.ts

@@ -62,6 +62,7 @@ export const nodesTableFiltersSchema = resolveFiltersSchema(nodesTableFilters)
     ...input,
     hidden: input?.hidden ?? false,
     isDeleted: input?.isDeleted ?? false,
+    orphanedAt: input?.isOrphaned ?? false,
   }));
 
 export type NodesTableFilters = z.input<typeof nodesTableFiltersSchema>;