feat: search by hashtags

client/src/api/posts.js

@@ -9,9 +9,11 @@ export const getPosts = async (cursor, limit) => {
 	}
 }
 
-export const searchPosts = async (query) => {
+export const searchPosts = async (query, cursor, limit) => {
 	try {
-		const { data } = await api.get('/posts/search', { params: { query } })
+		const { data } = await api.get('/posts/search', {
+			params: { query, cursor, limit }
+		})
 		return data
 	} catch (error) {
 		throw handleApiError(error)

client/src/api/tags.js

@@ -17,3 +17,14 @@ export const searchTags = async (q) => {
 		throw handleApiError(error)
 	}
 }
+
+export const searchPostsByTags = async (tag, cursor, limit) => {
+	try {
+		const { data } = await api.get(`/tags/posts/${tag}`, {
+			params: { cursor, limit }
+		})
+		return data
+	} catch (error) {
+		throw handleApiError(error)
+	}
+}

client/src/components/AccountMenu.jsx

@@ -20,10 +20,21 @@ import { Link } from 'react-router'
 import { useTheme } from '@/hooks'
 import { useState } from 'react'
 import { UserAvatar } from '.'
+import { useStore } from '@/store'
 
 const AccountMenuItems = ({ handleClose, handleClick, open }) => {
-	const { user } = useUser()
+	const { user, sign } = useUser()
 	const { signOut } = useAuth()
+	const { openSnackbar } = useStore()
+
+	const logOut = () => {
+		try {
+			signOut()
+			openSnackbar('Logged in successfully')
+		} catch (error) {
+			openSnackbar(error.message, 'error')
+		}
+	}
 
 	return (
 		<>
@@ -52,7 +63,7 @@ const AccountMenuItems = ({ handleClose, handleClick, open }) => {
 					<ChevronRight fontSize="small" />
 				</ListItemIcon>
 			</MenuItem>
-			<MenuItem onClick={signOut}>
+			<MenuItem onClick={logOut}>
 				<ListItemIcon>
 					<Logout fontSize="small" />
 				</ListItemIcon>

client/src/components/PostCard.jsx

@@ -177,17 +177,13 @@ const EditCard = ({ post, setEditing }) => {
 		if (!validateInputs()) {
 			return
 		}
-		try {
-			updatePost({
-				...editedPost,
-				media: editedPost.media
-					? await convertToBase64(editedPost.media)
-					: editedPost.imageUrl
-			})
-			setEditing(false)
-		} catch (error) {
-			console.error(error)
-		}
+		updatePost({
+			...editedPost,
+			media: editedPost.media
+				? await convertToBase64(editedPost.media)
+				: editedPost.imageUrl
+		})
+		setEditing(false)
 	}
 
 	return (
@@ -333,15 +329,9 @@ const EditCard = ({ post, setEditing }) => {
 const StaticCard = ({ post, setEditing }) => {
 	const { user } = useUser()
 	const navigate = useNavigate()
-	console.log(post)
+
 	return (
-		<Card
-			sx={{
-				position: 'relative',
-				cursor: 'pointer',
-				height: 1
-			}}
-		>
+		<Card sx={{ position: 'relative', cursor: 'pointer', height: 1, maxHeight:400 }}>
 			<CardHeader
 				avatar={
 					<UserAvatar

client/src/components/TrendingTags.jsx

@@ -1,55 +1,65 @@
+import { useTrendingTags } from '@/hooks'
 import {
 	List,
 	ListItem,
 	ListItemText,
 	Typography,
-	Box,
-	Paper
+	Paper,
+	CircularProgress
 } from '@mui/material'
-import { Link, useNavigate } from 'react-router'
+import { Link } from 'react-router'
 
-const TrendingTags = ({ tags }) => {
-	const navigate = useNavigate()
+const TrendingTags = () => {
+	const { data: tags, isLoading } = useTrendingTags()
 	return (
 		<Paper sx={{ p: 2 }} role="presentation" elevation={0}>
 			<Typography variant="h6" gutterBottom>
 				Trending Topics
 			</Typography>
-			<List sx={{ p: 0 }}>
-				{tags.map((tag) => (
-					<ListItem
-						key={tag.hashtag}
-						to={`/hashtag/${tag.hashtag}`}
-						sx={{
-							cursor: 'pointer',
-							':hover': {
-								bgcolor: 'primary.main',
-								transition: 'background-color 0.2s'
-							},
-							p: 0.5,
-							px: 1,
-							textDecoration: 'none',
-							color: 'inherit',
-							borderRadius: 1
-						}}
-						component={Link}
-					>
-						<ListItemText
-							primary={`#${tag.hashtag}`}
-							secondary={`${tag.count} posts`}
-							primaryTypographyProps={{
-								fontWeight: 'medium'
-							}}
-							secondaryTypographyProps={{
-								fontSize: '0.8rem',
-								color: 'text.muted'
-							}}
-						/>
-					</ListItem>
-				))}
-			</List>
+			{isLoading ? (
+				<CircularProgress size={20} />
+			) : (
+				<TagsList tags={tags} />
+			)}
 		</Paper>
 	)
 }
 
+const TagsList = ({ tags }) => {
+	return (
+		<List sx={{ p: 0 }}>
+			{tags.map((tag) => (
+				<ListItem
+					key={tag.hashtag}
+					to={`/hashtag/${tag.hashtag}`}
+					sx={{
+						cursor: 'pointer',
+						':hover': {
+							bgcolor: 'primary.main',
+							transition: 'background-color 0.2s'
+						},
+						p: 0.5,
+						px: 1,
+						textDecoration: 'none',
+						color: 'inherit',
+						borderRadius: 1
+					}}
+					component={Link}
+				>
+					<ListItemText
+						primary={`#${tag.hashtag}`}
+						secondary={`${tag.count} posts`}
+						primaryTypographyProps={{
+							fontWeight: 'medium'
+						}}
+						secondaryTypographyProps={{
+							fontSize: '0.8rem',
+							color: 'text.muted'
+						}}
+					/>
+				</ListItem>
+			))}
+		</List>
+	)
+}
 export default TrendingTags

client/src/hooks/posts.js

@@ -23,6 +23,13 @@ export const useGetPosts = () =>
 		getNextPageParam: (lastPage) => lastPage.nextCursor
 	})
 
+export const useSearchPosts = (query) =>
+	useInfiniteQuery({
+		queryKey: ['search-posts', query],
+		queryFn: ({ pageParam }) => searchPosts(query, pageParam, 6),
+		getNextPageParam: (lastPage) => lastPage.nextCursor
+	})
+
 export const useGetPost = (id) =>
 	useQuery({
 		queryKey: ['post', id],
@@ -163,13 +170,6 @@ export const useDeletePost = () => {
 	})
 }
 
-export const useSearchPosts = () => {
-	return useQuery({
-		queryKey: ['searchPosts'],
-		queryFn: () => searchPosts
-	})
-}
-
 export const useRefresh = () => {
 	const queryClient = useQueryClient()
 	const [refreshing, setRefreshing] = useState(false)

client/src/hooks/tags.js

@@ -1,5 +1,5 @@
-import { useQuery } from '@tanstack/react-query'
-import { searchTags } from '@/api'
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { getTrendingTags, searchPostsByTags, searchTags } from '@/api'
 
 export const useSearchTags = (input) =>
 	useQuery({
@@ -9,3 +9,17 @@ export const useSearchTags = (input) =>
 		staleTime: 1000 * 60 * 5,
 		gcTime: 1000 * 60 * 30
 	})
+
+export const useTrendingTags = () =>
+	useQuery({
+		queryKey: ['tags'],
+		queryFn: getTrendingTags,
+		staleTime: Infinity
+	})
+
+export const useSearchPostsByTag = (tag) =>
+	useInfiniteQuery({
+		queryKey: ['search-tags', tag],
+		queryFn: ({ pageParam }) => searchPostsByTags(tag, pageParam, 6),
+		getNextPageParam: (lastPage) => lastPage.nextCursor
+	})

client/src/pages/LogIn.jsx

@@ -15,6 +15,7 @@ import { LockOutlined } from '@mui/icons-material'
 import { useSignIn } from '@clerk/clerk-react'
 import { OAuthButtons } from '@/components'
 import { useState } from 'react'
+import { useStore } from '@/store'
 
 const Form = () => {
 	const initialState = { email: '', password: '' }
@@ -25,7 +26,7 @@ const Form = () => {
 
 	const handleChange = (e) =>
 		setFormData({ ...formData, [e.target.name]: e.target.value })
-
+	const { openSnackbar } = useStore()
 	const handleSubmit = async (event) => {
 		event.preventDefault()
 		setError('')
@@ -40,6 +41,7 @@ const Form = () => {
 
 			if (result.status === 'complete') {
 				await setActive({ session: result.createdSessionId })
+				openSnackbar('Logged in successfully')
 				navigate('/')
 			} else {
 				console.error('Sign-in failed', result)

client/src/pages/Post.jsx

@@ -66,6 +66,7 @@ const PostCard = ({ post, isLoading, error }) => {
 	if (error?.message === 'API Error: Post not found') {
 		navigate('/not-found')
 	}
+	document.title = `Memories | ${post.title}`
 	return (
 		<Card sx={{ width: 1 }}>
 			<CardMedia component="img" image={post.imageUrl} alt="Post cover" />
@@ -149,6 +150,7 @@ const Top3Reactions = ({ post }) => {
 const Post = () => {
 	const { id } = useParams()
 	const { data: post, isLoading, error } = useGetPost(id)
+
 	return (
 		<Container sx={{ py: { xs: 2, md: 4 }, mb: 10 }} maxWidth="xl">
 			<Grid container spacing={3}>

client/src/pages/Posts.jsx

@@ -60,37 +60,15 @@ const PostGrid = () => {
 }
 
 const Posts = () => {
-	// const { data: tags } = useGetTrendingTags()
-	const tags = [
-		{
-			hashtag: 'media',
-			count: 5
-		},
-		{
-			hashtag: 'post',
-			count: 5
-		},
-		{
-			hashtag: 'social',
-			count: 5
-		},
-		{
-			hashtag: 'love',
-			count: 3
-		},
-		{
-			hashtag: 'chocolates',
-			count: 2
-		}
-	]
 	return (
 		<Container sx={{ py: { xs: 2, md: 4 }, height: '100vh' }} maxWidth="xl">
 			<Grid container spacing={3}>
 				<Grid
 					container
 					size={{ xs: 12, md: 8, xl: 9 }}
 					overflow="auto"
-					height={'calc(100vh - 100px)'}
+					height={'calc(100vh - 170px)'}
+					minHeight={400}
 					sx={{
 						'&::-webkit-scrollbar': { display: 'none' },
 						scrollbarWidth: 'none',
@@ -112,8 +90,7 @@ const Posts = () => {
 						</Paper>
 					</Grid>
 					<Grid size={{ xs: 12 }}>
-						{/* <SearchForm /> */}
-						<TrendingTags tags={tags} />
+						<TrendingTags />
 					</Grid>
 				</Grid>
 			</Grid>