feat: Added routing

package-lock.json

@@ -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",

package.json

@@ -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",

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"
       );

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>
 );