From ee4e6b1ee6c209b6e3f0547d23d6116f2dc5ea46 Mon Sep 17 00:00:00 2001 From: reya Date: Fri, 22 Dec 2023 14:49:00 +0700 Subject: [PATCH] chore: remove signal --- package.json | 1 - pnpm-lock.yaml | 25 ------------------ src/app/depot/components/contact.tsx | 12 ++++----- src/app/depot/components/members.tsx | 35 ++++++++++++------------- src/app/depot/components/profile.tsx | 12 ++++----- src/app/depot/components/relays.tsx | 18 ++++++------- src/app/depot/index.tsx | 30 ++++++++++----------- src/app/home/index.tsx | 17 ++++++------ src/libs/ark/components/widget/root.tsx | 9 +++---- 9 files changed, 65 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index c5f7990a..e8b59022 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@getalby/sdk": "^3.2.1", "@nostr-dev-kit/ndk": "^2.3.1", "@nostr-fetch/adapter-ndk": "^0.14.1", - "@preact/signals-react": "^2.0.0", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d0fe390..41dffa86 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,9 +17,6 @@ dependencies: '@nostr-fetch/adapter-ndk': specifier: ^0.14.1 version: 0.14.1(@nostr-dev-kit/ndk@2.3.1)(nostr-fetch@0.14.1) - '@preact/signals-react': - specifier: ^2.0.0 - version: 2.0.0(react@18.2.0) '@radix-ui/react-accordion': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) @@ -881,20 +878,6 @@ packages: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} dev: false - /@preact/signals-core@1.5.1: - resolution: {integrity: sha512-dE6f+WCX5ZUDwXzUIWNMhhglmuLpqJhuy3X3xHrhZYI0Hm2LyQwOu0l9mdPiWrVNsE+Q7txOnJPgtIqHCYoBVA==} - dev: false - - /@preact/signals-react@2.0.0(react@18.2.0): - resolution: {integrity: sha512-tMVi2SXFXlojaiPNWa8dlYaidR/XvEgMSp+iymKJgMssBM/QVtUQrodKZek1BJju+dkVHiyeuQHmkuLOI9oyNw==} - peerDependencies: - react: ^16.14.0 || 17.x || 18.x - dependencies: - '@preact/signals-core': 1.5.1 - react: 18.2.0 - use-sync-external-store: 1.2.0(react@18.2.0) - dev: false - /@radix-ui/primitive@1.0.1: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} dependencies: @@ -5894,14 +5877,6 @@ packages: tslib: 2.6.2 dev: false - /use-sync-external-store@1.2.0(react@18.2.0): - resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - react: 18.2.0 - dev: false - /utf-8-validate@5.0.10: resolution: {integrity: sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==} engines: {node: '>=6.14.2'} diff --git a/src/app/depot/components/contact.tsx b/src/app/depot/components/contact.tsx index 15df1be0..3e470c4f 100644 --- a/src/app/depot/components/contact.tsx +++ b/src/app/depot/components/contact.tsx @@ -1,5 +1,5 @@ import { NDKKind } from '@nostr-dev-kit/ndk'; -import { useSignal } from '@preact/signals-react'; +import { useState } from 'react'; import { toast } from 'sonner'; import { useArk } from '@libs/ark'; import { LoaderIcon, RunIcon } from '@shared/icons'; @@ -7,11 +7,11 @@ import { User } from '@shared/user'; export function DepotContactCard() { const ark = useArk(); - const status = useSignal(false); + const [status, setStatus] = useState(false); const backupContact = async () => { try { - status.value = true; + setStatus(true); const event = await ark.getEventByFilter({ filter: { authors: [ark.account.pubkey], kinds: [NDKKind.Contacts] }, @@ -21,11 +21,11 @@ export function DepotContactCard() { const publish = await event.publish(); if (publish) { - status.value = false; + setStatus(false); toast.success('Backup contact list successfully.'); } } catch (e) { - status.value = false; + setStatus(false); toast.error(e); } }; @@ -53,7 +53,7 @@ export function DepotContactCard() { onClick={backupContact} className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600" > - {status.value ? ( + {status ? ( ) : ( diff --git a/src/app/depot/components/members.tsx b/src/app/depot/components/members.tsx index 531bb934..f5fa68e2 100644 --- a/src/app/depot/components/members.tsx +++ b/src/app/depot/components/members.tsx @@ -1,43 +1,42 @@ -import { useSignal } from '@preact/signals-react'; import * as Dialog from '@radix-ui/react-dialog'; import { resolveResource } from '@tauri-apps/api/path'; import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs'; import { nip19 } from 'nostr-tools'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { parse, stringify } from 'smol-toml'; import { toast } from 'sonner'; import { CancelIcon, PlusIcon, UserAddIcon, UserRemoveIcon } from '@shared/icons'; import { User } from '@shared/user'; export function DepotMembers() { - const members = useSignal>(null); - const tmpMembers = useSignal>([]); - const newMember = useSignal(''); + const [members, setMembers] = useState>(null); + const [tmpMembers, setTmpMembers] = useState>([]); + const [newMember, setNewMember] = useState(''); const addMember = async () => { - if (!newMember.value.startsWith('npub1')) + if (!newMember.startsWith('npub1')) return toast.error('You need to enter a valid npub'); try { - const pubkey = nip19.decode(newMember.value).data as string; - tmpMembers.value.push(pubkey); + const pubkey = nip19.decode(newMember).data as string; + setTmpMembers((prev) => [...prev, pubkey]); } catch (e) { console.error(e); } }; const removeMember = (member: string) => { - tmpMembers.value = tmpMembers.value.filter((item) => item !== member); + setTmpMembers((prev) => prev.filter((item) => item !== member)); }; const updateMembers = async () => { - members.value = new Set(tmpMembers.value); + setMembers(new Set(tmpMembers)); const defaultConfig = await resolveResource('resources/config.toml'); const config = await readTextFile(defaultConfig); const configContent = parse(config); - configContent.authorization['pubkey_whitelist'] = [...members.value]; + configContent.authorization['pubkey_whitelist'] = [...members]; const newConfig = stringify(configContent); @@ -49,7 +48,7 @@ export function DepotMembers() { const defaultConfig = await resolveResource('resources/config.toml'); const config = await readTextFile(defaultConfig); const configContent = parse(config); - tmpMembers.value = Array.from(configContent.authorization['pubkey_whitelist']); + setTmpMembers(Array.from(configContent.authorization['pubkey_whitelist'])); } loadConfig(); @@ -66,12 +65,12 @@ export function DepotMembers() {
- {tmpMembers.value.slice(0, 5).map((item) => ( + {tmpMembers.slice(0, 5).map((item) => ( ))} - {tmpMembers.value.length > 5 ? ( + {tmpMembers.length > 5 ? (
- +{tmpMembers.value.length} + +{tmpMembers.length}
) : null}
@@ -107,8 +106,8 @@ export function DepotMembers() { (newMember.value = e.target.value)} + value={newMember} + onChange={(e) => setNewMember(e.target.value)} placeholder="npub1..." className="h-11 w-full rounded-lg border-transparent bg-neutral-100 pl-3 pr-20 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800" /> @@ -121,7 +120,7 @@ export function DepotMembers() { Add
- {tmpMembers.value.map((member) => ( + {tmpMembers.map((member) => (
{ try { - status.value = true; + setStatus(true); const event = await ark.getEventByFilter({ filter: { authors: [ark.account.pubkey], kinds: [NDKKind.Metadata] }, @@ -21,11 +21,11 @@ export function DepotProfileCard() { const publish = await event.publish(); if (publish) { - status.value = false; + setStatus(false); toast.success('Backup profile successfully.'); } } catch (e) { - status.value = false; + setStatus(false); toast.error(JSON.stringify(e)); } }; @@ -42,7 +42,7 @@ export function DepotProfileCard() { onClick={backupProfile} className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600" > - {status.value ? ( + {status ? ( ) : ( diff --git a/src/app/depot/components/relays.tsx b/src/app/depot/components/relays.tsx index 2f047ce3..d10edde3 100644 --- a/src/app/depot/components/relays.tsx +++ b/src/app/depot/components/relays.tsx @@ -1,18 +1,18 @@ import { NDKKind } from '@nostr-dev-kit/ndk'; -import { useSignal } from '@preact/signals-react'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { toast } from 'sonner'; import { useArk } from '@libs/ark'; import { LoaderIcon, RunIcon } from '@shared/icons'; export function DepotRelaysCard() { const ark = useArk(); - const status = useSignal(false); - const relaySize = useSignal(0); + + const [status, setStatus] = useState(false); + const [relaySize, setRelaySize] = useState(0); const backupRelays = async () => { try { - status.value = true; + setStatus(true); const event = await ark.getEventByFilter({ filter: { authors: [ark.account.pubkey], kinds: [NDKKind.RelayList] }, @@ -22,11 +22,11 @@ export function DepotRelaysCard() { const publish = await event.publish(); if (publish) { - status.value = false; + setStatus(false); toast.success('Backup profile successfully.'); } } catch (e) { - status.value = false; + setStatus(false); toast.error(JSON.stringify(e)); } }; @@ -36,7 +36,7 @@ export function DepotRelaysCard() { const event = await ark.getEventByFilter({ filter: { authors: [ark.account.pubkey], kinds: [NDKKind.RelayList] }, }); - if (event) relaySize.value = event.tags.length; + if (event) setRelaySize(event.tags.length); } loadRelays(); @@ -54,7 +54,7 @@ export function DepotRelaysCard() { onClick={backupRelays} className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600" > - {status.value ? ( + {status ? ( ) : ( diff --git a/src/app/depot/index.tsx b/src/app/depot/index.tsx index 6eeba810..abc4be00 100644 --- a/src/app/depot/index.tsx +++ b/src/app/depot/index.tsx @@ -1,9 +1,8 @@ import { NDKKind } from '@nostr-dev-kit/ndk'; -import { useSignal } from '@preact/signals-react'; import * as Collapsible from '@radix-ui/react-collapsible'; import { appConfigDir } from '@tauri-apps/api/path'; import { invoke } from '@tauri-apps/api/primitives'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { toast } from 'sonner'; import { DepotContactCard } from '@app/depot/components/contact'; import { DepotMembers } from '@app/depot/components/members'; @@ -14,22 +13,23 @@ import { ChevronDownIcon, DepotIcon, GossipIcon } from '@shared/icons'; export function DepotScreen() { const ark = useArk(); - const dataPath = useSignal(''); - const tunnelUrl = useSignal(''); + + const [dataPath, setDataPath] = useState(''); + const [tunnelUrl, setTunnelUrl] = useState(''); const openFolder = async () => { await invoke('show_in_folder', { - path: dataPath.value + '/nostr.db', + path: dataPath + '/nostr.db', }); }; const updateRelayList = async () => { try { - if (tunnelUrl.value.length < 1) return toast.info('Please enter a valid relay url'); - if (!tunnelUrl.value.startsWith('ws')) + if (tunnelUrl.length < 1) return toast.info('Please enter a valid relay url'); + if (!tunnelUrl.startsWith('ws')) return toast.info('Please enter a valid relay url'); - const relayUrl = new URL(tunnelUrl.value.replace(/\s/g, '')); + const relayUrl = new URL(tunnelUrl.replace(/\s/g, '')); if (!/^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/.test(relayUrl.host)) return; const relayEvent = await ark.getEventByFilter({ @@ -41,12 +41,12 @@ export function DepotScreen() { if (!relayEvent) { publish = await ark.createEvent({ kind: NDKKind.RelayList, - tags: [['r', tunnelUrl.value, '']], + tags: [['r', tunnelUrl, '']], }); } const newTags = relayEvent.tags ?? []; - newTags.push(['r', tunnelUrl.value, '']); + newTags.push(['r', tunnelUrl, '']); publish = await ark.createEvent({ kind: NDKKind.RelayList, @@ -54,10 +54,10 @@ export function DepotScreen() { }); if (publish) { - await ark.createSetting('tunnel_url', tunnelUrl.value); + await ark.createSetting('tunnel_url', tunnelUrl); toast.success('Update relay list successfully.'); - tunnelUrl.value = ''; + setTunnelUrl(''); } } catch (e) { console.error(e); @@ -68,7 +68,7 @@ export function DepotScreen() { useEffect(() => { async function loadConfig() { const appDir = await appConfigDir(); - dataPath.value = appDir; + setDataPath(appDir); } loadConfig(); @@ -170,8 +170,8 @@ export function DepotScreen() {
(tunnelUrl.value = e.target.value)} + value={tunnelUrl} + onChange={(e) => setTunnelUrl(e.target.value)} spellCheck={false} placeholder="wss://" className="h-10 flex-1 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800" diff --git a/src/app/home/index.tsx b/src/app/home/index.tsx index 1dd495fd..42706c90 100644 --- a/src/app/home/index.tsx +++ b/src/app/home/index.tsx @@ -1,9 +1,8 @@ -import { useSignal } from '@preact/signals-react'; import { useQuery } from '@tanstack/react-query'; -import { useRef } from 'react'; +import { useRef, useState } from 'react'; import { VList, VListHandle } from 'virtua'; import { useArk } from '@libs/ark'; -import { LoaderIcon, PlusIcon } from '@shared/icons'; +import { LoaderIcon } from '@shared/icons'; import { ArticleWidget, FileWidget, @@ -12,7 +11,6 @@ import { NewsfeedWidget, NotificationWidget, ThreadWidget, - ToggleWidgetList, TopicWidget, TrendingAccountsWidget, TrendingNotesWidget, @@ -25,7 +23,6 @@ import { WidgetProps } from '@utils/types'; export function HomeScreen() { const ark = useArk(); const ref = useRef(null); - const index = useSignal(-1); const { isLoading, data } = useQuery({ queryKey: ['widgets'], @@ -54,6 +51,8 @@ export function HomeScreen() { staleTime: Infinity, }); + const [selectedIndex, setSelectedIndex] = useState(-1); + const renderItem = (widget: WidgetProps) => { switch (widget.kind) { case WIDGET_KIND.notification: @@ -107,8 +106,8 @@ export function HomeScreen() { case 'ArrowUp': case 'ArrowLeft': { e.preventDefault(); - const prevIndex = Math.max(index.peek() - 1, 0); - index.value = prevIndex; + const prevIndex = Math.max(selectedIndex - 1, 0); + setSelectedIndex(prevIndex); ref.current.scrollToIndex(prevIndex, { align: 'center', smooth: true, @@ -118,8 +117,8 @@ export function HomeScreen() { case 'ArrowDown': case 'ArrowRight': { e.preventDefault(); - const nextIndex = Math.min(index.peek() + 1, data.length - 1); - index.value = nextIndex; + const nextIndex = Math.min(selectedIndex + 1, data.length - 1); + setSelectedIndex(nextIndex); ref.current.scrollToIndex(nextIndex, { align: 'center', smooth: true, diff --git a/src/libs/ark/components/widget/root.tsx b/src/libs/ark/components/widget/root.tsx index f3f33486..9ec03e32 100644 --- a/src/libs/ark/components/widget/root.tsx +++ b/src/libs/ark/components/widget/root.tsx @@ -1,6 +1,5 @@ -import { useSignal } from '@preact/signals-react'; import { Resizable } from 're-resizable'; -import { ReactNode } from 'react'; +import { ReactNode, useState } from 'react'; import { twMerge } from 'tailwind-merge'; export function WidgetRoot({ @@ -10,14 +9,14 @@ export function WidgetRoot({ children: ReactNode; className?: string; }) { - const width = useSignal(420); + const [width, setWidth] = useState(420); return ( e.preventDefault()} onResizeStop={(_e, _direction, _ref, d) => { - width.value = width.peek() + d.width; + setWidth((prevWidth) => prevWidth + d.width); }} minWidth={420} maxWidth={600}