Basic reeds select

src/components/FeedSelect/ReedSelect.tsx

@@ -0,0 +1,119 @@
+import { Component } from 'solid-js';
+import { useAccountContext } from '../../contexts/AccountContext';
+import { useHomeContext } from '../../contexts/HomeContext';
+import { useReadsContext } from '../../contexts/ReadsContext';
+import { useSettingsContext } from '../../contexts/SettingsContext';
+import { hookForDev } from '../../lib/devTools';
+import { fetchStoredFeed } from '../../lib/localStore';
+import { FeedOption, PrimalFeed, SelectionOption } from '../../types/primal';
+import SelectBox from '../SelectBox/SelectBox';
+import SelectionBox from '../SelectionBox/SelectionBox';
+
+const ReedSelect: Component<{ isPhone?: boolean, id?: string, big?: boolean}> = (props) => {
+
+  const account = useAccountContext();
+  const reeds = useReadsContext();
+  const settings = useSettingsContext();
+
+  const findFeed = (hex: string, includeReplies: string) => {
+    const ir = includeReplies === 'undefined' ? undefined :
+      includeReplies === 'true';
+
+    return settings?.availableFeeds.find(f => {
+      const isHex = f.hex === hex;
+      const isOpt = typeof ir === typeof f.includeReplies ?
+        f.includeReplies === ir :
+        false;
+
+      return isHex && isOpt;
+    });
+  };
+
+  const selectFeed = (option: FeedOption) => {
+
+    const [hex, includeReplies] = option.value?.split('_') || [];
+    // const selector = document.getElementById('defocus');
+
+    // selector?.focus();
+    // selector?.blur();
+
+    const feed = {
+      hex: option.value,
+      name: option.label,
+    };
+
+    reeds?.actions.clearNotes();
+    reeds?.actions.selectFeed(feed);
+  };
+
+  const isSelected = (option: FeedOption) => {
+    const selected = reeds?.selectedFeed;
+
+
+    if (selected?.hex && option.value) {
+      const t = option.value.split('_');
+
+      const isHex = encodeURI(selected.hex) == t[0];
+      const isOpt = t[1] === 'undefined' ?
+        selected.includeReplies === undefined :
+        selected.includeReplies?.toString() === t[1];
+
+      return isHex && isOpt;
+    }
+
+    return false;
+  }
+
+  const options:() => SelectionOption[] = () => {
+    return [
+      {
+        label: 'My Reads',
+        value: account?.publicKey || '',
+      },
+      {
+        label: 'All Reads',
+        value: 'none',
+      },
+
+    ]
+  };
+
+  const initialValue = () => {
+    const selected = reeds?.selectedFeed;
+
+    if (!selected) {
+      return options()[0];
+    }
+
+    return {
+      label: selected.name,
+      value: selected.hex || '',
+    }
+  }
+
+  const selectedValue = () => {
+    if (!reeds?.selectedFeed)
+      return initialValue();
+
+    const value = `${encodeURI(reeds.selectedFeed.hex || '')}`;
+
+    return {
+      label: reeds.selectedFeed.name,
+      value,
+    };
+  };
+
+  return (
+    <SelectionBox
+      options={options()}
+      onChange={selectFeed}
+      initialValue={initialValue()}
+      value={selectedValue()}
+      isSelected={isSelected}
+      isPhone={props.isPhone}
+      big={props.big}
+    />
+  );
+}
+
+export default hookForDev(ReedSelect);

src/components/HomeHeader/ReadsHeader.tsx

@@ -0,0 +1,37 @@
+import { Component, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
+import Avatar from '../Avatar/Avatar';
+
+import styles from './HomeHeader.module.scss';
+import FeedSelect from '../FeedSelect/FeedSelect';
+import { useAccountContext } from '../../contexts/AccountContext';
+import SmallCallToAction from '../SmallCallToAction/SmallCallToAction';
+import { useHomeContext } from '../../contexts/HomeContext';
+import { useIntl } from '@cookbook/solid-intl';
+import { useSettingsContext } from '../../contexts/SettingsContext';
+import { placeholders as t, actions as tActions, feedNewPosts } from '../../translations';
+import { hookForDev } from '../../lib/devTools';
+import ButtonPrimary from '../Buttons/ButtonPrimary';
+import CreateAccountModal from '../CreateAccountModal/CreateAccountModal';
+import LoginModal from '../LoginModal/LoginModal';
+import { userName } from '../../stores/profile';
+import { PrimalUser } from '../../types/primal';
+import ReedSelect from '../FeedSelect/ReedSelect';
+
+const ReadsHeader: Component< {
+  id?: string,
+  hasNewPosts: () => boolean,
+  loadNewContent: () => void,
+  newPostCount: () => number,
+  newPostAuthors: PrimalUser[],
+} > = (props) => {
+
+  return (
+    <div id={props.id} class={styles.fullHeader}>
+      <div class={styles.bigFeedSelect}>
+        <ReedSelect big={true} />
+      </div>
+    </div>
+  );
+}
+
+export default hookForDev(ReadsHeader);

src/contexts/ReadsContext.tsx

@@ -309,7 +309,7 @@ export const ReadsProvider = (props: { children: ContextChildren }) => {
   };
 
   const fetchNotes = (topic: string, subId: string, until = 0, includeReplies?: boolean) => {
-    const t = account?.publicKey || '532d830dffe09c13e75e8b145c825718fc12b0003f61d61e9077721c7fff93cb';
+    const t = topic;//account?.publicKey || '532d830dffe09c13e75e8b145c825718fc12b0003f61d61e9077721c7fff93cb';
     const [scope, timeframe] = t.split(';');
 
     updateStore('isFetching', true);
@@ -394,11 +394,11 @@ export const ReadsProvider = (props: { children: ContextChildren }) => {
   const selectFeed = (feed: PrimalFeed | undefined) => {
     if (feed?.hex !== undefined && (feed.hex !== currentFeed?.hex || feed.includeReplies !== currentFeed?.includeReplies)) {
       currentFeed = { ...feed };
-      saveStoredFeed(account?.publicKey, currentFeed);
+      // saveStoredFeed(account?.publicKey, currentFeed);
 
       updateStore('selectedFeed', reconcile({...feed}));
       clearNotes();
-      fetchNotes(feed.hex , `${APP_ID}`, 0, feed.includeReplies);
+      fetchNotes(feed.hex === 'none' ? '' : feed.hex , `${APP_ID}`, 0, feed.includeReplies);
     }
   };
 
@@ -795,9 +795,9 @@ export const ReadsProvider = (props: { children: ContextChildren }) => {
   });
 
   createEffect(() => {
-    if (account?.isKeyLookupDone && settings?.defaultFeed) {
-      const storedFeed = fetchStoredFeed(account.publicKey);
-      selectFeed(storedFeed || settings?.defaultFeed);
+    if (account?.isKeyLookupDone && account.publicKey) {
+
+      selectFeed({ hex: account.publicKey, name: 'My Reads'});
     }
   });
 

src/lib/feed.ts

@@ -48,13 +48,17 @@ export const getFeed = (user_pubkey: string | undefined, pubkey: string |  undef
 }
 
 export const getArticlesFeed = (user_pubkey: string | undefined, pubkey: string |  undefined, subid: string, until = 0, limit = 20) => {
-  if (!pubkey) {
-    return;
-  }
+  // if (!pubkey) {
+  //   return;
+  // }
 
   const start = until === 0 ? 'since' : 'until';
 
-  let payload = { limit, [start]: until, pubkey };
+  let payload = { limit, [start]: until };
+
+  if (pubkey && pubkey?.length > 0) {
+    payload.pubkey = pubkey;
+  }
 
   if (user_pubkey) {
     payload.user_pubkey = user_pubkey;

src/pages/Reads.tsx

@@ -36,6 +36,8 @@ import { useReadsContext } from '../contexts/ReadsContext';
 import ArticlePreview from '../components/ArticlePreview/ArticlePreview';
 import PageCaption from '../components/PageCaption/PageCaption';
 import ReadsSidebar from '../components/HomeSidebar/ReadsSidebar';
+import ReedSelect from '../components/FeedSelect/ReedSelect';
+import ReadsHeader from '../components/HomeHeader/ReadsHeader';
 
 
 const Home: Component = () => {
@@ -139,7 +141,14 @@ const Home: Component = () => {
         <Search />
       </Wormhole>
 
-      <PageCaption title={intl.formatMessage(reads.pageTitle)} />
+      <PageCaption title={intl.formatMessage(reads.pageTitle)}>
+        <ReadsHeader
+          hasNewPosts={() => {}}
+          loadNewContent={() => {}}
+          newPostCount={() => {}}
+          newPostAuthors={[]}
+        />
+      </PageCaption>
 
       <StickySidebar>
         <ReadsSidebar />

src/stores/note.ts

@@ -469,7 +469,7 @@ export const convertToArticles: ConvertToArticles = (page, topZaps) => {
       tags: [],
       published: msg.created_at || 0,
       content: sanitize(msg.content),
-      user: convertToUser(user),
+      user: user ? convertToUser(user) : emptyUser(msg.pubkey),
       topZaps: [...tz],
       naddr: nip19.naddrEncode({ identifier, pubkey, kind }),
       noteId: nip19.naddrEncode({ identifier, pubkey, kind }),