feat: seperated createPost

client/src/App.css

@@ -1,7 +1,7 @@
 #root {
 	/* max-width: 1280px; */
-	margin: 0 auto;
 	/* padding: 2rem; */
+	margin: 0 auto;
 	text-align: center;
 }
 

client/src/components/CreatePost.tsx

@@ -0,0 +1,111 @@
+import { useRef, useState } from 'react'
+import { Button, Input, Textarea } from '@/components/ui'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Loader2, Plus } from 'lucide-react'
+import { useCreatePost } from '@/hooks'
+
+const CreatePost = () => {
+	const initialData = {
+		title: '',
+		body: '',
+		tags: '',
+		image: null as File | null
+	}
+	const [post, setPost] = useState(initialData)
+	const fileInputRef = useRef<HTMLInputElement>(null)
+
+	const addMutation = useCreatePost()
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+		const { name, value, files } = e.target as HTMLInputElement
+
+		if (name === 'image') {
+			setPost({ ...post, image: files?.[0] || null })
+		} else {
+			setPost({ ...post, [name]: value })
+		}
+	}
+
+	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault()
+
+		addMutation.mutate({
+			title: post.title.trim(),
+			body: post.body.trim(),
+			userId: 1,
+			tags: post.tags
+				.split(',')
+				.map((tag) => tag.trim())
+				.filter(Boolean),
+			reactions: {
+				likes: 0,
+				dislikes: 0
+			}
+		})
+
+		setPost(initialData)
+		if (fileInputRef.current) {
+			fileInputRef.current.value = ''
+		}
+	}
+
+	return (
+		<Card className="shadow-lg">
+			<CardHeader className="bg-primary text-primary-foreground">
+				<CardTitle className="text-2xl font-bold">Create New Post</CardTitle>
+			</CardHeader>
+			<CardContent className="p-6">
+				<form onSubmit={handleSubmit} className="space-y-4">
+					<Input
+						type="text"
+						name="title"
+						value={post.title}
+						onChange={handleChange}
+						placeholder="eg: Sunshine Radio 📻"
+						className="w-full"
+					/>
+					<Textarea
+						name="body"
+						value={post.body}
+						onChange={handleChange}
+						placeholder="eg: Sunshine Radio is a radio station that plays music 24/7. It's a great place to relax and enjoy the music."
+						className="w-full min-h-24"
+					/>
+					<Input
+						type="text"
+						name="tags"
+						value={post.tags}
+						onChange={handleChange}
+						placeholder="eg: radio, music, relax"
+						className="w-full"
+					/>
+					<div className="flex items-center space-x-2">
+						<Input
+							type="file"
+							name="image"
+							onChange={handleChange}
+							className="w-full"
+							accept="image/*"
+							placeholder="eg: radio.png"
+							ref={fileInputRef}
+						/>
+						<Button
+							type="submit"
+							disabled={addMutation.isPending}
+							className="bg-primary text-primary-foreground"
+						>
+							{addMutation.isPending ? (
+								<Loader2 className="h-4 w-4 animate-spin" />
+							) : (
+								<Plus className="h-4 w-4 mr-2" />
+							)}
+							Add Post
+						</Button>
+					</div>
+				</form>
+			</CardContent>
+		</Card>
+	)
+}
+
+export default CreatePost

client/src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as AppRouter } from './AppRouter'
 export { default as Post } from './Post'
+export { default as CreatePost } from './CreatePost'

client/src/hooks/index.ts

@@ -4,6 +4,8 @@ import { ThemeContext } from '@/contexts'
 import { createPost, deletePost, getPosts, updatePost } from '@/api'
 import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useStore } from '@/store'
+import { useSearchParams } from 'react-router-dom'
+import Fuse from 'fuse.js'
 
 export const useTheme = () => {
 	const context = useContext(ThemeContext)
@@ -174,3 +176,33 @@ export const useRefresh = () => {
 		refreshing
 	}
 }
+
+
+export const useSearch = (posts: Post[]) => {
+	const [searchParams, setSearchParams] = useSearchParams()
+	const query = searchParams.get('q') || ''
+
+	const getSearchResults = (searchQuery: string) => {
+		if (!searchQuery) return posts
+
+		const fuse = new Fuse(posts, {
+			keys: ['title', 'body', 'tags'],
+			threshold: 0.3
+		})
+
+		const searchResults = fuse.search(searchQuery)
+		return searchResults.map((result) => result.item)
+	}
+
+	const results = getSearchResults(query)
+
+	const setQuery = (newQuery: string) => {
+		if (newQuery) {
+			setSearchParams({ q: newQuery })
+		} else {
+			setSearchParams({})
+		}
+	}
+
+	return { query, setQuery, results }
+}