![]() Finally, the product fetched is sent to the UpdateProduct function as a prop. You access the product's id using the params object and pass it to the getProductById() function. Similar to /user/profile.js file, you use the getServerSideProps() function wrapped with the withPageAuthRequired method to redirect any anonymous user to the login page. You use the same code for the form as in the product/insert.js file. You might remember that in the Product component, you were sending the id of the product in the query parameter. Then, you will fetch the selected product and prefill the form with its data so that the user can see and update the product accordingly. To update the product, you will create a form with Name, Link, and Description fields. In this jam, you will update only the textual data of the product and not its image. In this section, you will create the update/ dynamic route to edit/update a product. Here is the My Profile page after the user has created a product. Here is how the My Profile page will look if the user has not created any product. ![]() There is also a default message if the current user has not created any products. Since the products fetched from Airtable are created by the current user, you pass true in the check prop of the Product component. ![]() You then map over the products array, and similar to the index.js file, show the products on the page using the Product component. You also show the total number of products created by the user by calculating the length of the products array. In this component, you use the user object to show the current user's name and profile picture. The records from Airtable are passed as props to the Profile component. You can read more about this method here. The getSession() method gets the user's session from the request. The getProductsByUserSub() function requires the user's sub to fetch the products, accessed using the getSession() method. This withPageAuthRequired protects the My Profile page from anonymous logins and redirects them to the login page. You will notice that you have wrapped the getServerSideProps() function with withPageAuthRequired() method from the SDK.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |