Skip to content

Commit bf10479

Browse files
nooobcodernooobcoder
committed
Add creating homes and ISR of property details
1 parent f2c4c26 commit bf10479

File tree

6 files changed

+153
-16
lines changed

6 files changed

+153
-16
lines changed

‎supa-vacation-nextjs/pages/_app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { Toaster } from 'react-hot-toast';
44
function MyApp({ Component, pageProps }) {
55
return (
66
<>
7-
<Component {...pageProps} />
87
<Toaster />
8+
<Component {...pageProps} />
99
</>
1010
);
1111
}

‎supa-vacation-nextjs/pages/api/home.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createHome } from "utils/dbOps.ts";
2+
3+
const handler = async (req, res) => {
4+
// Create new home
5+
if (req.method === 'POST') {
6+
try {
7+
const { image, title, description, price, guests, beds, baths } = req.body;
8+
const home = await createHome({ image, title, description, price, guests, beds, baths });
9+
res.status(200).json(home);
10+
}
11+
catch (e) {
12+
res.status(500).json({ message: `Something went wrong!` });
13+
}
14+
}
15+
// HTTP method not supported!
16+
else {
17+
res.setHeader(`Allow`, [`POST`])
18+
res
19+
.status(405)
20+
.json({ message: `HTTP method ${req.method} is not supported.` });
21+
}
22+
}
23+
24+
export default handler;

‎supa-vacation-nextjs/pages/create.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Layout from '@/components/Layout'
2+
import ListingForm from "@/components/ListingForm"
3+
import React from 'react'
4+
5+
const Create = () => {
6+
const addHome = async (data) => {
7+
// Send data as POST request using fetch
8+
const resp = await (await fetch(`/api/home`, {
9+
method: 'POST',
10+
headers: {
11+
'Content-Type': 'application/json',
12+
'Accept': 'application/json',
13+
},
14+
body: JSON.stringify(data)
15+
})).json();
16+
console.log(resp);
17+
};
18+
19+
return (
20+
<Layout>
21+
<div className="max-w-screen-sm mx-auto">
22+
<h1 className="text-xl font-medium text-gray-800">List your home</h1>
23+
<p className="text-gray-500">
24+
Fill out the form below to list a new home.
25+
</p>
26+
<div className="mt-8">
27+
<ListingForm
28+
buttonText="Add home"
29+
redirectPath="/"
30+
onSubmit={addHome}
31+
/>
32+
</div>
33+
</div>
34+
</Layout>
35+
)
36+
}
37+
38+
export default Create

‎supa-vacation-nextjs/pages/homes/[id].js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import Image from 'next/image';
2+
import Layout from '@/components/Layout';
3+
import { getAllHomes, getHomeById } from 'utils/dbOps.ts';
4+
import { useRouter } from 'next/router';
5+
6+
const ListedHome = (home = null) => {
7+
const router = useRouter();
8+
9+
if (router.isFallback) {
10+
return <div>Loading...</div>;
11+
}
12+
13+
return (
14+
<Layout>
15+
<div className="max-w-screen-lg mx-auto">
16+
<div className="flex flex-col sm:flex-row sm:justify-between sm:space-x-4 space-y-4">
17+
<div>
18+
<h1 className="text-2xl font-semibold truncate">
19+
{home?.title ?? ''}
20+
</h1>
21+
<ol className="inline-flex items-center space-x-1 text-gray-500">
22+
<li>
23+
<span>{home?.guests ?? 0} guests</span>
24+
<span aria-hidden="true"> · </span>
25+
</li>
26+
<li>
27+
<span>{home?.beds ?? 0} beds</span>
28+
<span aria-hidden="true"> · </span>
29+
</li>
30+
<li>
31+
<span>{home?.baths ?? 0} baths</span>
32+
</li>
33+
</ol>
34+
</div>
35+
</div>
36+
37+
<div className="mt-6 relative aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg shadow-md overflow-hidden">
38+
{home?.image ? (
39+
<Image
40+
src={home.image}
41+
alt={home.title}
42+
layout="fill"
43+
objectFit="cover"
44+
/>
45+
) : null}
46+
</div>
47+
48+
<p className="mt-8 text-lg">{home?.description ?? ''}</p>
49+
</div>
50+
</Layout>
51+
);
52+
};
53+
54+
const getStaticProps = async ({ params }) => {
55+
const home = await getHomeById(params.id);
56+
57+
if (home) {
58+
return { props: JSON.parse(JSON.stringify(home)), revalidate: 10 };
59+
}
60+
}
61+
62+
const getStaticPaths = async () => {
63+
const homes = await getAllHomes({ select: { id: true } });
64+
65+
return {
66+
paths: homes.map(h => ({ params: { id: h.id } })),
67+
fallback: true,
68+
}
69+
}
70+
71+
export default ListedHome;
72+
export { getStaticPaths, getStaticProps }

‎supa-vacation-nextjs/pages/index.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import Layout from '@/components/Layout';
21
import Grid from '@/components/Grid';
2+
import Layout from '@/components/Layout';
33

4-
import homes from 'data.json';
4+
// import homes from 'data.json';
55
import { getAllHomes } from '../utils/dbOps.ts';
66

7-
export default function Home({ homes: h }) {
8-
console.log(h)
7+
export default function Home({ homes }) {
98
return (
109
<Layout>
1110
<h1 className="text-xl font-medium text-gray-800">

‎supa-vacation-nextjs/utils/dbOps.ts

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,18 @@ const prisma =
1414

1515
if (process.env.NODE_ENV !== "production") global.prisma = prisma;
1616

17-
const createHome = async () =>
17+
const createHome = async (
18+
data = {
19+
title: "Clean and modern apartment in downtown Providence, RI",
20+
description: "Entire rental unit + free wifi",
21+
price: 185,
22+
guests: 4,
23+
beds: 2,
24+
baths: 1,
25+
}
26+
) =>
1827
await prisma.home.create({
19-
data: {
20-
title: "Clean and modern apartment in downtown Providence, RI",
21-
description: "Entire rental unit + free wifi",
22-
price: 185,
23-
guests: 4,
24-
beds: 2,
25-
baths: 1,
26-
},
28+
data,
2729
});
2830

2931
const updateHome = async () =>
@@ -43,6 +45,8 @@ const deleteHome = async () =>
4345
},
4446
});
4547

46-
const getAllHomes = async () => await prisma.home.findMany({});
48+
const getAllHomes = async (args = {}) => await prisma.home.findMany(args);
49+
50+
const getHomeById = async (id=`1`) => await prisma.home.findUnique({where:{id}});
4751

48-
export { createHome, updateHome, deleteHome, getAllHomes, prisma };
52+
export { createHome, updateHome, deleteHome, getAllHomes,getHomeById, prisma };

0 commit comments

Comments
 (0)