nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 19:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

update layout

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-25 09:33:17 +07:00
parent 50e29beda4
commit 53fd29ddb8
9 changed files with 99 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/channels/channelListItem.tsx
View File

@ -6,15 +6,7 @@ import { usePageContext } from '@utils/hooks/usePageContext';
import { twMerge } from 'tailwind-merge';
export const ChannelListItem = ({ data }: { data: any }) => {
let fallback: any;
if (typeof data.metadata === 'object') {
fallback = data.metadata;
} else {
fallback = JSON.parse(data.metadata);
}
const channel: any = useChannelMetadata(data.event_id, fallback);
const channel: any = useChannelMetadata(data.event_id);
const pageContext = usePageContext();
const searchParams: any = pageContext.urlParsed.search;

23
src/components/channels/channelProfile.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
import { nip19 } from 'nostr-tools';
import Skeleton from 'react-loading-skeleton';
export const ChannelProfile = ({ id }: { id: string }) => {
const metadata = useChannelMetadata(id);
const noteID = nip19.noteEncode(id);
return (
<div className="inline-flex items-center gap-2">
<div className="relative shrink-0 rounded-md">
<img src={metadata?.picture || <Skeleton />} alt={id} className="h-8 w-8 rounded bg-zinc-900 object-cover" />
</div>
<div className="flex flex-col gap-1">
<h5 className="truncate font-medium leading-none text-zinc-100">{metadata?.name || <Skeleton />}</h5>
<p className="text-xs leading-none text-zinc-400">
{metadata?.about || noteID.substring(0, 24) + '...' || <Skeleton />}
</p>
</div>
</div>
);
};

4
src/components/layouts/newsfeed.tsx
View File

@ -20,9 +20,7 @@ export default function NewsfeedLayout({ children }: { children: React.ReactNode
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-4 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
</div>
</div>
</div>

19
src/pages/channel/index.page.tsx
View File

@ -1,4 +1,5 @@
import { AccountContext } from '@components/accountProvider';
import { ChannelProfile } from '@components/channels/channelProfile';
import { FormChannel } from '@components/form/channel';
import NewsfeedLayout from '@components/layouts/newsfeed';
import { RelayContext } from '@components/relaysProvider';
@ -9,6 +10,7 @@ import { MESSAGE_RELAYS } from '@stores/constants';
import { dateToUnix, hoursAgo } from '@utils/getDate';
import { usePageContext } from '@utils/hooks/usePageContext';
import { EyeClose, MicMute } from 'iconoir-react';
import { useSetAtom } from 'jotai';
import { useResetAtom } from 'jotai/utils';
import { Suspense, lazy, useContext, useRef } from 'react';
@ -77,7 +79,21 @@ export function Page() {
return (
<NewsfeedLayout>
<div className="flex h-full w-full flex-col justify-between">
<div className="flex h-full flex-col justify-between gap-2">
<div className="flex h-11 w-full shrink-0 items-center justify-between">
<div>
<ChannelProfile id={id} />
</div>
<div className="flex items-center gap-2">
<div className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900">
<EyeClose width={16} height={16} className="text-zinc-400" />
</div>
<div className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900">
<MicMute width={16} height={16} className="text-zinc-400" />
</div>
</div>
</div>
<div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<Suspense fallback={<p>Loading...</p>}>
<ChannelMessages />
</Suspense>
@ -85,6 +101,7 @@ export function Page() {
<FormChannel eventId={id} />
</div>
</div>
</div>
</NewsfeedLayout>
);
}

2
src/pages/chat/index.page.tsx
View File

@ -57,7 +57,7 @@ export function Page() {
return (
<NewsfeedLayout>
<div className="flex h-full w-full flex-col justify-between">
<div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<Suspense fallback={<p>Loading...</p>}>
<MessageList />
</Suspense>

6
src/pages/newsfeed/circle/index.page.tsx
View File

@ -3,8 +3,12 @@ import NewsfeedLayout from '@components/layouts/newsfeed';
export function Page() {
return (
<NewsfeedLayout>
<div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="flex h-full w-full items-center justify-center">
<p className="text-sm text-zinc-400">Sorry, this feature under development, it will come in the next version</p>
<p className="text-sm text-zinc-400">
Sorry, this feature under development, it will come in the next version
</p>
</div>
</div>
</NewsfeedLayout>
);

2
src/pages/newsfeed/following/index.page.tsx
View File

@ -82,7 +82,7 @@ export function Page() {
return (
<NewsfeedLayout>
<div className="relative h-full w-full">
<div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
{hasNewerNote && (
<div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
<button

38
src/utils/hooks/useChannelMetadata.tsx
View File

@ -3,28 +3,42 @@ import { RelayContext } from '@components/relaysProvider';
import { DEFAULT_RELAYS } from '@stores/constants';
import { updateChannelMetadata } from '@utils/storage';
import { getChannel } from '@utils/storage';
import { useCallback, useContext, useEffect, useState } from 'react';
export const useChannelMetadata = (id: string, fallback: any) => {
export const useChannelMetadata = (id: string) => {
const pool: any = useContext(RelayContext);
const [metadata, setMetadata] = useState(fallback);
const [metadata, setMetadata] = useState(null);
const fetchMetadata = useCallback(() => {
const fetchFromRelay = useCallback(() => {
const unsubscribe = pool.subscribe(
[
{
kinds: [41],
'#e': [id],
},
{
ids: [id],
kinds: [40],
},
],
DEFAULT_RELAYS,
(event: { content: string }) => {
(event: { kind: number; content: string }) => {
switch (event.kind) {
case 41:
const json = JSON.parse(event.content);
// update state
setMetadata(json);
// update metadata in database
updateChannelMetadata(id, event.content);
break;
case 40:
// update state
setMetadata(JSON.parse(event.content));
default:
break;
}
},
undefined,
undefined,
@ -39,18 +53,28 @@ export const useChannelMetadata = (id: string, fallback: any) => {
};
}, [id, pool]);
const getChannelFromDB = useCallback(async () => {
return await getChannel(id);
}, [id]);
useEffect(() => {
let ignore = false;
if (!ignore) {
// fetch kind 41
fetchMetadata();
getChannelFromDB().then((res) => {
console.log(res);
if (res) {
setMetadata(JSON.parse(res.metadata));
} else {
fetchFromRelay();
}
});
}
return () => {
ignore = true;
};
}, [fetchMetadata, fallback]);
}, [fetchFromRelay, getChannelFromDB]);
return metadata;
};

7
src/utils/storage.tsx
View File

@ -120,6 +120,13 @@ export async function getChannels(limit: number, offset: number) {
return await db.select(`SELECT * FROM channels ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}";`);
}
// get channel by id
export async function getChannel(id: string) {
const db = await connect();
const result = await db.select(`SELECT * FROM channels WHERE event_id = "${id}";`);
return result[0];
}
// create channel
export async function createChannel(event_id: string, metadata: string, created_at: number) {
const db = await connect();