Merge pull request #97 from s-vamshi/select-option-for-category-in-cr…

…eateProduct Select option for category in create product screen
roopeshsn · Oct 16, 2022 · d79a958 · d79a958
2 parents e32749a + 609b5dd
commit d79a958
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 23 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -59,8 +59,14 @@ function App() {
             <Route path="/admin/users" component={UsersListScreen} />
             <Route path="/admin/user/:id" component={UserEditScreen} />
             <Route path="/admin/productlist" component={ProductListScreen} />
-            <Route path="/admin/createproduct" component={CreateProductScreen} />
-            <Route path="/admin/product/:id/edit" component={ProductEditScreen} />
+            <Route
+              path="/admin/createproduct"
+              component={CreateProductScreen}
+            />
+            <Route
+              path="/admin/product/:id/edit"
+              component={ProductEditScreen}
+            />
             <Route path="/admin/orderlist" component={OrderListScreen} />
             <Route path="/admin/carousellist" component={CarouselListScreen} />
             <Route

diff --git a/frontend/src/screens/CreateProductScreen.js b/frontend/src/screens/CreateProductScreen.js
@@ -8,6 +8,8 @@ import Loader from '../components/Loader'
 import FormContainer from '../components/FormContainer'
 import { PRODUCT_CREATE_FAIL } from '../constants/productConstants'
 import { createProduct } from '../actions/productActions'
+import { listCategories } from '../actions/categoryActions'
+import Capitalizer from '../utils/capitalizeFirstLetter'
 
 const CreateProductScreen = ({ history }) => {
   const [name, setName] = useState('')
@@ -23,7 +25,9 @@ const CreateProductScreen = ({ history }) => {
   const dispatch = useDispatch()
 
   const productCreate = useSelector((state) => state.productCreate)
+  const categoryList = useSelector((state) => state.categoryList)
   const { loading, error, success } = productCreate
+  const { categories } = categoryList
 
   // useEffect(() => {
   //   if (!product.name || product._id !== productId) {
@@ -39,6 +43,10 @@ const CreateProductScreen = ({ history }) => {
   //   }
   // }, [dispatch, history])
 
+  useEffect(() => {
+    dispatch(listCategories())
+  }, [dispatch])
+
   useEffect(() => {
     if (success) {
       history.push('/admin/productlist')
@@ -177,14 +185,26 @@ const CreateProductScreen = ({ history }) => {
             ></Form.Control>
           </Form.Group>
 
-          <Form.Group className="my-3" controlId="category">
+          <Form.Group controlId="Category">
             <Form.Label>Category</Form.Label>
             <Form.Control
-              type="text"
-              placeholder="Enter Category"
+              className="form-select"
+              as="select"
               value={category}
-              onChange={(e) => setCategory(e.target.value)}
-            ></Form.Control>
+              onChange={(e) => {
+                setCategory(e.target.value)
+              }}
+            >
+              <option value="">--Select One--</option>
+              {categories &&
+                categories.map((category) => {
+                  return (
+                    <option key={category._id} value={category.name}>
+                      {Capitalizer(category.name)}
+                    </option>
+                  )
+                })}
+            </Form.Control>
           </Form.Group>
 
           <Form.Group controlId="description">
@@ -200,7 +220,7 @@ const CreateProductScreen = ({ history }) => {
           </Form.Group>
 
           <Button className="my-3" type="submit" variant="primary">
-            Update
+            Create
           </Button>
           <Link to="/admin/productlist" className="btn btn-light my-3 ms-3">
             Go Back

diff --git a/frontend/src/screens/Error404Screen.js b/frontend/src/screens/Error404Screen.js
@@ -1,28 +1,28 @@
 import React from 'react'
-import {Row,Col,Button} from 'react-bootstrap'
+import { Row, Col, Button } from 'react-bootstrap'
 import { LinkContainer } from 'react-router-bootstrap'
 
 function Error404Screen() {
   return (
     <>
-    <br />
-      <center className='mt-5 '>
-        <Row className='g-0 d-flex align-items-center'>
+      <br />
+      <center className="mt-5 ">
+        <Row className="g-0 d-flex align-items-center">
           <Col xs={5} md={6}>
-            <div className="text-dark display-1 float-end">404</div> 
+            <div className="text-dark display-1 float-end">404</div>
           </Col>
           <Col xs={7} md={6}>
-              <p className="text-dark float-start pt-2 pt-md-3"><b>Page not found</b></p>
+            <p className="text-dark float-start pt-2 pt-md-3">
+              <b>Page not found</b>
+            </p>
           </Col>
         </Row>
         <LinkContainer to="/">
-          <Button className='mt-1 px-5'>
-            Take me home
-          </Button>
+          <Button className="mt-1 px-5">Take me home</Button>
         </LinkContainer>
       </center>
     </>
   )
 }
 
-export default Error404Screen
+export default Error404Screen
diff --git a/frontend/src/screens/ProductEditScreen.js b/frontend/src/screens/ProductEditScreen.js
@@ -12,6 +12,8 @@ import {
   PRODUCT_UPDATE_RESET,
   PRODUCT_UPDATE_FAIL,
 } from '../constants/productConstants'
+import { listCategories } from '../actions/categoryActions'
+import Capitalizer from '../utils/capitalizeFirstLetter'
 
 const ProductEditScreen = ({ match, history }) => {
   const productId = match.params.id
@@ -31,13 +33,20 @@ const ProductEditScreen = ({ match, history }) => {
   const productDetails = useSelector((state) => state.productDetails)
   const { loading, error, product } = productDetails
 
+  const categoryList = useSelector((state) => state.categoryList)
+  const { categories } = categoryList
+
   const productUpdate = useSelector((state) => state.productUpdate)
   const {
     loading: loadingUpdate,
     error: errorUpdate,
     success: successUpdate,
   } = productUpdate
 
+  useEffect(() => {
+    dispatch(listCategories())
+  }, [dispatch])
+
   useEffect(() => {
     if (successUpdate) {
       dispatch({ type: PRODUCT_UPDATE_RESET })
@@ -196,14 +205,25 @@ const ProductEditScreen = ({ match, history }) => {
               ></Form.Control>
             </Form.Group>
 
-            <Form.Group className="my-3" controlId="category">
+            <Form.Group controlId="Category">
               <Form.Label>Category</Form.Label>
               <Form.Control
-                type="text"
-                placeholder="Enter Category"
+                className="form-select"
+                as="select"
                 value={category}
-                onChange={(e) => setCategory(e.target.value)}
-              ></Form.Control>
+                onChange={(e) => {
+                  setCategory(e.target.value)
+                }}
+              >
+                {categories &&
+                  categories.map((category) => {
+                    return (
+                      <option key={category._id} value={category.name}>
+                        {Capitalizer(category.name)}
+                      </option>
+                    )
+                  })}
+              </Form.Control>
             </Form.Group>
 
             <Form.Group controlId="description">