From b672006f7e1c21c635eb4ec60e21910af586c00d Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 17 May 2023 13:52:16 -0500
Subject: Reorganize custom-feed state models and add the missing _reactKey
 attribute

---
 src/state/models/ui/saved-feeds.ts | 249 +++++++++++++++++++++++++++++++++++++
 1 file changed, 249 insertions(+)
 create mode 100644 src/state/models/ui/saved-feeds.ts

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
new file mode 100644
index 000000000..ce0de25ec
--- /dev/null
+++ b/src/state/models/ui/saved-feeds.ts
@@ -0,0 +1,249 @@
+import {makeAutoObservable, runInAction} from 'mobx'
+import {AppBskyFeedGetSavedFeeds as GetSavedFeeds} from '@atproto/api'
+import {RootStoreModel} from '../root-store'
+import {bundleAsync} from 'lib/async/bundle'
+import {cleanError} from 'lib/strings/errors'
+import {CustomFeedModel} from '../feeds/custom-feed'
+import {hasProp, isObj} from 'lib/type-guards'
+
+const PAGE_SIZE = 30
+
+export class SavedFeedsModel {
+  // state
+  isLoading = false
+  isRefreshing = false
+  hasLoaded = false
+  error = ''
+  hasMore = true
+  loadMoreCursor?: string
+
+  // data
+  feeds: CustomFeedModel[] = []
+  pinned: CustomFeedModel[] = []
+
+  constructor(public rootStore: RootStoreModel) {
+    makeAutoObservable(
+      this,
+      {
+        rootStore: false,
+      },
+      {autoBind: true},
+    )
+  }
+
+  serialize() {
+    return {
+      pinned: this.pinned.map(f => f.serialize()),
+    }
+  }
+
+  hydrate(v: unknown) {
+    if (isObj(v)) {
+      if (hasProp(v, 'pinned')) {
+        const pinnedSerialized = (v as any).pinned as string[]
+        const pinnedDeserialized = pinnedSerialized.map(
+          (s: string) => new CustomFeedModel(this.rootStore, JSON.parse(s)),
+        )
+        this.pinned = pinnedDeserialized
+      }
+    }
+  }
+
+  get hasContent() {
+    return this.feeds.length > 0
+  }
+
+  get hasError() {
+    return this.error !== ''
+  }
+
+  get isEmpty() {
+    return this.hasLoaded && !this.hasContent
+  }
+
+  get numOfFeeds() {
+    return this.feeds.length
+  }
+
+  get listOfFeedNames() {
+    return this.feeds.map(
+      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
+    )
+  }
+
+  get listOfPinnedFeedNames() {
+    return this.pinned.map(
+      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
+    )
+  }
+
+  get savedFeedsWithoutPinned() {
+    return this.feeds.filter(
+      f => !this.pinned.find(p => p.data.uri === f.data.uri),
+    )
+  }
+
+  togglePinnedFeed(feed: CustomFeedModel) {
+    if (!this.isPinned(feed)) {
+      this.pinned.push(feed)
+    } else {
+      this.removePinnedFeed(feed.data.uri)
+    }
+  }
+
+  removePinnedFeed(uri: string) {
+    this.pinned = this.pinned.filter(f => f.data.uri !== uri)
+  }
+
+  reorderPinnedFeeds(temp: CustomFeedModel[]) {
+    this.pinned = temp
+  }
+
+  isPinned(feed: CustomFeedModel) {
+    return this.pinned.find(f => f.data.uri === feed.data.uri) ? true : false
+  }
+
+  movePinnedItem(item: CustomFeedModel, direction: 'up' | 'down') {
+    if (this.pinned.length < 2) {
+      throw new Error('Array must have at least 2 items')
+    }
+    const index = this.pinned.indexOf(item)
+    if (index === -1) {
+      throw new Error('Item not found in array')
+    }
+
+    const len = this.pinned.length
+
+    runInAction(() => {
+      if (direction === 'up') {
+        if (index === 0) {
+          // Remove the item from the first place and put it at the end
+          this.pinned.push(this.pinned.shift()!)
+        } else {
+          // Swap the item with the one before it
+          const temp = this.pinned[index]
+          this.pinned[index] = this.pinned[index - 1]
+          this.pinned[index - 1] = temp
+        }
+      } else if (direction === 'down') {
+        if (index === len - 1) {
+          // Remove the item from the last place and put it at the start
+          this.pinned.unshift(this.pinned.pop()!)
+        } else {
+          // Swap the item with the one after it
+          const temp = this.pinned[index]
+          this.pinned[index] = this.pinned[index + 1]
+          this.pinned[index + 1] = temp
+        }
+      }
+      // this.pinned = [...this.pinned]
+    })
+  }
+
+  // public api
+  // =
+
+  async refresh() {
+    return this.loadMore(true)
+  }
+
+  clear() {
+    this.isLoading = false
+    this.isRefreshing = false
+    this.hasLoaded = false
+    this.error = ''
+    this.hasMore = true
+    this.loadMoreCursor = undefined
+    this.feeds = []
+  }
+
+  loadMore = bundleAsync(async (replace: boolean = false) => {
+    if (!replace && !this.hasMore) {
+      return
+    }
+    this._xLoading(replace)
+    try {
+      const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
+        limit: PAGE_SIZE,
+        cursor: replace ? undefined : this.loadMoreCursor,
+      })
+      if (replace) {
+        this._replaceAll(res)
+      } else {
+        this._appendAll(res)
+      }
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(e)
+    }
+  })
+
+  removeFeed(uri: string) {
+    this.feeds = this.feeds.filter(f => f.data.uri !== uri)
+  }
+
+  addFeed(algoItem: CustomFeedModel) {
+    this.feeds.push(new CustomFeedModel(this.rootStore, algoItem.data))
+  }
+
+  async save(algoItem: CustomFeedModel) {
+    try {
+      await this.rootStore.agent.app.bsky.feed.saveFeed({
+        feed: algoItem.getUri,
+      })
+      algoItem.toggleSaved = true
+      this.addFeed(algoItem)
+    } catch (e: any) {
+      this.rootStore.log.error('Failed to save feed', e)
+    }
+  }
+
+  async unsave(algoItem: CustomFeedModel) {
+    const uri = algoItem.getUri
+    try {
+      await this.rootStore.agent.app.bsky.feed.unsaveFeed({
+        feed: uri,
+      })
+      algoItem.toggleSaved = false
+      this.removeFeed(uri)
+      this.removePinnedFeed(uri)
+    } catch (e: any) {
+      this.rootStore.log.error('Failed to unsanve feed', e)
+    }
+  }
+
+  // state transitions
+  // =
+
+  _xLoading(isRefreshing = false) {
+    this.isLoading = true
+    this.isRefreshing = isRefreshing
+    this.error = ''
+  }
+
+  _xIdle(err?: any) {
+    this.isLoading = false
+    this.isRefreshing = false
+    this.hasLoaded = true
+    this.error = cleanError(err)
+    if (err) {
+      this.rootStore.log.error('Failed to fetch user followers', err)
+    }
+  }
+
+  // helper functions
+  // =
+
+  _replaceAll(res: GetSavedFeeds.Response) {
+    this.feeds = []
+    this._appendAll(res)
+  }
+
+  _appendAll(res: GetSavedFeeds.Response) {
+    this.loadMoreCursor = res.data.cursor
+    this.hasMore = !!this.loadMoreCursor
+    for (const f of res.data.feeds) {
+      this.feeds.push(new CustomFeedModel(this.rootStore, f))
+    }
+  }
+}
-- 
cgit 1.4.1


From 9c02fbb925290b9f147e1622f4f41f5a956dce5c Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 17 May 2023 14:38:23 -0500
Subject: Unify the display name fallback behavior

---
 src/state/models/feeds/custom-feed.ts |  8 ++++++++
 src/state/models/ui/saved-feeds.ts    |  8 ++------
 src/view/com/feeds/CustomFeed.tsx     | 11 ++++++-----
 3 files changed, 16 insertions(+), 11 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/feeds/custom-feed.ts b/src/state/models/feeds/custom-feed.ts
index 20eef49ad..e60ac2740 100644
--- a/src/state/models/feeds/custom-feed.ts
+++ b/src/state/models/feeds/custom-feed.ts
@@ -1,6 +1,7 @@
 import {AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {makeAutoObservable} from 'mobx'
 import {RootStoreModel} from 'state/models/root-store'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
 
 export class CustomFeedModel {
   // data
@@ -34,6 +35,13 @@ export class CustomFeedModel {
     return this.data.uri
   }
 
+  get displayName() {
+    if (this.data.displayName) {
+      return sanitizeDisplayName(this.data.displayName)
+    }
+    return `Feed by @${this.data.creator.handle}`
+  }
+
   get isSaved() {
     return this.data.viewer?.saved
   }
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index ce0de25ec..85e77cae5 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -66,15 +66,11 @@ export class SavedFeedsModel {
   }
 
   get listOfFeedNames() {
-    return this.feeds.map(
-      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
-    )
+    return this.feeds.map(f => f.displayName)
   }
 
   get listOfPinnedFeedNames() {
-    return this.pinned.map(
-      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
-    )
+    return this.pinned.map(f => f.displayName)
   }
 
   get savedFeedsWithoutPinned() {
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index e4e0d50c2..95726be64 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -54,9 +54,7 @@ export const CustomFeed = observer(
           navigation.navigate('CustomFeed', {
             name: item.data.creator.did,
             rkey: new AtUri(item.data.uri).rkey,
-            displayName:
-              item.data.displayName ??
-              `${item.data.creator.displayName}'s feed`,
+            displayName: item.displayName,
           })
         }}
         key={item.data.uri}>
@@ -65,8 +63,11 @@ export const CustomFeed = observer(
             <UserAvatar type="algo" size={36} avatar={item.data.avatar} />
           </View>
           <View style={[styles.headerTextContainer]}>
-            <Text style={[pal.text, s.bold]}>
-              {item.data.displayName ?? 'Feed name'}
+            <Text style={[pal.text, s.bold]} numberOfLines={3}>
+              {item.displayName}
+            </Text>
+            <Text style={[pal.textLight]} numberOfLines={3}>
+              by @{item.data.creator.handle}
             </Text>
           </View>
           {showSaveBtn && (
-- 
cgit 1.4.1


From 2fd3b4ca04622836ad2a65ec8992fd429ecd9fed Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 17 May 2023 14:55:04 -0500
Subject: Clean up the custom-feed model

---
 src/state/models/feeds/custom-feed.ts   | 115 +++++++++++---------------------
 src/state/models/ui/saved-feeds.ts      |  14 ++--
 src/view/com/util/UserAvatar.tsx        |   2 +-
 src/view/com/util/post-embeds/index.tsx |   1 +
 src/view/screens/Home.tsx               |   2 +-
 5 files changed, 45 insertions(+), 89 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/feeds/custom-feed.ts b/src/state/models/feeds/custom-feed.ts
index e60ac2740..5e550ec69 100644
--- a/src/state/models/feeds/custom-feed.ts
+++ b/src/state/models/feeds/custom-feed.ts
@@ -1,5 +1,5 @@
-import {AppBskyFeedDefs, AtUri} from '@atproto/api'
-import {makeAutoObservable} from 'mobx'
+import {AppBskyFeedDefs} from '@atproto/api'
+import {makeAutoObservable, runInAction} from 'mobx'
 import {RootStoreModel} from 'state/models/root-store'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 
@@ -25,13 +25,8 @@ export class CustomFeedModel {
 
   // local actions
   // =
-  set toggleSaved(value: boolean) {
-    if (this.data.viewer) {
-      this.data.viewer.saved = value
-    }
-  }
 
-  get getUri() {
+  get uri() {
     return this.data.uri
   }
 
@@ -50,99 +45,65 @@ export class CustomFeedModel {
     return this.data.viewer?.like
   }
 
-  private toggleLiked(s?: string) {
-    if (this.data.viewer) {
-      if (this.data.viewer.like) {
-        this.data.viewer.like = undefined
-      } else {
-        this.data.viewer.like = s
-      }
-    }
-  }
-
-  private incrementLike() {
-    if (this.data.likeCount) {
-      this.data.likeCount += 1
-    } else {
-      this.data.likeCount = 1
-    }
-  }
+  // public apis
+  // =
 
-  private decrementLike() {
-    if (this.data.likeCount) {
-      this.data.likeCount -= 1
-    } else {
-      this.data.likeCount = 0
-    }
+  async save() {
+    await this.rootStore.agent.app.bsky.feed.saveFeed({
+      feed: this.uri,
+    })
+    runInAction(() => {
+      this.data.viewer = this.data.viewer || {}
+      this.data.viewer.saved = true
+    })
   }
 
-  private rewriteData(data: AppBskyFeedDefs.GeneratorView) {
-    this.data = data
+  async unsave() {
+    await this.rootStore.agent.app.bsky.feed.unsaveFeed({
+      feed: this.uri,
+    })
+    runInAction(() => {
+      this.data.viewer = this.data.viewer || {}
+      this.data.viewer.saved = false
+    })
   }
 
-  // public apis
-  // =
   async like() {
     try {
-      const res = await this.rootStore.agent.app.bsky.feed.like.create(
-        {
-          repo: this.rootStore.me.did,
-        },
-        {
-          subject: {
-            uri: this.data.uri,
-            cid: this.data.cid,
-          },
-          createdAt: new Date().toISOString(),
-        },
-      )
-      this.toggleLiked(res.uri)
-      this.incrementLike()
+      const res = await this.rootStore.agent.like(this.data.uri, this.data.cid)
+      runInAction(() => {
+        this.data.viewer = this.data.viewer || {}
+        this.data.viewer.like = res.uri
+        this.data.likeCount = (this.data.likeCount || 0) + 1
+      })
     } catch (e: any) {
       this.rootStore.log.error('Failed to like feed', e)
     }
   }
 
   async unlike() {
+    if (!this.data.viewer.like) {
+      return
+    }
     try {
-      await this.rootStore.agent.app.bsky.feed.like.delete({
-        repo: this.rootStore.me.did,
-        rkey: new AtUri(this.data.viewer?.like!).rkey,
+      await this.rootStore.agent.deleteLike(this.data.viewer.like!)
+      runInAction(() => {
+        this.data.viewer = this.data.viewer || {}
+        this.data.viewer.like = undefined
+        this.data.likeCount = (this.data.likeCount || 1) - 1
       })
-      this.toggleLiked()
-      this.decrementLike()
     } catch (e: any) {
       this.rootStore.log.error('Failed to unlike feed', e)
     }
   }
 
-  static async getView(store: RootStoreModel, uri: string) {
-    const res = await store.agent.app.bsky.feed.getFeedGenerator({
-      feed: uri,
-    })
-    const view = res.data.view
-    return view
-  }
-
-  async checkIsValid() {
-    const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
-      feed: this.data.uri,
-    })
-    return res.data.isValid
-  }
-
-  async checkIsOnline() {
-    const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
-      feed: this.data.uri,
-    })
-    return res.data.isOnline
-  }
-
   async reload() {
     const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
       feed: this.data.uri,
     })
-    this.rewriteData(res.data.view)
+    runInAction(() => {
+      this.data = res.data.view
+    })
   }
 
   serialize() {
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index 85e77cae5..dca079b72 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -184,10 +184,7 @@ export class SavedFeedsModel {
 
   async save(algoItem: CustomFeedModel) {
     try {
-      await this.rootStore.agent.app.bsky.feed.saveFeed({
-        feed: algoItem.getUri,
-      })
-      algoItem.toggleSaved = true
+      await algoItem.save()
       this.addFeed(algoItem)
     } catch (e: any) {
       this.rootStore.log.error('Failed to save feed', e)
@@ -195,16 +192,13 @@ export class SavedFeedsModel {
   }
 
   async unsave(algoItem: CustomFeedModel) {
-    const uri = algoItem.getUri
+    const uri = algoItem.uri
     try {
-      await this.rootStore.agent.app.bsky.feed.unsaveFeed({
-        feed: uri,
-      })
-      algoItem.toggleSaved = false
+      await algoItem.unsave()
       this.removeFeed(uri)
       this.removePinnedFeed(uri)
     } catch (e: any) {
-      this.rootStore.log.error('Failed to unsanve feed', e)
+      this.rootStore.log.error('Failed to unsave feed', e)
     }
   }
 
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 10a605b25..1e3690fbd 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -188,7 +188,7 @@ export function UserAvatar({
           accessibilityRole="image"
         />
       ) : (
-        <DefaultAvatar size={size} />
+        <DefaultAvatar type={type} size={size} />
       )}
       <View style={[styles.editButtonContainer, pal.btn]}>
         <FontAwesomeIcon
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index ed2f8feba..01d26db91 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -170,6 +170,7 @@ export function PostEmbeds({
     AppBskyEmbedRecord.isView(embed) &&
     AppBskyFeedDefs.isGeneratorView(embed.record)
   ) {
+    // TODO memoize this?
     return (
       <CustomFeed
         item={new CustomFeedModel(store, embed.record)}
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 1457478d5..70816a306 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -118,7 +118,7 @@ export const HomeScreen = withAuthRequired(
               key={String(2 + index + 1)}
               testID="customFeed"
               isPageFocused={selectedPage === 2 + index}
-              feed={new PostsFeedModel(store, 'custom', {feed: f.getUri})}
+              feed={new PostsFeedModel(store, 'custom', {feed: f.uri})}
               renderEmptyState={renderFollowingEmptyState}
             />
           )
-- 
cgit 1.4.1


From f0003d193182bd70935ca6b7e67897922297deed Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 17 May 2023 20:33:58 -0500
Subject: Add 'my feeds' tab

---
 src/state/models/ui/saved-feeds.ts       |  44 +++++----
 src/view/com/feeds/CustomFeed.tsx        |   4 +-
 src/view/com/feeds/SavedFeeds.tsx        | 163 +++++++++++++++++++++++++++++++
 src/view/com/pager/FeedsTabBarMobile.tsx |   1 +
 src/view/screens/Home.tsx                |  10 +-
 5 files changed, 198 insertions(+), 24 deletions(-)
 create mode 100644 src/view/com/feeds/SavedFeeds.tsx

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index dca079b72..bae98fc84 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -139,8 +139,8 @@ export class SavedFeedsModel {
   // public api
   // =
 
-  async refresh() {
-    return this.loadMore(true)
+  async refresh(quietRefresh = false) {
+    return this.loadMore(true, quietRefresh)
   }
 
   clear() {
@@ -153,26 +153,28 @@ export class SavedFeedsModel {
     this.feeds = []
   }
 
-  loadMore = bundleAsync(async (replace: boolean = false) => {
-    if (!replace && !this.hasMore) {
-      return
-    }
-    this._xLoading(replace)
-    try {
-      const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
-        limit: PAGE_SIZE,
-        cursor: replace ? undefined : this.loadMoreCursor,
-      })
-      if (replace) {
-        this._replaceAll(res)
-      } else {
-        this._appendAll(res)
+  loadMore = bundleAsync(
+    async (replace: boolean = false, quietRefresh = false) => {
+      if (!replace && !this.hasMore) {
+        return
       }
-      this._xIdle()
-    } catch (e: any) {
-      this._xIdle(e)
-    }
-  })
+      this._xLoading(replace && !quietRefresh)
+      try {
+        const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
+          limit: PAGE_SIZE,
+          cursor: replace ? undefined : this.loadMoreCursor,
+        })
+        if (replace) {
+          this._replaceAll(res)
+        } else {
+          this._appendAll(res)
+        }
+        this._xIdle()
+      } catch (e: any) {
+        this._xIdle(e)
+      }
+    },
+  )
 
   removeFeed(uri: string) {
     this.feeds = this.feeds.filter(f => f.data.uri !== uri)
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index 5a93020a0..5440a8e8f 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -24,11 +24,13 @@ export const CustomFeed = observer(
     item,
     style,
     showSaveBtn = false,
+    showDescription = false,
     showLikes = false,
   }: {
     item: CustomFeedModel
     style?: StyleProp<ViewStyle>
     showSaveBtn?: boolean
+    showDescription?: boolean
     showLikes?: boolean
   }) => {
     const store = useStores()
@@ -75,7 +77,7 @@ export const CustomFeed = observer(
           )}
         </View>
 
-        {item.data.description ? (
+        {showDescription && item.data.description ? (
           <Text style={[pal.textLight, styles.description]} numberOfLines={3}>
             {item.data.description}
           </Text>
diff --git a/src/view/com/feeds/SavedFeeds.tsx b/src/view/com/feeds/SavedFeeds.tsx
new file mode 100644
index 000000000..66a4efecf
--- /dev/null
+++ b/src/view/com/feeds/SavedFeeds.tsx
@@ -0,0 +1,163 @@
+import React, {useEffect, useCallback} from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from 'lib/hooks/usePalette'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
+import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
+import {CenteredView} from 'view/com/util/Views'
+import {Text} from 'view/com/util/text/Text'
+import {isDesktopWeb} from 'platform/detection'
+import {s, colors} from 'lib/styles'
+import {Link} from 'view/com/util/Link'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
+
+export const SavedFeeds = observer(
+  ({
+    headerOffset = 0,
+    isPageFocused,
+  }: {
+    headerOffset?: number
+    isPageFocused: boolean
+  }) => {
+    const pal = usePalette('default')
+    const store = useStores()
+
+    useEffect(() => {
+      if (isPageFocused) {
+        store.shell.setMinimalShellMode(false)
+        store.me.savedFeeds.refresh(true)
+      }
+    }, [store, isPageFocused])
+
+    const renderListEmptyComponent = useCallback(() => {
+      return (
+        <View
+          style={[
+            pal.border,
+            !isDesktopWeb && s.flex1,
+            pal.viewLight,
+            styles.empty,
+          ]}>
+          <Text type="lg" style={[pal.text]}>
+            You don't have any saved feeds. You can find feeds by searching on
+            Bluesky.
+          </Text>
+        </View>
+      )
+    }, [pal])
+
+    const renderListFooterComponent = useCallback(() => {
+      return (
+        <Link
+          style={[styles.footerLink, pal.border]}
+          href="/settings/pinned-feeds">
+          <FontAwesomeIcon icon="cog" size={18} color={pal.colors.icon} />
+          <Text type="lg-medium" style={pal.textLight}>
+            Settings
+          </Text>
+        </Link>
+      )
+    }, [pal])
+
+    const renderItem = useCallback(
+      ({item}) => (
+        <SavedFeedItem
+          key={item.data.uri}
+          item={item}
+          savedFeeds={store.me.savedFeeds}
+        />
+      ),
+      [store.me.savedFeeds],
+    )
+
+    return (
+      <CenteredView style={[s.flex1]}>
+        <FlatList
+          style={[!isDesktopWeb && s.flex1, {paddingTop: headerOffset}]}
+          data={store.me.savedFeeds.feeds}
+          keyExtractor={item => item.data.uri}
+          refreshing={store.me.savedFeeds.isRefreshing}
+          refreshControl={
+            <RefreshControl
+              refreshing={store.me.savedFeeds.isRefreshing}
+              onRefresh={() => store.me.savedFeeds.refresh()}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+              progressViewOffset={headerOffset}
+            />
+          }
+          renderItem={renderItem}
+          initialNumToRender={10}
+          ListFooterComponent={renderListFooterComponent}
+          ListEmptyComponent={renderListEmptyComponent}
+          extraData={store.me.savedFeeds.isLoading}
+          contentOffset={{x: 0, y: headerOffset * -1}}
+          // @ts-ignore our .web version only -prf
+          desktopFixedHeight
+        />
+      </CenteredView>
+    )
+  },
+)
+
+const SavedFeedItem = observer(
+  ({
+    item,
+    savedFeeds,
+  }: {
+    item: CustomFeedModel
+    savedFeeds: SavedFeedsModel
+  }) => {
+    const isPinned = savedFeeds.isPinned(item)
+    const onTogglePinned = useCallback(
+      () => savedFeeds.togglePinnedFeed(item),
+      [savedFeeds, item],
+    )
+
+    return (
+      <View style={styles.itemContainer}>
+        <CustomFeed key={item.data.uri} item={item} />
+        <TouchableOpacity accessibilityRole="button" onPress={onTogglePinned}>
+          <FontAwesomeIcon
+            icon="thumb-tack"
+            size={20}
+            color={isPinned ? colors.blue3 : colors.gray3}
+          />
+        </TouchableOpacity>
+      </View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  footerLink: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    paddingHorizontal: 26,
+    paddingVertical: 18,
+    gap: 18,
+  },
+  empty: {
+    paddingHorizontal: 18,
+    paddingVertical: 16,
+    borderRadius: 8,
+    marginHorizontal: 18,
+    marginTop: 10,
+  },
+  itemContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 18,
+  },
+})
diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index ab8f98309..c79dad4df 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -37,6 +37,7 @@ export const FeedsTabBar = observer(
         'Following',
         "What's hot",
         ...store.me.savedFeeds.listOfPinnedFeedNames,
+        'My feeds',
       ],
       [store.me.savedFeeds.listOfPinnedFeedNames],
     )
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 70816a306..9be4a4794 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -14,6 +14,7 @@ import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
 import {FeedsTabBar} from '../com/pager/FeedsTabBar'
 import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {FAB} from '../com/util/fab/FAB'
+import {SavedFeeds} from 'view/com/feeds/SavedFeeds'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
@@ -115,14 +116,19 @@ export const HomeScreen = withAuthRequired(
         {store.me.savedFeeds.pinned.map((f, index) => {
           return (
             <FeedPage
-              key={String(2 + index + 1)}
-              testID="customFeed"
+              key={String(3 + index)}
+              testID="customFeedPage"
               isPageFocused={selectedPage === 2 + index}
               feed={new PostsFeedModel(store, 'custom', {feed: f.uri})}
               renderEmptyState={renderFollowingEmptyState}
             />
           )
         })}
+        <SavedFeeds
+          key={String(3 + store.me.savedFeeds.pinned.length)}
+          headerOffset={HEADER_OFFSET}
+          isPageFocused={selectedPage === 2 + store.me.savedFeeds.pinned.length}
+        />
       </Pager>
     )
   }),
-- 
cgit 1.4.1


From 6bf8e7215784dafd04ae3639a28666eea77ed1bd Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 17 May 2023 21:23:32 -0500
Subject: Usability improvements to feeds

---
 src/state/models/ui/saved-feeds.ts       | 20 ++++-----
 src/view/com/feeds/CustomFeed.tsx        | 77 ++++++++++++++++++++------------
 src/view/com/feeds/SavedFeedItem.tsx     | 38 ++++++++++------
 src/view/com/feeds/SavedFeeds.tsx        | 61 +++----------------------
 src/view/com/pager/FeedsTabBar.web.tsx   |  8 +---
 src/view/com/pager/FeedsTabBarMobile.tsx |  4 +-
 src/view/screens/PinnedFeeds.tsx         | 34 +++++++-------
 src/view/screens/ProfileCustomFeed.tsx   | 18 ++++----
 8 files changed, 119 insertions(+), 141 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index bae98fc84..50bb1b871 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -61,22 +61,22 @@ export class SavedFeedsModel {
     return this.hasLoaded && !this.hasContent
   }
 
-  get numOfFeeds() {
+  get numFeeds() {
     return this.feeds.length
   }
 
-  get listOfFeedNames() {
-    return this.feeds.map(f => f.displayName)
+  get unpinned() {
+    return this.feeds.filter(
+      f => !this.pinned.find(p => p.data.uri === f.data.uri),
+    )
   }
 
-  get listOfPinnedFeedNames() {
-    return this.pinned.map(f => f.displayName)
+  get feedNames() {
+    return this.feeds.map(f => f.displayName)
   }
 
-  get savedFeedsWithoutPinned() {
-    return this.feeds.filter(
-      f => !this.pinned.find(p => p.data.uri === f.data.uri),
-    )
+  get pinnedFeedNames() {
+    return this.pinned.map(f => f.displayName)
   }
 
   togglePinnedFeed(feed: CustomFeedModel) {
@@ -92,7 +92,7 @@ export class SavedFeedsModel {
   }
 
   reorderPinnedFeeds(temp: CustomFeedModel[]) {
-    this.pinned = temp
+    this.pinned = temp.filter(item => this.isPinned(item))
   }
 
   isPinned(feed: CustomFeedModel) {
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index 5440a8e8f..5201ca848 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -1,16 +1,17 @@
 import React from 'react'
 import {
+  Pressable,
   StyleProp,
   StyleSheet,
   View,
   ViewStyle,
   TouchableOpacity,
 } from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {UserAvatar} from '../util/UserAvatar'
-import {Button} from '../util/forms/Button'
 import {observer} from 'mobx-react-lite'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import {useNavigation} from '@react-navigation/native'
@@ -18,6 +19,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {useStores} from 'state/index'
 import {pluralize} from 'lib/strings/helpers'
 import {AtUri} from '@atproto/api'
+import * as Toast from 'view/com/util/Toast'
 
 export const CustomFeed = observer(
   ({
@@ -37,6 +39,23 @@ export const CustomFeed = observer(
     const pal = usePalette('default')
     const navigation = useNavigation<NavigationProp>()
 
+    const onToggleSaved = React.useCallback(() => {
+      if (item.data.viewer?.saved) {
+        store.shell.openModal({
+          name: 'confirm',
+          title: 'Remove from my feeds',
+          message: `Remove ${item.displayName} from my feeds?`,
+          onPressConfirm: () => {
+            store.me.savedFeeds.unsave(item)
+            Toast.show('Removed from my feeds')
+          },
+        })
+      } else {
+        store.me.savedFeeds.save(item)
+        Toast.show('Added to my feeds')
+      }
+    }, [store, item])
+
     return (
       <TouchableOpacity
         accessibilityRole="button"
@@ -62,17 +81,28 @@ export const CustomFeed = observer(
           </View>
           {showSaveBtn && (
             <View>
-              <Button
-                type={item.isSaved ? 'default' : 'inverted'}
-                onPress={() => {
-                  if (item.data.viewer?.saved) {
-                    store.me.savedFeeds.unsave(item)
-                  } else {
-                    store.me.savedFeeds.save(item)
-                  }
-                }}
-                label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
-              />
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={
+                  item.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
+                }
+                accessibilityHint=""
+                onPress={onToggleSaved}
+                style={styles.btn}>
+                {item.isSaved ? (
+                  <FontAwesomeIcon
+                    icon={['far', 'trash-can']}
+                    size={19}
+                    color={pal.colors.icon}
+                  />
+                ) : (
+                  <FontAwesomeIcon
+                    icon="plus"
+                    size={18}
+                    color={pal.colors.link}
+                  />
+                )}
+              </Pressable>
             </View>
           )}
         </View>
@@ -84,14 +114,10 @@ export const CustomFeed = observer(
         ) : null}
 
         {showLikes ? (
-          <View style={styles.bottomContainer}>
-            <View style={styles.likedByContainer}>
-              <Text type="sm-medium" style={[pal.text, pal.textLight]}>
-                Liked by {item.data.likeCount || 0}{' '}
-                {pluralize(item.data.likeCount || 0, 'user')}
-              </Text>
-            </View>
-          </View>
+          <Text type="sm-medium" style={[pal.text, pal.textLight]}>
+            Liked by {item.data.likeCount || 0}{' '}
+            {pluralize(item.data.likeCount || 0, 'user')}
+          </Text>
         ) : null}
       </TouchableOpacity>
     )
@@ -119,14 +145,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexWrap: 'wrap',
   },
-  bottomContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  likedByContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 2,
+  btn: {
+    paddingVertical: 6,
   },
 })
diff --git a/src/view/com/feeds/SavedFeedItem.tsx b/src/view/com/feeds/SavedFeedItem.tsx
index 329f1811e..8a5889e47 100644
--- a/src/view/com/feeds/SavedFeedItem.tsx
+++ b/src/view/com/feeds/SavedFeedItem.tsx
@@ -1,41 +1,51 @@
-import React from 'react'
-import {View, TouchableOpacity, StyleSheet} from 'react-native'
+import React, {useCallback} from 'react'
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from 'lib/styles'
 import {observer} from 'mobx-react-lite'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
 import {CustomFeed} from './CustomFeed'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export const SavedFeedItem = observer(
   ({
     item,
     savedFeeds,
+    showSaveBtn = false,
+    style,
   }: {
     item: CustomFeedModel
     savedFeeds: SavedFeedsModel
+    showSaveBtn?: boolean
+    style?: StyleProp<ViewStyle>
   }) => {
+    const pal = usePalette('default')
     const isPinned = savedFeeds.isPinned(item)
+    const onTogglePinned = useCallback(
+      () => savedFeeds.togglePinnedFeed(item),
+      [savedFeeds, item],
+    )
 
     return (
-      <View style={styles.itemContainer}>
+      <View style={[styles.itemContainer, style]}>
         <CustomFeed
           key={item.data.uri}
           item={item}
-          style={styles.item}
-          showSaveBtn
+          showSaveBtn={showSaveBtn}
+          style={styles.noBorder}
         />
-        <TouchableOpacity
-          accessibilityRole="button"
-          onPress={() => {
-            savedFeeds.togglePinnedFeed(item)
-            console.log('pinned', savedFeeds.pinned)
-            console.log('isPinned', savedFeeds.isPinned(item))
-          }}>
+        <TouchableOpacity accessibilityRole="button" onPress={onTogglePinned}>
           <FontAwesomeIcon
             icon="thumb-tack"
             size={20}
-            color={isPinned ? colors.blue3 : colors.gray3}
+            color={isPinned ? colors.blue3 : pal.colors.icon}
           />
         </TouchableOpacity>
       </View>
@@ -50,7 +60,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginRight: 18,
   },
-  item: {
+  noBorder: {
     borderTopWidth: 0,
   },
 })
diff --git a/src/view/com/feeds/SavedFeeds.tsx b/src/view/com/feeds/SavedFeeds.tsx
index 66a4efecf..06c47d114 100644
--- a/src/view/com/feeds/SavedFeeds.tsx
+++ b/src/view/com/feeds/SavedFeeds.tsx
@@ -1,24 +1,15 @@
 import React, {useEffect, useCallback} from 'react'
-import {
-  ActivityIndicator,
-  FlatList,
-  RefreshControl,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import {FlatList, RefreshControl, StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
 import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
-import {CustomFeedModel} from 'state/models/feeds/custom-feed'
-import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
 import {CenteredView} from 'view/com/util/Views'
 import {Text} from 'view/com/util/text/Text'
 import {isDesktopWeb} from 'platform/detection'
-import {s, colors} from 'lib/styles'
+import {s} from 'lib/styles'
 import {Link} from 'view/com/util/Link'
-import {CustomFeed} from 'view/com/feeds/CustomFeed'
+import {CustomFeed} from './CustomFeed'
 
 export const SavedFeeds = observer(
   ({
@@ -69,14 +60,8 @@ export const SavedFeeds = observer(
     }, [pal])
 
     const renderItem = useCallback(
-      ({item}) => (
-        <SavedFeedItem
-          key={item.data.uri}
-          item={item}
-          savedFeeds={store.me.savedFeeds}
-        />
-      ),
-      [store.me.savedFeeds],
+      ({item}) => <CustomFeed key={item.data.uri} item={item} />,
+      [],
     )
 
     return (
@@ -109,35 +94,6 @@ export const SavedFeeds = observer(
   },
 )
 
-const SavedFeedItem = observer(
-  ({
-    item,
-    savedFeeds,
-  }: {
-    item: CustomFeedModel
-    savedFeeds: SavedFeedsModel
-  }) => {
-    const isPinned = savedFeeds.isPinned(item)
-    const onTogglePinned = useCallback(
-      () => savedFeeds.togglePinnedFeed(item),
-      [savedFeeds, item],
-    )
-
-    return (
-      <View style={styles.itemContainer}>
-        <CustomFeed key={item.data.uri} item={item} />
-        <TouchableOpacity accessibilityRole="button" onPress={onTogglePinned}>
-          <FontAwesomeIcon
-            icon="thumb-tack"
-            size={20}
-            color={isPinned ? colors.blue3 : colors.gray3}
-          />
-        </TouchableOpacity>
-      </View>
-    )
-  },
-)
-
 const styles = StyleSheet.create({
   footerLink: {
     flexDirection: 'row',
@@ -154,10 +110,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 18,
     marginTop: 10,
   },
-  itemContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: 18,
+  feedItem: {
+    borderTopWidth: 1,
   },
 })
diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx
index 6de38fa1d..d1a05b153 100644
--- a/src/view/com/pager/FeedsTabBar.web.tsx
+++ b/src/view/com/pager/FeedsTabBar.web.tsx
@@ -28,12 +28,8 @@ const FeedsTabBarDesktop = observer(
   ) => {
     const store = useStores()
     const items = useMemo(
-      () => [
-        'Following',
-        "What's hot",
-        ...store.me.savedFeeds.listOfPinnedFeedNames,
-      ],
-      [store.me.savedFeeds.listOfPinnedFeedNames],
+      () => ['Following', "What's hot", ...store.me.savedFeeds.pinnedFeedNames],
+      [store.me.savedFeeds.pinnedFeedNames],
     )
     const pal = usePalette('default')
     const interp = useAnimatedValue(0)
diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index c79dad4df..0c40da436 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -36,10 +36,10 @@ export const FeedsTabBar = observer(
       () => [
         'Following',
         "What's hot",
-        ...store.me.savedFeeds.listOfPinnedFeedNames,
+        ...store.me.savedFeeds.pinnedFeedNames,
         'My feeds',
       ],
-      [store.me.savedFeeds.listOfPinnedFeedNames],
+      [store.me.savedFeeds.pinnedFeedNames],
     )
 
     return (
diff --git a/src/view/screens/PinnedFeeds.tsx b/src/view/screens/PinnedFeeds.tsx
index 85f737749..a90012093 100644
--- a/src/view/screens/PinnedFeeds.tsx
+++ b/src/view/screens/PinnedFeeds.tsx
@@ -72,10 +72,10 @@ export const PinnedFeeds = withAuthRequired(
 
     return (
       <CenteredView style={[s.flex1]}>
-        <ViewHeader title="Arrange Pinned Feeds" showOnDesktop />
+        <ViewHeader title="Edit My Feeds" showOnDesktop />
         <DraggableFlatList
           containerStyle={[!isDesktopWeb && s.flex1]}
-          data={[...savedFeeds.pinned]} // make a copy so this FlatList re-renders when pinned changes
+          data={[...savedFeeds.pinned, ...savedFeeds.unpinned]} // make a copy so this FlatList re-renders when pinned changes
           keyExtractor={item => item.data.uri}
           refreshing={savedFeeds.isRefreshing}
           refreshControl={
@@ -86,7 +86,7 @@ export const PinnedFeeds = withAuthRequired(
               titleColor={pal.colors.text}
             />
           }
-          renderItem={({item, drag}) => <PinnedItem item={item} drag={drag} />}
+          renderItem={({item, drag}) => <ListItem item={item} drag={drag} />}
           initialNumToRender={10}
           ListFooterComponent={_ListFooterComponent}
           ListEmptyComponent={_ListEmptyComponent}
@@ -100,19 +100,20 @@ export const PinnedFeeds = withAuthRequired(
   }),
 )
 
-const PinnedItem = observer(
+const ListItem = observer(
   ({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
     const pal = usePalette('default')
     const rootStore = useStores()
     const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
+    const isPinned = savedFeeds.isPinned(item)
     return (
       <ScaleDecorator>
         <ShadowDecorator>
           <Pressable
             accessibilityRole="button"
-            onLongPress={drag}
-            style={styles.itemContainer}>
-            {isWeb ? (
+            onLongPress={isPinned ? drag : undefined}
+            style={[styles.itemContainer, pal.border]}>
+            {isPinned && isWeb ? (
               <View style={styles.webArrowButtonsContainer}>
                 <TouchableOpacity
                   accessibilityRole="button"
@@ -122,7 +123,7 @@ const PinnedItem = observer(
                   <FontAwesomeIcon
                     icon="arrow-up"
                     size={20}
-                    style={[styles.icon, pal.text, styles.webArrowUpButton]}
+                    style={[s.mr10, pal.text, styles.webArrowUpButton]}
                   />
                 </TouchableOpacity>
                 <TouchableOpacity
@@ -133,18 +134,19 @@ const PinnedItem = observer(
                   <FontAwesomeIcon
                     icon="arrow-down"
                     size={20}
-                    style={[styles.icon, pal.text]}
+                    style={[s.mr10, pal.text]}
                   />
                 </TouchableOpacity>
               </View>
-            ) : (
+            ) : isPinned ? (
               <FontAwesomeIcon
                 icon="bars"
                 size={20}
-                style={[styles.icon, pal.text]}
+                color={pal.colors.text}
+                style={s.ml20}
               />
-            )}
-            <SavedFeedItem item={item} savedFeeds={savedFeeds} />
+            ) : null}
+            <SavedFeedItem item={item} savedFeeds={savedFeeds} showSaveBtn />
           </Pressable>
         </ShadowDecorator>
       </ScaleDecorator>
@@ -167,12 +169,8 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    marginLeft: 18,
+    borderTopWidth: 1,
   },
-  item: {
-    borderTopWidth: 0,
-  },
-  icon: {marginRight: 10},
   webArrowButtonsContainer: {
     flexDirection: 'column',
     justifyContent: 'space-around',
diff --git a/src/view/screens/ProfileCustomFeed.tsx b/src/view/screens/ProfileCustomFeed.tsx
index 1113ebf01..681798308 100644
--- a/src/view/screens/ProfileCustomFeed.tsx
+++ b/src/view/screens/ProfileCustomFeed.tsx
@@ -43,10 +43,10 @@ export const ProfileCustomFeed = withAuthRequired(
 
     const onToggleSaved = React.useCallback(async () => {
       try {
-        if (currentFeed.isSaved) {
-          await currentFeed.unsave()
+        if (currentFeed?.isSaved) {
+          await currentFeed?.unsave()
         } else {
-          await currentFeed.save()
+          await currentFeed?.save()
         }
       } catch (err) {
         Toast.show(
@@ -58,10 +58,10 @@ export const ProfileCustomFeed = withAuthRequired(
 
     const onToggleLiked = React.useCallback(async () => {
       try {
-        if (currentFeed.isLiked) {
-          await currentFeed.unlike()
+        if (currentFeed?.isLiked) {
+          await currentFeed?.unlike()
         } else {
-          await currentFeed.like()
+          await currentFeed?.like()
         }
       } catch (err) {
         Toast.show(
@@ -90,10 +90,12 @@ export const ProfileCustomFeed = withAuthRequired(
             type={currentFeed?.isSaved ? 'default' : 'inverted'}
             onPress={onToggleSaved}
             accessibilityLabel={
-              currentFeed?.isSaved ? 'Unsave this feed' : 'Save this feed'
+              currentFeed?.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
             }
             accessibilityHint=""
-            label={currentFeed?.isSaved ? 'Unsave' : 'Save'}
+            label={
+              currentFeed?.isSaved ? 'Remove from My Feeds' : 'Add to My Feeds'
+            }
           />
         </View>
       )
-- 
cgit 1.4.1


From 129fc42e95605617e4dd6509a0458a2b66527ad0 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 17 May 2023 23:32:19 -0500
Subject: Improve pinned feed management

---
 src/state/models/ui/saved-feeds.ts |   2 +-
 src/view/com/pager/Pager.tsx       | 125 +++++++++++++++++--------------------
 src/view/screens/Home.tsx          |  23 +++++--
 3 files changed, 79 insertions(+), 71 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index 50bb1b871..d68664c2d 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -81,7 +81,7 @@ export class SavedFeedsModel {
 
   togglePinnedFeed(feed: CustomFeedModel) {
     if (!this.isPinned(feed)) {
-      this.pinned.push(feed)
+      this.pinned = [...this.pinned, feed]
     } else {
       this.removePinnedFeed(feed.data.uri)
     }
diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx
index 34747db6d..e2c8bf6d2 100644
--- a/src/view/com/pager/Pager.tsx
+++ b/src/view/com/pager/Pager.tsx
@@ -1,16 +1,17 @@
-import React from 'react'
+import React, {forwardRef} from 'react'
 import {Animated, View} from 'react-native'
 import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {s} from 'lib/styles'
 
 export type PageSelectedEvent = PagerViewOnPageSelectedEvent
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
 
+export interface PagerRef {
+  setPage: (index: number) => void
+}
+
 export interface RenderTabBarFnProps {
   selectedPage: number
-  position: Animated.Value
-  offset: Animated.Value
   onSelect?: (index: number) => void
 }
 export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
@@ -22,68 +23,60 @@ interface Props {
   onPageSelected?: (index: number) => void
   testID?: string
 }
-export const Pager = ({
-  children,
-  tabBarPosition = 'top',
-  initialPage = 0,
-  renderTabBar,
-  onPageSelected,
-  testID,
-}: React.PropsWithChildren<Props>) => {
-  const [selectedPage, setSelectedPage] = React.useState(0)
-  const position = useAnimatedValue(0)
-  const offset = useAnimatedValue(0)
-  const pagerView = React.useRef<PagerView>()
+export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
+  (
+    {
+      children,
+      tabBarPosition = 'top',
+      initialPage = 0,
+      renderTabBar,
+      onPageSelected,
+      testID,
+    }: React.PropsWithChildren<Props>,
+    ref,
+  ) => {
+    const [selectedPage, setSelectedPage] = React.useState(0)
+    const pagerView = React.useRef<PagerView>()
 
-  const onPageSelectedInner = React.useCallback(
-    (e: PageSelectedEvent) => {
-      setSelectedPage(e.nativeEvent.position)
-      onPageSelected?.(e.nativeEvent.position)
-    },
-    [setSelectedPage, onPageSelected],
-  )
+    React.useImperativeHandle(ref, () => ({
+      setPage: (index: number) => pagerView.current?.setPage(index),
+    }))
 
-  const onTabBarSelect = React.useCallback(
-    (index: number) => {
-      pagerView.current?.setPage(index)
-    },
-    [pagerView],
-  )
+    const onPageSelectedInner = React.useCallback(
+      (e: PageSelectedEvent) => {
+        setSelectedPage(e.nativeEvent.position)
+        onPageSelected?.(e.nativeEvent.position)
+      },
+      [setSelectedPage, onPageSelected],
+    )
 
-  return (
-    <View testID={testID}>
-      {tabBarPosition === 'top' &&
-        renderTabBar({
-          selectedPage,
-          position,
-          offset,
-          onSelect: onTabBarSelect,
-        })}
-      <AnimatedPagerView
-        ref={pagerView}
-        style={s.h100pct}
-        initialPage={initialPage}
-        onPageSelected={onPageSelectedInner}
-        onPageScroll={Animated.event(
-          [
-            {
-              nativeEvent: {
-                position: position,
-                offset: offset,
-              },
-            },
-          ],
-          {useNativeDriver: true},
-        )}>
-        {children}
-      </AnimatedPagerView>
-      {tabBarPosition === 'bottom' &&
-        renderTabBar({
-          selectedPage,
-          position,
-          offset,
-          onSelect: onTabBarSelect,
-        })}
-    </View>
-  )
-}
+    const onTabBarSelect = React.useCallback(
+      (index: number) => {
+        pagerView.current?.setPage(index)
+      },
+      [pagerView],
+    )
+
+    return (
+      <View testID={testID}>
+        {tabBarPosition === 'top' &&
+          renderTabBar({
+            selectedPage,
+            onSelect: onTabBarSelect,
+          })}
+        <AnimatedPagerView
+          ref={pagerView}
+          style={s.h100pct}
+          initialPage={initialPage}
+          onPageSelected={onPageSelectedInner}>
+          {children}
+        </AnimatedPagerView>
+        {tabBarPosition === 'bottom' &&
+          renderTabBar({
+            selectedPage,
+            onSelect: onTabBarSelect,
+          })}
+      </View>
+    )
+  },
+)
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 9be4a4794..644182126 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {FlatList, View} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
+import {AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
 import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
@@ -12,7 +13,7 @@ import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {WhatsHotEmptyState} from 'view/com/posts/WhatsHotEmptyState'
 import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
 import {FeedsTabBar} from '../com/pager/FeedsTabBar'
-import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {FAB} from '../com/util/fab/FAB'
 import {SavedFeeds} from 'view/com/feeds/SavedFeeds'
 import {useStores} from 'state/index'
@@ -29,7 +30,9 @@ type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
   observer((_opts: Props) => {
     const store = useStores()
+    const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
+    const [customFeeds, setCustomFeeds] = React.useState<PostsFeedModel[]>([])
     const [initialLanguages] = React.useState(
       store.preferences.contentLanguages,
     )
@@ -40,6 +43,17 @@ export const HomeScreen = withAuthRequired(
       return feed
     }, [store])
 
+    React.useEffect(() => {
+      const feeds = []
+      for (const feed of store.me.savedFeeds.pinned) {
+        const model = new PostsFeedModel(store, 'custom', {feed: feed.uri})
+        model.setup()
+        feeds.push(model)
+      }
+      pagerRef.current?.setPage(0)
+      setCustomFeeds(feeds)
+    }, [store, store.me.savedFeeds.pinned, setCustomFeeds])
+
     React.useEffect(() => {
       // refresh whats hot when lang preferences change
       if (initialLanguages !== store.preferences.contentLanguages) {
@@ -94,6 +108,7 @@ export const HomeScreen = withAuthRequired(
     const initialPage = store.me.followsCount === 0 ? 1 : 0
     return (
       <Pager
+        ref={pagerRef}
         testID="homeScreen"
         onPageSelected={onPageSelected}
         renderTabBar={renderTabBar}
@@ -113,13 +128,13 @@ export const HomeScreen = withAuthRequired(
           feed={algoFeed}
           renderEmptyState={renderWhatsHotEmptyState}
         />
-        {store.me.savedFeeds.pinned.map((f, index) => {
+        {customFeeds.map((f, index) => {
           return (
             <FeedPage
-              key={String(3 + index)}
+              key={(f.params as GetCustomFeed.QueryParams).feed}
               testID="customFeedPage"
               isPageFocused={selectedPage === 2 + index}
-              feed={new PostsFeedModel(store, 'custom', {feed: f.uri})}
+              feed={f}
               renderEmptyState={renderFollowingEmptyState}
             />
           )
-- 
cgit 1.4.1


From 7691fe4f481bf08c711cf92da91b2c204d121a7f Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 18 May 2023 11:51:25 -0500
Subject: Store/sync pinned feeds on the server

---
 src/state/models/me.ts             |   7 +-
 src/state/models/ui/preferences.ts |  58 +++++++++-
 src/state/models/ui/saved-feeds.ts | 226 +++++++++++++------------------------
 src/view/com/feeds/CustomFeed.tsx  |  22 +++-
 src/view/com/feeds/SavedFeeds.tsx  |   6 +-
 src/view/com/pager/Pager.web.tsx   |  99 ++++++++--------
 src/view/screens/Home.tsx          |  16 ++-
 src/view/screens/SavedFeeds.tsx    |  84 +++++++++-----
 8 files changed, 278 insertions(+), 240 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/me.ts b/src/state/models/me.ts
index 9b2b96832..815044857 100644
--- a/src/state/models/me.ts
+++ b/src/state/models/me.ts
@@ -69,7 +69,6 @@ export class MeModel {
       displayName: this.displayName,
       description: this.description,
       avatar: this.avatar,
-      savedFeeds: this.savedFeeds.serialize(),
     }
   }
 
@@ -91,9 +90,6 @@ export class MeModel {
       if (hasProp(v, 'avatar') && typeof v.avatar === 'string') {
         avatar = v.avatar
       }
-      if (hasProp(v, 'savedFeeds') && isObj(v.savedFeeds)) {
-        this.savedFeeds.hydrate(v.savedFeeds)
-      }
       if (did && handle) {
         this.did = did
         this.handle = handle
@@ -118,7 +114,7 @@ export class MeModel {
       /* dont await */ this.notifications.setup().catch(e => {
         this.rootStore.log.error('Failed to setup notifications model', e)
       })
-      /* dont await */ this.savedFeeds.refresh()
+      /* dont await */ this.savedFeeds.refresh(true)
       this.rootStore.emitSessionLoaded()
       await this.fetchInviteCodes()
       await this.fetchAppPasswords()
@@ -128,6 +124,7 @@ export class MeModel {
   }
 
   async updateIfNeeded() {
+    /* dont await */ this.savedFeeds.refresh(true)
     if (Date.now() - this.lastProfileStateUpdate > PROFILE_UPDATE_INTERVAL) {
       this.rootStore.log.debug('Updating me profile information')
       this.lastProfileStateUpdate = Date.now()
diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts
index 1471420fc..05a1eb128 100644
--- a/src/state/models/ui/preferences.ts
+++ b/src/state/models/ui/preferences.ts
@@ -25,6 +25,7 @@ const LABEL_GROUPS = [
   'spam',
   'impersonation',
 ]
+const VISIBILITY_VALUES = ['show', 'warn', 'hide']
 
 export class LabelPreferencesModel {
   nsfw: LabelPreference = 'hide'
@@ -45,6 +46,7 @@ export class PreferencesModel {
   contentLanguages: string[] =
     deviceLocales?.map?.(locale => locale.languageCode) || []
   contentLabels = new LabelPreferencesModel()
+  pinnedFeeds: string[] = []
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {}, {autoBind: true})
@@ -54,6 +56,7 @@ export class PreferencesModel {
     return {
       contentLanguages: this.contentLanguages,
       contentLabels: this.contentLabels,
+      pinnedFeeds: this.pinnedFeeds,
     }
   }
 
@@ -72,6 +75,13 @@ export class PreferencesModel {
         // default to the device languages
         this.contentLanguages = deviceLocales.map(locale => locale.languageCode)
       }
+      if (
+        hasProp(v, 'pinnedFeeds') &&
+        Array.isArray(v.pinnedFeeds) &&
+        typeof v.pinnedFeeds.every(item => typeof item === 'string')
+      ) {
+        this.pinnedFeeds = v.pinnedFeeds
+      }
     }
   }
 
@@ -88,9 +98,18 @@ export class PreferencesModel {
           AppBskyActorDefs.isContentLabelPref(pref) &&
           AppBskyActorDefs.validateAdultContentPref(pref).success
         ) {
-          if (LABEL_GROUPS.includes(pref.label)) {
-            this.contentLabels[pref.label] = pref.visibility
+          if (
+            LABEL_GROUPS.includes(pref.label) &&
+            VISIBILITY_VALUES.includes(pref.visibility)
+          ) {
+            this.contentLabels[pref.label as keyof LabelPreferencesModel] =
+              pref.visibility as LabelPreference
           }
+        } else if (
+          AppBskyActorDefs.isPinnedFeedsPref(pref) &&
+          AppBskyActorDefs.validatePinnedFeedsPref(pref).success
+        ) {
+          this.pinnedFeeds = pref.feeds
         }
       }
     })
@@ -200,4 +219,39 @@ export class PreferencesModel {
     }
     return res
   }
+
+  async setPinnedFeeds(v: string[]) {
+    const old = this.pinnedFeeds
+    this.pinnedFeeds = v
+    try {
+      await this.update((prefs: AppBskyActorDefs.Preferences) => {
+        const existing = prefs.find(
+          pref =>
+            AppBskyActorDefs.isPinnedFeedsPref(pref) &&
+            AppBskyActorDefs.validatePinnedFeedsPref(pref).success,
+        )
+        if (existing) {
+          existing.feeds = v
+        } else {
+          prefs.push({
+            $type: 'app.bsky.actor.defs#pinnedFeedsPref',
+            feeds: v,
+          })
+        }
+      })
+    } catch (e) {
+      runInAction(() => {
+        this.pinnedFeeds = old
+      })
+      throw e
+    }
+  }
+
+  async addPinnedFeed(v: string) {
+    return this.setPinnedFeeds([...this.pinnedFeeds, v])
+  }
+
+  async removePinnedFeed(v: string) {
+    return this.setPinnedFeeds(this.pinnedFeeds.filter(uri => uri !== v))
+  }
 }
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index d68664c2d..f500aef2e 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -1,12 +1,11 @@
 import {makeAutoObservable, runInAction} from 'mobx'
-import {AppBskyFeedGetSavedFeeds as GetSavedFeeds} from '@atproto/api'
+import {AppBskyFeedDefs} from '@atproto/api'
 import {RootStoreModel} from '../root-store'
 import {bundleAsync} from 'lib/async/bundle'
 import {cleanError} from 'lib/strings/errors'
 import {CustomFeedModel} from '../feeds/custom-feed'
-import {hasProp, isObj} from 'lib/type-guards'
 
-const PAGE_SIZE = 30
+const PAGE_SIZE = 100
 
 export class SavedFeedsModel {
   // state
@@ -14,12 +13,9 @@ export class SavedFeedsModel {
   isRefreshing = false
   hasLoaded = false
   error = ''
-  hasMore = true
-  loadMoreCursor?: string
 
   // data
   feeds: CustomFeedModel[] = []
-  pinned: CustomFeedModel[] = []
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(
@@ -31,24 +27,6 @@ export class SavedFeedsModel {
     )
   }
 
-  serialize() {
-    return {
-      pinned: this.pinned.map(f => f.serialize()),
-    }
-  }
-
-  hydrate(v: unknown) {
-    if (isObj(v)) {
-      if (hasProp(v, 'pinned')) {
-        const pinnedSerialized = (v as any).pinned as string[]
-        const pinnedDeserialized = pinnedSerialized.map(
-          (s: string) => new CustomFeedModel(this.rootStore, JSON.parse(s)),
-        )
-        this.pinned = pinnedDeserialized
-      }
-    }
-  }
-
   get hasContent() {
     return this.feeds.length > 0
   }
@@ -61,149 +39,121 @@ export class SavedFeedsModel {
     return this.hasLoaded && !this.hasContent
   }
 
-  get numFeeds() {
-    return this.feeds.length
+  get pinned() {
+    return this.rootStore.preferences.pinnedFeeds
+      .map(uri => this.feeds.find(f => f.uri === uri) as CustomFeedModel)
+      .filter(Boolean)
   }
 
   get unpinned() {
-    return this.feeds.filter(
-      f => !this.pinned.find(p => p.data.uri === f.data.uri),
-    )
-  }
-
-  get feedNames() {
-    return this.feeds.map(f => f.displayName)
+    return this.feeds.filter(f => !this.isPinned(f))
   }
 
   get pinnedFeedNames() {
     return this.pinned.map(f => f.displayName)
   }
 
-  togglePinnedFeed(feed: CustomFeedModel) {
-    if (!this.isPinned(feed)) {
-      this.pinned = [...this.pinned, feed]
-    } else {
-      this.removePinnedFeed(feed.data.uri)
-    }
-  }
-
-  removePinnedFeed(uri: string) {
-    this.pinned = this.pinned.filter(f => f.data.uri !== uri)
-  }
-
-  reorderPinnedFeeds(temp: CustomFeedModel[]) {
-    this.pinned = temp.filter(item => this.isPinned(item))
-  }
-
-  isPinned(feed: CustomFeedModel) {
-    return this.pinned.find(f => f.data.uri === feed.data.uri) ? true : false
-  }
-
-  movePinnedItem(item: CustomFeedModel, direction: 'up' | 'down') {
-    if (this.pinned.length < 2) {
-      throw new Error('Array must have at least 2 items')
-    }
-    const index = this.pinned.indexOf(item)
-    if (index === -1) {
-      throw new Error('Item not found in array')
-    }
-
-    const len = this.pinned.length
-
-    runInAction(() => {
-      if (direction === 'up') {
-        if (index === 0) {
-          // Remove the item from the first place and put it at the end
-          this.pinned.push(this.pinned.shift()!)
-        } else {
-          // Swap the item with the one before it
-          const temp = this.pinned[index]
-          this.pinned[index] = this.pinned[index - 1]
-          this.pinned[index - 1] = temp
-        }
-      } else if (direction === 'down') {
-        if (index === len - 1) {
-          // Remove the item from the last place and put it at the start
-          this.pinned.unshift(this.pinned.pop()!)
-        } else {
-          // Swap the item with the one after it
-          const temp = this.pinned[index]
-          this.pinned[index] = this.pinned[index + 1]
-          this.pinned[index + 1] = temp
-        }
-      }
-      // this.pinned = [...this.pinned]
-    })
-  }
-
   // public api
   // =
 
-  async refresh(quietRefresh = false) {
-    return this.loadMore(true, quietRefresh)
-  }
-
   clear() {
     this.isLoading = false
     this.isRefreshing = false
     this.hasLoaded = false
     this.error = ''
-    this.hasMore = true
-    this.loadMoreCursor = undefined
     this.feeds = []
   }
 
-  loadMore = bundleAsync(
-    async (replace: boolean = false, quietRefresh = false) => {
-      if (!replace && !this.hasMore) {
-        return
-      }
-      this._xLoading(replace && !quietRefresh)
-      try {
+  refresh = bundleAsync(async (quietRefresh = false) => {
+    this._xLoading(!quietRefresh)
+    try {
+      let feeds: AppBskyFeedDefs.GeneratorView[] = []
+      let cursor
+      for (let i = 0; i < 100; i++) {
         const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
           limit: PAGE_SIZE,
-          cursor: replace ? undefined : this.loadMoreCursor,
+          cursor,
         })
-        if (replace) {
-          this._replaceAll(res)
-        } else {
-          this._appendAll(res)
+        feeds = feeds.concat(res.data.feeds)
+        cursor = res.data.cursor
+        if (!cursor) {
+          break
         }
-        this._xIdle()
-      } catch (e: any) {
-        this._xIdle(e)
       }
-    },
-  )
-
-  removeFeed(uri: string) {
-    this.feeds = this.feeds.filter(f => f.data.uri !== uri)
-  }
-
-  addFeed(algoItem: CustomFeedModel) {
-    this.feeds.push(new CustomFeedModel(this.rootStore, algoItem.data))
-  }
+      runInAction(() => {
+        this.feeds = feeds.map(f => new CustomFeedModel(this.rootStore, f))
+      })
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(e)
+    }
+  })
 
-  async save(algoItem: CustomFeedModel) {
+  async save(feed: CustomFeedModel) {
     try {
-      await algoItem.save()
-      this.addFeed(algoItem)
+      await feed.save()
+      runInAction(() => {
+        this.feeds = [
+          ...this.feeds,
+          new CustomFeedModel(this.rootStore, feed.data),
+        ]
+      })
     } catch (e: any) {
       this.rootStore.log.error('Failed to save feed', e)
     }
   }
 
-  async unsave(algoItem: CustomFeedModel) {
-    const uri = algoItem.uri
+  async unsave(feed: CustomFeedModel) {
+    const uri = feed.uri
     try {
-      await algoItem.unsave()
-      this.removeFeed(uri)
-      this.removePinnedFeed(uri)
+      if (this.isPinned(feed)) {
+        await this.rootStore.preferences.removePinnedFeed(uri)
+      }
+      await feed.unsave()
+      runInAction(() => {
+        this.feeds = this.feeds.filter(f => f.data.uri !== uri)
+      })
     } catch (e: any) {
       this.rootStore.log.error('Failed to unsave feed', e)
     }
   }
 
+  async togglePinnedFeed(feed: CustomFeedModel) {
+    if (!this.isPinned(feed)) {
+      return this.rootStore.preferences.addPinnedFeed(feed.uri)
+    } else {
+      return this.rootStore.preferences.removePinnedFeed(feed.uri)
+    }
+  }
+
+  async reorderPinnedFeeds(feeds: CustomFeedModel[]) {
+    return this.rootStore.preferences.setPinnedFeeds(
+      feeds.filter(feed => this.isPinned(feed)).map(feed => feed.uri),
+    )
+  }
+
+  isPinned(feed: CustomFeedModel) {
+    return this.rootStore.preferences.pinnedFeeds.includes(feed.uri)
+  }
+
+  async movePinnedFeed(item: CustomFeedModel, direction: 'up' | 'down') {
+    const pinned = this.rootStore.preferences.pinnedFeeds.slice()
+    const index = pinned.indexOf(item.uri)
+    if (index === -1) {
+      return
+    }
+    if (direction === 'up' && index !== 0) {
+      const temp = pinned[index]
+      pinned[index] = pinned[index - 1]
+      pinned[index - 1] = temp
+    } else if (direction === 'down' && index < pinned.length - 1) {
+      const temp = pinned[index]
+      pinned[index] = pinned[index + 1]
+      pinned[index + 1] = temp
+    }
+    await this.rootStore.preferences.setPinnedFeeds(pinned)
+  }
+
   // state transitions
   // =
 
@@ -219,23 +169,7 @@ export class SavedFeedsModel {
     this.hasLoaded = true
     this.error = cleanError(err)
     if (err) {
-      this.rootStore.log.error('Failed to fetch user followers', err)
-    }
-  }
-
-  // helper functions
-  // =
-
-  _replaceAll(res: GetSavedFeeds.Response) {
-    this.feeds = []
-    this._appendAll(res)
-  }
-
-  _appendAll(res: GetSavedFeeds.Response) {
-    this.loadMoreCursor = res.data.cursor
-    this.hasMore = !!this.loadMoreCursor
-    for (const f of res.data.feeds) {
-      this.feeds.push(new CustomFeedModel(this.rootStore, f))
+      this.rootStore.log.error('Failed to fetch user feeds', err)
     }
   }
 }
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index 911c33da4..d4e843b67 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -39,20 +39,30 @@ export const CustomFeed = observer(
     const pal = usePalette('default')
     const navigation = useNavigation<NavigationProp>()
 
-    const onToggleSaved = React.useCallback(() => {
+    const onToggleSaved = React.useCallback(async () => {
       if (item.data.viewer?.saved) {
         store.shell.openModal({
           name: 'confirm',
           title: 'Remove from my feeds',
           message: `Remove ${item.displayName} from my feeds?`,
-          onPressConfirm: () => {
-            store.me.savedFeeds.unsave(item)
-            Toast.show('Removed from my feeds')
+          onPressConfirm: async () => {
+            try {
+              await store.me.savedFeeds.unsave(item)
+              Toast.show('Removed from my feeds')
+            } catch (e) {
+              Toast.show('There was an issue contacting your server')
+              store.log.error('Failed to unsave feed', {e})
+            }
           },
         })
       } else {
-        store.me.savedFeeds.save(item)
-        Toast.show('Added to my feeds')
+        try {
+          await store.me.savedFeeds.save(item)
+          Toast.show('Added to my feeds')
+        } catch (e) {
+          Toast.show('There was an issue contacting your server')
+          store.log.error('Failed to save feed', {e})
+        }
       }
     }, [store, item])
 
diff --git a/src/view/com/feeds/SavedFeeds.tsx b/src/view/com/feeds/SavedFeeds.tsx
index 7135fdf0a..1cb109a43 100644
--- a/src/view/com/feeds/SavedFeeds.tsx
+++ b/src/view/com/feeds/SavedFeeds.tsx
@@ -29,6 +29,10 @@ export const SavedFeeds = observer(
       }
     }, [store, isPageFocused])
 
+    const onRefresh = useCallback(() => {
+      store.me.savedFeeds.refresh()
+    }, [store])
+
     const renderListEmptyComponent = useCallback(() => {
       return (
         <View
@@ -73,7 +77,7 @@ export const SavedFeeds = observer(
         refreshControl={
           <RefreshControl
             refreshing={store.me.savedFeeds.isRefreshing}
-            onRefresh={() => store.me.savedFeeds.refresh()}
+            onRefresh={onRefresh}
             tintColor={pal.colors.text}
             titleColor={pal.colors.text}
             progressViewOffset={headerOffset}
diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx
index 107497f6f..7be2b11ec 100644
--- a/src/view/com/pager/Pager.web.tsx
+++ b/src/view/com/pager/Pager.web.tsx
@@ -1,12 +1,9 @@
 import React from 'react'
-import {Animated, View} from 'react-native'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {View} from 'react-native'
 import {s} from 'lib/styles'
 
 export interface RenderTabBarFnProps {
   selectedPage: number
-  position: Animated.Value
-  offset: Animated.Value
   onSelect?: (index: number) => void
 }
 export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
@@ -17,53 +14,51 @@ interface Props {
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
 }
-export const Pager = ({
-  children,
-  tabBarPosition = 'top',
-  initialPage = 0,
-  renderTabBar,
-  onPageSelected,
-}: React.PropsWithChildren<Props>) => {
-  const [selectedPage, setSelectedPage] = React.useState(initialPage)
-  const position = useAnimatedValue(0)
-  const offset = useAnimatedValue(0)
+export const Pager = React.forwardRef(
+  (
+    {
+      children,
+      tabBarPosition = 'top',
+      initialPage = 0,
+      renderTabBar,
+      onPageSelected,
+    }: React.PropsWithChildren<Props>,
+    ref,
+  ) => {
+    const [selectedPage, setSelectedPage] = React.useState(initialPage)
 
-  const onTabBarSelect = React.useCallback(
-    (index: number) => {
-      setSelectedPage(index)
-      onPageSelected?.(index)
-      Animated.timing(position, {
-        toValue: index,
-        duration: 200,
-        useNativeDriver: true,
-      }).start()
-    },
-    [setSelectedPage, onPageSelected, position],
-  )
+    React.useImperativeHandle(ref, () => ({
+      setPage: (index: number) => setSelectedPage(index),
+    }))
 
-  return (
-    <View>
-      {tabBarPosition === 'top' &&
-        renderTabBar({
-          selectedPage,
-          position,
-          offset,
-          onSelect: onTabBarSelect,
-        })}
-      {React.Children.map(children, (child, i) => (
-        <View
-          style={selectedPage === i ? undefined : s.hidden}
-          key={`page-${i}`}>
-          {child}
-        </View>
-      ))}
-      {tabBarPosition === 'bottom' &&
-        renderTabBar({
-          selectedPage,
-          position,
-          offset,
-          onSelect: onTabBarSelect,
-        })}
-    </View>
-  )
-}
+    const onTabBarSelect = React.useCallback(
+      (index: number) => {
+        setSelectedPage(index)
+        onPageSelected?.(index)
+      },
+      [setSelectedPage, onPageSelected],
+    )
+
+    return (
+      <View>
+        {tabBarPosition === 'top' &&
+          renderTabBar({
+            selectedPage,
+            onSelect: onTabBarSelect,
+          })}
+        {React.Children.map(children, (child, i) => (
+          <View
+            style={selectedPage === i ? undefined : s.hidden}
+            key={`page-${i}`}>
+            {child}
+          </View>
+        ))}
+        {tabBarPosition === 'bottom' &&
+          renderTabBar({
+            selectedPage,
+            onSelect: onTabBarSelect,
+          })}
+      </View>
+    )
+  },
+)
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 644182126..54cec3b31 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -4,6 +4,7 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
+import isEqual from 'lodash.isequal'
 import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
 import {PostsFeedModel} from 'state/models/feeds/posts'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@@ -44,15 +45,26 @@ export const HomeScreen = withAuthRequired(
     }, [store])
 
     React.useEffect(() => {
+      const {pinned} = store.me.savedFeeds
+      if (
+        isEqual(
+          pinned.map(p => p.uri),
+          customFeeds.map(f => (f.params as GetCustomFeed.QueryParams).feed),
+        )
+      ) {
+        // no changes
+        return
+      }
+
       const feeds = []
-      for (const feed of store.me.savedFeeds.pinned) {
+      for (const feed of pinned) {
         const model = new PostsFeedModel(store, 'custom', {feed: feed.uri})
         model.setup()
         feeds.push(model)
       }
       pagerRef.current?.setPage(0)
       setCustomFeeds(feeds)
-    }, [store, store.me.savedFeeds.pinned, setCustomFeeds])
+    }, [store, store.me.savedFeeds.pinned, customFeeds, setCustomFeeds])
 
     React.useEffect(() => {
       // refresh whats hot when lang preferences change
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index c2723f694..613e42fbf 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -27,26 +27,26 @@ import DraggableFlatList, {
 import {CustomFeed} from 'view/com/feeds/CustomFeed'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
+import * as Toast from 'view/com/util/Toast'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
 
 export const SavedFeeds = withAuthRequired(
   observer(({}: Props) => {
-    // hooks for global items
     const pal = usePalette('default')
-    const rootStore = useStores()
+    const store = useStores()
     const {screen} = useAnalytics()
 
-    // hooks for local
-    const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
+    const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
     useFocusEffect(
       useCallback(() => {
         screen('SavedFeeds')
-        rootStore.shell.setMinimalShellMode(false)
+        store.shell.setMinimalShellMode(false)
         savedFeeds.refresh()
-      }, [screen, rootStore, savedFeeds]),
+      }, [screen, store, savedFeeds]),
     )
-    const _ListEmptyComponent = () => {
+
+    const renderListEmptyComponent = useCallback(() => {
       return (
         <View
           style={[
@@ -56,19 +56,33 @@ export const SavedFeeds = withAuthRequired(
             styles.empty,
           ]}>
           <Text type="lg" style={[pal.text]}>
-            You don't have any pinned feeds. To pin a feed, go back to the Saved
-            Feeds screen and click the pin icon!
+            You don't have any saved feeds.
           </Text>
         </View>
       )
-    }
-    const _ListFooterComponent = () => {
+    }, [pal])
+
+    const renderListFooterComponent = useCallback(() => {
       return (
         <View style={styles.footer}>
           {savedFeeds.isLoading && <ActivityIndicator />}
         </View>
       )
-    }
+    }, [savedFeeds])
+
+    const onRefresh = useCallback(() => savedFeeds.refresh(), [savedFeeds])
+
+    const onDragEnd = useCallback(
+      async ({data}) => {
+        try {
+          await savedFeeds.reorderPinnedFeeds(data)
+        } catch (e) {
+          Toast.show('There was an issue contacting the server')
+          store.log.error('Failed to save pinned feed order', {e})
+        }
+      },
+      [savedFeeds, store],
+    )
 
     return (
       <CenteredView
@@ -90,17 +104,17 @@ export const SavedFeeds = withAuthRequired(
           refreshControl={
             <RefreshControl
               refreshing={savedFeeds.isRefreshing}
-              onRefresh={() => savedFeeds.refresh()}
+              onRefresh={onRefresh}
               tintColor={pal.colors.text}
               titleColor={pal.colors.text}
             />
           }
           renderItem={({item, drag}) => <ListItem item={item} drag={drag} />}
           initialNumToRender={10}
-          ListFooterComponent={_ListFooterComponent}
-          ListEmptyComponent={_ListEmptyComponent}
+          ListFooterComponent={renderListFooterComponent}
+          ListEmptyComponent={renderListEmptyComponent}
           extraData={savedFeeds.isLoading}
-          onDragEnd={({data}) => savedFeeds.reorderPinnedFeeds(data)}
+          onDragEnd={onDragEnd}
         />
       </CenteredView>
     )
@@ -110,13 +124,35 @@ export const SavedFeeds = withAuthRequired(
 const ListItem = observer(
   ({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
     const pal = usePalette('default')
-    const rootStore = useStores()
-    const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
+    const store = useStores()
+    const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
     const isPinned = savedFeeds.isPinned(item)
+
     const onTogglePinned = useCallback(
-      () => savedFeeds.togglePinnedFeed(item),
-      [savedFeeds, item],
+      () =>
+        savedFeeds.togglePinnedFeed(item).catch(e => {
+          Toast.show('There was an issue contacting the server')
+          store.log.error('Failed to toggle pinned feed', {e})
+        }),
+      [savedFeeds, item, store],
+    )
+    const onPressUp = useCallback(
+      () =>
+        savedFeeds.movePinnedFeed(item, 'up').catch(e => {
+          Toast.show('There was an issue contacting the server')
+          store.log.error('Failed to set pinned feed order', {e})
+        }),
+      [store, savedFeeds, item],
     )
+    const onPressDown = useCallback(
+      () =>
+        savedFeeds.movePinnedFeed(item, 'down').catch(e => {
+          Toast.show('There was an issue contacting the server')
+          store.log.error('Failed to set pinned feed order', {e})
+        }),
+      [store, savedFeeds, item],
+    )
+
     return (
       <ScaleDecorator>
         <ShadowDecorator>
@@ -128,9 +164,7 @@ const ListItem = observer(
               <View style={styles.webArrowButtonsContainer}>
                 <TouchableOpacity
                   accessibilityRole="button"
-                  onPress={() => {
-                    savedFeeds.movePinnedItem(item, 'up')
-                  }}>
+                  onPress={onPressUp}>
                   <FontAwesomeIcon
                     icon="arrow-up"
                     size={12}
@@ -139,9 +173,7 @@ const ListItem = observer(
                 </TouchableOpacity>
                 <TouchableOpacity
                   accessibilityRole="button"
-                  onPress={() => {
-                    savedFeeds.movePinnedItem(item, 'down')
-                  }}>
+                  onPress={onPressDown}>
                   <FontAwesomeIcon
                     icon="arrow-down"
                     size={12}
-- 
cgit 1.4.1


From 5537d19e555c39f5f9a0ec16735ea4c3860357c4 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 18 May 2023 14:39:04 -0500
Subject: Update saved feeds to use preferences

---
 src/state/models/feeds/custom-feed.ts       | 20 ++--------
 src/state/models/media/image.ts             |  2 +-
 src/state/models/ui/preferences.ts          | 57 ++++++++++++++++++++++-------
 src/state/models/ui/saved-feeds.ts          | 25 +++++++------
 src/state/models/ui/shell.ts                |  2 +-
 src/view/com/feeds/CustomFeed.tsx           |  2 +-
 src/view/com/util/ViewHeader.tsx            |  2 +-
 src/view/com/util/moderation/ImageHider.tsx |  8 ++--
 8 files changed, 68 insertions(+), 50 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/feeds/custom-feed.ts b/src/state/models/feeds/custom-feed.ts
index 5e550ec69..e457d2d1e 100644
--- a/src/state/models/feeds/custom-feed.ts
+++ b/src/state/models/feeds/custom-feed.ts
@@ -38,7 +38,7 @@ export class CustomFeedModel {
   }
 
   get isSaved() {
-    return this.data.viewer?.saved
+    return this.rootStore.preferences.savedFeeds.includes(this.uri)
   }
 
   get isLiked() {
@@ -49,23 +49,11 @@ export class CustomFeedModel {
   // =
 
   async save() {
-    await this.rootStore.agent.app.bsky.feed.saveFeed({
-      feed: this.uri,
-    })
-    runInAction(() => {
-      this.data.viewer = this.data.viewer || {}
-      this.data.viewer.saved = true
-    })
+    await this.rootStore.preferences.addSavedFeed(this.uri)
   }
 
   async unsave() {
-    await this.rootStore.agent.app.bsky.feed.unsaveFeed({
-      feed: this.uri,
-    })
-    runInAction(() => {
-      this.data.viewer = this.data.viewer || {}
-      this.data.viewer.saved = false
-    })
+    await this.rootStore.preferences.removeSavedFeed(this.uri)
   }
 
   async like() {
@@ -82,7 +70,7 @@ export class CustomFeedModel {
   }
 
   async unlike() {
-    if (!this.data.viewer.like) {
+    if (!this.data.viewer?.like) {
       return
     }
     try {
diff --git a/src/state/models/media/image.ts b/src/state/models/media/image.ts
index ec93bf5b6..6edf88d9d 100644
--- a/src/state/models/media/image.ts
+++ b/src/state/models/media/image.ts
@@ -135,7 +135,7 @@ export class ImageModel implements RNImage {
   // Only for mobile
   async crop() {
     try {
-      const cropped = await openCropper({
+      const cropped = await openCropper(this.rootStore, {
         mediaType: 'photo',
         path: this.path,
         freeStyleCropEnabled: true,
diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts
index 05a1eb128..120b4adcc 100644
--- a/src/state/models/ui/preferences.ts
+++ b/src/state/models/ui/preferences.ts
@@ -46,6 +46,7 @@ export class PreferencesModel {
   contentLanguages: string[] =
     deviceLocales?.map?.(locale => locale.languageCode) || []
   contentLabels = new LabelPreferencesModel()
+  savedFeeds: string[] = []
   pinnedFeeds: string[] = []
 
   constructor(public rootStore: RootStoreModel) {
@@ -56,6 +57,7 @@ export class PreferencesModel {
     return {
       contentLanguages: this.contentLanguages,
       contentLabels: this.contentLabels,
+      savedFeeds: this.savedFeeds,
       pinnedFeeds: this.pinnedFeeds,
     }
   }
@@ -75,6 +77,13 @@ export class PreferencesModel {
         // default to the device languages
         this.contentLanguages = deviceLocales.map(locale => locale.languageCode)
       }
+      if (
+        hasProp(v, 'savedFeeds') &&
+        Array.isArray(v.savedFeeds) &&
+        typeof v.savedFeeds.every(item => typeof item === 'string')
+      ) {
+        this.savedFeeds = v.savedFeeds
+      }
       if (
         hasProp(v, 'pinnedFeeds') &&
         Array.isArray(v.pinnedFeeds) &&
@@ -106,10 +115,11 @@ export class PreferencesModel {
               pref.visibility as LabelPreference
           }
         } else if (
-          AppBskyActorDefs.isPinnedFeedsPref(pref) &&
-          AppBskyActorDefs.validatePinnedFeedsPref(pref).success
+          AppBskyActorDefs.isSavedFeedsPref(pref) &&
+          AppBskyActorDefs.validateSavedFeedsPref(pref).success
         ) {
-          this.pinnedFeeds = pref.feeds
+          this.savedFeeds = pref.saved
+          this.pinnedFeeds = pref.pinned
         }
       }
     })
@@ -220,38 +230,57 @@ export class PreferencesModel {
     return res
   }
 
-  async setPinnedFeeds(v: string[]) {
-    const old = this.pinnedFeeds
-    this.pinnedFeeds = v
+  async setSavedFeeds(saved: string[], pinned: string[]) {
+    const oldSaved = this.savedFeeds
+    const oldPinned = this.pinnedFeeds
+    this.savedFeeds = saved
+    this.pinnedFeeds = pinned
     try {
       await this.update((prefs: AppBskyActorDefs.Preferences) => {
         const existing = prefs.find(
           pref =>
-            AppBskyActorDefs.isPinnedFeedsPref(pref) &&
-            AppBskyActorDefs.validatePinnedFeedsPref(pref).success,
+            AppBskyActorDefs.isSavedFeedsPref(pref) &&
+            AppBskyActorDefs.validateSavedFeedsPref(pref).success,
         )
         if (existing) {
-          existing.feeds = v
+          existing.saved = saved
+          existing.pinned = pinned
         } else {
           prefs.push({
-            $type: 'app.bsky.actor.defs#pinnedFeedsPref',
-            feeds: v,
+            $type: 'app.bsky.actor.defs#savedFeedsPref',
+            saved,
+            pinned,
           })
         }
       })
     } catch (e) {
       runInAction(() => {
-        this.pinnedFeeds = old
+        this.savedFeeds = oldSaved
+        this.pinnedFeeds = oldPinned
       })
       throw e
     }
   }
 
+  async addSavedFeed(v: string) {
+    return this.setSavedFeeds([...this.savedFeeds, v], this.pinnedFeeds)
+  }
+
+  async removeSavedFeed(v: string) {
+    return this.setSavedFeeds(
+      this.savedFeeds.filter(uri => uri !== v),
+      this.pinnedFeeds.filter(uri => uri !== v),
+    )
+  }
+
   async addPinnedFeed(v: string) {
-    return this.setPinnedFeeds([...this.pinnedFeeds, v])
+    return this.setSavedFeeds(this.savedFeeds, [...this.pinnedFeeds, v])
   }
 
   async removePinnedFeed(v: string) {
-    return this.setPinnedFeeds(this.pinnedFeeds.filter(uri => uri !== v))
+    return this.setSavedFeeds(
+      this.savedFeeds,
+      this.pinnedFeeds.filter(uri => uri !== v),
+    )
   }
 }
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index f500aef2e..9de28e028 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -5,8 +5,6 @@ import {bundleAsync} from 'lib/async/bundle'
 import {cleanError} from 'lib/strings/errors'
 import {CustomFeedModel} from '../feeds/custom-feed'
 
-const PAGE_SIZE = 100
-
 export class SavedFeedsModel {
   // state
   isLoading = false
@@ -69,16 +67,15 @@ export class SavedFeedsModel {
     try {
       let feeds: AppBskyFeedDefs.GeneratorView[] = []
       let cursor
-      for (let i = 0; i < 100; i++) {
-        const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
-          limit: PAGE_SIZE,
-          cursor,
+      for (
+        let i = 0;
+        i < this.rootStore.preferences.savedFeeds.length;
+        i += 25
+      ) {
+        const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerators({
+          feeds: this.rootStore.preferences.savedFeeds.slice(i, 25),
         })
         feeds = feeds.concat(res.data.feeds)
-        cursor = res.data.cursor
-        if (!cursor) {
-          break
-        }
       }
       runInAction(() => {
         this.feeds = feeds.map(f => new CustomFeedModel(this.rootStore, f))
@@ -127,7 +124,8 @@ export class SavedFeedsModel {
   }
 
   async reorderPinnedFeeds(feeds: CustomFeedModel[]) {
-    return this.rootStore.preferences.setPinnedFeeds(
+    return this.rootStore.preferences.setSavedFeeds(
+      this.rootStore.preferences.savedFeeds,
       feeds.filter(feed => this.isPinned(feed)).map(feed => feed.uri),
     )
   }
@@ -151,7 +149,10 @@ export class SavedFeedsModel {
       pinned[index] = pinned[index + 1]
       pinned[index + 1] = temp
     }
-    await this.rootStore.preferences.setPinnedFeeds(pinned)
+    await this.rootStore.preferences.setSavedFeeds(
+      this.rootStore.preferences.savedFeeds,
+      pinned,
+    )
   }
 
   // state transitions
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 9b9a176be..95b666243 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -119,7 +119,7 @@ export type Modal =
   // Moderation
   | ReportAccountModal
   | ReportPostModal
-  | CreateMuteListModal
+  | CreateOrEditMuteListModal
   | ListAddRemoveUserModal
 
   // Posts
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index d4e843b67..9a71eb846 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -40,7 +40,7 @@ export const CustomFeed = observer(
     const navigation = useNavigation<NavigationProp>()
 
     const onToggleSaved = React.useCallback(async () => {
-      if (item.data.viewer?.saved) {
+      if (item.isSaved) {
         store.shell.openModal({
           name: 'confirm',
           title: 'Remove from my feeds',
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 7f13f1838..c17a65b14 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -121,7 +121,7 @@ const Container = observer(
   }: {
     children: React.ReactNode
     hideOnScroll: boolean
-    showBorder: boolean
+    showBorder?: boolean
   }) => {
     const store = useStores()
     const pal = usePalette('default')
diff --git a/src/view/com/util/moderation/ImageHider.tsx b/src/view/com/util/moderation/ImageHider.tsx
index b42c6397d..40add5b67 100644
--- a/src/view/com/util/moderation/ImageHider.tsx
+++ b/src/view/com/util/moderation/ImageHider.tsx
@@ -27,6 +27,10 @@ export function ImageHider({
     setOverride(false)
   }, [setOverride])
 
+  if (moderation.behavior === ModerationBehaviorCode.Hide) {
+    return null
+  }
+
   if (moderation.behavior !== ModerationBehaviorCode.WarnImages) {
     return (
       <View testID={testID} style={style}>
@@ -35,10 +39,6 @@ export function ImageHider({
     )
   }
 
-  if (moderation.behavior === ModerationBehaviorCode.Hide) {
-    return null
-  }
-
   return (
     <View style={[styles.container, containerStyle]}>
       <View testID={testID} style={style}>
-- 
cgit 1.4.1


From 3c89dd40f90deda00dd4d717bec0bb2f4217c1d1 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 18 May 2023 16:54:17 -0500
Subject: Fix lint

---
 src/state/models/feeds/posts.ts    | 1 -
 src/state/models/ui/saved-feeds.ts | 1 -
 src/view/com/pager/TabBar.tsx      | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/feeds/posts.ts b/src/state/models/feeds/posts.ts
index 5a5b28785..ac32044b4 100644
--- a/src/state/models/feeds/posts.ts
+++ b/src/state/models/feeds/posts.ts
@@ -6,7 +6,6 @@ import {
   AppBskyFeedGetAuthorFeed as GetAuthorFeed,
   AppBskyFeedGetFeed as GetCustomFeed,
   RichText,
-  jsonToLex,
 } from '@atproto/api'
 import AwaitLock from 'await-lock'
 import {bundleAsync} from 'lib/async/bundle'
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index 9de28e028..0d04f9c8d 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -66,7 +66,6 @@ export class SavedFeedsModel {
     this._xLoading(!quietRefresh)
     try {
       let feeds: AppBskyFeedDefs.GeneratorView[] = []
-      let cursor
       for (
         let i = 0;
         i < this.rootStore.preferences.savedFeeds.length;
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index f6c41ce7c..485219730 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -10,7 +10,7 @@ import {StyleSheet, View, ScrollView} from 'react-native'
 import {Text} from '../util/text/Text'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb, isWeb} from 'platform/detection'
+import {isDesktopWeb} from 'platform/detection'
 
 export interface TabBarProps {
   testID?: string
-- 
cgit 1.4.1


From 52a8879754e07c3e0aa90a40fdc27dfdc40fd450 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 22 May 2023 20:07:40 -0700
Subject: update pinned feed from custom feed view

---
 src/state/models/ui/saved-feeds.ts | 10 ++++++--
 src/view/screens/CustomFeed.tsx    | 52 +++++++++++++++++++++++++++++---------
 2 files changed, 48 insertions(+), 14 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index 0d04f9c8d..244e75898 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -129,8 +129,14 @@ export class SavedFeedsModel {
     )
   }
 
-  isPinned(feed: CustomFeedModel) {
-    return this.rootStore.preferences.pinnedFeeds.includes(feed.uri)
+  isPinned(feedOrUri: CustomFeedModel | string) {
+    let uri: string
+    if (typeof feedOrUri === 'string') {
+      uri = feedOrUri
+    } else {
+      uri = feedOrUri.uri
+    }
+    return this.rootStore.preferences.pinnedFeeds.includes(uri)
   }
 
   async movePinnedFeed(item: CustomFeedModel, direction: 'up' | 'down') {
diff --git a/src/view/screens/CustomFeed.tsx b/src/view/screens/CustomFeed.tsx
index 353995540..952461c9c 100644
--- a/src/view/screens/CustomFeed.tsx
+++ b/src/view/screens/CustomFeed.tsx
@@ -24,7 +24,7 @@ import {isDesktopWeb} from 'platform/detection'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {shareUrl} from 'lib/sharing'
 import {toShareUrl} from 'lib/strings/url-helpers'
-import { Haptics } from 'lib/haptics'
+import {Haptics} from 'lib/haptics'
 
 const HITSLOP = {top: 5, left: 5, bottom: 5, right: 5}
 
@@ -47,6 +47,7 @@ export const CustomFeedScreen = withAuthRequired(
       feed.setup()
       return feed
     }, [store, uri])
+    const isPinned = store.me.savedFeeds.isPinned(uri)
 
     useSetTitle(currentFeed?.displayName)
 
@@ -65,7 +66,6 @@ export const CustomFeedScreen = withAuthRequired(
         store.log.error('Failed up update feeds', {err})
       }
     }, [store, currentFeed])
-
     const onToggleLiked = React.useCallback(async () => {
       Haptics.default()
       try {
@@ -81,6 +81,13 @@ export const CustomFeedScreen = withAuthRequired(
         store.log.error('Failed up toggle like', {err})
       }
     }, [store, currentFeed])
+    const onTogglePinned = React.useCallback(async () => {
+      Haptics.default()
+      store.me.savedFeeds.togglePinnedFeed(currentFeed!).catch(e => {
+        Toast.show('There was an issue contacting the server')
+        store.log.error('Failed to toggle pinned feed', {e})
+      })
+    }, [store, currentFeed])
     const onPressShare = React.useCallback(() => {
       const url = toShareUrl(`/profile/${name}/feed/${rkey}`)
       shareUrl(url)
@@ -212,15 +219,30 @@ export const CustomFeedScreen = withAuthRequired(
                 {currentFeed.data.description}
               </Text>
             ) : null}
-            <TextLink
-              type="md-medium"
-              style={pal.textLight}
-              href={`/profile/${name}/feed/${rkey}/liked-by`}
-              text={`Liked by ${currentFeed?.data.likeCount} ${pluralize(
-                currentFeed?.data.likeCount || 0,
-                'user',
-              )}`}
-            />
+            <View style={styles.headerDetailsFooter}>
+              <TextLink
+                type="md-medium"
+                style={pal.textLight}
+                href={`/profile/${name}/feed/${rkey}/liked-by`}
+                text={`Liked by ${currentFeed?.data.likeCount} ${pluralize(
+                  currentFeed?.data.likeCount || 0,
+                  'user',
+                )}`}
+              />
+              <Button
+                type={'default'}
+                accessibilityLabel={
+                  isPinned ? 'Unpin this feed' : 'Pin this feed'
+                }
+                accessibilityHint=""
+                onPress={onTogglePinned}>
+                <FontAwesomeIcon
+                  icon="thumb-tack"
+                  size={20}
+                  color={isPinned ? colors.blue3 : pal.colors.icon}
+                />
+              </Button>
+            </View>
           </View>
           <View style={[styles.fakeSelector, pal.border]}>
             <View
@@ -241,6 +263,7 @@ export const CustomFeedScreen = withAuthRequired(
       onPressShare,
       name,
       rkey,
+      isPinned,
     ])
 
     return (
@@ -250,7 +273,7 @@ export const CustomFeedScreen = withAuthRequired(
           scrollElRef={scrollElRef}
           feed={algoFeed}
           ListHeaderComponent={renderListHeaderComponent}
-          extraData={uri}
+          extraData={[uri, isPinned]}
         />
       </View>
     )
@@ -275,6 +298,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
   },
+  headerDetailsFooter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
   fakeSelector: {
     flexDirection: 'row',
     paddingHorizontal: isDesktopWeb ? 16 : 6,
-- 
cgit 1.4.1


From fc9e28ca72ce498df8d0902c8e51d226affefd83 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Tue, 23 May 2023 15:28:46 -0700
Subject: slight performance improvements

---
 src/state/models/log.ts            | 16 ++++++++++++++++
 src/state/models/ui/preferences.ts |  8 ++++++--
 src/state/models/ui/saved-feeds.ts |  4 ++++
 src/view/screens/SavedFeeds.tsx    |  9 +++++++--
 4 files changed, 33 insertions(+), 4 deletions(-)

(limited to 'src/state/models/ui/saved-feeds.ts')

diff --git a/src/state/models/log.ts b/src/state/models/log.ts
index d80617139..7c9c37c0d 100644
--- a/src/state/models/log.ts
+++ b/src/state/models/log.ts
@@ -27,6 +27,7 @@ function genId(): string {
 
 export class LogModel {
   entries: LogEntry[] = []
+  timers = new Map<string, number>()
 
   constructor() {
     makeAutoObservable(this)
@@ -74,6 +75,21 @@ export class LogModel {
       ts: Date.now(),
     })
   }
+
+  time = (label = 'default') => {
+    this.timers.set(label, performance.now())
+  }
+
+  timeEnd = (label = 'default', warn = false) => {
+    const endTime = performance.now()
+    if (this.timers.has(label)) {
+      const elapsedTime = endTime - this.timers.get(label)!
+      console.log(`${label}: ${elapsedTime.toFixed(3)}ms`)
+      this.timers.delete(label)
+    } else {
+      warn && console.warn(`Timer with label '${label}' does not exist.`)
+    }
+  }
 }
 
 function detailsToStr(details?: any) {
diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts
index c4b6da0f6..dcf6b9a7a 100644
--- a/src/state/models/ui/preferences.ts
+++ b/src/state/models/ui/preferences.ts
@@ -292,11 +292,15 @@ export class PreferencesModel {
     return res
   }
 
+  setFeeds(saved: string[], pinned: string[]) {
+    this.savedFeeds = saved
+    this.pinnedFeeds = pinned
+  }
+
   async setSavedFeeds(saved: string[], pinned: string[]) {
     const oldSaved = this.savedFeeds
     const oldPinned = this.pinnedFeeds
-    this.savedFeeds = saved
-    this.pinnedFeeds = pinned
+    this.setFeeds(saved, pinned)
     try {
       await this.update((prefs: AppBskyActorDefs.Preferences) => {
         const existing = prefs.find(
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index 244e75898..979fddf49 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -47,6 +47,10 @@ export class SavedFeedsModel {
     return this.feeds.filter(f => !this.isPinned(f))
   }
 
+  get all() {
+    return this.pinned.concat(this.unpinned)
+  }
+
   get pinnedFeedNames() {
     return this.pinned.map(f => f.displayName)
   }
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index 2f9165b37..e305e6305 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -99,7 +99,7 @@ export const SavedFeeds = withAuthRequired(
         />
         <DraggableFlatList
           containerStyle={[!isDesktopWeb && s.flex1]}
-          data={[...savedFeeds.pinned, ...savedFeeds.unpinned]} // make a copy so this FlatList re-renders when pinned changes
+          data={savedFeeds.all}
           keyExtractor={item => item.data.uri}
           refreshing={savedFeeds.isRefreshing}
           refreshControl={
@@ -111,6 +111,11 @@ export const SavedFeeds = withAuthRequired(
             />
           }
           renderItem={({item, drag}) => <ListItem item={item} drag={drag} />}
+          getItemLayout={(data, index) => ({
+            length: 77,
+            offset: 77 * index,
+            index,
+          })}
           initialNumToRender={10}
           ListFooterComponent={renderListFooterComponent}
           ListEmptyComponent={renderListEmptyComponent}
@@ -198,7 +203,7 @@ const ListItem = observer(
             />
             <TouchableOpacity
               accessibilityRole="button"
-              hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+              hitSlop={10}
               onPress={onTogglePinned}>
               <FontAwesomeIcon
                 icon="thumb-tack"
-- 
cgit 1.4.1