From 0356fa331281717668a7e70292b70385f075f7fc Mon Sep 17 00:00:00 2001
From: warmachine028 <75939390+warmachine028@users.noreply.github.com>
Date: Fri, 25 Oct 2024 17:26:46 +0530
Subject: [PATCH] feat: controller & routes in server

---
 client/src/api/posts.ts                  | 45 ++++++------------------
 client/src/components/CreatePost.tsx     | 26 +++++++-------
 client/src/components/Post.tsx           | 13 ++++---
 client/src/components/ui/mode-toggle.tsx |  4 +--
 client/src/pages/Posts.tsx               | 29 ++++++++++-----
 5 files changed, 54 insertions(+), 63 deletions(-)

diff --git a/client/src/api/posts.ts b/client/src/api/posts.ts
index a0d0674..70cf3fc 100644
--- a/client/src/api/posts.ts
+++ b/client/src/api/posts.ts
@@ -2,40 +2,23 @@ import axios from 'axios'
 import { PostsResponse, Post } from '@/types'
 import { sleep } from '@/lib/utils'
 
-const baseURL = import.meta.env.VITE_API_URL
-
-const api = axios.create({ baseURL })
+const api = axios.create({ baseURL: import.meta.env.VITE_API_URL })
 
 export const getPosts = async (skip: number = 0, limit: number = 10): Promise<PostsResponse> => {
 	try {
-		const { data } = await api.get<PostsResponse>(`/posts?limit=${limit}&skip=${skip}`)
-
-		// Add imageUrl and transform reactions to the required format for each post
-		const postsWithImages = data.posts.map((post) => ({
-			...post,
-			imageUrl: `https://picsum.photos/seed/${post.id}/800/600`
-		}))
-
-		return {
-			...data,
-			posts: postsWithImages
-		}
+		const { data } = await api.get<PostsResponse>('/posts', {
+			params: { skip, limit }
+		})
+		return data
 	} catch (error) {
 		throw handleApiError(error)
 	}
 }
 
-// Other API functions remain similar but need to be updated with the new Post interface
-export const createPost = async (post: Omit<Post, 'id' | 'imageUrl' | 'views'>): Promise<Post> => {
+export const createPost = async (post: Omit<Post, 'id' | 'views'>): Promise<Post> => {
 	try {
-		await sleep(5000)
-		const { data } = await api.post(`/posts/add`, post)
-		return {
-			...data,
-			imageUrl: `https://picsum.photos/seed/${data.id}/800/600`,
-			views: 0,
-			reactions: { likes: 0, dislikes: 0 }
-		}
+		const { data } = await api.post<Post>('/posts', post)
+		return data
 	} catch (error) {
 		throw handleApiError(error)
 	}
@@ -44,18 +27,12 @@ export const createPost = async (post: Omit<Post, 'id' | 'imageUrl' | 'views'>):
 export const updatePost = async (post: Partial<Post> & { id: number }): Promise<Post> => {
 	try {
 		const { data } = await api.put(`/posts/${post.id}`, post)
-		return {
-			...data,
-			imageUrl: `https://picsum.photos/seed/${data.id}/800/600`,
-			reactions: post.reactions || { likes: 0, dislikes: 0 },
-			views: post.views || 0
-		}
+		return data
 	} catch (error) {
 		throw handleApiError(error)
 	}
 }
 
-// Delete a post
 export const deletePost = async (id: number): Promise<void> => {
 	try {
 		await api.delete(`/posts/${id}`)
@@ -102,9 +79,7 @@ export const getPostsByUser = async (userId: number): Promise<PostsResponse> =>
 export const updateReaction = async (postId: number, type: 'like' | 'dislike') => {
 	try {
 		await sleep(3000)
-		const { data } = await api.put(`/posts/${postId}`, {
-			body: JSON.stringify({ reactions: { [type]: +1 } })
-		})
+		const { data } = await api.put(`/posts/${postId}`, { reactions: { [type]: +1 } })
 
 		return data
 	} catch (error) {
diff --git a/client/src/components/CreatePost.tsx b/client/src/components/CreatePost.tsx
index e0ec622..9a3c2dc 100644
--- a/client/src/components/CreatePost.tsx
+++ b/client/src/components/CreatePost.tsx
@@ -1,7 +1,7 @@
 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 { ListRestart, Loader2, Plus } from 'lucide-react'
 import { useCreatePost } from '@/hooks'
 
 const CreatePost = () => {
@@ -41,6 +41,7 @@ const CreatePost = () => {
 			title: post.title.trim(),
 			body: post.body.trim(),
 			userId: 1,
+			imageUrl: URL.createObjectURL(post.image as File),
 			tags: post.tags
 				.split(',')
 				.map((tag) => tag.trim())
@@ -50,7 +51,9 @@ const CreatePost = () => {
 				dislikes: 0
 			}
 		})
-
+		handleReset()
+	}
+	const handleReset = () => {
 		setPost(initialData)
 		if (fileInputRef.current) {
 			fileInputRef.current.value = ''
@@ -63,7 +66,7 @@ const CreatePost = () => {
 				<CardTitle className="text-2xl font-bold">Create New Post</CardTitle>
 			</CardHeader>
 			<CardContent className="p-6">
-				<form onSubmit={handleSubmit} className="space-y-4">
+				<form onSubmit={handleSubmit} className="space-y-4" onReset={handleReset}>
 					<Input
 						type="text"
 						name="title"
@@ -97,19 +100,14 @@ const CreatePost = () => {
 							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 type="reset" className="*:size-4" size="icon" title='reset'>
+							<ListRestart />
 						</Button>
 					</div>
+					<Button type="submit" disabled={addMutation.isPending} className="w-full *:size-4 *:mr-2">
+						{addMutation.isPending ? <Loader2 className="animate-spin" /> : <Plus />}
+						Add Post
+					</Button>
 				</form>
 			</CardContent>
 		</Card>
diff --git a/client/src/components/Post.tsx b/client/src/components/Post.tsx
index 1ae73eb..bbb01b8 100644
--- a/client/src/components/Post.tsx
+++ b/client/src/components/Post.tsx
@@ -14,7 +14,7 @@ import {
 	DialogTrigger
 } from '@/components/ui/dialog'
 import { useDeletePost, useUpdatePost, useUpdateReaction } from '@/hooks'
-import { type Post as PostType } from '@/types'
+import type { Post as PostType } from '@/types'
 
 const tagColors = [
 	'bg-red-100 text-red-800',
@@ -42,6 +42,7 @@ const Post = ({ post }: { post: PostType }) => {
 	const handleSave = () => {
 		handleUpdatePost(editedPost)
 		setIsEditing(false)
+		setEditedPost(post)
 	}
 
 	return (
@@ -52,7 +53,7 @@ const Post = ({ post }: { post: PostType }) => {
 			exit={{ opacity: 0, y: -50 }}
 			transition={{ duration: 0.3 }}
 		>
-			<Card className="h-full flex flex-col overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300">
+			<Card className="h-full flex flex-col overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300" title={post.title}>
 				<CardHeader className="bg-secondary flex-shrink-0">
 					<div className="relative h-48 w-full mb-4">
 						<img
@@ -110,6 +111,7 @@ const Post = ({ post }: { post: PostType }) => {
 							variant="secondary"
 							className="flex items-center gap-1"
 							onClick={() => handleReaction('like')}
+							title='Like'
 						>
 							<ThumbsUp className="h-4 w-4" />
 							<span className="hidden xl:block">{post.reactions.likes}</span>
@@ -118,18 +120,19 @@ const Post = ({ post }: { post: PostType }) => {
 							variant="secondary"
 							className="flex items-center gap-1"
 							onClick={() => handleReaction('dislike')}
+							title="Dislike"
 						>
 							<ThumbsDown className="h-4 w-4" />
 							<span className="hidden xl:block">{post.reactions.dislikes}</span>
 						</Button>
-						<Badge variant="secondary" className="flex items-center gap-1">
+						<Badge variant="secondary" className="flex items-center gap-1" title="Views">
 							<Eye className="h-4 w-4" />
 							<span className="hidden xl:block">{post.views}</span>
 						</Badge>
 					</div>
 					<div className="flex gap-2">
 						{isEditing ? (
-							<Button onClick={handleSave} className="bg-primary text-primary-foreground">
+							<Button onClick={handleSave} className="bg-primary text-primary-foreground" title="Save">
 								<Save className="h-4 w-4 sm:mr-2" />
 								<span className="hidden sm:block">Save</span>
 							</Button>
@@ -138,6 +141,7 @@ const Post = ({ post }: { post: PostType }) => {
 								variant="ghost"
 								onClick={() => setIsEditing(true)}
 								className="text-primary hover:text-primary hover:bg-primary/10"
+								title="Edit"
 							>
 								<Edit2 className="h-4 w-4 sm:mr-2" />
 								<span className="hidden sm:block">Edit</span>
@@ -149,6 +153,7 @@ const Post = ({ post }: { post: PostType }) => {
 								<Button
 									variant="ghost"
 									className="text-destructive hover:text-destructive hover:bg-destructive/10"
+									title="Delete"
 								>
 									<Trash2 className="size-4" />
 								</Button>
diff --git a/client/src/components/ui/mode-toggle.tsx b/client/src/components/ui/mode-toggle.tsx
index 0c55898..191832b 100644
--- a/client/src/components/ui/mode-toggle.tsx
+++ b/client/src/components/ui/mode-toggle.tsx
@@ -3,13 +3,13 @@ import { Button } from './button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu'
 import { useTheme } from '@/hooks'
 
-export const ModeToggle = () => {
+export const ModeToggle = ({ variant, className }: { variant?: 'default' | 'outline'; className?: string }) => {
 	const { setTheme } = useTheme()
 
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button variant="outline" size="icon">
+				<Button variant={variant} size="icon" className={className} title="Toggle theme">
 					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
 					<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
 					<span className="sr-only">Toggle theme</span>
diff --git a/client/src/pages/Posts.tsx b/client/src/pages/Posts.tsx
index 0a1e5a6..ddc4c4f 100644
--- a/client/src/pages/Posts.tsx
+++ b/client/src/pages/Posts.tsx
@@ -1,13 +1,14 @@
 import { useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
-import { Button, ScrollArea, Badge, Search } from '@/components/ui'
+import { Button, ScrollArea, Badge, Search, ModeToggle } from '@/components/ui'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Loader2, RefreshCcw } from 'lucide-react'
+import { House, Loader2, RefreshCcw } from 'lucide-react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useGetPosts, useRefresh, useSearch } from '@/hooks'
 import { Post } from '@/components'
 import { useStore } from '@/store'
 import { CreatePost } from '@/components'
+import { Link } from 'react-router-dom'
 
 const PostsCard = () => {
 	const { ref, inView } = useInView()
@@ -23,18 +24,30 @@ const PostsCard = () => {
 			fetchNextPage()
 		}
 	}, [inView, hasNextPage, query, fetchNextPage])
-
 	return (
 		<Card className="shadow-lg">
 			<CardHeader className="bg-primary text-primary-foreground sticky top-0 z-10">
 				<div className="flex items-center justify-between">
 					<CardTitle className="text-2xl font-bold">Posts</CardTitle>
-					<Button variant="outline" onClick={refresh} className="bg-primary" disabled={refreshing}>
-						<RefreshCcw className={`${refreshing && 'animate-spin'} mr-2`} />
-						{refreshing ? 'Refreshing' : 'Refresh'}
-					</Button>
+					<div className="space-x-2 *:bg-primary">
+						<Button asChild variant="outline" size="icon" title="Home">
+							<Link to="/" className="text-inherit">
+								<House />
+							</Link>
+						</Button>
+						<ModeToggle variant="outline" />
+						<Button
+							variant="outline"
+							onClick={refresh}
+							disabled={refreshing}
+							title={refreshing ? 'Refreshing' : 'Refresh'}
+							size="icon"
+						>
+							<RefreshCcw className={`${refreshing && 'animate-spin'}`} />
+						</Button>
+					</div>
 				</div>
-				<Badge variant="secondary" className="max-w-fit">
+				<Badge variant="secondary" className="max-w-fit" title="Posts loaded">
 					{allPosts.length} posts
 				</Badge>
 			</CardHeader>