🔄 Merge pull request #6 from steeeee0223/feature/ui

Add hooks & fix linting message

packages/ui/src/components/custom/cover-picker/unsplash.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 "use client";
 

packages/ui/src/components/custom/crud-item/index.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 "use client";
 
 import type { MouseEvent } from "react";

packages/ui/src/components/custom/kanban/kanban-container.tsx

@@ -1,7 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-
 "use client";
 
 import type { OnDragEndResponder } from "@hello-pangea/dnd";

packages/ui/src/components/custom/kanban/kanban-item-form.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 "use client";
 
 import type { KeyboardEventHandler } from "react";

packages/ui/src/components/custom/kanban/kanban-item.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 "use client";
 
 import { Draggable } from "@hello-pangea/dnd";

packages/ui/src/components/custom/kanban/kanban-list-form.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 "use client";
 
 import { useImperativeHandle, useRef, useState, useTransition } from "react";

packages/ui/src/components/custom/kanban/kanban-list-header.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 "use client";
 
 import { useImperativeHandle, useRef, useState, useTransition } from "react";

packages/ui/src/components/custom/kanban/kanban-list.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 "use client";
 
 import { useRef, useState } from "react";

packages/ui/src/components/dnd/single-image-dropzone/index.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 "use client";
 
 import * as React from "react";

packages/ui/src/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from "./use-action";
 export * from "./use-fetch";
 export * from "./use-scroll-top";

packages/ui/src/hooks/use-action.ts

@@ -0,0 +1,58 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { ActionHandler, FieldErrors } from "@/lib";
+
+interface UseActionOptions<TOutput> {
+  onSuccess?: (data: TOutput) => void;
+  onError?: (error: string) => void;
+  onComplete?: () => void;
+}
+
+interface UseActionResult<TInput, TOutput> {
+  execute: (data: TInput) => Promise<void>;
+  fieldErrors?: FieldErrors<TInput>;
+  error?: string;
+  data?: TOutput;
+  isLoading: boolean;
+}
+
+export const useAction = <TInput, TOutput>(
+  action: ActionHandler<TInput, TOutput>,
+  options: UseActionOptions<TOutput>,
+): UseActionResult<TInput, TOutput> => {
+  const [fieldErrors, setFieldErrors] = useState<
+    FieldErrors<TInput> | undefined
+  >(undefined);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [data, setData] = useState<TOutput | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const execute = useCallback(
+    async (input: TInput) => {
+      setIsLoading(true);
+      try {
+        const result = await action(input);
+        if (!result) return;
+
+        const { fieldErrors, error, data } = result;
+        setFieldErrors(fieldErrors);
+        if (error) {
+          setError(error);
+          options.onError?.(error);
+        }
+        if (data) {
+          setData(data);
+          options.onSuccess?.(data);
+        }
+      } finally {
+        setIsLoading(false);
+        options.onComplete?.();
+      }
+    },
+    [action, options],
+  );
+
+  return { execute, fieldErrors, error, data, isLoading };
+};

packages/ui/src/lib/action.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+import type { ActionHandler, FieldErrors } from "./types";
+
+export const createSafeAction =
+  <TInput, TOutput>(
+    schema: z.Schema<TInput>,
+    handler: ActionHandler<TInput, TOutput>,
+  ): ActionHandler<TInput, TOutput> =>
+  async (data) => {
+    const result = schema.safeParse(data);
+    return result.success
+      ? await handler(result.data)
+      : {
+          fieldErrors: result.error.flatten()
+            .fieldErrors as FieldErrors<TInput>,
+        };
+  };

packages/ui/src/lib/index.ts

@@ -1,2 +1,3 @@
-export * from "./utils";
+export * from "./action";
 export * from "./types";
+export * from "./utils";