feat: invalidated reaction-info cache on login

Author: warmachine028

client/src/components/AccountMenu.jsx

@@ -23,14 +23,14 @@ import { UserAvatar } from '.'
 import { useStore } from '@/store'
 
 const AccountMenuItems = ({ handleClose, handleClick, open }) => {
-	const { user, sign } = useUser()
+	const { user, } = useUser()
 	const { signOut } = useAuth()
 	const { openSnackbar } = useStore()
 
 	const logOut = () => {
 		try {
 			signOut()
-			openSnackbar('Logged in successfully')
+			openSnackbar('Logged out successfully')
 		} catch (error) {
 			openSnackbar(error.message, 'error')
 		}

client/src/components/OAuthButtons.jsx

@@ -1,11 +1,13 @@
 import { useSignIn } from '@clerk/clerk-react'
 import { GitHub, Google } from '@mui/icons-material'
 import { Box, Button, ButtonGroup, FormHelperText } from '@mui/material'
+import { useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 
 const OAuthButtons = () => {
 	const [error, setError] = useState('')
 	const { isLoaded, signIn } = useSignIn()
+	const queryClient = useQueryClient()
 
 	const handleOAuthSignIn = async (strategy) => {
 		if (!isLoaded) {
@@ -17,6 +19,9 @@ const OAuthButtons = () => {
 				redirectUrl: '/callback',
 				redirectUrlComplete: '/'
 			})
+			await queryClient.invalidateQueries({
+				queryKey: ['reaction-info']
+			})
 		} catch (err) {
 			setError(
 				err.errors[0].longMessage ||

client/src/pages/LogIn.jsx

@@ -16,12 +16,14 @@ import { useSignIn } from '@clerk/clerk-react'
 import { OAuthButtons } from '@/components'
 import { useState } from 'react'
 import { useStore } from '@/store'
+import { useQueryClient } from '@tanstack/react-query'
 
 const Form = () => {
 	const initialState = { email: '', password: '' }
 	const { isLoaded, signIn, setActive } = useSignIn()
 	const [formData, setFormData] = useState(initialState)
 	const [error, setError] = useState('')
+	const queryClient = useQueryClient()
 	const navigate = useNavigate()
 
 	const handleChange = (e) =>
@@ -41,6 +43,9 @@ const Form = () => {
 
 			if (result.status === 'complete') {
 				await setActive({ session: result.createdSessionId })
+				await queryClient.invalidateQueries({
+					queryKey: ['reaction-info']
+				})
 				openSnackbar('Logged in successfully')
 				navigate('/')
 			} else {

client/src/pages/Post.jsx

@@ -80,11 +80,18 @@ const PostCard = ({ post, isLoading, error }) => {
 				<Typography variant="h4" gutterBottom fontWeight="bold">
 					{post.title}
 				</Typography>
-				<Box mb={2}>
+				<Stack direction="row" flexWrap="wrap" mb={2} gap={1}>
 					{post.tags.map((tag) => (
-						<Chip key={tag} label={tag} sx={{ mr: 1 }} />
+						<Chip
+							key={tag}
+							label={tag}
+							component={Link}
+							to={`/hashtag/${tag}`}
+							onClick={(e) => e.stopPropagation()}
+							sx={{ textDecoration: 'none' }}
+						/>
 					))}
-				</Box>
+				</Stack>
 				<Typography variant="body1" component="p" whiteSpace="pre-line">
 					{post.description}
 				</Typography>

client/src/pages/VerifyEmail.jsx

@@ -13,11 +13,13 @@ import { MailOutlined } from '@mui/icons-material'
 import { useSignUp } from '@clerk/clerk-react'
 import { useNavigate } from 'react-router'
 import { useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 
 const Form = () => {
 	const { isLoaded, signUp, setActive } = useSignUp()
 	const [code, setCode] = useState('')
 	const [error, setError] = useState('')
+	const queryClient = useQueryClient()
 	const navigate = useNavigate()
 
 	const handleSubmit = async (event) => {
@@ -33,6 +35,9 @@ const Form = () => {
 
 			if (result.status === 'complete') {
 				await setActive({ session: result.createdSessionId })
+				await queryClient.invalidateQueries({
+					queryKey: ['reaction-info']
+				})
 				navigate('/')
 			} else {
 				console.error(JSON.stringify(result, null, 2))