refactor(column): use context for manage column

packages/ark/src/components/column/header.tsx

@@ -9,7 +9,7 @@ import {
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useQueryClient } from "@tanstack/react-query";
 import { ReactNode } from "react";
-import { useWidget } from "../../hooks/useWidget";
+import { useColumnContext } from "./provider";
 
 export function ColumnHeader({
 	id,
@@ -23,22 +23,22 @@ export function ColumnHeader({
 	icon?: ReactNode;
 }) {
 	const queryClient = useQueryClient();
-	const { removeWidget } = useWidget();
+	const { removeColumn } = useColumnContext();
 
 	const refresh = async () => {
 		if (queryKey) await queryClient.refetchQueries({ queryKey });
 	};
 
 	const moveLeft = async () => {
-		removeWidget.mutate(id);
+		removeColumn(id);
 	};
 
 	const moveRight = async () => {
-		removeWidget.mutate(id);
+		removeColumn(id);
 	};
 
 	const deleteWidget = async () => {
-		removeWidget.mutate(id);
+		removeColumn(id);
 	};
 
 	return (

packages/ark/src/components/column/index.ts

@@ -11,3 +11,5 @@ export const Column = {
 	Content: ColumnContent,
 	Route: Route,
 };
+
+export * from "./provider";

packages/ark/src/components/column/provider.tsx

@@ -0,0 +1,81 @@
+import { IColumn } from "@lume/types";
+import { WIDGET_KIND } from "@lume/utils";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import {
+	ReactNode,
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useState,
+} from "react";
+import { useStorage } from "../../provider";
+
+type ColumnContext = {
+	columns: IColumn[];
+	addColumn: (column: IColumn) => void;
+	removeColumn: (id: string) => void;
+	loadAllColumns: () => void;
+};
+
+const ColumnContext = createContext<ColumnContext>(null);
+
+export function ColumnProvider({ children }: { children: ReactNode }) {
+	const storage = useStorage();
+	const [columns, setColumns] = useState<IColumn[]>([
+		{
+			id: "9999",
+			title: "Newsfeed",
+			content: "",
+			kind: WIDGET_KIND.newsfeed,
+		},
+	]);
+
+	const loadAllColumns = useCallback(async () => {
+		return await storage.getWidgets();
+	}, []);
+
+	const addColumn = useCallback(async (column: IColumn) => {
+		const result = await storage.createWidget(
+			column.kind,
+			column.title,
+			column.content,
+		);
+		if (result) setColumns((prev) => [...prev, column]);
+	}, []);
+
+	const removeColumn = useCallback(async (id: string) => {
+		await storage.removeWidget(id);
+		setColumns((prev) => prev.filter((t) => t.id !== id));
+	}, []);
+
+	useEffect(() => {
+		let isMounted = true;
+
+		loadAllColumns().then((data) => {
+			if (isMounted) setColumns((prev) => [...prev, ...data]);
+		});
+
+		return () => {
+			isMounted = false;
+		};
+	}, []);
+
+	return (
+		<ColumnContext.Provider
+			value={{ columns, addColumn, removeColumn, loadAllColumns }}
+		>
+			{children}
+		</ColumnContext.Provider>
+	);
+}
+
+export function useColumnContext() {
+	const context = useContext(ColumnContext);
+	if (!context) {
+		throw new Error(
+			"Please import Column Provider to use useColumnContext() hook",
+		);
+	}
+	return context;
+}

packages/ark/src/components/note/buttons/pin.tsx

@@ -2,11 +2,11 @@ import { PinIcon } from "@lume/icons";
 import { WIDGET_KIND } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useNoteContext } from "..";
-import { useWidget } from "../../../hooks/useWidget";
+import { useColumnContext } from "../../column";
 
 export function NotePin() {
 	const event = useNoteContext();
-	const { addWidget } = useWidget();
+	const { addColumn } = useColumnContext();
 
 	return (
 		<Tooltip.Provider>
@@ -15,7 +15,7 @@ export function NotePin() {
 					<button
 						type="button"
 						onClick={() =>
-							addWidget.mutate({
+							addColumn({
 								kind: WIDGET_KIND.thread,
 								title: "Thread",
 								content: event.id,

packages/ark/src/components/note/mentions/hashtag.tsx

@@ -1,14 +1,14 @@
 import { WIDGET_KIND } from "@lume/utils";
-import { useWidget } from "../../../hooks/useWidget";
+import { useColumnContext } from "../../column";
 
 export function Hashtag({ tag }: { tag: string }) {
-	const { addWidget } = useWidget();
+	const { addColumn } = useColumnContext();
 
 	return (
 		<button
 			type="button"
 			onClick={() =>
-				addWidget.mutate({
+				addColumn({
 					kind: WIDGET_KIND.hashtag,
 					title: tag,
 					content: tag.replace("#", ""),

packages/ark/src/components/note/mentions/user.tsx

@@ -3,13 +3,13 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { memo } from "react";
 import { Link } from "react-router-dom";
 import { useProfile } from "../../../hooks/useProfile";
-import { useWidget } from "../../../hooks/useWidget";
+import { useColumnContext } from "../../column";
 
 export const MentionUser = memo(function MentionUser({
 	pubkey,
 }: { pubkey: string }) {
 	const { user } = useProfile(pubkey);
-	const { addWidget } = useWidget();
+	const { addColumn } = useColumnContext();
 
 	return (
 		<DropdownMenu.Root>
@@ -29,7 +29,7 @@ export const MentionUser = memo(function MentionUser({
 					<button
 						type="button"
 						onClick={() =>
-							addWidget.mutate({
+							addColumn({
 								kind: WIDGET_KIND.user,
 								title: user?.name || user?.displayName || "",
 								content: pubkey,

packages/ark/src/hooks/useWidget.ts

@@ -1,79 +0,0 @@
-import { type WidgetProps } from '@lume/types';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useStorage } from '../provider';
-
-export function useWidget() {
-  const storage = useStorage();
-  const queryClient = useQueryClient();
-
-  const addWidget = useMutation({
-    mutationFn: async (widget: WidgetProps) => {
-      return await storage.createWidget(widget.kind, widget.title, widget.content);
-    },
-    onSuccess: (data) => {
-      queryClient.setQueryData(['widgets'], (old: WidgetProps[]) => [...old, data]);
-    },
-  });
-
-  const replaceWidget = useMutation({
-    mutationFn: async ({
-      currentId,
-      widget,
-    }: {
-      currentId: string;
-      widget: WidgetProps;
-    }) => {
-      // Cancel any outgoing refetches
-      await queryClient.cancelQueries({ queryKey: ['widgets'] });
-
-      // Snapshot the previous value
-      const prevWidgets = queryClient.getQueryData(['widgets']);
-
-      // create new widget
-      await storage.removeWidget(currentId);
-      const newWidget = await storage.createWidget(
-        widget.kind,
-        widget.title,
-        widget.content
-      );
-
-      // Optimistically update to the new value
-      queryClient.setQueryData(['widgets'], (prev: WidgetProps[]) => [
-        ...prev.filter((t) => t.id !== currentId),
-        newWidget,
-      ]);
-
-      // Return a context object with the snapshotted value
-      return { prevWidgets };
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ['widgets'] });
-    },
-  });
-
-  const removeWidget = useMutation({
-    mutationFn: async (id: string) => {
-      // Cancel any outgoing refetches
-      await queryClient.cancelQueries({ queryKey: ['widgets'] });
-
-      // Snapshot the previous value
-      const prevWidgets = queryClient.getQueryData(['widgets']);
-
-      // Optimistically update to the new value
-      queryClient.setQueryData(['widgets'], (prev: WidgetProps[]) =>
-        prev.filter((t) => t.id !== id)
-      );
-
-      // Update in database
-      await storage.removeWidget(id);
-
-      // Return a context object with the snapshotted value
-      return { prevWidgets };
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ['widgets'] });
-    },
-  });
-
-  return { addWidget, replaceWidget, removeWidget };
-}

packages/ark/src/index.ts

@@ -2,7 +2,6 @@ export * from "./ark";
 export * from "./provider";
 export * from "./components/column";
 export * from "./components/note";
-export * from "./hooks/useWidget";
 export * from "./hooks/useRichContent";
 export * from "./hooks/useEvent";
 export * from "./hooks/useProfile";