Swipe Posts to Save (#805)

Memmy-App · Jul 22, 2023 · d596b07 · d596b07
1 parent a6d9f0c
commit d596b07
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 11 deletions.
diff --git a/src/components/common/ContextMenu/FeedSortContextMenu.tsx b/src/components/common/ContextMenu/FeedSortContextMenu.tsx
@@ -4,7 +4,10 @@ import {
   ContextMenuButton,
   OnPressMenuItemEvent,
 } from "react-native-ios-context-menu";
-import { feedSortOptions, sortTopOptions } from "../../../constants/SortOptions";
+import {
+  feedSortOptions,
+  sortTopOptions,
+} from "../../../constants/SortOptions";
 
 interface IProps {
   children: React.ReactNode;

diff --git a/src/components/common/SwipeableRow/ReplyOption.tsx b/src/components/common/SwipeableRow/ReplyOption.tsx
@@ -52,12 +52,20 @@ export function ReplyOption({
 
   const [firstStop, secondStop] = stops;
 
+  const secondColorMap: Record<Icon, string> = {
+    comment: theme.colors.app.info,
+    save: theme.colors.app.bookmark,
+    read: theme.colors.app.success,
+  };
+
+  const secondColor = secondColorMap[extraType ?? "comment"];
+
   const colors: ISwipeableColors = useMemo(
     () => ({
       first: theme.colors.app.info,
-      second: theme.colors.app.success,
+      second: secondColor,
     }),
-    [theme]
+    [theme, secondColor]
   );
 
   // The timer used to pulse the icon to indicate it's active
@@ -73,6 +81,7 @@ export function ReplyOption({
         onStart: () => {
           "worklet";
 
+          runOnJS(setIcon)("comment");
           isFrozen.value = false;
         },
         onEnd: () => {
@@ -130,17 +139,21 @@ export function ReplyOption({
   const backgroundStyle = useAnimatedStyle(() => {
     if (isFrozen.value) return {};
 
+    const lastColor = onExtra ? colors.second : colors.first;
+
     const backgroundColor = interpolateColor(
       Math.abs(translateX.value),
-      [-secondStop, -firstStop * 1.5, -firstStop / 2, 0],
+      [0, -firstStop / 2, -firstStop * 1.5, -secondStop],
       [
-        colors.second as string,
+        "transparent",
         colors.first as string,
         colors.first as string,
-        "transparent",
+        lastColor as string,
       ]
     );
 
+    console.log(backgroundColor);
+
     const width = screenWidth - translateX.value;
     const transform = [{ translateX: translateX.value }];
 

diff --git a/src/components/screens/Feed/components/CompactFeedItem/CompactFeedItem.tsx b/src/components/screens/Feed/components/CompactFeedItem/CompactFeedItem.tsx
@@ -21,6 +21,7 @@ import { ReplyOption } from "../../../../common/SwipeableRow/ReplyOption";
 import { SwipeableRow } from "../../../../common/SwipeableRow/SwipeableRow";
 import { ILemmyVote } from "../../../../../types/lemmy/ILemmyVote";
 import { useFeedPost } from "../../../../../stores/feeds/feedsStore";
+import { Box } from "../../../../common/Gluestack";
 
 function CompactFeedItem({ postId }: { postId: number }) {
   const {
@@ -48,8 +49,14 @@ function CompactFeedItem({ postId }: { postId: number }) {
   );
 
   const rightOption = useMemo(
-    () => <ReplyOption onReply={feedItem.doReply} />,
-    [postId]
+    () => (
+      <ReplyOption
+        onReply={feedItem.doReply}
+        onExtra={feedItem.doSave}
+        extraType="save"
+      />
+    ),
+    [postId, post.saved]
   );
 
   const { fontSize, isSystemTextSize } = useAppSelector(selectSettings);
@@ -122,6 +129,22 @@ function CompactFeedItem({ postId }: { postId: number }) {
                 onVotePress={feedItem.onVotePress}
               />
             )}
+            {post.saved && (
+              <Box
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  right: 0,
+                  backgroundColor: "transparent",
+                  width: 0,
+                  height: 0,
+                  borderTopColor: theme.colors.app.bookmark,
+                  borderTopWidth: 15,
+                  borderLeftWidth: 15,
+                  borderLeftColor: "transparent",
+                }}
+              />
+            )}
           </HStack>
         </Pressable>
       </SwipeableRow>

diff --git a/src/components/screens/Feed/components/FeedItem/FeedItem.tsx b/src/components/screens/Feed/components/FeedItem/FeedItem.tsx
@@ -5,6 +5,7 @@ import { StyleSheet } from "react-native";
 import FastImage from "@gkasdorf/react-native-fast-image";
 import { useRoute } from "@react-navigation/core";
 import useFeedItem from "../../../../../hooks/feeds/useFeedItem";
+import { useFeedPost } from "../../../../../stores/feeds/feedsStore";
 import { ILemmyVote } from "../../../../../types/lemmy/ILemmyVote";
 import AvatarUsername from "../../../../common/AvatarUsername";
 import { FeedItemContextMenu } from "../../../../common/ContextMenu/FeedItemContextMenu";
@@ -17,7 +18,6 @@ import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { Metrics } from "./Metrics";
 import { Post } from "./Post";
-import { useFeedPost } from "../../../../../stores/feeds/feedsStore";
 
 interface FeedItemProps {
   postId: number;
@@ -43,8 +43,14 @@ function FeedItem({ postId, recycled }: FeedItemProps) {
   );
 
   const rightOption = useMemo(
-    () => <ReplyOption onReply={feedItem.doReply} />,
-    [postId]
+    () => (
+      <ReplyOption
+        onReply={feedItem.doReply}
+        onExtra={feedItem.doSave}
+        extraType="save"
+      />
+    ),
+    [postId, post.saved]
   );
 
   return (