A decentralized music tracking and discovery platform built on AT Protocol 🎵

Invalidate infiniteFeed after like

Invalidate the 'infiniteFeed' react-query cache when a song is liked
from SongCover and StickyPlayer. Add useQueryClient and
feedGeneratorUriAtom
usage and make onLike async to await cache invalidation.

+19 -2
+9
apps/web/src/components/SongCover/SongCover.tsx
··· 4 4 import useLike from "../../hooks/useLike"; 5 5 import SignInModal from "../SignInModal"; 6 6 import { useState } from "react"; 7 + import { useQueryClient } from "@tanstack/react-query"; 8 + import { useAtomValue } from "jotai"; 9 + import { feedGeneratorUriAtom } from "../../atoms/feed"; 7 10 8 11 const Cover = styled.img<{ size?: number }>` 9 12 border-radius: 8px; ··· 64 67 }; 65 68 66 69 function SongCover(props: SongCoverProps) { 70 + const queryClient = useQueryClient(); 71 + const feedUri = useAtomValue(feedGeneratorUriAtom); 67 72 const [isSignInOpen, setIsSignInOpen] = useState(false); 68 73 const [liked, setLiked] = useState(props.liked); 69 74 const { like, unlike } = useLike(); ··· 88 93 } 89 94 await like(uri); 90 95 } 96 + 97 + await queryClient.invalidateQueries({ 98 + queryKey: ["infiniteFeed", feedUri], 99 + }); 91 100 }; 92 101 return ( 93 102 <CoverWrapper onClick={(e) => e.stopPropagation()}>
+10 -2
apps/web/src/components/StickyPlayer/StickyPlayerWithData.tsx
··· 1 1 import axios from "axios"; 2 - import { useAtom } from "jotai"; 2 + import { useAtom, useAtomValue } from "jotai"; 3 3 import _ from "lodash"; 4 4 import { useCallback, useEffect, useRef, useState } from "react"; 5 5 import { nowPlayingAtom } from "../../atoms/nowpaying"; ··· 9 9 import useSpotify from "../../hooks/useSpotify"; 10 10 import StickyPlayer from "./StrickyPlayer"; 11 11 import { consola } from "consola"; 12 + import { useQueryClient } from "@tanstack/react-query"; 13 + import { feedGeneratorUriAtom } from "../../atoms/feed"; 12 14 13 15 function StickyPlayerWithData() { 16 + const queryClient = useQueryClient(); 17 + const feedUri = useAtomValue(feedGeneratorUriAtom); 14 18 const [liked, setLiked] = useState<Record<string, boolean>>({}); 15 19 const [nowPlaying, setNowPlaying] = useAtom(nowPlayingAtom); 16 20 const progressInterval = useRef<number | null>(null); ··· 25 29 const playerRef = useRef(player); 26 30 const likedRef = useRef(liked); 27 31 28 - const onLike = (uri: string) => { 32 + const onLike = async (uri: string) => { 29 33 setLiked({ 30 34 ...liked, 31 35 [uri]: true, ··· 39 43 ...prev, 40 44 liked: true, 41 45 }; 46 + }); 47 + 48 + await queryClient.invalidateQueries({ 49 + queryKey: ["infiniteFeed", feedUri], 42 50 }); 43 51 }; 44 52