feat: search tags

warmachine028 · Nov 30, 2024 · e1e5f59 · e1e5f59
1 parent 6178003
commit e1e5f59
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 66 deletions.
diff --git a/client/src/components/AppRouter.jsx b/client/src/components/AppRouter.jsx
@@ -48,6 +48,7 @@ const AppRouter = () => {
 					element={<AuthRoute component={<LogIn />} />}
 				/>
 				<Route path="/search" element={<Search />} />
+				<Route path="/hashtag/:tag" element={<Search hashtag />} />
 				<Route
 					path="/signup"
 					element={<AuthRoute component={<SignUp />} />}

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -90,7 +90,7 @@ const LoggedOutOptions = () => {
 					borderRadius: '10%',
 					borderColor: 'divider',
 					color: 'white',
-					bgcolor: (theme) => theme.palette.primary.main
+					bgcolor: 'primary.main'
 				}}
 			>
 				<LoginOutlined />
@@ -140,10 +140,20 @@ const SearchDialog = ({ open, onClose: closeBox }) => {
 		setSearchTerm('')
 		closeBox()
 	}
-	const handleSearch = (_, value) => {
-		if (value) {
+
+	const handleSearch = () => {
+		if (searchTerm.trim()) {
+			handleClose()
+			navigate(`/search?q=${encodeURIComponent(searchTerm.trim())}`)
+		}
+	}
+
+	const handleKeyDown = (e) => {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			handleSearch()
+		} else if (e.key === 'Escape') {
 			handleClose()
-			navigate(`/search?q=${value}`)
 		}
 	}
 
@@ -159,32 +169,25 @@ const SearchDialog = ({ open, onClose: closeBox }) => {
 			}}
 		>
 			<DialogContent>
-				<Autocomplete
-					freeSolo
-					options={searchSuggestions.map((option) => option.title)}
-					getOptionLabel={(option) => option}
-					renderInput={(params) => (
-						<TextField
-							{...params}
-							autoFocus
-							fullWidth
-							variant="outlined"
-							placeholder="Search"
-							slotProps={{
-								input: {
-									...params.InputProps,
-									startAdornment: (
-										<InputAdornment position="start">
-											<Search />
-										</InputAdornment>
-									)
-								}
-							}}
-						/>
-					)}
-					inputValue={searchTerm}
-					onInputChange={(_, newValue) => setSearchTerm(newValue)}
-					onChange={handleSearch}
+				<TextField
+					autoFocus
+					fullWidth
+					value={searchTerm}
+					onChange={(e) => setSearchTerm(e.target.value)}
+					onKeyDown={handleKeyDown}
+					variant="outlined"
+					placeholder="Search"
+					slotProps={{
+						input: {
+							startAdornment: (
+								<InputAdornment position="start">
+									<IconButton onClick={handleSearch}>
+										<Search />
+									</IconButton>
+								</InputAdornment>
+							)
+						}
+					}}
 				/>
 			</DialogContent>
 		</Dialog>

diff --git a/client/src/components/PostCard.jsx b/client/src/components/PostCard.jsx
@@ -68,7 +68,7 @@ const MoreButton = ({ setEditing, post }) => {
 	}
 
 	return (
-		<Box>
+		<>
 			<IconButton size="small" onClick={handleClick} aria-label="more">
 				<MoreVert />
 			</IconButton>
@@ -110,7 +110,7 @@ const MoreButton = ({ setEditing, post }) => {
 				open={showDialog}
 				setOpen={setShowDialog}
 			/>
-		</Box>
+		</>
 	)
 }
 
@@ -333,7 +333,7 @@ const EditCard = ({ post, setEditing }) => {
 const StaticCard = ({ post, setEditing }) => {
 	const { user } = useUser()
 	const navigate = useNavigate()
-
+	console.log(post)
 	return (
 		<Card
 			sx={{
@@ -429,7 +429,11 @@ const StaticCard = ({ post, setEditing }) => {
 							</IconButton>
 						</Box>
 					)}
-					<Typography color="text.secondary" mt={1}>
+					<Typography
+						color="text.secondary"
+						mt={1}
+						whiteSpace="pre-line"
+					>
 						{truncate(post.description, 20)}
 					</Typography>
 				</CardContent>

diff --git a/client/src/components/TagsAutocomplete.jsx b/client/src/components/TagsAutocomplete.jsx
@@ -63,15 +63,6 @@ const TagsAutocomplete = ({ formData, setFormData, error }) => {
 	}
 	const sanitizedOptions = options.map(sanitizeTag).filter(isValidTag)
 
-	// Highlight matching text in option
-	// const highlightMatch = (text, searchTerm) => {
-	// 	if (!searchTerm) return text
-
-	// 	return (
-
-	// 	)
-	// }
-
 	return (
 		<Autocomplete
 			multiple

diff --git a/client/src/pages/Post.jsx b/client/src/pages/Post.jsx
@@ -27,7 +27,6 @@ import {
 	ContentCopy,
 	Facebook,
 	LinkedIn,
-	Share,
 	X,
 	WhatsApp
 } from '@mui/icons-material'
@@ -41,7 +40,6 @@ import {
 } from '@/components'
 import { useGetPost, useGetTop3Reacts } from '@/hooks'
 import moment from 'moment'
-import { useState } from 'react'
 import { useStore } from '@/store'
 
 const PostMetaData = ({ author, timestamp }) => {
@@ -77,8 +75,6 @@ const PostCard = () => {
 	const { id } = useParams()
 	const { data: post, isLoading, error } = useGetPost(id)
 	const navigate = useNavigate()
-	const [shareDialogOpen, setShareDialogOpen] = useState(false)
-	const handleShareClick = () => setShareDialogOpen(true)
 
 	if (isLoading) {
 		return <PostSkeleton />
@@ -101,11 +97,11 @@ const PostCard = () => {
 					{post.title}
 				</Typography>
 				<Box mb={2}>
-					{post.tags.map(({ tag: { name } }) => (
-						<Chip key={name} label={name} sx={{ mr: 1 }} />
+					{post.tags.map((tag) => (
+						<Chip key={tag} label={tag} sx={{ mr: 1 }} />
 					))}
 				</Box>
-				<Typography variant="body1" component="p">
+				<Typography variant="body1" component="p" whiteSpace="pre-line">
 					{post.description}
 				</Typography>
 			</CardContent>

diff --git a/client/src/pages/Search.jsx b/client/src/pages/Search.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useSearchParams } from 'react-router'
+import { useParams, useSearchParams } from 'react-router'
 import {
 	Typography,
 	Tab,
@@ -47,9 +47,12 @@ const dummyData = {
 	]
 }
 
-const Search = () => {
+const Search = ({ hashtag }) => {
 	const [searchParams] = useSearchParams()
-	const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '')
+	const { tag } = useParams()
+	const [searchTerm, setSearchTerm] = useState(
+		hashtag ? tag : searchParams.get('q') || ''
+	)
 	const [activeTab, setActiveTab] = useState(0)
 	const [filteredData, setFilteredData] = useState(dummyData)
 
@@ -149,27 +152,20 @@ const Search = () => {
 			<Stack flexGrow={1}>
 				<Box>
 					<Typography variant="h4" gutterBottom>
-						Search Results for &quot;{searchTerm}&quot;
+						Search results for
+						{hashtag ? ` #${searchTerm}` : ` "${searchTerm}"`}
 					</Typography>
 					<Tabs
 						value={activeTab}
 						onChange={handleTabChange}
 						aria-label="search results tabs"
 					>
-						<Tab
-							label="Posts"
-							id="search-tab-0"
-							aria-controls="search-tabpanel-0"
-						/>
-						<Tab
-							label="Users"
-							id="search-tab-1"
-							aria-controls="search-tabpanel-1"
-						/>
+						<Tab label="Posts" id="posts" aria-controls="posts" />
+						<Tab label="Users" id="users" aria-controls="users" />
 						<Tab
 							label="Comments"
-							id="search-tab-2"
-							aria-controls="search-tabpanel-2"
+							id="comments"
+							aria-controls="comments"
 						/>
 					</Tabs>
 					<Card sx={{ mt: 2 }}>