damla · damla · Sep 14, 2023 · Sep 14, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/.env b/.env
@@ -1,8 +1,8 @@
 # ===================================
 # CLOUDINARY                  
 # ===================================
-NEXT_PUBLIC_CLOUD_NAME=dwqknejrz
-NEXT_PUBLIC_UPLOAD_PRESET=ad-app
+NEXT_PUBLIC_CLOUD_NAME=
+NEXT_PUBLIC_UPLOAD_PRESET=
 # ===================================
 
 # ===================================
@@ -15,4 +15,4 @@ NEXT_PUBLIC_UPLOAD_PRESET=ad-app
 # VERCEL
 # ===================================
 # NEXT_PUBLIC_PROJECT_HTTP_URL=
-# ===================================
+# ===================================
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@prisma/client": "^5.2.0",
+    "@tanstack/react-query": "^4.35.3",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "classnames": "^2.3.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/add-advertisement/loading.tsx b/src/app/add-advertisement/loading.tsx
@@ -1,8 +1,7 @@
 import { AddAdvertisementFormSkeleton } from '@/components/add-advertisement/add-advertisement-form/add-advertisement-form'
 import { BreadcrumbSkeleton } from '@/components/general/breadcrumb/breadcrumb'
-import { NextPage } from 'next'
 
-const Loading: NextPage = () => {
+const Loading = () => {
   return (
     <div className='container'>
       <BreadcrumbSkeleton />

diff --git a/src/app/add-advertisement/page.tsx b/src/app/add-advertisement/page.tsx
@@ -1,7 +1,6 @@
 import AddAdvertisement from '@/components/add-advertisement/add-advertisement'
-import { NextPage } from 'next'
 
-const AddAdvertisementPage: NextPage = () => {
+const AddAdvertisementPage = () => {
   return <AddAdvertisement />
 }
 

diff --git a/src/app/api/advertisements/[id]/route.ts b/src/app/api/advertisements/[id]/route.ts
@@ -2,6 +2,8 @@ import { NextResponse } from 'next/server'
 import moment from 'moment-timezone'
 import prisma from '@/lib/prisma'
 
+export const dynamic = 'force-dynamic'
+
 export async function PATCH(
   request: Request,
   { params }: { params: { id: string } }

diff --git a/src/app/api/advertisements/route.ts b/src/app/api/advertisements/route.ts
@@ -1,5 +1,18 @@
 import { NextResponse } from 'next/server'
 import prisma from '@/lib/prisma'
+export const dynamic = 'force-dynamic'
+
+export async function GET(request: Request) {
+  try {
+    const ads = await prisma.advertisement.findMany({
+      orderBy: [{ lastUpdated: 'desc' }]
+    })
+
+    return NextResponse.json(ads)
+  } catch (error: any) {
+    return new NextResponse(error.message, { status: 500 })
+  }
+}
 
 export async function POST(request: Request) {
   try {

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -8,7 +8,7 @@ interface Props {
   reset: () => void
 }
 
-const Error: React.FC<Props> = ({ error, reset }) => {
+const Error = ({ error, reset }: Props) => {
   const [show, setShow] = useState(false)
   const showError = () => {
     setShow(true)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import Header from '@/components/layout/header/header'
 import { Inter } from 'next/font/google'
 import Main from '@/components/layout/main/main'
 import type { Metadata } from 'next'
+import { ReactQueryProviders } from '@/context/react-query.context'
 import { SortOptionProvider } from '@/context/sort-option.context'
 import Toast from '@/components/general/toast/toast'
 import { ToastProvider } from '@/context/toast.context'
@@ -19,23 +20,24 @@ export const metadata: Metadata = {
   }
 }
 
-
 interface Props {
   children: React.ReactNode
 }
 
-const RootLayout: React.FC<Props> = ({ children }) => {
+const RootLayout = ({ children }: Props) => {
   return (
     <html lang='en'>
       <body className={inter.className}>
-        <ToastProvider>
-          <Toast />
-          <Header />
-          <SortOptionProvider>
-            <Main>{children}</Main>
-            <Footer />
-          </SortOptionProvider>
-        </ToastProvider>
+        <ReactQueryProviders>
+          <ToastProvider>
+            <Toast />
+            <Header />
+            <SortOptionProvider>
+              <Main>{children}</Main>
+              <Footer />
+            </SortOptionProvider>
+          </ToastProvider>
+        </ReactQueryProviders>
       </body>
     </html>
   )

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -7,7 +7,7 @@ interface Props {
   reset: () => void
 }
 
-const Error: React.FC<Props> = ({ error, reset }) => {
+const Error = ({ error, reset }: Props) => {
   return (
     <div className='textCenter'>
       <h2 className='mb3xl'>Sayfa bulunamadı!</h2>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,6 @@
 import HomePage from '@/components/homepage/homepage'
-import { NextPage } from 'next'
 
-export const dynamic = 'force-dynamic'
-
-const Home: NextPage = () => {
+const Home = () => {
   return <HomePage />
 }
 

diff --git a/src/components/add-advertisement/add-advertisement-form/add-advertisement-form.tsx b/src/components/add-advertisement/add-advertisement-form/add-advertisement-form.tsx
@@ -10,16 +10,19 @@ import { checkFile, uploadToCloudinary } from '@/utils/helpers'
 import { Button } from '@/components/general/button/button'
 import Icon from '@/components/general/icon/icon'
 import { Skeleton } from '@/components/general/skeleton/skeleton'
+import { addAdvertisements } from '@/lib/query-service'
 import classNames from 'classnames'
 import styles from './styles.module.scss'
 import { useForm } from 'react-hook-form'
+import { useMutation } from '@tanstack/react-query'
+import { useQueryClientInstance } from '@/context/query-client.context'
 // Because of using App dir, we need to use next/navigation instead of next/router
 // See: https://nextjs.org/docs/messages/next-router-not-mounted
 import { useRouter } from 'next/navigation'
 import { useToast } from '@/hooks/use-toast'
 import { yupResolver } from '@hookform/resolvers/yup'
 
-export const AddAdvertisementForm: React.FC = () => {
+export const AddAdvertisementForm = () => {
   const [imageUploadLabel, setImageUploadLabel] = useState<string>('Yükle')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const formOptions = {
@@ -41,6 +44,22 @@ export const AddAdvertisementForm: React.FC = () => {
   } = useForm(formOptions)
   const { errors } = formState
 
+  const { queryClient } = useQueryClientInstance()
+
+  const { isLoading: dataIsLoading, mutate } = useMutation({
+    mutationFn: addAdvertisements,
+    onSuccess: () => {
+      showToast(
+        'İlan başarıyla kaydedilmiştir. Ana sayfaya yönlendiriliyorsunuz',
+        'success'
+      )
+      queryClient.invalidateQueries({ queryKey: ['ads'] })
+    },
+    onError: () => {
+      showToast('İlan eklenirken bir sorun oluştu.', 'error')
+    }
+  })
+
   const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
     setIsLoading(true)
 
@@ -66,25 +85,15 @@ export const AddAdvertisementForm: React.FC = () => {
   }
 
   const onSubmit = async () => {
-    const response = await fetch('/api/advertisements', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ...watch() })
-    })
-
-    if (response.ok) {
-      showToast(
-        'İlan başarıyla kaydedilmiştir. Ana sayfaya yönlendiriliyorsunuz',
-        'success'
-      )
-    } else {
-      const error = await response.text()
-      showToast(error, 'error')
-    }
-    reset()
-    setImageUploadLabel('Yükle')
-    router.refresh()
-    router.push('/')
+    mutate(
+      { ...watch() },
+      {
+        onSuccess: () => {
+          setImageUploadLabel('Yükle')
+          router.push('/')
+        }
+      }
+    )
   }
 
   return (
@@ -164,7 +173,7 @@ export const AddAdvertisementForm: React.FC = () => {
         </div>
         <Button
           type='submit'
-          disabled={isLoading}
+          disabled={isLoading || dataIsLoading}
           className={styles.submitButton}
         >
           {isLoading ? <Icon name='Spinner' size={16} /> : 'KAYDET'}
@@ -174,7 +183,7 @@ export const AddAdvertisementForm: React.FC = () => {
   )
 }
 
-export const AddAdvertisementFormSkeleton: React.FC = () => {
+export const AddAdvertisementFormSkeleton = () => {
   return (
     <div className='centerAlignedItems ptXl'>
       <div className={classNames(styles.wrapper, 'pl2xl')}>

diff --git a/src/components/add-advertisement/add-advertisement-form/styles.module.scss b/src/components/add-advertisement/add-advertisement-form/styles.module.scss
@@ -52,7 +52,7 @@
     }
 
     .imageUploadButton {
-      height: unset;
+      height: initial;
       display: inline-flex;
       gap: $space-sm;
       align-items: center;

diff --git a/src/components/add-advertisement/add-advertisement.tsx b/src/components/add-advertisement/add-advertisement.tsx
@@ -1,7 +1,7 @@
 import { AddAdvertisementForm } from './add-advertisement-form/add-advertisement-form'
 import { Breadcrumb } from '@/components/general/breadcrumb/breadcrumb'
 
-const AddAdvertisement: React.FC = () => {
+const AddAdvertisement = () => {
   return (
     <div className='container'>
       <Breadcrumb page='yeni ilan' subtitle='ekle' />

diff --git a/src/components/general/breadcrumb/breadcrumb.tsx b/src/components/general/breadcrumb/breadcrumb.tsx
@@ -7,7 +7,7 @@ interface Props {
   children?: React.ReactNode
 }
 
-export const Breadcrumb: React.FC<Props> = ({ page, subtitle, children }) => {
+export const Breadcrumb = ({ page, subtitle, children }: Props) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.title}>
@@ -24,9 +24,7 @@ interface BreadcrumbSkeletonProps {
   children?: React.ReactNode
 }
 
-export const BreadcrumbSkeleton: React.FC<BreadcrumbSkeletonProps> = ({
-  children
-}) => {
+export const BreadcrumbSkeleton = ({ children }: BreadcrumbSkeletonProps) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.titleSkeleton}>

diff --git a/src/components/general/button/button.tsx b/src/components/general/button/button.tsx
@@ -8,13 +8,13 @@ interface Props {
   type?: 'button' | 'submit' | 'reset'
 }
 
-export const Button: React.FC<Props> = ({
+export const Button = ({
   className,
   disabled,
   onClick,
   children,
   type
-}) => {
+}: Props) => {
   return (
     <button
       onClick={onClick}

diff --git a/src/components/general/icon/icon.tsx b/src/components/general/icon/icon.tsx
@@ -10,7 +10,7 @@ interface Props {
   className?: string
 }
 
-const Icon: React.FC<Props> = ({ name, size, className }) => {
+const Icon = ({ name, size, className }: Props) => {
   const Component = iconNameMap[name]
 
   return (

diff --git a/src/components/general/skeleton/skeleton.tsx b/src/components/general/skeleton/skeleton.tsx
@@ -5,6 +5,6 @@ interface Props {
   className?: string
 }
 
-export const Skeleton: React.FC<Props> = ({ className }) => {
+export const Skeleton = ({ className }: Props) => {
   return <div className={classNames(styles.skeleton, className)} />
 }
diff --git a/src/components/general/toast/toast.tsx b/src/components/general/toast/toast.tsx
@@ -6,7 +6,7 @@ import { ToastContext } from '@/context/toast.context'
 import classNames from 'classnames'
 import styles from './styles.module.scss'
 
-const Toast: React.FC = () => {
+const Toast = () => {
   const {
     state: { display, type, message }
   } = useContext(ToastContext)