101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
import { useCallback, useEffect } from 'react';
|
|
|
|
import { ToggleWidgetList } from '@app/space/components/toggle';
|
|
import { WidgetList } from '@app/space/components/widgetList';
|
|
|
|
import { useStorage } from '@libs/storage/provider';
|
|
|
|
import { LoaderIcon } from '@shared/icons';
|
|
import {
|
|
GlobalArticlesWidget,
|
|
GlobalFilesWidget,
|
|
GlobalHashtagWidget,
|
|
LearnNostrWidget,
|
|
LocalArticlesWidget,
|
|
LocalFeedsWidget,
|
|
LocalFilesWidget,
|
|
LocalNetworkWidget,
|
|
LocalThreadWidget,
|
|
LocalUserWidget,
|
|
TrendingAccountsWidget,
|
|
TrendingNotesWidget,
|
|
XfeedsWidget,
|
|
XhashtagWidget,
|
|
} from '@shared/widgets';
|
|
import { LocalFollowsWidget } from '@shared/widgets/local/follows';
|
|
|
|
import { WidgetKinds, useWidgets } from '@stores/widgets';
|
|
|
|
import { Widget } from '@utils/types';
|
|
|
|
export function SpaceScreen() {
|
|
const { db } = useStorage();
|
|
|
|
const [widgets, fetchWidgets] = useWidgets((state) => [
|
|
state.widgets,
|
|
state.fetchWidgets,
|
|
]);
|
|
|
|
const renderItem = useCallback(
|
|
(widget: Widget) => {
|
|
if (!widget) return;
|
|
switch (widget.kind) {
|
|
case WidgetKinds.local.network:
|
|
return <LocalNetworkWidget key={widget.id} />;
|
|
case WidgetKinds.local.follows:
|
|
return <LocalFollowsWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.local.feeds:
|
|
return <LocalFeedsWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.local.files:
|
|
return <LocalFilesWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.local.articles:
|
|
return <LocalArticlesWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.local.user:
|
|
return <LocalUserWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.local.thread:
|
|
return <LocalThreadWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.global.hashtag:
|
|
return <GlobalHashtagWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.global.articles:
|
|
return <GlobalArticlesWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.global.files:
|
|
return <GlobalFilesWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.nostrBand.trendingAccounts:
|
|
return <TrendingAccountsWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.nostrBand.trendingNotes:
|
|
return <TrendingNotesWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.tmp.xfeed:
|
|
return <XhashtagWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.tmp.xhashtag:
|
|
return <XfeedsWidget key={widget.id} params={widget} />;
|
|
case WidgetKinds.tmp.list:
|
|
return <WidgetList key={widget.id} params={widget} />;
|
|
case WidgetKinds.other.learnNostr:
|
|
return <LearnNostrWidget key={widget.id} params={widget} />;
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
[widgets]
|
|
);
|
|
|
|
useEffect(() => {
|
|
fetchWidgets(db);
|
|
}, [fetchWidgets]);
|
|
|
|
return (
|
|
<div className="scrollbar-hide inline-flex h-full w-full min-w-full flex-nowrap items-start divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
|
|
{!widgets ? (
|
|
<div className="flex shrink-0 grow-0 basis-[400px] flex-col">
|
|
<div className="flex w-full flex-1 items-center justify-center p-3">
|
|
<LoaderIcon className="h-5 w-5 animate-spin text-white/10" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
widgets.map((widget) => renderItem(widget))
|
|
)}
|
|
<ToggleWidgetList />
|
|
</div>
|
|
);
|
|
}
|