feed

src/js/components/feed/Feed.tsx

@@ -158,19 +158,19 @@ const Feed = ({ showDisplayAs, filterOptions, emptyMessage }: Props) => {
 
   const renderFilterOptions = () => {
     return (
-      <div className="flex mb-4 gap-2 mx-2 md:mx-0">
-        {filterOptions.map((filterOption) => (
+      <div className="flex mb-4 gap-2 mx-2 md:mx-4">
+        {filterOptions.map((opt) => (
           <button
-            key={filterOption.name}
+            key={opt.name}
             className={`btn btn-sm ${
-              filterOption.name === filterOption.name ? 'btn-primary' : 'btn-ghost'
+              filterOption.name === opt.name ? 'btn-primary' : 'btn-neutral'
             }`}
             onClick={() => {
-              setFilterOption(filterOption);
+              setFilterOption(opt);
               setDisplayCount(PAGE_SIZE);
             }}
           >
-            {filterOption.name}
+            {opt.name}
           </button>
         ))}
       </div>

src/js/hooks/useSubscribe.ts

@@ -10,7 +10,7 @@ const useSubscribe = (ops: {
   mergeSubscriptions?: boolean;
   enabled?: boolean;
 }) => {
-  const [sortedEvents] = useState(new SortedEventMap());
+  const [sortedEvents, setSortedEvents] = useState(new SortedEventMap());
   const [loadMoreUnsubscribe, setLoadMoreUnsubscribe] = useState<Unsubscribe | null>(null);
   const { filter, enabled = true, sinceLastOpened = false, mergeSubscriptions = true } = ops;
   const [events, setEvents] = useState<Event[]>([]);
@@ -21,6 +21,10 @@ const useSubscribe = (ops: {
     setEvents(sortedEvents.events());
   };
 
+  useEffect(() => {
+    setSortedEvents(new SortedEventMap());
+  }, [filter]);
+
   useEffect(() => {
     if (!enabled || !filter) return;
     filter.limit = filter.limit || 10;

src/js/views/Profile.tsx

@@ -1,6 +1,7 @@
 import { Helmet } from 'react-helmet';
 import { route } from 'preact-router';
-import { Link } from 'preact-router/match';
+
+import Events from '@/nostr/Events';
 
 import Copy from '../components/buttons/Copy';
 import Feed from '../components/feed/Feed';
@@ -76,77 +77,6 @@ class Profile extends View {
     Key.login({ rpub: this.state.hexPub });
   }
 
-  renderTabs() {
-    const currentProfileUrl = window.location.pathname.split('/')[1];
-    const path = window.location.pathname;
-
-    const linkClass = (href) =>
-      path === href ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-neutral';
-
-    return (
-      <div className="flex mx-4 gap-2 mb-4 overflow-x-auto">
-        <Link className={linkClass('/' + currentProfileUrl)} href={'/' + currentProfileUrl}>
-          {t('posts')}
-          <Show when={this.state.noPosts}>{' (0)'}</Show>
-        </Link>
-        <Link
-          className={linkClass('/' + currentProfileUrl + '/replies')}
-          href={'/' + currentProfileUrl + '/replies'}
-        >
-          {t('posts')} & {t('replies')}
-          <Show when={this.state.noReplies}>{' (0)'}</Show>
-        </Link>
-        <Link
-          className={linkClass('/' + currentProfileUrl + '/likes')}
-          href={'/' + currentProfileUrl + '/likes'}
-        >
-          {t('likes')}
-          <Show when={this.state.noLikes}>{' (0)'}</Show>
-        </Link>
-      </div>
-    );
-  }
-
-  renderTab() {
-    if (!this.state.hexPub) {
-      return <div></div>;
-    }
-
-    if (this.props.tab === 'replies') {
-      return (
-        <Feed
-          key={`posts${this.state.hexPub}`}
-          filterOptions={[
-            { name: 'likes', filter: { authors: [this.state.hexPub], kinds: [1], limit: 5 } },
-          ]}
-        />
-      );
-    } else if (this.props.tab === 'likes') {
-      return (
-        <Feed
-          key={`likes${this.state.hexPub}`}
-          filterOptions={[
-            { name: 'likes', filter: { authors: [this.state.hexPub], kinds: [7], limit: 5 } },
-          ]}
-        />
-      );
-    } else if (this.props.tab === 'media') {
-      return <div>TODO media message feed</div>;
-    }
-
-    return (
-      <div>
-        {this.getNotification()}
-        <Feed
-          key={`posts${this.state.hexPub}`}
-          filterOptions={[
-            { name: 'likes', filter: { authors: [this.state.hexPub], kinds: [1], limit: 5 } },
-          ]}
-        />
-      </div>
-    );
-  }
-
   renderView() {
     const { hexPub, display_name, name, profile, banner, picture, blocked } = this.state;
 
@@ -182,8 +112,24 @@ class Profile extends View {
           </Helmet>
           <ProfileCard npub={this.state.npub} hexPub={this.state.hexPub} />
           <Show when={!blocked}>
-            {this.renderTabs()}
-            {this.renderTab()}
+            <Feed
+              key={`posts${this.state.hexPub}`}
+              filterOptions={[
+                {
+                  name: t('posts'),
+                  filter: { authors: [this.state.hexPub], kinds: [1], limit: 5 },
+                  filterFn: (event) => !Events.getEventReplyingTo(event),
+                },
+                {
+                  name: t('posts_and_replies'),
+                  filter: { authors: [this.state.hexPub], kinds: [1], limit: 5 },
+                },
+                {
+                  name: t('likes'),
+                  filter: { authors: [this.state.hexPub], kinds: [7], limit: 5 },
+                },
+              ]}
+            />
           </Show>
         </div>
       </>