From a3525e05a25cf8f3db8d0de4796aa0627421c3bb Mon Sep 17 00:00:00 2001
From: florian <>
Date: Fri, 8 Mar 2024 12:53:06 +0000
Subject: [PATCH] fix: Fixed title, added banner to home page

---
 TODO.md                       |  1 -
 src/components/Home/index.tsx | 12 +++++++++++-
 src/ngine/hooks/useEvents.ts  |  2 +-
 src/utils/useProfile.ts       | 17 +++++++++++------
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/TODO.md b/TODO.md
index 1d4f48a..16c539f 100644
--- a/TODO.md
+++ b/TODO.md
@@ -9,7 +9,6 @@
 - move settings dialog to main start screen
 - replace search icon with nav back button
 - record demo explaination video
-- global can not be accessed any more
 - different header for multiple tags??
 - navigation entry points:
   - Search (custom hashtags, profile search, content search, community seaarch)
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 6cdce7c..1e2762a 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -5,9 +5,12 @@ import { useGlobalState } from '../../utils/globalState';
 import usePeopleLists from '../../utils/useLists';
 import { createImgProxyUrl } from '../nostrImageDownload';
 import { useState } from 'react';
+import { Helmet } from 'react-helmet';
+import useProfile from '../../utils/useProfile';
 
 const Home = () => {
   const { nav, currentSettings } = useNav();
+  const { title } = useProfile(currentSettings);
   const [showAdult, setShowAdult] = useState(currentSettings.showAdult || false);
   const [state] = useGlobalState();
   const topicKeys = Object.keys(topics);
@@ -15,6 +18,9 @@ const Home = () => {
 
   return (
     <div className="home-container">
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
       <div className="home">
         <h2>Topics</h2>
         <div className="topics">
@@ -74,7 +80,11 @@ const Home = () => {
               </div>
               <div
                 className="topic"
-                style={{}}
+                style={{
+                  backgroundImage:
+                    state.profile?.banner &&
+                    `linear-gradient(170deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), url(${createImgProxyUrl(state.profile?.banner, 600, -1)})`,
+                }}
                 onClick={() =>
                   nav({
                     ...currentSettings,
diff --git a/src/ngine/hooks/useEvents.ts b/src/ngine/hooks/useEvents.ts
index be02f93..d1c501b 100644
--- a/src/ngine/hooks/useEvents.ts
+++ b/src/ngine/hooks/useEvents.ts
@@ -15,7 +15,7 @@ export default function useEvents(filter: NDKFilter | NDKFilter[], opts?: Subscr
   const [eose, setEose] = useState(false);
   const [events, setEvents] = useState<NDKEvent[]>([]);
   const id = useMemo(() => {
-    console.warn('new ID!!!');
+    // console.warn('new ID!!!');
     return hashSha256(filter);
   }, [filter]);
 
diff --git a/src/utils/useProfile.ts b/src/utils/useProfile.ts
index 56af083..50c1059 100644
--- a/src/utils/useProfile.ts
+++ b/src/utils/useProfile.ts
@@ -1,32 +1,37 @@
-import { appName } from '../components/env';
+import { appName, topics } from '../components/env';
 import { useEffect, useState } from 'react';
 import { Settings } from './useNav';
 import { NostrImage } from '../components/nostrImageDownload';
 import useProfileNgine from '../ngine/hooks/useProfile';
 import { nip19 } from 'nostr-tools';
 import { NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk';
+import { useLocation, useParams } from 'react-router-dom';
 
 // TODO maybe remove profile and only build title here?? useTitle?
 
 const useProfile = (settings: Settings, activeImage?: NostrImage) => {
   const [title, setTitle] = useState(appName);
+  const location = useLocation();
+  const { topic } = useParams();
 
   const profileNpub = settings.npubs.length == 1 ? settings.npubs[0] : activeImage && activeImage?.author;
 
   const pubKeyHex = profileNpub ? (nip19.decode(profileNpub).data as string) : '';
   const activeProfile = useProfileNgine(pubKeyHex, NDKSubscriptionCacheUsage.ONLY_RELAY);
 
-  // console.log({profileNpub, pubKeyHex, activeProfile})
-
   useEffect(() => {
     if (settings.npubs.length > 0 && activeProfile && (activeProfile.displayName || activeProfile.name)) {
       setTitle((activeProfile.displayName || activeProfile.name) + ` | ${appName}`);
     } else if (settings.tags && settings.tags.length > 0) {
       setTitle('#' + settings.tags.join(' #') + ` | ${appName}`);
-    } else {
-      setTitle(`Random photos from popular hashtags | ${appName}`);
+    } else if (topic) {
+      setTitle(`${topics[topic].name} | ${appName}`);
+    } else if (location.pathname == '/global') {
+      setTitle(`Global | ${appName}`);
+    } else if (location.pathname == '/') {
+      setTitle(`Home | ${appName}`);
     }
-  }, [activeProfile, settings.npubs, settings.tags]);
+  }, [activeProfile, settings.npubs, settings.tags, topic, location]);
 
   return {
     activeProfile,