This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.
- Part 1: Let’s start by installing Next.js
- Part 2: Build the list of houses
- Part 3: Build the house detail view
- Part 4: CSS and navigation bar
- Part 5: Start with the date picker
- Part 6: Add the sidebar
- Part 7: Add react-day-picker
- Part 8: Add the calendar to the page
- Part 9: Configure the DayPickerInput component
- Part 10: Sync the start and end dates
- Part 11: Show the price for the chosen dates
- Part 12: Login and signup forms
- Part 13: Activate the modal
- Part 14: Send registration data to the server
- Part 15: Add postgres
- Part 16: Implement model and DB connection
- Part 17: Create a session token
- Part 18: Implement login
- Part 19: Determine if we are logged in
- Part 20: Change state after we login
- Part 21: Log in after registration
The first thing we’re going to do is to move the houses from the simple JSON file we now have in houses.js to the new Postgres database we defined, by first creating the Sequelize models for the data, and then letting Sequelize create the tables for us.
The file houses.js currently hosts this content, which forms all our application data so far:
houses.js
export default [
{
id: 1,
picture: '/img/1.jpg',
type: 'Entire house',
town: 'New York',
title: 'Beautiful flat in New York!',
price: '150.00',
description:
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur',
guests: 4
},
{
id: 2,
picture: '/img/2.jpg',
type: 'Entire house',
town: 'Amsterdam',
title: 'A flat in Amsterdam with a great view',
price: '90.00',
description:
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur',
guests: 4
}
]Let’s move this to a Sequelize model in model.js. You can add this code at the bottom of the file, before the export { sequelize, User } line:
class House extends Sequelize.Model {}
House.init(
{
id: {
type: Sequelize.DataTypes.INTEGER,
autoIncrement: true,
primaryKey: true
},
picture: { type: Sequelize.DataTypes.STRING, allowNull: false },
type: { type: Sequelize.DataTypes.STRING, allowNull: false },
town: { type: Sequelize.DataTypes.STRING, allowNull: false },
title: { type: Sequelize.DataTypes.STRING, allowNull: false },
price: { type: Sequelize.DataTypes.INTEGER, allowNull: false },
owner: { type: Sequelize.DataTypes.INTEGER, allowNull: false }
},
{
sequelize,
modelName: 'house',
timestamps: false
}
)The owner field will contain a reference to a user.
Then add House to the list of exports:
export { sequelize, User, House }Now we can make Sequelize automatically create the houses table by calling House.sync(). We can add this call into an API call, for example in pages/api/auth/login.js, temporarily:
import { User, House, sequelize } from '../../../model.js'
//...
export default async (req, res) => {
if (req.method !== 'POST') {
res.status(405).end() //Method Not Allowed
return
}
House.sync()
...After you call the API once you can remove this line.
You can now see the table in the database:
It’s a nice feature that allows us to avoid creating the table separately.
Once you hit the endpoint, you can remove the code from that file, as the table has been created.
If you modify a model, you can call this sync() model method again to keep the table in sync with the model, with the alter property:
User.sync({ alter: true })
House.sync({ alter: true })You can add this line at the end of the model.js file.
The alter: true option makes sure tables are updated when we change the model, something very useful as we build the app.
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-12-22T05:00:00+00:00) Airbnb clone, create the models and move data to the db. Retrieved from https://www.scien.cx/2021/12/22/airbnb-clone-create-the-models-and-move-data-to-the-db/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.