Fix logged out snort deck
This commit is contained in:
parent
a31e30979d
commit
063052b622
@ -1,6 +1,6 @@
|
||||
import "./Deck.css";
|
||||
import { CSSProperties, useContext, useState } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { CSSProperties, useContext, useEffect, useState } from "react";
|
||||
import { Outlet, useNavigate } from "react-router-dom";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { NostrPrefix, createNostrLink } from "@snort/system";
|
||||
|
||||
@ -19,70 +19,39 @@ import { Thread } from "Element/Thread";
|
||||
import { RootTabs } from "Element/RootTabs";
|
||||
import { SpotlightMedia } from "Element/SpotlightMedia";
|
||||
import { ThreadContext, ThreadContextWrapper } from "Hooks/useThreadContext";
|
||||
import Toaster from "Toaster";
|
||||
import useLogin from "Hooks/useLogin";
|
||||
|
||||
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
|
||||
|
||||
export function SnortDeckLayout() {
|
||||
const login = useLogin();
|
||||
const navigate = useNavigate();
|
||||
const [thread, setThread] = useState<string>();
|
||||
|
||||
useLoginFeed();
|
||||
useTheme();
|
||||
useLoginRelays();
|
||||
const { proxy } = useImgProxy();
|
||||
|
||||
useEffect(() => {
|
||||
if (!login.publicKey) {
|
||||
navigate("/");
|
||||
}
|
||||
}, [login]);
|
||||
|
||||
if (!login.publicKey) return null;
|
||||
const cols = ["notes", "media", "notifications", "articles"] as Array<Cols>;
|
||||
return <div className="deck-layout">
|
||||
<DeckNav />
|
||||
<div className="deck-cols">
|
||||
<div>
|
||||
<div className="deck-col-header flex">
|
||||
<div className="flex f-1 g8">
|
||||
<Icon name="rows-01" size={24} />
|
||||
<FormattedMessage defaultMessage="Notes" />
|
||||
</div>
|
||||
<div className="f-1">
|
||||
<RootTabs base="/deck" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="deck-col-header flex g8">
|
||||
<Icon name="file-06" size={24} />
|
||||
<FormattedMessage defaultMessage="Articles" />
|
||||
</div>
|
||||
<div>
|
||||
<Articles />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="deck-col-header flex g8">
|
||||
<Icon name="camera-lens" size={24} />
|
||||
<FormattedMessage defaultMessage="Media" />
|
||||
</div>
|
||||
<div className="image-grid p">
|
||||
<TimelineFollows postsOnly={true} liveStreams={false} noteFilter={e => {
|
||||
const parsed = transformTextCached(e.id, e.content, e.tags);
|
||||
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
||||
return images.length > 0;
|
||||
}} noteRenderer={e => {
|
||||
const parsed = transformTextCached(e.id, e.content, e.tags);
|
||||
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
||||
|
||||
return <div className="media-note" key={e.id} style={{
|
||||
"--img": `url(${proxy(images[0].content)})`
|
||||
} as CSSProperties} onClick={() => setThread(e.id)}></div>
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="deck-col-header flex g8">
|
||||
<Icon name="bell-02" size={24} />
|
||||
<FormattedMessage defaultMessage="Notifications" />
|
||||
</div>
|
||||
<div>
|
||||
<NotificationsPage />
|
||||
</div>
|
||||
</div>
|
||||
{cols.map(c => {
|
||||
switch (c) {
|
||||
case "notes": return <NotesCol />
|
||||
case "media": return <MediaCol setThread={setThread} />
|
||||
case "articles": return <ArticlesCol />
|
||||
case "notifications": return <NotificationsCol />
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
{thread && <>
|
||||
<Modal onClose={() => setThread(undefined)} className="thread-overlay">
|
||||
@ -94,6 +63,7 @@ export function SnortDeckLayout() {
|
||||
</ThreadContextWrapper>
|
||||
</Modal>
|
||||
</>}
|
||||
<Toaster />
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -104,4 +74,78 @@ function SpotlightFromThread({ onClose }: { onClose: () => void }) {
|
||||
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
||||
|
||||
return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />
|
||||
}
|
||||
|
||||
function NotesCol() {
|
||||
return (
|
||||
<div>
|
||||
<div className="deck-col-header flex">
|
||||
<div className="flex f-1 g8">
|
||||
<Icon name="rows-01" size={24} />
|
||||
<FormattedMessage defaultMessage="Notes" />
|
||||
</div>
|
||||
<div className="f-1">
|
||||
<RootTabs base="/deck" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ArticlesCol() {
|
||||
return (
|
||||
<div>
|
||||
<div className="deck-col-header flex g8">
|
||||
<Icon name="file-06" size={24} />
|
||||
<FormattedMessage defaultMessage="Articles" />
|
||||
</div>
|
||||
<div>
|
||||
<Articles />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaCol({ setThread }: { setThread: (e: string) => void }) {
|
||||
const { proxy } = useImgProxy();
|
||||
return (
|
||||
<div>
|
||||
<div className="deck-col-header flex g8">
|
||||
<Icon name="camera-lens" size={24} />
|
||||
<FormattedMessage defaultMessage="Media" />
|
||||
</div>
|
||||
<div className="image-grid p">
|
||||
<TimelineFollows postsOnly={true} liveStreams={false} noteFilter={e => {
|
||||
const parsed = transformTextCached(e.id, e.content, e.tags);
|
||||
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
||||
return images.length > 0;
|
||||
}} noteRenderer={e => {
|
||||
const parsed = transformTextCached(e.id, e.content, e.tags);
|
||||
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
||||
|
||||
return <div className="media-note" key={e.id} style={{
|
||||
"--img": `url(${proxy(images[0].content)})`
|
||||
} as CSSProperties} onClick={() => setThread(e.id)}></div>
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NotificationsCol() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="deck-col-header flex g8">
|
||||
<Icon name="bell-02" size={24} />
|
||||
<FormattedMessage defaultMessage="Notifications" />
|
||||
</div>
|
||||
<div>
|
||||
<NotificationsPage />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
import { NostrPrefix, createNostrLink, tryParseNostrLink } from "@snort/system";
|
||||
|
||||
import messages from "./messages";
|
||||
|
||||
@ -19,7 +20,6 @@ import { profileLink } from "SnortUtils";
|
||||
import { getCurrentSubscription } from "Subscription";
|
||||
import Toaster from "Toaster";
|
||||
import Spinner from "Icons/Spinner";
|
||||
import { NostrPrefix, createNostrLink, tryParseNostrLink } from "@snort/system";
|
||||
import { fetchNip05Pubkey } from "Nip05/Verifier";
|
||||
import { useTheme } from "Hooks/useTheme";
|
||||
import { useLoginRelays } from "Hooks/useLoginRelays";
|
||||
|
Loading…
x
Reference in New Issue
Block a user