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

refactor image with fallback and added virtuoso

Browse Source
This commit is contained in:
Ren Amamiya 2023-03-31 10:14:31 +07:00
parent f354758013
commit bc61082716
8 changed files with 57 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -42,6 +42,7 @@
"react-hook-form": "^7.43.8",
"react-player": "^2.12.0",
"react-string-replace": "^1.1.0",
"react-virtuoso": "^4.1.1",
"tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
"unique-names-generator": "^4.7.1",
"ws": "^8.13.0"

14
pnpm-lock.yaml
View File

@ -52,6 +52,7 @@ specifiers:
react-hook-form: ^7.43.8
react-player: ^2.12.0
react-string-replace: ^1.1.0
react-virtuoso: ^4.1.1
tailwindcss: ^3.2.7
tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql
typescript: ^4.9.5
@ -89,6 +90,7 @@ dependencies:
react-hook-form: 7.43.8_react@18.2.0
react-player: 2.12.0_react@18.2.0
react-string-replace: 1.1.0
react-virtuoso: 4.1.1_biqbaboplfbrettd7655fr4n2y
tauri-plugin-sql-api: github.com/tauri-apps/tauri-plugin-sql/3a8b9a6b244df7512bc5ef8692cebdedbab3ccce
unique-names-generator: 4.7.1
ws: 8.13.0
@ -4514,6 +4516,18 @@ packages:
tslib: 2.5.0
dev: false
/react-virtuoso/4.1.1_biqbaboplfbrettd7655fr4n2y:
resolution:
{ integrity: sha512-G2lyifG5UIRZI9vgcBt+6OLDL6CO5/O6YiGS+O9z+VNRjVSTioSwfBC7sVSLspYq7iyL60aIXlVqSKVJiSVhlg== }
engines: { node: '>=10' }
peerDependencies:
react: '>=16 || >=17 || >= 18'
react-dom: '>=16 || >=17 || >= 18'
dependencies:
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
/react/18.2.0:
resolution:
{ integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== }

25
src/components/columns/navigator/messages/index.tsx → src/components/columns/navigator/chats/index.tsx
View File

@ -1,29 +1,14 @@
import { MessageList } from '@components/columns/navigator/messages/list';
import { activeAccountAtom } from '@stores/account';
import { getAllFollowsByID } from '@utils/storage';
import * as Collapsible from '@radix-ui/react-collapsible';
import { TriangleUpIcon } from '@radix-ui/react-icons';
import { useAtom } from 'jotai';
import { useEffect, useState } from 'react';
import { useState } from 'react';
export default function Messages() {
export default function Chats() {
const [open, setOpen] = useState(true);
const [follows, setFollows] = useState([]);
const [activeAccount] = useAtom(activeAccountAtom);
useEffect(() => {
getAllFollowsByID(activeAccount.id)
.then((res: any) => setFollows(res))
.catch(console.error);
}, [activeAccount.id]);
return (
<Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
<div className="flex h-full flex-col gap-1 px-2 pb-8">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
<div
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : ''
@ -35,9 +20,7 @@ export default function Messages() {
Chats
</h3>
</Collapsible.Trigger>
<Collapsible.Content className="h-full">
<MessageList data={follows} />
</Collapsible.Content>
<Collapsible.Content className="h-full"></Collapsible.Content>
</div>
</Collapsible.Root>
);

6
src/components/columns/navigator/index.tsx
View File

@ -1,4 +1,4 @@
import Messages from '@components/columns/navigator/messages';
import Chats from '@components/columns/navigator/chats';
import Newsfeed from '@components/columns/navigator/newsfeed';
export default function NavigatorColumn() {
@ -6,8 +6,8 @@ export default function NavigatorColumn() {
<div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4">
{/* Newsfeed */}
<Newsfeed />
{/* Messages */}
<Messages />
{/* Chats */}
<Chats />
</div>
);
}

33
src/components/columns/navigator/messages/list.tsx
View File

@ -1,33 +0,0 @@
import { UserMini } from '@components/user/mini';
import { useVirtualizer } from '@tanstack/react-virtual';
import { Suspense, memo, useRef } from 'react';
export const MessageList = memo(function MessageList({ data }: { data: any }) {
const parentRef = useRef(null);
const virtualizer = useVirtualizer({
count: data.length,
estimateSize: () => 32,
getScrollElement: () => parentRef.current,
});
const items = virtualizer.getVirtualItems();
return (
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
<Suspense fallback={<p className="text-sm text-zinc-400">Loading...</p>}>
{items.length > 0 && (
<div className="relative mb-24 w-full" style={{ height: virtualizer.getTotalSize() }}>
<div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
{items.map((virtualRow) => (
<div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
<UserMini pubkey={data[virtualRow.index].pubkey} />
</div>
))}
</div>
</div>
)}
</Suspense>
</div>
);
});

26
src/components/imageWithFallback.tsx
View File

@ -1,4 +1,5 @@
import Avatar from 'boring-avatars';
import { DEFAULT_AVATAR } from '@stores/constants';
import Image from 'next/image';
import { memo, useEffect, useState } from 'react';
@ -20,27 +21,6 @@ export const ImageWithFallback = memo(function ImageWithFallback({
}, [src]);
return (
<>
{error ? (
<Avatar
size={44}
name={alt}
variant="beam"
square={true}
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
/>
) : (
<Image
src={src}
alt={alt}
fill={fill}
className={className}
onError={setError}
placeholder="blur"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
priority
/>
)}
</>
<Image src={error ? DEFAULT_AVATAR : src} alt={alt} fill={fill} className={className} onError={setError} priority />
);
});

77
src/components/user/mini.tsx
View File

@ -1,59 +1,44 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { createCacheProfile, getCacheProfile } from '@utils/storage';
import { DEFAULT_AVATAR } from '@stores/constants';
import { getCacheProfile } from '@utils/storage';
import { truncate } from '@utils/truncate';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
import destr from 'destr';
import { memo, useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
export const UserMini = ({ pubkey }: { pubkey: string }) => {
const [profile, setProfile] = useState(null);
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
method: 'GET',
timeout: 30,
});
return res.data;
const fetchCacheProfile = useCallback(async (id: string) => {
const res = await getCacheProfile(id);
const data = JSON.parse(res.metadata);
setProfile(data);
}, []);
useEffect(() => {
getCacheProfile(pubkey).then((res) => {
if (res) {
setProfile(destr(res.metadata));
} else {
fetchProfile(pubkey)
.then((res: any) => {
setProfile(destr(res.content));
createCacheProfile(pubkey, res.content);
})
.catch(console.error);
}
});
}, [fetchProfile, pubkey]);
fetchCacheProfile(pubkey).catch(console.error);
}, [fetchCacheProfile, pubkey]);
return (
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
{profile?.picture ? (
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
) : (
<Avatar
size={20}
name={pubkey}
variant="beam"
square={true}
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
if (profile) {
return (
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
fill={true}
className="rounded object-cover"
/>
)}
</div>
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
<p className="truncate leading-tight text-zinc-300">
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
</p>
</div>
</div>
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
<p className="truncate leading-tight text-zinc-300">
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
</p>
</div>
</div>
);
});
);
} else {
return <></>;
}
};

1
src/stores/constants.tsx Normal file
View File

@ -0,0 +1 @@
export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';