From 5c8850ea8f72d9a54d11d4ee67342b9f62fbe73c Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Wed, 6 Sep 2023 14:30:57 +0700 Subject: [PATCH] redesign widget list --- src/app/space/components/widgetList.tsx | 66 ++++++++++++++++++++++--- src/libs/ndk/instance.ts | 61 +++++++---------------- src/shared/icons/article.tsx | 22 +++++++++ src/shared/icons/file.tsx | 5 +- src/shared/icons/follows.tsx | 22 +++++++++ src/shared/icons/groupFeeds.tsx | 22 +++++++++ src/shared/icons/hashtag.tsx | 2 +- src/shared/icons/index.ts | 3 ++ src/stores/widgets.ts | 4 +- src/utils/types.d.ts | 1 + 10 files changed, 152 insertions(+), 56 deletions(-) create mode 100644 src/shared/icons/article.tsx create mode 100644 src/shared/icons/follows.tsx create mode 100644 src/shared/icons/groupFeeds.tsx diff --git a/src/app/space/components/widgetList.tsx b/src/app/space/components/widgetList.tsx index 5501cd8b..00eec478 100644 --- a/src/app/space/components/widgetList.tsx +++ b/src/app/space/components/widgetList.tsx @@ -2,9 +2,17 @@ import { useCallback } from 'react'; import { useStorage } from '@libs/storage/provider'; +import { + ArticleIcon, + FileIcon, + FollowsIcon, + GroupFeedsIcon, + HashtagIcon, + TrendingIcon, +} from '@shared/icons'; import { TitleBar } from '@shared/titleBar'; -import { DefaultWidgets, useWidgets } from '@stores/widgets'; +import { DefaultWidgets, WidgetKinds, useWidgets } from '@stores/widgets'; import { Widget, WidgetGroup, WidgetGroupItem } from '@utils/types'; @@ -20,6 +28,31 @@ export function WidgetList({ params }: { params: Widget }) { removeWidget(db, params.id); }; + const renderIcon = useCallback( + (kind: number) => { + switch (kind) { + case WidgetKinds.tmp.xfeed: + return ; + case WidgetKinds.local.follows: + return ; + case WidgetKinds.local.files: + case WidgetKinds.global.files: + return ; + case WidgetKinds.local.articles: + case WidgetKinds.global.articles: + return ; + case WidgetKinds.tmp.xhashtag: + return ; + case WidgetKinds.nostrBand.trendingAccounts: + case WidgetKinds.nostrBand.trendingNotes: + return ; + default: + return ''; + } + }, + [DefaultWidgets] + ); + const renderItem = useCallback( (row: WidgetGroup) => { return ( @@ -27,10 +60,29 @@ export function WidgetList({ params }: { params: Widget }) {

{row.title}

{row.data.map((item, index) => ( - ))} @@ -44,7 +96,7 @@ export function WidgetList({ params }: { params: Widget }) { return (
-
+
{DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
@@ -55,7 +107,7 @@ export function WidgetList({ params }: { params: Widget }) { className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-white/5 text-sm font-medium text-white/50" > Build your own widget{' '} -
+
Coming soon diff --git a/src/libs/ndk/instance.ts b/src/libs/ndk/instance.ts index 91930843..72d54b76 100644 --- a/src/libs/ndk/instance.ts +++ b/src/libs/ndk/instance.ts @@ -17,40 +17,32 @@ export const NDKInstance = () => { const cacheAdapter = useMemo(() => new TauriAdapter(), [ndk]); // TODO: fully support NIP-11 - async function verifyRelays(relays: string[]) { + async function getExplicitRelays() { try { - const urls: string[] = relays.map((relay) => { - if (relay.startsWith('ws')) { - return relay.replace('ws', 'http'); - } - if (relay.startsWith('wss')) { - return relay.replace('wss', 'https'); - } - }); - const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort('timeout'), 10000); - const requests = urls.map((url) => - fetch(url, { + // get relays + const relays = (await db.getExplicitRelayUrls()) ?? FULL_RELAYS; + + const requests = relays.map((relay) => { + const url = new URL(relay); + + return fetch(`https://${url.hostname + url.pathname}`, { headers: { Accept: 'application/nostr+json' }, signal: controller.signal, - }) - ); + }); + }); + const responses = await Promise.all(requests); const errors = responses.filter((response) => !response.ok); - if (errors.length > 0) { - throw errors.map((response) => Error(response.statusText)); - } + if (errors.length > 0) throw errors.map((response) => Error(response.statusText)); const verifiedRelays: string[] = responses.map((res) => { - if (res.url.startsWith('http')) { - return res.url.replace('htto', 'ws'); - } - if (res.url.startsWith('https')) { - return res.url.replace('https', 'wss'); - } + const url = new URL(res.url); + if (url.protocol === 'http:') return `ws://${url.hostname + url.pathname}`; + if (url.protocol === 'https:') return `wss://${url.hostname + url.pathname}`; }); // clear timeout @@ -59,31 +51,14 @@ export const NDKInstance = () => { // return all validate relays return verifiedRelays; } catch (e) { - console.error('verify relay failed with error: ', e); + await message(e, { title: 'Cannot connect to relays', type: 'error' }); } } async function initNDK() { - let explicitRelayUrls: string[]; - const explicitRelayUrlsFromDB = await db.getExplicitRelayUrls(); - - console.log('relays in db: ', explicitRelayUrlsFromDB); - console.log('ndk cache adapter: ', cacheAdapter); - - if (explicitRelayUrlsFromDB) { - explicitRelayUrls = await verifyRelays(explicitRelayUrlsFromDB); - } else { - explicitRelayUrls = await verifyRelays(FULL_RELAYS); - } - - if (explicitRelayUrls.length < 1) { - await message('Something is wrong. No relays have been found.', { - title: 'Lume', - type: 'error', - }); - } - + const explicitRelayUrls = await getExplicitRelays(); const instance = new NDK({ explicitRelayUrls, cacheAdapter }); + try { await instance.connect(10000); } catch (error) { diff --git a/src/shared/icons/article.tsx b/src/shared/icons/article.tsx new file mode 100644 index 00000000..6bc96cd5 --- /dev/null +++ b/src/shared/icons/article.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from 'react'; + +export function ArticleIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/icons/file.tsx b/src/shared/icons/file.tsx index 45872c2d..c74eec27 100644 --- a/src/shared/icons/file.tsx +++ b/src/shared/icons/file.tsx @@ -13,10 +13,9 @@ export function FileIcon(props: JSX.IntrinsicAttributes & SVGProps + d="M12.75 3.25v5a1 1 0 001 1h5m-10 4h3.5m-3.5 4h6.5m-9.5-14.5h6.586a1 1 0 01.707.293l5.914 5.914a1 1 0 01.293.707V20.25a1 1 0 01-1 1H5.75a1 1 0 01-1-1V3.75a1 1 0 011-1z" + > ); } diff --git a/src/shared/icons/follows.tsx b/src/shared/icons/follows.tsx new file mode 100644 index 00000000..6396d1bf --- /dev/null +++ b/src/shared/icons/follows.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from 'react'; + +export function FollowsIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/icons/groupFeeds.tsx b/src/shared/icons/groupFeeds.tsx new file mode 100644 index 00000000..db94c677 --- /dev/null +++ b/src/shared/icons/groupFeeds.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from 'react'; + +export function GroupFeedsIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/icons/hashtag.tsx b/src/shared/icons/hashtag.tsx index 927489df..98dc565c 100644 --- a/src/shared/icons/hashtag.tsx +++ b/src/shared/icons/hashtag.tsx @@ -16,7 +16,7 @@ export function HashtagIcon(props: JSX.IntrinsicAttributes & SVGProps + > ); } diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts index f17bcca0..a582084b 100644 --- a/src/shared/icons/index.ts +++ b/src/shared/icons/index.ts @@ -58,3 +58,6 @@ export * from './chevronUp'; export * from './secure'; export * from './verified'; export * from './mention'; +export * from './groupFeeds'; +export * from './article'; +export * from './follows'; diff --git a/src/stores/widgets.ts b/src/stores/widgets.ts index 1d2c8034..b612eee9 100644 --- a/src/stores/widgets.ts +++ b/src/stores/widgets.ts @@ -3,7 +3,7 @@ import { createJSONStorage, persist } from 'zustand/middleware'; import { LumeStorage } from '@libs/storage/instance'; -import { Widget } from '@utils/types'; +import { Widget, WidgetGroup } from '@utils/types'; interface WidgetState { widgets: null | Array; @@ -39,7 +39,7 @@ export const WidgetKinds = { }, }; -export const DefaultWidgets = [ +export const DefaultWidgets: Array = [ { title: 'Network / Follows', data: [ diff --git a/src/utils/types.d.ts b/src/utils/types.d.ts index ed6d414b..21244e04 100644 --- a/src/utils/types.d.ts +++ b/src/utils/types.d.ts @@ -46,6 +46,7 @@ export interface WidgetGroupItem { title: string; description: string; kind: number; + icon?: string; } export interface Widget {