adding admin page #2
Conversation
pages/admin.js
Outdated
| import { ListProductComponent } from "../components/product/list"; | ||
| import { useState, useEffect } from "react"; | ||
|
|
||
| let clearPage = () => { |
There was a problem hiding this comment.
direct dom interaction is usually frowned upon in the react world. you can use the useRef to target an element in dom and interact with it which is better compatible with react.
| const [productPrice, setPrice] = useState(""); | ||
| const [productDescription, setDescription] = useState(""); | ||
|
|
||
| const submitNewProduct = (e) => { |
There was a problem hiding this comment.
wrapping these in useCallback is always a good idea because otherwise, react will constantly recreate this definition whenever something in the state changes.
Also, this type of helper function should be declared outside of the component. the more logic you can take out of the component and isolate elsewhere, the cleaner and easier to understand your components will be.
snlaight
added
enhancement
|
This update changes how useState and useEffect are used , effectively adding the product to the DB and rendering the page again to automatically show it on the admin list of items in the product shop. Would like a review on this, since I am using the |
| @@ -1,10 +1,17 @@ | |||
| import Dexie from "dexie"; | |||
| import Dexie, { DBCoreRangeType } from "dexie"; | |||
There was a problem hiding this comment.
this was imported on accident, will remove from the code now.
| }); | ||
| db.version(3).stores({ | ||
| cartItems: `name, price, description, image, count`, | ||
| products: `name, price, description, image, flag` |
There was a problem hiding this comment.
not sure why you need 2 different versions with the same definition of database?
|
|
||
| export default function Admin() { | ||
| console.log(Products) | ||
| let [product, setProduct] = useState({ |
There was a problem hiding this comment.
if you're not familiar with the useReducer hook, please look that up. that hook is more suitable for this kind of advanced data structure of states.
| description: product.description, | ||
| price: priceNumber, | ||
| image: productImage.toString(), | ||
| flag: admin, |
There was a problem hiding this comment.
like 35-39 is the exact same as line 42-46. whenever you see duplication like this, you should refactor the code into a function.
| }) | ||
| }; | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
what purpose is this empty useEffect serving?
This PR adds in the admin page to the project, as well as the initial functionality of the admin page.
The admin page allows a user to create new products, which are then added to the list of products a user can choose from.
Comments
This PR only creates the product and pushes it to the products array, which is currently only visible via the console. It also automatically clears all the fields of the form as soon as the product is submitted. The products are shown in the admin page underneath the form submission -- if the user interacts with one of the inputs (for example, select and enter a space) the new product will be added to the list on the page.
LEFT TO COMPLETE
• Clean up form styles and location (this initial commit inserts a simple form, without much style or placement, to test functionality)
• Persist products list on indexedDB, so products still exist after refreshing the page.
• add method to dynamically update the product list shown on the admin page as soon as it is entered.
• add functionality to be able to edit / delete all of the products created from the /admin page, using the admin flag which already gets inserted.