├── public
    ├── favicon.ico
    ├── vercel.svg
    └── next.svg
├── postcss.config.js
├── styles
    └── globals.css
├── app
    ├── components
    │   ├── navbar
    │   │   ├── Logo.tsx
    │   │   ├── UserMenuItem.tsx
    │   │   ├── Navbar.tsx
    │   │   ├── CategoriesItem.tsx
    │   │   ├── Categories.tsx
    │   │   └── UserMenu.tsx
    │   ├── MountedClient.tsx
    │   ├── buttons
    │   │   └── Button.tsx
    │   ├── listings
    │   │   ├── CategorySelect.tsx
    │   │   ├── CountrySelect.tsx
    │   │   └── CounterSelect.tsx
    │   ├── inputs
    │   │   └── Input.tsx
    │   └── modals
    │   │   ├── Modal.tsx
    │   │   ├── LoginModal.tsx
    │   │   ├── RegisterModal.tsx
    │   │   └── ElementModal.tsx
    ├── libs
    │   └── prismadb.ts
    ├── providers
    │   ├── ToastProvider.tsx
    │   └── ReduxProvider.tsx
    ├── redux
    │   ├── hooks.ts
    │   ├── store.ts
    │   └── modalSlice.ts
    ├── api
    │   ├── register
    │   │   └── route.ts
    │   └── listings
    │   │   └── route.ts
    ├── actions
    │   └── getCurrentUser.ts
    ├── page.tsx
    └── layout.tsx
├── next.config.js
├── .gitignore
├── tailwind.config.js
├── tsconfig.json
├── package.json
├── README.md
├── pages
    └── api
    │   └── auth
    │       └── [...nextauth].ts
└── prisma
    └── schema.prisma


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/berkantkaya/youtube-next13-prisma/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | html, body, :root{
6 |   height: 100%;
7 | }


--------------------------------------------------------------------------------
/app/components/navbar/Logo.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | 
3 | const Logo = () => {
4 |   return (
5 |     <div className="text-4xl">thebest-Next13</div>
6 |   )
7 | }
8 | 
9 | export default Logo


--------------------------------------------------------------------------------
/app/libs/prismadb.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 | 
3 | declare global{
4 |     var prisma : PrismaClient | undefined
5 | }
6 | 
7 | const client = globalThis.prisma || new PrismaClient();
8 | if(process.env.NODE_ENV != "production") globalThis.prisma = client;
9 | export default client


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   experimental: {
 5 |     appDir: true
 6 |   },
 7 |   images:{
 8 |     domains: ['upload.wikimedia.org', 'lh3.googleusercontent.com']
 9 |   }
10 | }
11 | 
12 | module.exports = nextConfig
13 | 


--------------------------------------------------------------------------------
/app/providers/ToastProvider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { ToastContainer } from 'react-toastify';
 3 | import 'react-toastify/dist/ReactToastify.css';
 4 | 
 5 | const ToastProvider = () => {
 6 |   return (
 7 |     <>
 8 |       <ToastContainer />
 9 |     </>
10 |   )
11 | }
12 | 
13 | export default ToastProvider


--------------------------------------------------------------------------------
/app/providers/ReduxProvider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Provider } from "react-redux"
 4 | import { store } from "../redux/store"
 5 | 
 6 | const ReduxProvider = ({children}: {children: React.ReactNode}) => {
 7 |   return (
 8 |     <Provider store={store}>{children}</Provider>
 9 |   )
10 | }
11 | 
12 | export default ReduxProvider


--------------------------------------------------------------------------------
/app/redux/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux'
2 | import type { TypedUseSelectorHook } from 'react-redux'
3 | import type { RootState, AppDispatch } from './store'
4 | 
5 | // Use throughout your app instead of plain `useDispatch` and `useSelector`
6 | export const useAppDispatch: () => AppDispatch = useDispatch
7 | export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector


--------------------------------------------------------------------------------
/app/components/navbar/UserMenuItem.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | interface UserMenuItemProps {
 4 |   name: string;
 5 |   onClick:() => void;
 6 | }
 7 | const UserMenuItem:React.FC<UserMenuItemProps> = ({
 8 |     name,
 9 |     onClick
10 | }) => {
11 |   return (
12 |     <div onClick={onClick} className="text-lg px-3 py-2 hover:bg-gray-100 cursor-pointer">
13 |         {name}
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default UserMenuItem


--------------------------------------------------------------------------------
/app/components/MountedClient.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import {useState, useEffect} from 'react'
 3 | 
 4 | const MountedClient = ({children}: {children: React.ReactNode}) => {
 5 |     const [mounted, setMounted] = useState(false)
 6 | 
 7 |     useEffect(() => {
 8 |        setMounted(true)
 9 |     }, [])
10 | 
11 |     if(!mounted){
12 |        return null
13 |     }
14 |     
15 |   return (
16 |     <>
17 |     {children}
18 |     </>
19 |   )
20 | }
21 | 
22 | export default MountedClient


--------------------------------------------------------------------------------
/app/redux/store.ts:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit'
 2 | import modalSlice from './modalSlice'
 3 | // ...
 4 | 
 5 | export const store = configureStore({
 6 |   reducer: {
 7 |     modal: modalSlice
 8 |   },
 9 | })
10 | 
11 | // Infer the `RootState` and `AppDispatch` types from the store itself
12 | export type RootState = ReturnType<typeof store.getState>
13 | // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
14 | export type AppDispatch = typeof store.dispatch


--------------------------------------------------------------------------------
/app/components/navbar/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { User } from "@prisma/client"
 4 | import Categories from "./Categories"
 5 | import Logo from "./Logo"
 6 | import UserMenu from "./UserMenu"
 7 | 
 8 | const Navbar = ({user} : {user: User | any | undefined}) => {
 9 |   return (
10 |     <div className="flex items-center justify-between h-16 bg-gray-100 px-7 ">
11 |         <Logo/>
12 |         <Categories/>
13 |         <UserMenu user={user}/>
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default Navbar


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 5 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       backgroundImage: {
11 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 |         'gradient-conic':
13 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | }
19 | 


--------------------------------------------------------------------------------
/app/api/register/route.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import bcrypt from 'bcrypt';
 3 | import prisma from '@/app/libs/prismadb';
 4 | import { NextResponse } from 'next/server';
 5 | 
 6 | export async function POST(request: Request){
 7 |    const {name, email, password} = await request.json();
 8 | 
 9 |     const hashedPassword = await bcrypt.hash(password, 12);
10 | 
11 |     const user = await prisma.user.create({
12 |         data: {
13 |             name,
14 |             email,
15 |             hashedPassword
16 |         }
17 |     })
18 | 
19 |     return NextResponse.json(user);
20 | }


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/app/actions/getCurrentUser.ts:
--------------------------------------------------------------------------------
 1 | import prisma from '@/app/libs/prismadb';
 2 | import { authOptions } from '@/pages/api/auth/[...nextauth]';
 3 | import { getServerSession } from 'next-auth';
 4 | 
 5 | 
 6 | export async function getSession(){
 7 |     return await getServerSession(authOptions)
 8 | }
 9 | 
10 | export default async function getCurrentUser(){
11 |     const session = await getSession();
12 |      if(!session?.user?.email){
13 |         return null;
14 |      }
15 |      const user = await prisma.user.findUnique({
16 |         where: {
17 |             email : session.user.email
18 |         }
19 |      })
20 | 
21 |      if(!user){
22 |         return null;
23 |      }
24 |      return user
25 | }
26 | 


--------------------------------------------------------------------------------
/app/components/buttons/Button.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { IconType } from "react-icons";
 4 | 
 5 | type ButtonProps = {
 6 |     onSubmit: (e:React.MouseEvent<HTMLButtonElement>) => void;
 7 |     btnLabel: string;
 8 |     outline?: boolean;
 9 |     icon?: IconType
10 | }
11 | const Button: React.FC<ButtonProps> = ({
12 |     onSubmit,
13 |     btnLabel,
14 |     outline,
15 |     icon: Icon
16 | }) => {
17 |   return (
18 |     <button className={`w-full h-12 cursor-pointer ${outline ? "border border-black" : "bg-black text-white"} rounded-md flex items-center justify-center gap-2`} onClick={onSubmit}>
19 |         {Icon && <Icon size={25}/> }
20 |         {btnLabel}
21 |     </button>
22 |   )
23 | }
24 | 
25 | export default Button


--------------------------------------------------------------------------------
/app/components/listings/CategorySelect.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { IconType } from "react-icons";
 4 | 
 5 | 
 6 | type CategorySelectProps = {
 7 |     name: string;
 8 |     icon: IconType;
 9 |     selected: boolean;
10 |     onClick: ( value : string) => void;
11 | }
12 | const CategorySelect:React.FC<CategorySelectProps> = ({
13 |     name,
14 |     icon: Icon,
15 |     selected,
16 |     onClick
17 | }) => {
18 |   return (
19 |     <div className={`${selected ? "text-black" : "text-gray-500"} cursor-pointer flex flex-col items-center`} onClick={() => onClick(name)}>
20 |         <Icon size={25}/> 
21 |         <div className="text-lg tracking-wider">{name}</div>
22 |     </div>
23 |   )
24 | }
25 | 
26 | export default CategorySelect


--------------------------------------------------------------------------------
/app/components/navbar/CategoriesItem.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import {IconType} from 'react-icons'
 3 | import {useRouter} from 'next/navigation';
 4 | 
 5 | 
 6 | type CategoriesItemProps = {
 7 |     name: string;
 8 |     icon: IconType;
 9 |     selected: boolean
10 | }
11 | const CategoriesItem:React.FC<CategoriesItemProps> = ({
12 |     name,
13 |     icon: Icon,
14 |     selected
15 | }) => {
16 |     const router = useRouter()
17 |   return (
18 |     <div onClick={() => router.push(`?category=${name}`)} className={`${selected ? "border-b-2 border-black" : ""} pb-2 flex items-center gap-2 cursor-pointer`}>
19 |         <Icon size={20}/>
20 |          <div className='tracking-wider'>{name}</div>
21 |     </div>
22 |   )
23 | }
24 | 
25 | export default CategoriesItem


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import prisma from '@/app/libs/prismadb';
 2 | import Image from 'next/image';
 3 | 
 4 | const Page = async() => {
 5 |    const listings = await prisma.listing.findMany({
 6 |     orderBy : {
 7 |       createdAt: "desc"
 8 |     }
 9 |    })
10 | 
11 |   return (
12 |     <div className='flex items-center flex-wrap'>
13 |       {
14 |         listings?.map((list,i) => (
15 |           <div className=' w-[250px] border rounded-lg p-3 m-2' key={i}>
16 |               <Image
17 |                 src={list.imageSrc}
18 |                 width={200}
19 |                 height={200}
20 |                 alt=''
21 |               />
22 |               <div className='text-xl tracking-wider mt-2'>
23 |                  {list.category} - {list.locationValue}
24 |               </div>
25 |           </div>
26 |         ))
27 |       }
28 |     </div>
29 |   )
30 | }
31 | 
32 | export default Page


--------------------------------------------------------------------------------
/app/components/inputs/Input.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { FieldErrors, FieldValues, UseFormRegister } from "react-hook-form";
 4 | 
 5 | type InputProps = {
 6 |     id: string;
 7 |     type: string;
 8 |     placeholder: string;
 9 |     required: boolean;
10 |     register:UseFormRegister<FieldValues>;
11 |     errors: FieldErrors;
12 | }
13 | const Input:React.FC<InputProps> = ({
14 |     id,
15 |     type,
16 |     placeholder,
17 |     required,
18 |     register,
19 |     errors
20 | }) => {
21 |   return (
22 |     <div className="mb-3">
23 |         <input 
24 |         className={`${errors[id] ? "border border-red-500" : "border border-gray-500"} rounded-md w-full h-12 px-3 text-lg outline-none`}
25 |         {...register(id, {required})} 
26 |         type={type} 
27 |         placeholder={placeholder} 
28 |         id={id} />
29 |     </div>
30 |   )
31 | }
32 | 
33 | export default Input


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve",
20 |     "incremental": true,
21 |     "paths": {
22 |       "@/*": [
23 |         "./*"
24 |       ]
25 |     },
26 |     "plugins": [
27 |       {
28 |         "name": "next"
29 |       }
30 |     ]
31 |   },
32 |   "include": [
33 |     "next-env.d.ts",
34 |     "**/*.ts",
35 |     "**/*.tsx",
36 |     ".next/types/**/*.ts"
37 |   ],
38 |   "exclude": [
39 |     "node_modules"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/app/api/listings/route.ts:
--------------------------------------------------------------------------------
 1 | import getCurrentUser from "@/app/actions/getCurrentUser";
 2 | import { NextResponse } from "next/server";
 3 | import prisma from '@/app/libs/prismadb';
 4 | 
 5 | 
 6 | 
 7 | export async function POST(request: Request){
 8 |  const user = await getCurrentUser();
 9 | 
10 |  if(!user){
11 |     return NextResponse.error();
12 |  }
13 | 
14 |  const body = await request.json();
15 | 
16 |  const {imageSrc, category, roomCount, location} = body;
17 | 
18 |   Object.keys(body).forEach((value :any) => {
19 |      if(!body[value]){
20 |         NextResponse.error()
21 |      }
22 |   })
23 |   const listing = await prisma.listing.create({
24 |     data:{
25 |         imageSrc,
26 |         category,
27 |         roomCount,
28 |         locationValue: location.value,
29 |         userId: user.id
30 |     }
31 |   })
32 |   if(!listing){
33 |      NextResponse.error();
34 |   }
35 |   return NextResponse.json(listing);
36 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ry",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@auth/prisma-adapter": "^0.0.0-manual.70f2982a",
13 |     "@prisma/client": "^4.15.0",
14 |     "@reduxjs/toolkit": "^1.9.5",
15 |     "@types/node": "20.2.5",
16 |     "@types/react": "18.2.7",
17 |     "@types/react-dom": "18.2.4",
18 |     "autoprefixer": "10.4.14",
19 |     "axios": "^1.4.0",
20 |     "bcrypt": "^5.1.0",
21 |     "next": "13.4.4",
22 |     "next-auth": "^4.22.1",
23 |     "postcss": "8.4.24",
24 |     "react": "18.2.0",
25 |     "react-dom": "18.2.0",
26 |     "react-hook-form": "^7.44.2",
27 |     "react-redux": "^8.0.7",
28 |     "react-select": "^5.7.3",
29 |     "react-toastify": "^9.1.3",
30 |     "tailwindcss": "3.3.2",
31 |     "typescript": "5.0.4",
32 |     "world-countries": "^4.0.0"
33 |   },
34 |   "devDependencies": {
35 |     "@types/bcrypt": "^5.0.0",
36 |     "prisma": "^4.15.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/app/components/listings/CountrySelect.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | import Select from 'react-select'
 3 | import Countries from 'world-countries';
 4 | 
 5 | export const getCountries = Countries?.map(countries => {
 6 |     return {
 7 |         name : countries.name.common,
 8 |         flag: countries.flag,
 9 |         lating: countries.latlng
10 |     }
11 | })
12 | 
13 | type CountrySelectProps = {
14 |     value?: string | any;
15 |     onChange: (value : any) => void
16 | }
17 | 
18 | const options : any = getCountries.map(country => ({value: country.name, label: country.name, flag: country.flag})) 
19 | const CountrySelect:React.FC<CountrySelectProps> = ({value, onChange}) => {
20 |   return (
21 |     <div>
22 |         <Select
23 |          placeholder="Ülke Seç"
24 |          options={options}
25 |          isClearable
26 |          value={value}
27 |          onChange={value => onChange(value)}
28 |          isSearchable
29 |          formatOptionLabel={(val: any) => (
30 |             <div className='flex items-center gap-2'>
31 |                 {val.flag} {val.value}
32 |             </div>
33 |          )}
34 |         />
35 |     </div>
36 |   )
37 | }
38 | 
39 | export default CountrySelect


--------------------------------------------------------------------------------
/app/components/navbar/Categories.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import {FaUmbrellaBeach} from 'react-icons/fa'
 3 | import {LuHotel} from 'react-icons/lu'
 4 | import CategoriesItem from './CategoriesItem'
 5 | import {useSearchParams} from 'next/navigation'
 6 | 
 7 | export const categories = [
 8 |     {
 9 |         name : 'Tatil-Köyü',
10 |         icon: FaUmbrellaBeach
11 |     },
12 |     {
13 |         name : 'Kamp',
14 |         icon: LuHotel
15 |     },
16 |     {
17 |         name : 'Otel',
18 |         icon: FaUmbrellaBeach
19 |     },
20 |     {
21 |         name : 'Villa',
22 |         icon: LuHotel
23 |     },
24 | ]
25 | const Categories = () => {
26 |     const params = useSearchParams();
27 |     const urlItem = params?.get('category')
28 | 
29 |     console.log(urlItem, "urlıtem")
30 |   return (
31 |     <div className='flex items-center gap-7'>
32 |         {
33 |             categories.map((cat, i) => (
34 |                 <CategoriesItem
35 |                   key={i}
36 |                   name={cat.name}
37 |                   icon={cat.icon}
38 |                   selected={urlItem == cat.name}
39 |                 />
40 |             ))
41 |         }
42 |     </div>
43 |   )
44 | }
45 | 
46 | export default Categories


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css'
 2 | import {Nunito} from 'next/font/google'
 3 | import Navbar from "./components/navbar/Navbar"
 4 | import MountedClient from './components/MountedClient'
 5 | import RegisterModal from './components/modals/RegisterModal'
 6 | import ReduxProvider from './providers/ReduxProvider'
 7 | import LoginModal from './components/modals/LoginModal'
 8 | import ToastProvider from './providers/ToastProvider'
 9 | import getCurrentUser from './actions/getCurrentUser'
10 | import ElementModal from './components/modals/ElementModal'
11 | 
12 | 
13 | const newFont = Nunito({
14 |     subsets: ['latin']
15 | })
16 | 
17 | export default async function RootLayout({children} : {children: React.ReactNode}){
18 |   const user = await getCurrentUser();
19 |   return (
20 |     <html lang="en">
21 |         <body className={newFont.className}>
22 |             <ReduxProvider>
23 |             <MountedClient>
24 |               {/* <Modal isOpen onSubmit={() => {}} onClose={() => {}} btnLabel='Register' title='Register'/>   */}
25 |               <ToastProvider/>
26 |               <ElementModal/>
27 |               <LoginModal/>
28 |               <RegisterModal/>
29 |               <Navbar user={user}/>
30 |             </MountedClient>
31 |             {children}
32 |             </ReduxProvider>
33 |         </body>
34 |     </html>
35 |   )
36 | }


--------------------------------------------------------------------------------
/app/components/listings/CounterSelect.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import {AiOutlineMinus,AiOutlinePlus} from 'react-icons/ai'
 3 | 
 4 | interface CounterSelectProps{
 5 |     title : string;
 6 |     description: string;
 7 |     value: number;
 8 |     onChange:(value: number) => void;
 9 | }
10 | const CounterSelect:React.FC<CounterSelectProps> = ({
11 |     title,
12 |     description,
13 |     value,
14 |     onChange
15 | }) => {
16 | 
17 |     const decrement = () => {
18 |        if(value == 1) return null;
19 |        onChange(value - 1)
20 |     }
21 | 
22 |     const increment = () => {
23 |         onChange(value + 1) 
24 |     }
25 |   return (
26 |     <div className='flex items-center justify-between'>
27 |         <div className="">
28 |             <div className="text-xl font-bold tracking-wider">{title}</div>
29 |             <div className="text-gray-500">{description}</div>
30 |         </div>
31 |         <div className="flex items-center gap-6">
32 |             <div onClick={decrement} className='cursor-pointer'>
33 |               <AiOutlineMinus size={25}/>
34 |             </div>
35 |             
36 |              <div className='text-2xl font-bold'>{value}</div>
37 | 
38 |              <div onClick={increment} className='cursor-pointer'>
39 |               <AiOutlinePlus size={25}/>
40 |              </div>
41 |            
42 |         </div>
43 |     </div>
44 |   )
45 | }
46 | 
47 | export default CounterSelect


--------------------------------------------------------------------------------
/app/redux/modalSlice.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit'
 2 | import type { PayloadAction } from '@reduxjs/toolkit'
 3 | 
 4 | // Define a type for the slice state
 5 | interface ModalState {
 6 |   registerModal: boolean;
 7 |   loginModal: boolean;
 8 |   elementModal: boolean;
 9 | }
10 | 
11 | // Define the initial state using that type
12 | const initialState: ModalState = {
13 |     registerModal: false,
14 |     loginModal: false,
15 |     elementModal: false
16 | }
17 | 
18 | export const modalSlice = createSlice({
19 |   name: 'modal',
20 |   // `createSlice` will infer the state type from the `initialState` argument
21 |   initialState,
22 |   reducers: {
23 |     registerModalFunc: (state) => {
24 |       state.registerModal = !state.registerModal
25 |     },
26 |     loginModalFunc: (state) => {
27 |         state.loginModal = !state.loginModal
28 |     },
29 |     elementModalFunc: (state) => {
30 |         state.elementModal = !state.elementModal
31 |     },
32 |     // Use the PayloadAction type to declare the contents of `action.payload`
33 |     // incrementByAmount: (state, action: PayloadAction<number>) => {
34 |     //   state.value += action.payload
35 |     // },
36 |   },
37 | })
38 | 
39 | export const { registerModalFunc, loginModalFunc, elementModalFunc } = modalSlice.actions
40 | 
41 | // Other code such as selectors can use the imported `RootState` type
42 | //export const selectCount = (state: RootState) => state.counter.value
43 | 
44 | export default modalSlice.reducer


--------------------------------------------------------------------------------
/app/components/modals/Modal.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import {GrClose} from 'react-icons/gr'
 3 | import Button from '../buttons/Button';
 4 | 
 5 | type ModalProps = {
 6 |     isOpen: boolean;
 7 |     onClose: () => void;
 8 |     onSubmit: () => void;
 9 |     btnLabel: string;
10 |     title: string;
11 |     bodyElement?: React.ReactElement;
12 |     footerElement?: React.ReactElement;
13 | }
14 | const Modal:React.FC<ModalProps> = ({
15 |     isOpen,
16 |     onClose,
17 |     onSubmit,
18 |     btnLabel,
19 |     title,
20 |     bodyElement,
21 |     footerElement
22 | }) => {
23 |     const closeFunc = () => {
24 |         onClose();
25 |     }
26 |     const submitFunc = () => {
27 |         onSubmit();
28 |     }
29 | 
30 |     if(!isOpen){
31 |         return null
32 |     }
33 |     return (
34 |     <div className=" bg-black bg-opacity-70 fixed flex items-center justify-center w-full h-full">
35 |         <div className="bg-white rounded-lg p-5 w-1/2">
36 |             <div className="flex items-center justify-between pb-3 mb-3 border-b">
37 |                  <div className='text-2xl '>{title}</div>
38 |                  <div onClick={closeFunc}>
39 |                    <GrClose size={25} />
40 |                  </div>
41 |             </div>
42 |             <div>{bodyElement}</div>
43 |             <Button
44 |               onSubmit={submitFunc}
45 |               btnLabel = {btnLabel}
46 |             />
47 |             {footerElement}
48 |         </div>
49 |     </div>
50 |   )
51 | }
52 | 
53 | export default Modal


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 | 
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 | 
17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
18 | 
19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20 | 
21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22 | 
23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24 | 
25 | ## Learn More
26 | 
27 | To learn more about Next.js, take a look at the following resources:
28 | 
29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31 | 
32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33 | 
34 | ## Deploy on Vercel
35 | 
36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37 | 
38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
39 | 


--------------------------------------------------------------------------------
/pages/api/auth/[...nextauth].ts:
--------------------------------------------------------------------------------
 1 | import prisma from '@/app/libs/prismadb';
 2 | import NextAuth, { AuthOptions } from "next-auth";
 3 | import GoogleProvider from "next-auth/providers/google";
 4 | import { PrismaAdapter } from "@auth/prisma-adapter";
 5 | import CredentialsProvider from "next-auth/providers/credentials";
 6 | import bcrypt from 'bcrypt';
 7 | 
 8 | 
 9 | export const authOptions: AuthOptions = {
10 |     adapter: PrismaAdapter(prisma) as any,
11 |     providers: [
12 |         GoogleProvider({
13 |         clientId: process.env.GOOGLE_CLIENT_ID as string,
14 |         clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
15 |         }),
16 |         CredentialsProvider({
17 |             name: "Credentials",
18 |             credentials: {
19 |               email: { label: "email", type: "text" },
20 |               password: {  label: "password", type: "password" }
21 |             },
22 |             async authorize(credentials) {
23 |                if(!credentials?.email || !credentials.password){
24 |                  throw new Error('hata durumu mevcut!!!')
25 |                }
26 |                const user = await prisma.user.findUnique({
27 |                 where: {
28 |                     email: credentials.email
29 |                 }
30 |                })
31 |                if(!user || !user.hashedPassword){
32 |                 throw new Error('hata durumu mevcut!!!')
33 |                }
34 |                const comparePassword = await bcrypt.compare(credentials.password,user.hashedPassword);
35 | 
36 |                if(!comparePassword){
37 |                 throw new Error('parola yanlıssss!!!')
38 |                }
39 | 
40 |                return user
41 |             }
42 |           })
43 |   ],
44 |      pages : {
45 |         signIn :'/'
46 |      },
47 |      session: {
48 |         strategy: 'jwt'
49 |      },
50 |      debug: process.env.NODE_ENV === "development",
51 |      secret: process.env.NEXTAUTH_URL
52 | }
53 | 
54 | export default NextAuth(authOptions)


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "mongodb"
10 |   url      = env("DATABASE_URL")
11 | }
12 | 
13 | model User {
14 |   id              String @id @default(auto()) @map("_id") @db.ObjectId
15 |   name            String?
16 |   email           String?   @unique
17 |   emailVerified   DateTime?
18 |   image           String?
19 |   hashedPassword  String?
20 |   createdAt       DateTime @default(now())
21 |   updatedAt       DateTime @updatedAt
22 |   favoriteIds     String[] @db.ObjectId
23 | 
24 |   accounts Account[]
25 |   listings Listing[]
26 |   reservations Reservation[]
27 | }
28 | 
29 | model Account {
30 |   id String @id @default(auto()) @map("_id") @db.ObjectId
31 |   userId             String   @db.ObjectId
32 |   type               String
33 |   provider           String
34 |   providerAccountId  String
35 |   refresh_token      String?  @db.String
36 |   access_token       String?  @db.String
37 |   expires_at         Int?
38 |   token_type         String?
39 |   scope              String?
40 |   id_token           String?  @db.String
41 |   session_state      String?
42 | 
43 |   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
44 | 
45 |   @@unique([provider, providerAccountId])
46 | }
47 | 
48 | model Listing {
49 |   id             String @id @default(auto()) @map("_id") @db.ObjectId
50 |   imageSrc String
51 |   createdAt DateTime @default(now())
52 |   category  String
53 |   roomCount Int
54 |   locationValue String
55 |   userId String @db.ObjectId
56 | 
57 |   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
58 |   reservations Reservation[]
59 | }
60 | 
61 | model Reservation {
62 |   id String @id @default(auto()) @map("_id") @db.ObjectId
63 |   userId String @db.ObjectId
64 |   listingId String @db.ObjectId  
65 |   startDate DateTime
66 |   endDate DateTime
67 |   totalPrice Int
68 |   createdAt DateTime @default(now())
69 | 
70 |   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
71 |   listing Listing @relation(fields: [listingId], references: [id], onDelete: Cascade)
72 | }
73 | 


--------------------------------------------------------------------------------
/app/components/modals/LoginModal.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
 4 | import Modal from "./Modal"
 5 | import Input from "../inputs/Input";
 6 | import Button from "../buttons/Button";
 7 | import {FcGoogle} from 'react-icons/fc'
 8 | import { useAppDispatch, useAppSelector } from "@/app/redux/hooks";
 9 | import { loginModalFunc, registerModalFunc } from "@/app/redux/modalSlice";
10 | import { signIn } from "next-auth/react";
11 | import { useRouter } from "next/navigation";
12 | import { toast } from "react-toastify";
13 | 
14 | const LoginModal = () => {
15 |     const { register, handleSubmit, watch, formState: { errors } } = useForm<FieldValues>({
16 |         defaultValues:{
17 |             email:"",
18 |             password:""
19 |         }
20 |     });
21 |     const router = useRouter()
22 |     const {loginModal} = useAppSelector(state => state.modal);
23 |     const dispatch = useAppDispatch();
24 |     const onSubmit: SubmitHandler<FieldValues> = (data) => {
25 |         console.log(data);
26 |         signIn('credentials' , {
27 |             ...data,
28 |             redirect: false
29 |         })
30 |         .then((callback) => {
31 |             if(callback?.ok){
32 |                 dispatch(loginModalFunc())
33 |                 router.refresh();
34 |                 toast.success('login işlemi basarılı!!!')
35 |             }
36 |             if(callback?.error){
37 |                 toast.error('login işlemi hatalı!!!')
38 |             }
39 |         })
40 |     }
41 | 
42 |     const bodyElement = (
43 |       <div>
44 |           <Input
45 |           id="email"
46 |           type="text"
47 |           placeholder="Email"
48 |           register={register}
49 |           errors={errors}
50 |           required
51 |          />
52 |           <Input
53 |           id="password"
54 |           type="password"
55 |           placeholder="Password"
56 |           register={register}
57 |           errors={errors}
58 |           required
59 |          />
60 |       </div>
61 |     )
62 |     const footerElement = (
63 |         <div className="mt-5">
64 |             <Button
65 |               btnLabel="Google ile Giriş"
66 |               outline
67 |               icon={FcGoogle}
68 |               onSubmit={() => {signIn('google')}}
69 |             />
70 |         </div>
71 |     )
72 |   return (
73 |     <div>
74 |         <Modal footerElement={footerElement} bodyElement={bodyElement} isOpen={loginModal} onSubmit={handleSubmit(onSubmit)} onClose={() => {dispatch(loginModalFunc())}} btnLabel='Login' title='Login'/>
75 |     </div>
76 |   )
77 | }
78 | 
79 | export default LoginModal


--------------------------------------------------------------------------------
/app/components/modals/RegisterModal.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
 4 | import Modal from "./Modal"
 5 | import Input from "../inputs/Input";
 6 | import Button from "../buttons/Button";
 7 | import {FcGoogle} from 'react-icons/fc'
 8 | import { useAppDispatch, useAppSelector } from "@/app/redux/hooks";
 9 | import { registerModalFunc } from "@/app/redux/modalSlice";
10 | import axios from "axios";
11 | import { toast } from "react-toastify";
12 | import { signIn } from "next-auth/react";
13 | 
14 | const RegisterModal = () => {
15 |     const { register, handleSubmit, watch, formState: { errors } } = useForm<FieldValues>({
16 |         defaultValues:{
17 |             name: "",
18 |             email:"",
19 |             password:""
20 |         }
21 |     });
22 |     const {registerModal} = useAppSelector(state => state.modal);
23 |     const dispatch = useAppDispatch();
24 |     const onSubmit: SubmitHandler<FieldValues> = (data) => {
25 |         console.log(data);
26 |         axios.post('/api/register', data)
27 |         .then(() => {
28 |             dispatch(registerModalFunc())
29 |             toast.success('Register işlemi basarılı!!!')
30 |         })
31 |         .catch((err: any) => {
32 |             toast.error('Register işlemi hatalı!!!')
33 |         })
34 |     }
35 | 
36 |     const bodyElement = (
37 |       <div>
38 |          <Input
39 |           id="name"
40 |           type="text"
41 |           placeholder="Name"
42 |           register={register}
43 |           errors={errors}
44 |           required
45 |          />
46 |           <Input
47 |           id="email"
48 |           type="text"
49 |           placeholder="Email"
50 |           register={register}
51 |           errors={errors}
52 |           required
53 |          />
54 |           <Input
55 |           id="password"
56 |           type="password"
57 |           placeholder="Password"
58 |           register={register}
59 |           errors={errors}
60 |           required
61 |          />
62 |       </div>
63 |     )
64 |     const footerElement = (
65 |         <div className="mt-5">
66 |             <Button
67 |               btnLabel="Google ile Giriş"
68 |               outline
69 |               icon={FcGoogle}
70 |               onSubmit={() => {signIn('google')}}
71 |             />
72 |         </div>
73 |     )
74 |   return (
75 |     <div>
76 |         <Modal footerElement={footerElement} bodyElement={bodyElement} isOpen={registerModal} onSubmit={handleSubmit(onSubmit)} onClose={() => {dispatch(registerModalFunc())}} btnLabel='Register' title='Register'/>
77 |     </div>
78 |   )
79 | }
80 | 
81 | export default RegisterModal


--------------------------------------------------------------------------------
/app/components/navbar/UserMenu.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import {useState} from 'react'
 3 | import {GiHamburgerMenu} from 'react-icons/gi';
 4 | import Image from 'next/image';
 5 | import UserMenuItem from './UserMenuItem';
 6 | import { useAppDispatch } from '@/app/redux/hooks';
 7 | import { elementModalFunc, loginModalFunc, registerModalFunc } from '@/app/redux/modalSlice';
 8 | import { User } from '@prisma/client';
 9 | import { signOut } from "next-auth/react"
10 | 
11 | const UserMenu = ({user} : {user: User | any | undefined}) => {
12 |     const [openMenu, setOpenMenu] = useState(false)
13 |     const dispatch = useAppDispatch();
14 | 
15 |     console.log(user, "user")
16 |   return (
17 |     <div onClick={() => setOpenMenu(!openMenu)} className='relative flex items-center gap-2 cursor-pointer'>
18 |         <div className='text-gray-500 text-sm'>{user?.name}</div>
19 |         <GiHamburgerMenu size={25}/>
20 |         <Image
21 |          src={user.image || "https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png"}
22 |          alt=''
23 |          width={40}
24 |          height={40}
25 |          className='rounded-full'
26 |         />
27 | 
28 |         {
29 |             openMenu && (
30 |                 <div className='absolute bg-white shadow-lg shadow-gray-500 w-[150px] top-16 right-0'>
31 |                     {
32 |                         user ? (
33 |                             <>
34 |                                 <UserMenuItem
35 |                                 name="Create Listing"
36 |                                 onClick={()=>{dispatch(elementModalFunc())}}
37 |                                 />
38 |                                 <UserMenuItem
39 |                                 name="Favorited"
40 |                                 onClick={()=>{}}
41 |                                 />
42 |                                  <UserMenuItem
43 |                                 name="Sign Out"
44 |                                 onClick={()=>{signOut()}}
45 |                                 />
46 |                             </>
47 |                         ) :
48 |                         (
49 |                             <>
50 |                                 <UserMenuItem
51 |                                 name="Sign In"
52 |                                 onClick={()=>{dispatch(loginModalFunc())}}
53 |                                 />
54 |                                 <UserMenuItem
55 |                                 name="Sign Up"
56 |                                 onClick={()=>{dispatch(registerModalFunc())}}
57 |                                 />
58 |                             </>
59 |                         )
60 |                     }
61 |                    
62 |                 </div>
63 |             )
64 |         }
65 |     </div>
66 |   )
67 | }
68 | 
69 | export default UserMenu


--------------------------------------------------------------------------------
/app/components/modals/ElementModal.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
  4 | import Modal from "./Modal"
  5 | import Input from "../inputs/Input";
  6 | import Button from "../buttons/Button";
  7 | import {FcGoogle} from 'react-icons/fc'
  8 | import { useAppDispatch, useAppSelector } from "@/app/redux/hooks";
  9 | import { elementModalFunc, loginModalFunc, registerModalFunc } from "@/app/redux/modalSlice";
 10 | import { signIn } from "next-auth/react";
 11 | import { useRouter } from "next/navigation";
 12 | import { toast } from "react-toastify";
 13 | import { categories } from "../navbar/Categories";
 14 | import CategorySelect from "../listings/CategorySelect";
 15 | import CountrySelect from "../listings/CountrySelect";
 16 | import CounterSelect from "../listings/CounterSelect";
 17 | import { useState } from "react";
 18 | import Image from "next/image";
 19 | import axios from "axios";
 20 | 
 21 | const ElementModal = () => {
 22 | 
 23 |     const [imgsSrc, setImgsSrc] = useState([])
 24 |     const { register, handleSubmit, watch,setValue,reset, formState: { errors } } = useForm<FieldValues>({
 25 |         defaultValues:{
 26 |             imageSrc:'',
 27 |             category:'',
 28 |             roomCount:1,
 29 |             location: null
 30 |         }
 31 |     });
 32 |     const router = useRouter()
 33 |     const {elementModal} = useAppSelector(state => state.modal);
 34 |     const dispatch = useAppDispatch();
 35 |     const onSubmit: SubmitHandler<FieldValues> = (data) => {
 36 |        axios.post('/api/listings', data)
 37 |        .then(() => {
 38 |            toast.success('ekleme işlemi basarılı')
 39 |            router.refresh();
 40 |            reset()
 41 |            dispatch(elementModalFunc())
 42 |        })
 43 |        .catch((err) => {
 44 |         toast.error('ekleme işlemi basarısız!!')
 45 |            console.log(err, "err")
 46 |        })
 47 |     }
 48 | 
 49 |     const category = watch('category');
 50 |     const roomCount = watch('roomCount');
 51 |     const imageSrc = watch('imageSrc');
 52 |     const location = watch('location');
 53 | 
 54 |     const customSetValue = (id: string, value: any) => {
 55 |         setValue(id, value, {
 56 |             shouldValidate: true,
 57 |             shouldDirty: true,
 58 |             shouldTouch: true
 59 |         })
 60 |     }
 61 | 
 62 |     const imageSelectFunc = (e: any) => {
 63 |         for (const file of e.target.files) {
 64 |             const reader = new FileReader();
 65 |             reader.readAsDataURL(file);
 66 |             reader.onload = () => {
 67 |                 setImgsSrc((imgs):any => [...imgs, reader.result] )
 68 |                 return customSetValue('imageSrc',reader.result)
 69 |             }
 70 |             reader.onerror = () => {
 71 |                 console.log(reader.error)
 72 |             }
 73 |         }
 74 |     }
 75 | 
 76 |     const bodyElement = (
 77 |         <>
 78 |       <div className="flex items-center gap-10 mb-5">
 79 |          {
 80 |             categories.map((cat,i) => (
 81 |                 <CategorySelect
 82 |                  key={i}
 83 |                  name={cat.name}
 84 |                  icon= {cat.icon}
 85 |                  onClick={(category) => {customSetValue('category', category)}}
 86 |                  selected =  {category == cat.name}
 87 |                 />
 88 |             ))
 89 |          }
 90 |       </div>
 91 |       <div className="mb-5">
 92 |           <CountrySelect
 93 |            value={location}
 94 |            onChange={(value) => {customSetValue('location', value)}}
 95 |           />
 96 |       </div>
 97 |       <div className="mb-5">
 98 |           <CounterSelect
 99 |            title = "Stok Sayısı"
100 |            description = "Stok Sayısı Miktarı(Açıklama)"
101 |            value={roomCount}
102 |            onChange = {(value) => {customSetValue('roomCount', value)} }
103 |           />
104 |       </div>
105 |       <input className="mb-4" multiple type="file" name="file" onChange={val => imageSelectFunc(val)} />
106 |        <div className="mb-5">
107 |         <Image
108 |           src={imageSrc}
109 |           alt=""
110 |           width={200}
111 |           height={200}
112 |         />
113 |        </div>
114 |       </>
115 |     )
116 | 
117 |   return (
118 |     <div>
119 |         <Modal bodyElement={bodyElement} isOpen={elementModal} onSubmit={handleSubmit(onSubmit)} onClose={() => {dispatch(elementModalFunc())}} btnLabel='Create' title='Create Listing'/>
120 |     </div>
121 |   )
122 | }
123 | 
124 | export default ElementModal


--------------------------------------------------------------------------------