refactor: mutations

client/src/components/posts/DeletePostDialog.tsx

@@ -1,7 +1,7 @@
-"use client"
+'use client'
 
 import { PostData } from '@/types'
-import { useDeletePostMutation } from './mutations'
+import { useDeletePostMutation } from '@/hooks'
 import { Dialog, DialogHeader, DialogContent, DialogTitle, DialogDescription, DialogFooter } from '../ui/dialog'
 import LoadingButton from '../LoadingButton'
 import { Button } from '../ui/button'
@@ -27,11 +27,19 @@ const DeletePostDialog = ({ post, open, onClose }: DeletePostDialogProps) => {
 					<DialogDescription>
 						Are you sure you want to delete this post? This action can't be undone.
 					</DialogDescription>
-                </DialogHeader>
-                <DialogFooter>
-                    <LoadingButton variant="destructive" onClick={() => mutation.mutate(post.id, {onSuccess: onClose})} loading={mutation.isPending}>Delete</LoadingButton>
-                    <Button variant="outline" onClick={onClose} disabled={mutation.isPending}>Cancel</Button>
-                </DialogFooter>
+				</DialogHeader>
+				<DialogFooter>
+					<LoadingButton
+						variant="destructive"
+						onClick={() => mutation.mutate(post.id, { onSuccess: onClose })}
+						loading={mutation.isPending}
+					>
+						Delete
+					</LoadingButton>
+					<Button variant="outline" onClick={onClose} disabled={mutation.isPending}>
+						Cancel
+					</Button>
+				</DialogFooter>
 			</DialogContent>
 		</Dialog>
 	)

client/src/components/posts/PostMoreButton.tsx

@@ -4,10 +4,10 @@ import { PostData } from '@/types'
 import { useState } from 'react'
 import DeletePostDialog from './DeletePostDialog'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
 import { Button } from '../ui/button'
 import { CircleCheckBig, Info, MoreHorizontal, Trash2, TriangleAlert } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
 
 interface PostMoreButtonProps {
 	post: PostData

client/src/components/posts/editor/PostEditor.tsx

@@ -3,25 +3,23 @@
 import './styles.css'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import { useSession, useMediaUpload } from '@/hooks'
-import { Avatar } from '@/components'
+import PlaceHolder from '@tiptap/extension-placeholder'
+import Link from 'next/link'
+import Image from 'next/image'
+import { useCreatePostMutation, useSession, useMediaUpload } from '@/hooks'
 import type { Attachment } from '@/hooks/useMediaUpload'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import LoadingButton from '@/components/LoadingButton'
-import PlaceHolder from '@tiptap/extension-placeholder'
-import Link from 'next/link'
-import { useSubmitPostMutation } from './mutations'
+import { UserTooltip } from '@/components/users'
+import { LoadingButton, Avatar } from '@/components'
 import { ClipboardEvent, useRef } from 'react'
-import Image from 'next/image'
 import { ImageIcon, Loader2, X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useDropzone } from '@uploadthing/react'
-import { UserTooltip } from '@/components/users'
 
 const PostEditor = () => {
 	const { user } = useSession()
-	const mutation = useSubmitPostMutation()
+	const mutation = useCreatePostMutation()
 	const {
 		attachments,
 		isUploading,
@@ -72,7 +70,7 @@ const PostEditor = () => {
 	}
 
 	return (
-		<div className="flex flex-col gap-5 bg-card p-5 shadow-sm rounded-md">
+		<div className="flex flex-col gap-5 rounded-md bg-card p-5 shadow-sm">
 			<div className="flex gap-5">
 				<UserTooltip
 					user={{

client/src/components/posts/editor/actions.ts

@@ -5,10 +5,7 @@ import { prisma } from '@/lib'
 import { createPostSchema } from '@/lib/validation'
 import { getPostDataInclude } from '@/types'
 
-export const createPost = async (input: {
-	content: string
-	mediaIds: string[]
-}) => {
+export const createPost = async (input: { content: string; mediaIds: string[] }) => {
 	const { user } = await validateRequest()
 	if (!user) {
 		throw new Error('Unauthorized: You are not logged in')

client/src/hooks/index.ts

@@ -1,5 +1,7 @@
 export { default as useSession } from './useSession'
 export { default as useFollowerInfo } from './useFollowerInfo'
 export { default as useToast } from './useToast'
+export { default as useDeletePostMutation } from './useDeletePostMutation'
+export { default as useCreatePostMutation } from './useCreatePostMutation'
 export { useUploadThing } from '@/lib/uploadthing'
 export { default as useMediaUpload } from './useMediaUpload'

client/src/components/posts/editor/mutations.ts → client/src/hooks/useCreatePostMutation.ts

@@ -1,10 +1,10 @@
 import { useToast } from '@/hooks/useToast'
 import { InfiniteData, QueryFilters, useMutation, useQueryClient } from '@tanstack/react-query'
-import { createPost } from './actions'
+import { createPost } from '@/components/posts/editor/actions'
 import { PostsPage } from '@/types'
 import { useSession } from '@/hooks'
 
-export const useSubmitPostMutation = () => {
+const useCreatePostMutation = () => {
 	const { toast } = useToast()
 
 	const queryClient = useQueryClient()
@@ -59,3 +59,5 @@ export const useSubmitPostMutation = () => {
 
 	return mutation
 }
+
+export default useCreatePostMutation

client/src/components/posts/mutations.ts → client/src/hooks/useDeletePostMutation.ts

@@ -1,10 +1,10 @@
-import { PostData, PostsPage } from '@/types'
+import { PostsPage } from '@/types'
 import { useToast } from '@/hooks/useToast'
 import { InfiniteData, QueryFilters, useMutation, useQueryClient } from '@tanstack/react-query'
 import { usePathname, useRouter } from 'next/navigation'
-import { deletePost } from './actions'
+import { deletePost } from '@/components/posts/actions'
 
-export const useDeletePostMutation = () => {
+const useDeletePostMutation = () => {
 	const { toast } = useToast()
 	const queryClient = useQueryClient()
 
@@ -47,3 +47,5 @@ export const useDeletePostMutation = () => {
 	})
 	return mutation
 }
+
+export default useDeletePostMutation

client/src/hooks/useToast.ts

@@ -1,9 +1,7 @@
 'use client'
 
-// Inspired by react-hot-toast library
-import * as React from 'react'
-
 import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+import { useEffect, useState } from 'react'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -101,12 +99,12 @@ export const reducer = (state: State, action: Action): State => {
 			return {
 				...state,
 				toasts: state.toasts.map((t) =>
-					t.id === toastId || toastId === undefined
-						? {
-								...t,
-								open: false
-							}
-						: t
+					t.id === toastId || toastId === undefined ?
+						{
+							...t,
+							open: false
+						}
+					:	t
 				)
 			}
 		}
@@ -167,9 +165,9 @@ function toast({ ...props }: Toast) {
 }
 
 function useToast() {
-	const [state, setState] = React.useState<State>(memoryState)
+	const [state, setState] = useState<State>(memoryState)
 
-	React.useEffect(() => {
+	useEffect(() => {
 		listeners.push(setState)
 		return () => {
 			const index = listeners.indexOf(setState)
@@ -187,4 +185,4 @@ function useToast() {
 }
 
 export { useToast, toast }
-export default useToast
+export default useToast