convert some fn components

src/js/views/KeyConverter.tsx

@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
+
+import { RouteProps } from '@/views/types.ts';
 
 import Header from '../components/Header';
 import Key from '../nostr/Key';
 import { translate as t } from '../translations/Translation.mjs';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function KeyConverter(_props) {
+const KeyConverter: React.FC<RouteProps> = () => {
   const [key, setKey] = useState('');
 
   const hex = Key.toNostrHexAddress(key);
@@ -55,4 +56,6 @@ export default function KeyConverter(_props) {
       </div>
     </>
   );
-}
+};
+
+export default KeyConverter;

src/js/views/Note.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'preact/hooks';
 import { route } from 'preact-router';
 
 import CreateNoteForm from '../components/create/CreateNoteForm';
@@ -5,32 +6,17 @@ import EventComponent from '../components/events/EventComponent';
 import Key from '../nostr/Key';
 import { translate as t } from '../translations/Translation.mjs';
 
-import View from './View';
-
-class Note extends View {
-  constructor() {
-    super();
-    this.class = 'public-messages-view';
-  }
-
-  componentDidMount() {
-    const nostrBech32Id = Key.toNostrBech32Address(this.props.id, 'note');
-    if (nostrBech32Id && this.props.id !== nostrBech32Id) {
+const Note = (props) => {
+  useEffect(() => {
+    const nostrBech32Id = Key.toNostrBech32Address(props.id, 'note');
+    if (nostrBech32Id && props.id !== nostrBech32Id) {
       route(`/${nostrBech32Id}`, true);
       return;
     }
-    this.restoreScrollPosition();
-  }
+  }, [props.id]);
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.id !== this.props.id) {
-      this.restoreScrollPosition();
-    }
-  }
-
-  renderView() {
   let content;
-    if (this.props.id === 'new') {
+  if (props.id === 'new') {
     content = (
       <div className="m-2">
         <CreateNoteForm
@@ -44,8 +30,8 @@ class Note extends View {
   } else {
     content = (
       <EventComponent
-          id={this.props.id}
-          key={this.props.id}
+        id={props.id}
+        key={props.id}
         standalone={true}
         showRepliedMsg={true}
         showReplies={Infinity}
@@ -53,7 +39,6 @@ class Note extends View {
     );
   }
   return <div className="w-full">{content}</div>;
-  }
-}
+};
 
 export default Note;

src/js/views/feeds/Global.tsx

@@ -1,33 +1,15 @@
+import React, { useMemo } from 'react';
+
 import CreateNoteForm from '@/components/create/CreateNoteForm';
 import FeedComponent from '@/components/feed/Feed';
 import OnboardingNotification from '@/components/onboarding/OnboardingNotification';
 import { getEventReplyingTo } from '@/nostr/utils';
 import { translate as t } from '@/translations/Translation.mjs';
+import { RouteProps } from '@/views/types.ts';
 
-import View from '../View';
-
-class Global extends View {
-  constructor() {
-    super();
-    this.state = { sortedMessages: [] };
-    this.id = 'message-view';
-    this.class = 'public-messages-view';
-  }
-
-  componentDidMount() {
-    this.restoreScrollPosition();
-  }
-
-  renderView() {
-    return (
-      <div className="flex flex-row">
-        <div className="flex flex-col w-full">
-          <OnboardingNotification />
-          <div className="hidden md:block px-4">
-            <CreateNoteForm autofocus={false} placeholder={t('whats_on_your_mind')} />
-          </div>
-          <FeedComponent
-            filterOptions={[
+const Global: React.FC<RouteProps> = () => {
+  const filterOptions = useMemo(
+    () => [
       {
         name: t('posts'),
         filter: { kinds: [1, 6], limit: 10 },
@@ -39,12 +21,21 @@ class Global extends View {
         filter: { kinds: [1, 6], limit: 5 },
         eventProps: { showRepliedMsg: true, fullWidth: false },
       },
-            ]}
-          />
+    ],
+    [],
+  );
+
+  return (
+    <div className="flex flex-row">
+      <div className="flex flex-col w-full">
+        <OnboardingNotification />
+        <div className="hidden md:block px-4">
+          <CreateNoteForm autofocus={false} placeholder={t('whats_on_your_mind')} />
+        </div>
+        <FeedComponent filterOptions={filterOptions} />
       </div>
     </div>
   );
-  }
-}
+};
 
 export default Global;

src/js/views/feeds/Home.tsx

@@ -1,48 +1,58 @@
+import { useEffect, useMemo, useState } from 'react';
+
 import CreateNoteForm from '@/components/create/CreateNoteForm';
 import FeedComponent from '@/components/feed/Feed';
 import Show from '@/components/helpers/Show';
 import OnboardingNotification from '@/components/onboarding/OnboardingNotification';
 import Key from '@/nostr/Key';
-import { Unsubscribe } from '@/nostr/PubSub';
 import { getEventReplyingTo } from '@/nostr/utils';
 import { translate as t } from '@/translations/Translation.mjs';
 import { ID, STR } from '@/utils/UniqueIds';
+import { RouteProps } from '@/views/types.ts';
 
 import SocialNetwork from '../../nostr/SocialNetwork';
-import View from '../View';
 
-class Home extends View {
-  unsub?: Unsubscribe;
-
-  constructor() {
-    super();
-    const followedUsers: string[] = Array.from(
+const Home: React.FC<RouteProps> = () => {
+  const [followedUsers, setFollowedUsers] = useState(() => {
+    const initialFollowedUsers = Array.from(
       SocialNetwork.followedByUser.get(ID(Key.getPubKey())) || [],
-    ).map((n) => STR(n));
-    this.state = {
-      followedUsers,
-    };
-    this.id = 'message-view';
-    this.class = 'public-messages-view';
-  }
+    );
+    return initialFollowedUsers.map((n) => STR(n));
+  });
 
-  componentDidMount() {
-    this.restoreScrollPosition();
-    this.unsub = SocialNetwork.getFollowedByUser(
+  useEffect(() => {
+    const unsub = SocialNetwork.getFollowedByUser(
       Key.getPubKey(),
-      (followedUsers) => {
-        this.setState({ followedUsers: Array.from(followedUsers) });
+      (newFollowedUsers) => {
+        setFollowedUsers(Array.from(newFollowedUsers));
       },
       true,
     );
-  }
 
-  componentWillUnmount() {
-    super.componentWillUnmount();
-    this.unsub?.();
-  }
+    return () => {
+      unsub?.();
+    };
+  }, []);
+
+  const filterOptions = useMemo(
+    () => [
+      {
+        name: t('posts'),
+        filter: { kinds: [1, 6], authors: followedUsers, limit: 10 },
+        filterFn: (event) => !getEventReplyingTo(event),
+        eventProps: { showRepliedMsg: true },
+      },
+      {
+        name: t('posts_and_replies'),
+        filter: { kinds: [1, 6], authors: followedUsers, limit: 5 },
+        eventProps: { showRepliedMsg: true, fullWidth: false },
+      },
+    ],
+    [followedUsers],
+  );
+
+  console.log('followedUsers.length', followedUsers.length); // TODO this keeps changing, fix
 
-  renderView() {
   return (
     <div className="flex flex-row">
       <div className="flex flex-col w-full">
@@ -50,28 +60,12 @@ class Home extends View {
         <div className="hidden md:block px-4">
           <CreateNoteForm autofocus={false} placeholder={t('whats_on_your_mind')} />
         </div>
-          <Show when={this.state.followedUsers.length}>
-            <FeedComponent
-              key={`feed-${this.state.followedUsers.length}`}
-              filterOptions={[
-                {
-                  name: t('posts'),
-                  filter: { kinds: [1, 6], authors: this.state.followedUsers, limit: 10 },
-                  filterFn: (event) => !getEventReplyingTo(event),
-                  eventProps: { showRepliedMsg: true },
-                },
-                {
-                  name: t('posts_and_replies'),
-                  filter: { kinds: [1, 6], authors: this.state.followedUsers, limit: 5 },
-                  eventProps: { showRepliedMsg: true, fullWidth: false },
-                },
-              ]}
-            />
+        <Show when={followedUsers.length}>
+          <FeedComponent key={`feed-${followedUsers.length}`} filterOptions={filterOptions} />
         </Show>
       </div>
     </div>
   );
-  }
-}
+};
 
 export default Home;

src/js/views/feeds/Notifications.tsx

@@ -1,20 +1,43 @@
+import React, { useEffect, useMemo } from 'react';
 import debounce from 'lodash/debounce';
 import { Event } from 'nostr-tools';
 
 import EventDB from '@/nostr/EventDB';
 import Events from '@/nostr/Events';
 import Key from '@/nostr/Key';
+import { RouteProps } from '@/views/types.ts';
 
 import Feed from '../../components/feed/Feed';
 import localState from '../../LocalState';
 import Session from '../../nostr/Session';
 import { translate as t } from '../../translations/Translation.mjs';
-import View from '../View';
 
-export default class Notifications extends View {
-  class = 'public-messages-view';
+const Notifications: React.FC<RouteProps> = () => {
+  const filterOptions = useMemo(
+    () => [
+      {
+        name: 'notifications',
+        filter: { kinds: [1, 6, 7, 9735], '#p': [Key.getPubKey()], limit: 20 },
+        eventProps: { fullWidth: false },
+      },
+    ],
+    [],
+  );
 
-  updateNotificationsLastOpened = debounce(() => {
+  const fetchEvents = () => {
+    const events = Events.notifications.eventIds
+      .map((id) => EventDB.get(id))
+      .filter((event): event is Event => Boolean(event)) as Event[];
+
+    return {
+      events,
+      loadMore: () => {},
+    };
+  };
+
+  const updateNotificationsLastOpened = useMemo(
+    () =>
+      debounce(() => {
         const node = localState.get('settings').get('notifications').get('saveLastOpened');
         node.once((saveLastOpened) => {
           if (saveLastOpened !== false) {
@@ -28,37 +51,23 @@ export default class Notifications extends View {
             localState.get('unseenNotificationCount').put(0);
           }
         });
-  }, 1000);
+      }, 1000),
+    [],
+  );
 
-  componentDidMount() {
-    this.restoreScrollPosition();
-    this.updateNotificationsLastOpened();
-  }
+  useEffect(() => {
+    updateNotificationsLastOpened();
+  }, [updateNotificationsLastOpened]);
 
-  renderView() {
   return (
     <Feed
       key="notifications"
       showDisplayAs={false}
       emptyMessage={t('no_notifications_yet')}
-        filterOptions={[
-          {
-            name: 'notifications',
-            filter: { kinds: [1, 6, 7, 9735], '#p': [Key.getPubKey()], limit: 20 },
-            eventProps: { fullWidth: false },
-          },
-        ]}
-        fetchEvents={() => {
-          const events = Events.notifications.eventIds
-            .map((id) => EventDB.get(id))
-            .filter((event): event is Event => Boolean(event)) as Event[];
-
-          return {
-            events,
-            loadMore: () => {},
-          };
-        }}
+      filterOptions={filterOptions}
+      fetchEvents={fetchEvents}
     />
   );
-  }
-}
+};
+
+export default Notifications;

src/js/views/profile/Follows.tsx

@@ -8,7 +8,6 @@ import Follow from '../../components/buttons/Follow.tsx';
 import Show from '../../components/helpers/Show.tsx';
 import Avatar from '../../components/user/Avatar.tsx';
 import Name from '../../components/user/Name.tsx';
-import localState from '../../LocalState.ts';
 import Key from '../../nostr/Key.ts';
 import SocialNetwork from '../../nostr/SocialNetwork.ts';
 import { translate as t } from '../../translations/Translation.mjs';
@@ -45,7 +44,7 @@ class Follows extends View {
     this.myPub = null;
     this.follows = new Set();
     this.id = 'follows-view';
-    this.state = { follows: [], contacts: {} };
+    this.state = { follows: [] };
   }
 
   sortByName(aK, bK) {
@@ -115,7 +114,6 @@ class Follows extends View {
     if (this.props.id) {
       this.myPub = Key.toNostrBech32Address(Key.getPubKey(), 'npub');
       this.props.followers ? this.getFollowers() : this.getFollows();
-      localState.get('contacts').on(this.inject());
     }
   }