{
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}