forked from Kieran/snort
Fix logged out snort deck
This commit is contained in:
parent
a31e30979d
commit
063052b622
@ -1,6 +1,6 @@
|
|||||||
import "./Deck.css";
|
import "./Deck.css";
|
||||||
import { CSSProperties, useContext, useState } from "react";
|
import { CSSProperties, useContext, useEffect, useState } from "react";
|
||||||
import { Outlet } from "react-router-dom";
|
import { Outlet, useNavigate } from "react-router-dom";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { NostrPrefix, createNostrLink } from "@snort/system";
|
import { NostrPrefix, createNostrLink } from "@snort/system";
|
||||||
|
|
||||||
@ -19,70 +19,39 @@ import { Thread } from "Element/Thread";
|
|||||||
import { RootTabs } from "Element/RootTabs";
|
import { RootTabs } from "Element/RootTabs";
|
||||||
import { SpotlightMedia } from "Element/SpotlightMedia";
|
import { SpotlightMedia } from "Element/SpotlightMedia";
|
||||||
import { ThreadContext, ThreadContextWrapper } from "Hooks/useThreadContext";
|
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() {
|
export function SnortDeckLayout() {
|
||||||
|
const login = useLogin();
|
||||||
|
const navigate = useNavigate();
|
||||||
const [thread, setThread] = useState<string>();
|
const [thread, setThread] = useState<string>();
|
||||||
|
|
||||||
useLoginFeed();
|
useLoginFeed();
|
||||||
useTheme();
|
useTheme();
|
||||||
useLoginRelays();
|
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">
|
return <div className="deck-layout">
|
||||||
<DeckNav />
|
<DeckNav />
|
||||||
<div className="deck-cols">
|
<div className="deck-cols">
|
||||||
<div>
|
{cols.map(c => {
|
||||||
<div className="deck-col-header flex">
|
switch (c) {
|
||||||
<div className="flex f-1 g8">
|
case "notes": return <NotesCol />
|
||||||
<Icon name="rows-01" size={24} />
|
case "media": return <MediaCol setThread={setThread} />
|
||||||
<FormattedMessage defaultMessage="Notes" />
|
case "articles": return <ArticlesCol />
|
||||||
</div>
|
case "notifications": return <NotificationsCol />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
{thread && <>
|
{thread && <>
|
||||||
<Modal onClose={() => setThread(undefined)} className="thread-overlay">
|
<Modal onClose={() => setThread(undefined)} className="thread-overlay">
|
||||||
@ -94,6 +63,7 @@ export function SnortDeckLayout() {
|
|||||||
</ThreadContextWrapper>
|
</ThreadContextWrapper>
|
||||||
</Modal>
|
</Modal>
|
||||||
</>}
|
</>}
|
||||||
|
<Toaster />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -104,4 +74,78 @@ function SpotlightFromThread({ onClose }: { onClose: () => void }) {
|
|||||||
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
||||||
|
|
||||||
return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />
|
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 { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
import { useUserProfile } from "@snort/system-react";
|
import { useUserProfile } from "@snort/system-react";
|
||||||
|
import { NostrPrefix, createNostrLink, tryParseNostrLink } from "@snort/system";
|
||||||
|
|
||||||
import messages from "./messages";
|
import messages from "./messages";
|
||||||
|
|
||||||
@ -19,7 +20,6 @@ import { profileLink } from "SnortUtils";
|
|||||||
import { getCurrentSubscription } from "Subscription";
|
import { getCurrentSubscription } from "Subscription";
|
||||||
import Toaster from "Toaster";
|
import Toaster from "Toaster";
|
||||||
import Spinner from "Icons/Spinner";
|
import Spinner from "Icons/Spinner";
|
||||||
import { NostrPrefix, createNostrLink, tryParseNostrLink } from "@snort/system";
|
|
||||||
import { fetchNip05Pubkey } from "Nip05/Verifier";
|
import { fetchNip05Pubkey } from "Nip05/Verifier";
|
||||||
import { useTheme } from "Hooks/useTheme";
|
import { useTheme } from "Hooks/useTheme";
|
||||||
import { useLoginRelays } from "Hooks/useLoginRelays";
|
import { useLoginRelays } from "Hooks/useLoginRelays";
|
||||||
|
Loading…
Reference in New Issue
Block a user