From 48e453fe5ca842b4d363efd32b8873950aefc869 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Fri, 2 Jun 2023 18:06:19 +0700 Subject: [PATCH] move space logic to zustand --- src/app/space/components/addFeed.tsx | 4 +- src/app/space/components/addImage.tsx | 10 +-- src/app/space/components/blocks/feed.tsx | 18 ++++- src/app/space/components/blocks/image.tsx | 18 ++++- src/app/space/pages/index.page.tsx | 21 +++--- src/stores/accounts.tsx | 88 +++++++++++++++++------ src/stores/chats.tsx | 2 +- src/utils/storage.tsx | 7 +- 8 files changed, 126 insertions(+), 42 deletions(-) diff --git a/src/app/space/components/addFeed.tsx b/src/app/space/components/addFeed.tsx index 2ebefa83..393b1f54 100644 --- a/src/app/space/components/addFeed.tsx +++ b/src/app/space/components/addFeed.tsx @@ -7,7 +7,7 @@ import { Fragment, useState } from "react"; import { useForm } from "react-hook-form"; export function AddFeedBlock({ parentState }: { parentState: any }) { - const account = useActiveAccount((state: any) => state.account); + const addBlock = useActiveAccount((state: any) => state.addBlock); const [loading, setLoading] = useState(false); const [isOpen, setIsOpen] = useState(true); @@ -36,7 +36,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) { } // insert to database - createBlock(account.id, 1, data.title, pubkey); + addBlock(1, data.title, pubkey); setTimeout(() => { setLoading(false); diff --git a/src/app/space/components/addImage.tsx b/src/app/space/components/addImage.tsx index 954cd0ce..f6946122 100644 --- a/src/app/space/components/addImage.tsx +++ b/src/app/space/components/addImage.tsx @@ -8,14 +8,16 @@ import { open } from "@tauri-apps/api/dialog"; import { Body, fetch } from "@tauri-apps/api/http"; import { createBlobFromFile } from "@utils/createBlobFromFile"; import { dateToUnix } from "@utils/date"; -import { createBlock } from "@utils/storage"; import { getEventHash, getSignature } from "nostr-tools"; import { Fragment, useContext, useEffect, useRef, useState } from "react"; import { useForm } from "react-hook-form"; export function AddImageBlock({ parentState }: { parentState: any }) { const pool: any = useContext(RelayContext); - const account = useActiveAccount((state: any) => state.account); + const [account, addBlock] = useActiveAccount((state: any) => [ + state.account, + state.addBlock, + ]); const [loading, setLoading] = useState(false); const [isOpen, setIsOpen] = useState(true); @@ -97,8 +99,6 @@ export function AddImageBlock({ parentState }: { parentState: any }) { tags: tags.current, }; - console.log(event); - event.id = getEventHash(event); event.sig = getSignature(event, account.privkey); @@ -106,7 +106,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) { pool.publish(event, WRITEONLY_RELAYS); // insert to database - createBlock(account.id, 0, data.title, data.content); + addBlock(0, data.title, data.content); setTimeout(() => { setLoading(false); diff --git a/src/app/space/components/blocks/feed.tsx b/src/app/space/components/blocks/feed.tsx index df2c3878..eaaf46c7 100644 --- a/src/app/space/components/blocks/feed.tsx +++ b/src/app/space/components/blocks/feed.tsx @@ -1,6 +1,8 @@ import { NoteBase } from "@app/note/components/base"; import { NoteQuoteRepost } from "@app/note/components/quoteRepost"; import { NoteSkeleton } from "@app/note/components/skeleton"; +import { CancelIcon } from "@shared/icons"; +import { useActiveAccount } from "@stores/accounts"; import { useInfiniteQuery } from "@tanstack/react-query"; import { useVirtualizer } from "@tanstack/react-virtual"; import { getNotesByAuthor } from "@utils/storage"; @@ -10,6 +12,8 @@ const ITEM_PER_PAGE = 10; const TIME = Math.floor(Date.now() / 1000); export function FeedBlock({ params }: { params: any }) { + const removeBlock = useActiveAccount((state: any) => state.removeBlock); + const { status, data, @@ -58,13 +62,25 @@ export function FeedBlock({ params }: { params: any }) { } }, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]); + const close = () => { + removeBlock(params.id); + }; + return (
+

{params.title}

+
state.removeBlock); + + const close = () => { + removeBlock(params.id); + }; + return (
+

{params.title}

+
getBlocks(id); +import { useEffect } from "react"; export function Page() { - const account = useActiveAccount((state: any) => state.account); - const { data }: any = useSWR( - account ? ["blocks", account.id] : null, - fetcher, - ); + const blocks = useActiveAccount((state: any) => state.blocks); + const fetchBlocks = useActiveAccount((state: any) => state.fetchBlocks); + + useEffect(() => { + if (blocks !== null) return; + fetchBlocks(); + }, [fetchBlocks]); return (
- {data - ? data.map((block: any) => + {blocks + ? blocks.map((block: any) => block.kind === 0 ? ( ) : ( diff --git a/src/stores/accounts.tsx b/src/stores/accounts.tsx index b21fa778..71c4cfe5 100644 --- a/src/stores/accounts.tsx +++ b/src/stores/accounts.tsx @@ -1,27 +1,75 @@ -import { getActiveAccount, getLastLogin } from "@utils/storage"; +import { + addBlockToDB, + getActiveAccount, + getBlocks, + getLastLogin, + removeBlockFromDB, +} from "@utils/storage"; import { create } from "zustand"; import { createJSONStorage, persist } from "zustand/middleware"; +import { immer } from "zustand/middleware/immer"; export const useActiveAccount = create( - persist( - (set) => ({ - account: null, - lastLogin: 0, - fetch: async () => { - const response = await getActiveAccount(); - set({ account: response }); + immer( + persist( + (set: any, get: any) => ({ + account: null, + blocks: null, + lastLogin: 0, + fetch: async () => { + const response = await getActiveAccount(); + set({ account: response }); + }, + fetchLastLogin: async () => { + const response = await getLastLogin(); + set({ lastLogin: parseInt(response) }); + }, + fetchBlocks: async () => { + const account = get().account; + const response = await getBlocks(account.id); + set({ blocks: response }); + }, + addBlock: (kind: number, title: string, content: string) => { + const account = get().account; + // add to db + addBlockToDB(account.id, kind, title, content); + // update state + set((state: any) => ({ + blocks: [ + ...state.blocks, + { + id: account.id + kind, + account_id: account.id, + kind, + title, + content, + }, + ], + })); + }, + removeBlock: (id: string) => { + // remove from db + removeBlockFromDB(id); + // update state + set((state: any) => { + const target = state.blocks.findIndex( + (b: { id: string }) => b.id === id, + ); + if (target) { + state.blocks.splice(target, 1); + } + }); + }, + updateFollows: (list: any) => { + set((state: any) => ({ + account: { ...state.account, follows: list }, + })); + }, + }), + { + name: "account", + storage: createJSONStorage(() => sessionStorage), }, - fetchLastLogin: async () => { - const response = await getLastLogin(); - set({ lastLogin: parseInt(response) }); - }, - updateFollows: (list: any) => { - set((state: any) => ({ account: { ...state.account, follows: list } })); - }, - }), - { - name: "account", - storage: createJSONStorage(() => sessionStorage), - }, + ), ), ); diff --git a/src/stores/chats.tsx b/src/stores/chats.tsx index edecd78d..6ad62d1d 100644 --- a/src/stores/chats.tsx +++ b/src/stores/chats.tsx @@ -3,7 +3,7 @@ import { create } from "zustand"; import { immer } from "zustand/middleware/immer"; export const useChats = create( - immer((set: any, get: any) => ({ + immer((set: any) => ({ chats: [], fetch: async (pubkey: string) => { const response: any = await getChatsByPubkey(pubkey); diff --git a/src/utils/storage.tsx b/src/utils/storage.tsx index 2a7bf34d..6e4ed03a 100644 --- a/src/utils/storage.tsx +++ b/src/utils/storage.tsx @@ -386,7 +386,7 @@ export async function getBlocks(account_id: number) { } // create block -export async function createBlock( +export async function addBlockToDB( account_id: number, kind: number, title: string, @@ -398,3 +398,8 @@ export async function createBlock( [account_id, kind, title, content], ); } + +export async function removeBlockFromDB(id: string) { + const db = await connect(); + return await db.execute(`DELETE FROM blocks WHERE id = "${id}";`); +}