94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { useCallback } from 'react';
|
|
|
|
import { UserBlock } from '@app/space//components/blocks/user';
|
|
import { AddBlock } from '@app/space/components/add';
|
|
import { FeedBlock } from '@app/space/components/blocks/feed';
|
|
import { FollowingBlock } from '@app/space/components/blocks/following';
|
|
import { HashtagBlock } from '@app/space/components/blocks/hashtag';
|
|
import { ImageBlock } from '@app/space/components/blocks/image';
|
|
import { ThreadBlock } from '@app/space/components/blocks/thread';
|
|
|
|
import { getBlocks } from '@libs/storage';
|
|
|
|
import { LoaderIcon } from '@shared/icons';
|
|
|
|
import { Block } from '@utils/types';
|
|
|
|
export function SpaceScreen() {
|
|
const {
|
|
status,
|
|
data: blocks,
|
|
isFetching,
|
|
} = useQuery(
|
|
['blocks'],
|
|
async () => {
|
|
return await getBlocks();
|
|
},
|
|
{
|
|
staleTime: Infinity,
|
|
refetchOnMount: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnWindowFocus: false,
|
|
}
|
|
);
|
|
|
|
const renderBlock = useCallback(
|
|
(block: Block) => {
|
|
switch (block.kind) {
|
|
case 0:
|
|
return <ImageBlock key={block.id} params={block} />;
|
|
case 1:
|
|
return <FeedBlock key={block.id} params={block} />;
|
|
case 2:
|
|
return <ThreadBlock key={block.id} params={block} />;
|
|
case 3:
|
|
return <HashtagBlock key={block.id} params={block} />;
|
|
case 5:
|
|
return <UserBlock key={block.id} params={block} />;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
[blocks]
|
|
);
|
|
|
|
return (
|
|
<div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
|
|
<FollowingBlock />
|
|
{status === 'loading' ? (
|
|
<div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
|
|
<div
|
|
data-tauri-drag-region
|
|
className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3"
|
|
/>
|
|
|
|
<div className="flex w-full flex-1 items-center justify-center p-3">
|
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
blocks.map((block: Block) => renderBlock(block))
|
|
)}
|
|
{isFetching && (
|
|
<div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
|
|
<div
|
|
data-tauri-drag-region
|
|
className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3"
|
|
/>
|
|
|
|
<div className="flex w-full flex-1 items-center justify-center p-3">
|
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
|
|
<div className="inline-flex h-full w-full items-center justify-center">
|
|
<AddBlock />
|
|
</div>
|
|
</div>
|
|
<div className="w-[350px] shrink-0" />
|
|
</div>
|
|
);
|
|
}
|