feat: autocomplete tags reusable component

client/src/api/tags.js

@@ -1,11 +1,27 @@
 import { api, handleApiError } from '@/api'
+import { movies } from '@/data'
+import { sleep } from '@/lib/utils'
 
 export const getTrendingTags = async () => {
-    try {
-        const { data } = await api.get('/tags/trending')
-        return data
-    } catch (error) {
+	try {
+		const { data } = await api.get('/tags/trending')
+		return data
+	} catch (error) {
 		throw handleApiError(error)
-    }
+	}
 }
 
+export const searchTags = async (searchTerm) => {
+	try {
+		// Filter movies based on search term
+		return movies
+			.filter((movie) =>
+				movie.title
+					.toLowerCase()
+					.includes(searchTerm?.toLowerCase() || '')
+			)
+			.map((movie) => movie.title)
+	} catch (error) {
+		throw handleApiError(error)
+	}
+}

client/src/components/TagsAutocompleteInput.jsx

@@ -0,0 +1,76 @@
+import { useSearchTags } from '@/hooks'
+import { AutoAwesome } from '@mui/icons-material'
+import {
+	Autocomplete,
+	CircularProgress,
+	IconButton,
+	InputAdornment,
+	TextField
+} from '@mui/material'
+import { useState } from 'react'
+
+const TagsAutocompleteInput = ({ formData, setFormData, error }) => {
+	const [input, setInput] = useState('')
+
+	const { data: options = [], isLoading } = useSearchTags(input)
+
+	const generateTags = () => {
+		const aIGenerateTags = ['social', 'media', 'post']
+		setFormData({
+			...formData,
+			tags: [
+				...new Set([...formData.tags, ...aIGenerateTags].slice(0, 8))
+			]
+		})
+	}
+	const handleChange = (_, value) =>
+		setFormData((prevData) => ({
+			...prevData,
+			tags: value.length > 8 ? value.slice(-8) : value
+		}))
+
+	return (
+		<Autocomplete
+			multiple
+			freeSolo
+			options={options}
+			loading={isLoading}
+			inputValue={input}
+			value={formData.tags}
+			onChange={handleChange}
+			onInputChange={(_, newInput) => setInput(newInput)}
+			disableClearable
+			renderInput={(params) => (
+				<TextField
+					{...params}
+					label="Tags"
+					error={error}
+					slotProps={{
+						input: {
+							...params.InputProps,
+							type: 'search',
+							endAdornment: (
+								<InputAdornment position="end">
+									{isLoading ? (
+										<CircularProgress size={20} />
+									) : (
+										<IconButton
+											onClick={generateTags}
+											disabled={formData.tags.length >= 8}
+											edge="end"
+											size="small"
+										>
+											<AutoAwesome />
+										</IconButton>
+									)}
+								</InputAdornment>
+							)
+						}
+					}}
+				/>
+			)}
+		/>
+	)
+}
+
+export default TagsAutocompleteInput

client/src/components/forms/CreatePost.jsx

@@ -1,5 +1,4 @@
 import {
-	Autocomplete,
 	Box,
 	Button,
 	ButtonGroup,
@@ -9,16 +8,13 @@ import {
 	FormHelperText,
 	IconButton,
 	Input,
-	InputAdornment,
 	Stack,
 	TextField,
 	Tooltip,
 	Typography
 } from '@mui/material'
-import { movies } from '@/data'
 import {
 	AddAPhotoOutlined,
-	AutoAwesome,
 	Close,
 	Visibility,
 	VisibilityOff
@@ -28,6 +24,7 @@ import { useAuth } from '@clerk/clerk-react'
 import { Link } from 'react-router'
 import { useCreatePost } from '@/hooks'
 import { convertToBase64 } from '@/lib/utils'
+import { TagsAutocompleteInput } from '@/components'
 
 const Form = () => {
 	const { isLoaded } = useAuth()
@@ -96,15 +93,7 @@ const Form = () => {
 		setErrors(newErrors)
 		return valid
 	}
-	const generateTags = () => {
-		const aIGenerateTags = ['social', 'media', 'post']
-		setFormData({
-			...formData,
-			tags: [
-				...new Set([...formData.tags, ...aIGenerateTags].slice(0, 8))
-			]
-		})
-	}
+
 	const handleClear = () => {
 		setFormData(initialData)
 		setPreview(null)
@@ -127,35 +116,6 @@ const Form = () => {
 		}
 	}
 
-	const handleSearchInput = (params) => {
-		return (
-			<TextField
-				{...params}
-				label="Tags"
-				error={Boolean(errors.tags)}
-				name="tags"
-				slotProps={{
-					input: {
-						...params.InputProps,
-						type: 'search',
-						endAdornment: (
-							<InputAdornment position="end">
-								<IconButton
-									onClick={generateTags}
-									disabled={formData.tags.length >= 8}
-									edge="end"
-									size="small"
-								>
-									<AutoAwesome />
-								</IconButton>
-							</InputAdornment>
-						)
-					}
-				}}
-			/>
-		)
-	}
-
 	return (
 		<Stack component="form" onSubmit={handleSubmit} spacing={1} p={2}>
 			<Typography variant="h6" gutterBottom textAlign="center">
@@ -260,23 +220,10 @@ const Form = () => {
 					</FormHelperText>
 				</FormControl>
 				<FormControl fullWidth error={Boolean(errors.tags)}>
-					<Autocomplete
-						multiple
-						freeSolo
-						options={movies.map((option) => option.title)}
-						renderInput={handleSearchInput}
-						value={formData.tags}
-						onChange={(_, value) => {
-							setFormData((prevData) => ({
-								...prevData,
-								tags: value.length > 8 ? value.slice(-8) : value
-							}))
-							setErrors({ ...errors, tags: '' })
-						}}
-						onInputChange={(_, value) =>
-							formData.tags.length < 8 ? value : ''
-						}
-						disableClearable
+					<TagsAutocompleteInput
+						formData={formData}
+						setFormData={setFormData}
+						error={Boolean(errors.tags)}
 					/>
 					<FormHelperText sx={{ m: 0 }}>{errors.tags}</FormHelperText>
 				</FormControl>

client/src/components/index.js

@@ -17,6 +17,7 @@ export { default as Image } from './Image'
 export { default as ReactButton } from './ReactButton'
 export { default as LikeButton } from './LikeButton'
 export { default as ShareButton } from './ShareButton'
+export { default as TagsAutocompleteInput } from './TagsAutocompleteInput'
 export * from './skeletons'
 export * from './forms'
 export * from './dialogues'

client/src/hooks/index.js

@@ -15,3 +15,4 @@ export * from './posts'
 export * from './users'
 export * from './reactions'
 export * from './comments'
+export * from './tags'

client/src/hooks/tags.js

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+import { searchTags } from '@/api'
+
+export const useSearchTags = (input) =>
+	useQuery({
+		queryKey: ['tags', input],
+		queryFn: () => searchTags(input),
+		enabled: !!input,
+		staleTime: 1000 * 60 * 5,
+		gcTime: 1000 * 60 * 30
+	})