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",
|
"nostr-tools": "^1.12.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^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": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.0.37",
|
"@types/react": "^18.0.37",
|
||||||
@ -1010,6 +1011,14 @@
|
|||||||
"react-dom": "16.8.0 || >=17.x"
|
"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": {
|
"node_modules/@scure/base": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz",
|
||||||
@ -4355,6 +4364,36 @@
|
|||||||
"node": ">=0.10.0"
|
"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": {
|
"node_modules/react-side-effect": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
|
||||||
|
@ -15,7 +15,8 @@
|
|||||||
"nostr-tools": "^1.12.1",
|
"nostr-tools": "^1.12.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^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": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.0.37",
|
"@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 IconFullScreen from "./IconFullScreen";
|
||||||
import Slide from "./Slide";
|
import Slide from "./Slide";
|
||||||
import { Helmet } from "react-helmet";
|
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 = {
|
type NostrImage = {
|
||||||
url: string;
|
url: string;
|
||||||
author: NDKUser;
|
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 = (
|
const buildFilter = (
|
||||||
setTitle: React.Dispatch<React.SetStateAction<string>>
|
setTitle: React.Dispatch<React.SetStateAction<string>>,
|
||||||
|
tags?: string,
|
||||||
|
npub?: string
|
||||||
) => {
|
) => {
|
||||||
const filter: NDKFilter = {
|
const filter: NDKFilter = {
|
||||||
kinds: [1],
|
kinds: [1],
|
||||||
limit: 1000,
|
limit: 2000,
|
||||||
};
|
};
|
||||||
|
|
||||||
const { npub, tags } = parseUrl();
|
|
||||||
|
|
||||||
if (npub) {
|
if (npub) {
|
||||||
filter.authors = [nip19.decode(npub).data as string];
|
filter.authors = [nip19.decode(npub).data as string];
|
||||||
} else {
|
} else {
|
||||||
@ -80,9 +88,10 @@ const App = () => {
|
|||||||
const [activeImages, setActiveImages] = useState<NostrImage[]>([]);
|
const [activeImages, setActiveImages] = useState<NostrImage[]>([]);
|
||||||
const upcommingImage = useRef<NostrImage>();
|
const upcommingImage = useRef<NostrImage>();
|
||||||
const [title, setTitle] = useState("nostr-slideshow");
|
const [title, setTitle] = useState("nostr-slideshow");
|
||||||
|
const { tags, npub } = useParams();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const postSubscription = ndk.subscribe(buildFilter(setTitle));
|
const postSubscription = ndk.subscribe(buildFilter(setTitle, tags, npub));
|
||||||
|
|
||||||
postSubscription.on("event", (event) => {
|
postSubscription.on("event", (event) => {
|
||||||
setPosts((oldPosts) => {
|
setPosts((oldPosts) => {
|
||||||
@ -146,8 +155,11 @@ const App = () => {
|
|||||||
const activeProfile = activeNpub && getProfile(activeNpub);
|
const activeProfile = activeNpub && getProfile(activeNpub);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const {npub}=parseUrl();
|
if (
|
||||||
if (npub && activeProfile && activeProfile.displayName) {
|
npub &&
|
||||||
|
activeProfile &&
|
||||||
|
(activeProfile.displayName || activeProfile.name)
|
||||||
|
) {
|
||||||
setTitle(
|
setTitle(
|
||||||
activeProfile.displayName || activeProfile.name + " | nostr-slideshow"
|
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 { NDKProvider } from "@nostr-dev-kit/ndk-react";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import "./index.css";
|
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(
|
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<NDKProvider>
|
<NDKProvider>
|
||||||
<App />
|
<RouterProvider router={router} />
|
||||||
</NDKProvider>
|
</NDKProvider>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user