Product api integration complete

0f1ea43b · Muhammad Ameen · 861fcedb · 0f1ea43b · 0f1ea43b · 0f1ea43b
Commit 0f1ea43b authored Jun 29, 2022 by Muhammad Ameen 💻
12 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
        "@testing-library/react": "^13.2.0",
        "@testing-library/user-event": "^13.5.0",
        "antd": "^4.20.5",
+        "axios": "^0.27.2",
        "bootstrap": "^5.1.3",
        "react": "^18.1.0",
        "react-bootstrap": "^2.3.1",
@@ -21,6 +22,7 @@
        "react-redux": "^8.0.1",
        "react-router-dom": "^6.3.0",
        "react-scripts": "5.0.1",
+        "react-select": "^5.3.2",
        "react-toastify": "^8.1.0",
        "redux-thunk": "^2.4.1",
        "sass": "^1.51.0",
@@ -2066,6 +2068,152 @@
        "node": ">=10"
      }
    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz",
+      "integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.1",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.3.tgz",
+      "integrity": "sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.9.3",
+        "@emotion/serialize": "^1.0.4",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.4.tgz",
+      "integrity": "sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz",
+      "integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "node_modules/@eslint/eslintrc": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz",
@@ -4735,6 +4883,28 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -7768,6 +7938,11 @@
        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
      }
    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "node_modules/find-up": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -14598,6 +14773,29 @@
        }
      }
    },
+    "node_modules/react-select": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz",
+      "integrity": "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-select/node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
    "node_modules/react-toastify": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",
@@ -15780,6 +15978,11 @@
        "postcss": "^8.2.15"
      }
    },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -18802,6 +19005,127 @@
      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
      "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
    },
+    "@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "babel-plugin-macros": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "cosmiconfig": "^6.0.0",
+            "resolve": "^1.12.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz",
+      "integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.1",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.3.tgz",
+      "integrity": "sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.9.3",
+        "@emotion/serialize": "^1.0.4",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.4.tgz",
+      "integrity": "sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz",
+      "integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "@eslint/eslintrc": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz",
@@ -20772,6 +21096,27 @@
      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
      "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
    "axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -23013,6 +23358,11 @@
        "pkg-dir": "^4.1.0"
      }
    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "find-up": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -27774,6 +28124,27 @@
        "workbox-webpack-plugin": "^6.4.1"
      }
    },
+    "react-select": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz",
+      "integrity": "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "dependencies": {
+        "memoize-one": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+          "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+        }
+      }
+    },
    "react-toastify": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",
@@ -28652,6 +29023,11 @@
        "postcss-selector-parser": "^6.0.4"
      }
    },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^4.20.5",
+    "axios": "^0.27.2",
    "bootstrap": "^5.1.3",
    "react": "^18.1.0",
    "react-bootstrap": "^2.3.1",
@@ -16,6 +17,7 @@
    "react-redux": "^8.0.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
+    "react-select": "^5.3.2",
    "react-toastify": "^8.1.0",
    "redux-thunk": "^2.4.1",
    "sass": "^1.51.0",

--- a/src/Components/Card.js/Card.js
+++ b/src/Components/Card.js/Card.js
@@ -12,7 +12,7 @@ const MainCard = ({ data, openNotification }) => {
  return (
    <div>
      <Card
-        cover={<img alt="example" src={data?.image} style={{ height: 280 }} />}
+        cover={<img alt="example" src={data?.thumbnail} style={{ height: 280 }} />}
      >
        <Meta title={firstLatter + data?.title?.substring(1)} />
        <div className={style.priceAndButton}>

--- a/src/Components/Drawer/Drawer.js
+++ b/src/Components/Drawer/Drawer.js
@@ -8,7 +8,7 @@ import {
  removeItem,
  increaseQuantity,
  decreaseQuantity,
-  submitRequest
+  submitRequest,
 } from "../../store/Reducers/cartReducer";
 import { notification } from "antd";

@@ -31,7 +31,7 @@ const MainDrawer = ({ visible, setVisible }) => {
    setVisible(false);
  };

-  console.log(window.innerWidth);
+  // console.log(window.innerWidth);

  if (window.innerWidth < 600) {
    setSmallScreen(false);
@@ -77,7 +77,11 @@ const MainDrawer = ({ visible, setVisible }) => {
                    <MdCancel className={style.crossIcon} />
                  </div>
                  <div className={style.imageContainer}>
-                    <img src={item?.data?.image} alt="" />
+                    <img
+                      className={style.image}
+                      src={item?.data?.thumbnail}
+                      alt=""
+                    />
                  </div>
                  <div className={style.rightContainer}>
                    <p>{item?.data?.title}</p>
@@ -125,7 +129,7 @@ const MainDrawer = ({ visible, setVisible }) => {
              : style.submitBtn
          }
          disabled={Object.values(cart)?.length === 0}
-          onClick={()=> dispatch(submitRequest())}
+          onClick={() => dispatch(submitRequest())}
        >
          {loading ? "Submit..." : "Submit"}
        </button>

--- a/src/Components/Drawer/Drawer.module.scss
+++ b/src/Components/Drawer/Drawer.module.scss
@@ -50,8 +50,8 @@
    }
  }
  .imageContainer {
-    width: 30%;
-    height: 80%;
+    width: 120px;
+    height: 120px;
    object-fit: contain;
    margin-left: 20px;
    margin-right: 20px;

--- a/src/Components/Navbar/Navbar.js
+++ b/src/Components/Navbar/Navbar.js
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Container, Navbar, Nav } from "react-bootstrap";
 import style from "./Navbar.module.scss";
 import logo from "../../assets/images/logo.png";
 import { Input } from "antd";
 import { IoCartOutline } from "react-icons/io5";
 import { headerData } from "../../Helper/dummyData";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import AsyncSelect from "react-select/async";
+import {
+  resetProduct,
+  searchProduct,
+} from "../../store/Reducers/searchReducer";
+import Select from "react-select/";

 const { Search } = Input;

 const MainNavbar = ({ setVisible }) => {
+  const dispatch = useDispatch();
  const { cart } = useSelector((state) => state.cart);
+  const { searchResult } = useSelector((state) => state.search);
+  const [searchResultArr, setSearchResultArr] = useState([]);
+  // debugger;

+  const onSearch = (e) => {
+    console.log(e, "e");
+  };
+  const onInput = () => {
+    console.log("abc");
+  };
+
+  const customStyles = {
+    control: (styles, { isFocused, isDisabled }) => ({
+      ...styles,
+      height: "100%",
+      borderColor: "black",
+      borderRadius: 0,
+      boxShadow: "none",
+      width: "700px",
+    }),
+  };
+
+  const onSearchInput = (e) => {
+    console.log(e.target.value);
+    dispatch(searchProduct());
+  };
+  const input = (e) => {
+    console.log(e);
+  };
+  const options = [
+    { value: "OPPOF19", label: "OPPOF19" },
+    { value: "IPhone X", label: "IPhone X" },
+    { value: "Samsung Universe", label: "Samsung Universe" },
+  ];
  return (
    <>
      <div className={style.mainCOntainer}>
@@ -38,10 +78,27 @@ const MainNavbar = ({ setVisible }) => {
              <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="me-auto"></Nav>
                <Nav className={`me-auto ${style.searchContainer}`}>
-                  <Search
+                  {/* <Search
                    placeholder="Search Products"
                    enterButton="Search"
                    size="large"
+                    onSearch={onSearch}
+                    onInput={onInput}
+                    allowClear={true}
+                  /> */}
+                  {/* <AsyncSelect
+                    cacheOptions
+                    // defaultOptions={options}
+                    styles={customStyles}
+                    loadOptions={promiseOptions}
+                    placeholder="Search"
+                    // options={options}
+                  /> */}
+                  <Select
+                    options={options}
+                    styles={customStyles}
+                    onChange={onSearchInput}
+                    placeholder="Search"
                  />
                  {/* <Nav.Link href="#features">Features</Nav.Link>
                  <Nav.Link href="#pricing">Pricing</Nav.Link> */}
@@ -53,7 +110,9 @@ const MainNavbar = ({ setVisible }) => {
                      onClick={() => setVisible(true)}
                    >
                      <IoCartOutline className={style.cartIcon} />
-                      <p className={style.cartCount}>{Object.values(cart).length}</p>
+                      <p className={style.cartCount}>
+                        {Object.values(cart).length}
+                      </p>
                    </div>
                  </Nav.Link>
                </Nav>

--- a/src/Screens/Home/Home.js
+++ b/src/Screens/Home/Home.js
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import MainNavbar from "../../Components/Navbar/Navbar";
 import MainCarousel from "../../Components/Carousel/Carousel";
 import style from "./Home.module.scss";
@@ -14,10 +14,15 @@ import { useDispatch, useSelector } from "react-redux";

 import MainDrawer from "../../Components/Drawer/Drawer";
 import { notification } from "antd";
+import {
+  getAllProducts,
+  getProducts,
+} from "../../store/Reducers/productReducer";

 const Home = () => {
  const dispatch = useDispatch();
  const { cart } = useSelector((state) => state.cart);
+  const { products } = useSelector((state) => state.products);

  const [visible, setVisible] = useState(false);

@@ -52,6 +57,10 @@ const Home = () => {
    }
  };

+  useEffect(() => {
+    dispatch(getAllProducts());
+  }, []);
+
  // console.log(count);

  return (
@@ -89,7 +98,24 @@ const Home = () => {
                  <h3>Mobile Phone</h3>
                </div>
                <Row>
-                  {cardData?.map((item, index) => {
+                  {products &&
+                    products?.map((item, index) => {
+                      return (
+                        <Col
+                          key={index}
+                          xl={3}
+                          md={4}
+                          sm={12}
+                          className={style.cardCol}
+                        >
+                          <MainCard
+                            data={item}
+                            openNotification={openNotification}
+                          />
+                        </Col>
+                      );
+                    })}
+                  {/* {cardData?.map((item, index) => {
                    return (
                      <Col
                        key={index}
@@ -104,7 +130,7 @@ const Home = () => {
                        />
                      </Col>
                    );
-                  })}
+                  })} */}
                </Row>
              </Container>
            </div>

--- a/src/store/Constants/apiUrl.js
+++ b/src/store/Constants/apiUrl.js
+const api = "https://dummyjson.com/";
+
+export { api };
--- a/src/store/Reducers/cartReducer.js
+++ b/src/store/Reducers/cartReducer.js
@@ -86,11 +86,6 @@ export const cartSlice = createSlice({
    },
    submitRequest(state, action) {
      state.loading = true;
-      // setTimeout(() => {
-      //   state.cart = {};
-      //   state.total = 0;
-      //   state.loading = false;
-      // }, 1000);
    },
  },
 });

--- a/src/store/Reducers/productReducer.js
+++ b/src/store/Reducers/productReducer.js
+import { createSlice } from "@reduxjs/toolkit";
+import { api } from "../Constants/apiUrl";
+import axios from "axios";
+
+export const productSlice = createSlice({
+  name: "products",
+  initialState: {
+    loading: false,
+    products: [],
+  },
+  reducers: {
+    getProducts(state, action) {
+      state.loading = true;
+      state.products = action.payload.products;
+    },
+  },
+});
+
+const getAllProducts = () => {
+  return async (dispatch) => {
+    await axios
+      .get(`${api}products/category/smartphones`)
+      .then((response) => {
+        dispatch(getProducts(response.data));
+      })
+      .catch((error) => {
+        console.log(error, "error");
+      });
+  };
+};
+// each case under reducers becomes an action
+export const { getProducts } = productSlice.actions;
+export { getAllProducts };
+export default productSlice.reducer;
--- a/src/store/Reducers/searchReducer.js
+++ b/src/store/Reducers/searchReducer.js
+import { createSlice } from "@reduxjs/toolkit";
+import { api } from "../Constants/apiUrl";
+import axios from "axios";
+
+export const searchSlice = createSlice({
+  name: "search",
+  initialState: {
+    loading: false,
+    searchResult: [],
+  },
+  reducers: {
+    getProducts(state, action) {
+      state.loading = true;
+      // console.log("abcb", action.payload);
+      let testArr = [];
+      action.payload.products.map((item) => {
+        return testArr.push({
+          ...item,
+          value: item["title"],
+          label: item["title"],
+        });
+      });
+      state.searchResult = testArr;
+      console.log(testArr, "teeetetete");
+    },
+    resetProduct(state, action) {
+      // console.log("first");
+      state.searchResult = [];
+    },
+  },
+});
+
+const searchProduct = (val) => {
+  return async (dispatch) => {
+    await axios
+      .get(`${api}products/search?q=${val}`)
+      .then((response) => {
+        // console.log(response.data);
+        dispatch(getProducts(response.data));
+      })
+      .catch((error) => {
+        console.log(error, "error");
+      });
+  };
+};
+// each case under reducers becomes an action
+export const { getProducts, resetProduct } = searchSlice.actions;
+export { searchProduct };
+export default searchSlice.reducer;
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -2,11 +2,15 @@ import { configureStore, applyMiddleware } from "@reduxjs/toolkit";
 import thunk from "redux-thunk";
 import counterSlice from "./Reducers/counterReducer";
 import cartSlice from "./Reducers/cartReducer";
+import productSlice from "./Reducers/productReducer";
+import searchSlice from "./Reducers/searchReducer";

 const store = configureStore({
  reducer: {
    counter: counterSlice,
    cart: cartSlice,
+    products: productSlice,
+    search: searchSlice,
  }, //add reducers here
 });