feat: Added routing
This commit is contained in:
parent
0427296110
commit
eb4e52f3bc
41
package-lock.json
generated
41
package-lock.json
generated
@ -13,7 +13,8 @@
|
||||
"nostr-tools": "^1.12.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0"
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-router-dom": "^6.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.37",
|
||||
@ -1010,6 +1011,14 @@
|
||||
"react-dom": "16.8.0 || >=17.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.1.tgz",
|
||||
"integrity": "sha512-bgVQM4ZJ2u2CM8k1ey70o1ePFXsEzYVZoWghh6WjM8p59jQ7HxzbHW4SbnWFG7V9ig9chLawQxDTZ3xzOF8MkQ==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@scure/base": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz",
|
||||
@ -4355,6 +4364,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.14.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.1.tgz",
|
||||
"integrity": "sha512-U4PfgvG55LdvbQjg5Y9QRWyVxIdO1LlpYT7x+tMAxd9/vmiPuJhIwdxZuIQLN/9e3O4KFDHYfR9gzGeYMasW8g==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.7.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.14.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.1.tgz",
|
||||
"integrity": "sha512-ssF6M5UkQjHK70fgukCJyjlda0Dgono2QGwqGvuk7D+EDGHdacEN3Yke2LTMjkrpHuFwBfDFsEjGVXBDmL+bWw==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.7.1",
|
||||
"react-router": "6.14.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-side-effect": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
|
||||
|
@ -15,7 +15,8 @@
|
||||
"nostr-tools": "^1.12.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0"
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-router-dom": "^6.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.37",
|
||||
|
50
src/App.tsx
50
src/App.tsx
@ -7,34 +7,42 @@ import AuthorProfile from "./AuthorProfile";
|
||||
import IconFullScreen from "./IconFullScreen";
|
||||
import Slide from "./Slide";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { useParams } from "react-router-dom";
|
||||
/*
|
||||
FEATURES:
|
||||
- show tags
|
||||
- show content text (how to beautify?, crop?)
|
||||
- jump to note
|
||||
- negative hashtag filter
|
||||
- login to use your own feed
|
||||
- login to use your your blocked/muted list
|
||||
- Keypoard shortcuts, arrow, spacebar
|
||||
- jump tu next image
|
||||
- jump to previous image????
|
||||
- pause?
|
||||
- Save-Mode and block NSFW content??
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
|
||||
type NostrImage = {
|
||||
url: string;
|
||||
author: NDKUser;
|
||||
};
|
||||
|
||||
const parseUrl = () => {
|
||||
let npub: string | undefined = undefined;
|
||||
let tags: string | undefined = undefined;
|
||||
if (window.location.pathname.startsWith("/npub")) {
|
||||
npub = window.location.pathname.replace("/", "");
|
||||
}
|
||||
if (window.location.hash.startsWith("#")) {
|
||||
tags = window.location.hash.replace("#", "");
|
||||
}
|
||||
return { npub, tags };
|
||||
};
|
||||
|
||||
const buildFilter = (
|
||||
setTitle: React.Dispatch<React.SetStateAction<string>>
|
||||
setTitle: React.Dispatch<React.SetStateAction<string>>,
|
||||
tags?: string,
|
||||
npub?: string
|
||||
) => {
|
||||
const filter: NDKFilter = {
|
||||
kinds: [1],
|
||||
limit: 1000,
|
||||
limit: 2000,
|
||||
};
|
||||
|
||||
const { npub, tags } = parseUrl();
|
||||
|
||||
if (npub) {
|
||||
filter.authors = [nip19.decode(npub).data as string];
|
||||
} else {
|
||||
@ -80,9 +88,10 @@ const App = () => {
|
||||
const [activeImages, setActiveImages] = useState<NostrImage[]>([]);
|
||||
const upcommingImage = useRef<NostrImage>();
|
||||
const [title, setTitle] = useState("nostr-slideshow");
|
||||
const { tags, npub } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
const postSubscription = ndk.subscribe(buildFilter(setTitle));
|
||||
const postSubscription = ndk.subscribe(buildFilter(setTitle, tags, npub));
|
||||
|
||||
postSubscription.on("event", (event) => {
|
||||
setPosts((oldPosts) => {
|
||||
@ -146,8 +155,11 @@ const App = () => {
|
||||
const activeProfile = activeNpub && getProfile(activeNpub);
|
||||
|
||||
useEffect(() => {
|
||||
const {npub}=parseUrl();
|
||||
if (npub && activeProfile && activeProfile.displayName) {
|
||||
if (
|
||||
npub &&
|
||||
activeProfile &&
|
||||
(activeProfile.displayName || activeProfile.name)
|
||||
) {
|
||||
setTitle(
|
||||
activeProfile.displayName || activeProfile.name + " | nostr-slideshow"
|
||||
);
|
||||
|
22
src/main.tsx
22
src/main.tsx
@ -3,11 +3,31 @@ import ReactDOM from "react-dom/client";
|
||||
import { NDKProvider } from "@nostr-dev-kit/ndk-react";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <App />,
|
||||
},
|
||||
{
|
||||
path: "tags/:tags",
|
||||
element: <App />,
|
||||
},
|
||||
{
|
||||
path: "profile/:npub",
|
||||
element: <App />,
|
||||
},
|
||||
{
|
||||
path: "/:npub",
|
||||
element: <App />,
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<NDKProvider>
|
||||
<App />
|
||||
<RouterProvider router={router} />
|
||||
</NDKProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user