From 5a5e943d97ce45d5893e6c3610af0689e15d9578 Mon Sep 17 00:00:00 2001
From: s vamshi <somsolevamshi@gmail.com>
Date: Sun, 16 Oct 2022 10:39:04 +0530
Subject: [PATCH 1/4] added options to category field

---
 frontend/src/screens/CreateProductScreen.js | 30 ++++++++++++++-------
 frontend/src/screens/ProductEditScreen.js   | 27 ++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/frontend/src/screens/CreateProductScreen.js b/frontend/src/screens/CreateProductScreen.js
index ce258b5..b688613 100644
--- a/frontend/src/screens/CreateProductScreen.js
+++ b/frontend/src/screens/CreateProductScreen.js
@@ -20,6 +20,7 @@ const CreateProductScreen = ({ history }) => {
   const [description, setDescription] = useState('')
   const [uploading, setUploading] = useState(false)
 
+
   const dispatch = useDispatch()
 
   const productCreate = useSelector((state) => state.productCreate)
@@ -177,15 +178,24 @@ const CreateProductScreen = ({ history }) => {
             ></Form.Control>
           </Form.Group>
 
-          <Form.Group className="my-3" controlId="category">
-            <Form.Label>Category</Form.Label>
-            <Form.Control
-              type="text"
-              placeholder="Enter Category"
-              value={category}
-              onChange={(e) => setCategory(e.target.value)}
-            ></Form.Control>
-          </Form.Group>
+        <Form.Group controlId="Category">
+          <Form.Label>Category</Form.Label>
+          <Form.Control 
+            className='form-select'
+            as="select"
+            value={category}
+            onChange={e => {
+              setCategory(e.target.value);
+            }}
+          >
+            <option>--Select One--</option>
+            <option value="vegetables">Vegetables</option>
+            <option value="exotic">Exotic</option>
+            <option value="seasonal">Seasonal</option>
+            <option value="fruits">Fruits</option>
+            <option value="sprouts">Sprouts</option>
+          </Form.Control>
+        </Form.Group>
 
           <Form.Group controlId="description">
             <Form.Label>Description</Form.Label>
@@ -200,7 +210,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/ProductEditScreen.js b/frontend/src/screens/ProductEditScreen.js
index 0f2e70d..62965aa 100644
--- a/frontend/src/screens/ProductEditScreen.js
+++ b/frontend/src/screens/ProductEditScreen.js
@@ -196,15 +196,24 @@ const ProductEditScreen = ({ match, history }) => {
               ></Form.Control>
             </Form.Group>
 
-            <Form.Group className="my-3" controlId="category">
-              <Form.Label>Category</Form.Label>
-              <Form.Control
-                type="text"
-                placeholder="Enter Category"
-                value={category}
-                onChange={(e) => setCategory(e.target.value)}
-              ></Form.Control>
-            </Form.Group>
+          <Form.Group controlId="Category">
+            <Form.Label>Category</Form.Label>
+            <Form.Control 
+              className='form-select'
+              as="select"
+              value={category}
+              onChange={e => {
+                setCategory(e.target.value);
+              }}
+            >
+              <option>--Select One--</option>
+              <option value="vegetables">Vegetables</option>
+              <option value="exotic">Exotic</option>
+              <option value="seasonal">Seasonal</option>
+              <option value="fruits">Fruits</option>
+              <option value="sprouts">Sprouts</option>
+            </Form.Control>
+          </Form.Group>
 
             <Form.Group controlId="description">
               <Form.Label>Description</Form.Label>

From cf90141cd5fa7e8b70009c5bb7b9f877dc02cbe6 Mon Sep 17 00:00:00 2001
From: s vamshi <somsolevamshi@gmail.com>
Date: Sun, 16 Oct 2022 14:13:21 +0530
Subject: [PATCH 2/4] dynamic category field added

---
 frontend/src/screens/CreateProductScreen.js | 18 +++++++++++++-----
 frontend/src/screens/ProductEditScreen.js   | 19 ++++++++++++++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/screens/CreateProductScreen.js b/frontend/src/screens/CreateProductScreen.js
index b688613..d693ad2 100644
--- 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('')
@@ -24,7 +26,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) {
@@ -40,6 +44,10 @@ const CreateProductScreen = ({ history }) => {
   //   }
   // }, [dispatch, history])
 
+  useEffect(() => {
+    dispatch(listCategories())
+  }, [dispatch])
+
   useEffect(() => {
     if (success) {
       history.push('/admin/productlist')
@@ -189,11 +197,11 @@ const CreateProductScreen = ({ history }) => {
             }}
           >
             <option>--Select One--</option>
-            <option value="vegetables">Vegetables</option>
-            <option value="exotic">Exotic</option>
-            <option value="seasonal">Seasonal</option>
-            <option value="fruits">Fruits</option>
-            <option value="sprouts">Sprouts</option>
+            {
+              categories && categories.map((category)=>{
+                return <option key={category._id} value={category.name}>{Capitalizer(category.name)}</option>
+              })
+            }
           </Form.Control>
         </Form.Group>
 
diff --git a/frontend/src/screens/ProductEditScreen.js b/frontend/src/screens/ProductEditScreen.js
index 62965aa..453f1b3 100644
--- 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,6 +33,9 @@ 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,
@@ -38,6 +43,10 @@ const ProductEditScreen = ({ match, history }) => {
     success: successUpdate,
   } = productUpdate
 
+  useEffect(() => {
+    dispatch(listCategories())
+  }, [dispatch])
+
   useEffect(() => {
     if (successUpdate) {
       dispatch({ type: PRODUCT_UPDATE_RESET })
@@ -207,11 +216,11 @@ const ProductEditScreen = ({ match, history }) => {
               }}
             >
               <option>--Select One--</option>
-              <option value="vegetables">Vegetables</option>
-              <option value="exotic">Exotic</option>
-              <option value="seasonal">Seasonal</option>
-              <option value="fruits">Fruits</option>
-              <option value="sprouts">Sprouts</option>
+              {
+                categories && categories.map((category)=>{
+                  return <option key={category._id} value={category.name}>{Capitalizer(category.name)}</option>
+                })
+              }
             </Form.Control>
           </Form.Group>
 

From 0f78bcab5bda4a479363333cf77f2375ec2bd596 Mon Sep 17 00:00:00 2001
From: s vamshi <somsolevamshi@gmail.com>
Date: Sun, 16 Oct 2022 14:24:35 +0530
Subject: [PATCH 3/4] select one option updated

---
 frontend/src/screens/CreateProductScreen.js | 2 +-
 frontend/src/screens/ProductEditScreen.js   | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/screens/CreateProductScreen.js b/frontend/src/screens/CreateProductScreen.js
index d693ad2..04606c8 100644
--- a/frontend/src/screens/CreateProductScreen.js
+++ b/frontend/src/screens/CreateProductScreen.js
@@ -196,7 +196,7 @@ const CreateProductScreen = ({ history }) => {
               setCategory(e.target.value);
             }}
           >
-            <option>--Select One--</option>
+            <option value="">--Select One--</option>
             {
               categories && categories.map((category)=>{
                 return <option key={category._id} value={category.name}>{Capitalizer(category.name)}</option>
diff --git a/frontend/src/screens/ProductEditScreen.js b/frontend/src/screens/ProductEditScreen.js
index 453f1b3..bc31a97 100644
--- a/frontend/src/screens/ProductEditScreen.js
+++ b/frontend/src/screens/ProductEditScreen.js
@@ -215,7 +215,6 @@ const ProductEditScreen = ({ match, history }) => {
                 setCategory(e.target.value);
               }}
             >
-              <option>--Select One--</option>
               {
                 categories && categories.map((category)=>{
                   return <option key={category._id} value={category.name}>{Capitalizer(category.name)}</option>

From 609b5dd33c405740ac9ed5e2e7920e11d00d9739 Mon Sep 17 00:00:00 2001
From: s vamshi <somsolevamshi@gmail.com>
Date: Sun, 16 Oct 2022 14:29:37 +0530
Subject: [PATCH 4/4] code formatted

---
 frontend/src/App.js                         | 10 ++++--
 frontend/src/screens/CreateProductScreen.js | 40 +++++++++++----------
 frontend/src/screens/Error404Screen.js      | 20 +++++------
 frontend/src/screens/ProductEditScreen.js   | 37 ++++++++++---------
 4 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 18e974e..db2aacf 100644
--- 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
index 04606c8..4c578dd 100644
--- a/frontend/src/screens/CreateProductScreen.js
+++ b/frontend/src/screens/CreateProductScreen.js
@@ -22,7 +22,6 @@ const CreateProductScreen = ({ history }) => {
   const [description, setDescription] = useState('')
   const [uploading, setUploading] = useState(false)
 
-
   const dispatch = useDispatch()
 
   const productCreate = useSelector((state) => state.productCreate)
@@ -186,24 +185,27 @@ const CreateProductScreen = ({ history }) => {
             ></Form.Control>
           </Form.Group>
 
-        <Form.Group controlId="Category">
-          <Form.Label>Category</Form.Label>
-          <Form.Control 
-            className='form-select'
-            as="select"
-            value={category}
-            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="Category">
+            <Form.Label>Category</Form.Label>
+            <Form.Control
+              className="form-select"
+              as="select"
+              value={category}
+              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">
             <Form.Label>Description</Form.Label>
diff --git a/frontend/src/screens/Error404Screen.js b/frontend/src/screens/Error404Screen.js
index dfb15e5..036bc49 100644
--- 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
\ No newline at end of file
+export default Error404Screen
diff --git a/frontend/src/screens/ProductEditScreen.js b/frontend/src/screens/ProductEditScreen.js
index bc31a97..7b522f6 100644
--- a/frontend/src/screens/ProductEditScreen.js
+++ b/frontend/src/screens/ProductEditScreen.js
@@ -205,23 +205,26 @@ const ProductEditScreen = ({ match, history }) => {
               ></Form.Control>
             </Form.Group>
 
-          <Form.Group controlId="Category">
-            <Form.Label>Category</Form.Label>
-            <Form.Control 
-              className='form-select'
-              as="select"
-              value={category}
-              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="Category">
+              <Form.Label>Category</Form.Label>
+              <Form.Control
+                className="form-select"
+                as="select"
+                value={category}
+                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">
               <Form.Label>Description</Form.Label>