Adds basic like state tracking using Atom Util #1

Stores liked post URIs in the atom store, modifying the Atom store in the util to store both the Post Uri and the LikeUri, to allow for storing what posts were liked and allowing for deleting the like record.

Also modified the hasLiked boolean to be true if the post has a like string, or if the post exists in the Liked Posts Cache.

+13 -2

2 changed files

Diff round #1

expand all

unified split

src

components

UniversalPostRenderer.tsx

utils

atoms.ts

+12 -1

src/components/UniversalPostRenderer.tsx

··· 3 3 import { useNavigate } from "@tanstack/react-router"; 4 4 import { type SVGProps } from "react"; 5 5 import { useHydratedEmbed } from "~/utils/useHydrated"; 6 + import { useAtom } from 'jotai'; 7 + import { likedPostsAtom } from "~/utils/atoms"; 6 8 import { 7 9 useQueryPost, 8 10 useQueryIdentity, ··· 1097 1099 repostedby?: string; 1098 1100 }) { 1099 1101 const navigate = useNavigate(); 1102 + const [likedPosts, setLikedPosts] = useAtom(likedPostsAtom); 1100 1103 const [hasRetweeted, setHasRetweeted] = useState<Boolean>( 1101 1104 post.viewer?.repost ? true : false 1102 1105 ); 1103 1106 const [hasLiked, setHasLiked] = useState<Boolean>( 1104 - post.viewer?.like ? true : false 1107 + (post.uri in likedPosts) || post.viewer?.like ? true : false 1105 1108 ); 1106 1109 const { agent } = useAuth(); 1107 1110 const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like); ··· 1110 1113 ); 1111 1114 1112 1115 const likeOrUnlikePost = async () => { 1116 + const newLikedPosts = { ...likedPosts }; 1113 1117 if (!agent) { 1114 1118 console.error("Agent is null or undefined"); 1115 1119 return; 1116 1120 } 1117 1121 if (hasLiked) { 1122 + if (post.uri in likedPosts) { 1123 + const likeUri = likedPosts[post.uri]; 1124 + setLikeUri(likeUri); 1125 + } 1118 1126 if (likeUri) { 1119 1127 await agent.deleteLike(likeUri); 1120 1128 setHasLiked(false); 1129 + delete newLikedPosts[post.uri]; 1121 1130 } 1122 1131 } else { 1123 1132 const { uri } = await agent.like(post.uri, post.cid); 1124 1133 setLikeUri(uri); 1125 1134 setHasLiked(true); 1135 + newLikedPosts[post.uri] = uri; 1126 1136 } 1137 + setLikedPosts(newLikedPosts) 1127 1138 }; 1128 1139 1129 1140 const repostOrUnrepostPost = async () => {

+1 -1

src/utils/atoms.ts

··· 16 16 {} 17 17 ); 18 18 19 - export const likedPostsAtom = atomWithStorage<Record<string, boolean>>( 19 + export const likedPostsAtom = atomWithStorage<Record<string, string>>( 20 20 'likedPosts', 21 21 {} 22 22 );

History

2 rounds 3 comments

minito.dev submitted #1 4mo

interdiff

expand 1 comment

whey.party 4mo

lgtm!

pull request successfully merged

minito.dev submitted #0 4mo

diff

expand 2 comments

whey.party 4mo

hey i just noticed that the PR description mentions modifying the atom, but the diff only includes changes to the UniversalPostRenderer.tsx file.

when i tried applying the patch locally i ran into an error Argument of type 'boolean' is not assignable to parameter of type 'SetStateAction<string | undefined>'.ts(2345)

it seems like the atom changes might not have been included in the diff

minito.dev 4mo

Submitted a new pull that includes the atom change.

Sorry about that! I made a patch file to create thIs Pr and only grabbed the latest commit in the branch that I made off of main.