Fixed: location labelling

src/pages/labeling/index.js

@@ -42,51 +42,54 @@ const useStyles = makeStyles({
   }
 });
 
+const headCells = [
+  {
+    id: 'warehouse',
+    label: 'Warehouse'
+  },
+  {
+    id: 'zone',
+    label: 'Zone'
+  },
+  {
+    id: 'area',
+    label: 'Area'
+  },
+  {
+    id: 'row',
+    label: 'Row'
+  },
+  {
+    id: 'bay',
+    label: 'Bay'
+  }
+];
+
 function LabelingScreen() {
   const classes = useStyles();
   const dispatch = useDispatch();
+
+  const [warehouseId, setWarehouseId] = useState('');
   const [zoneId, setZoneId] = useState('');
   const [areaId, setAreaId] = useState('');
   const [rowId, setRowId] = useState('');
-  const [bayId, setBayId] = useState('');
+
+  const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
+  const zonedata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(warehouseId));
+  const areadata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(zoneId));
+  const rowdata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(areaId));
+
   const [allLabelData, setAllLabelData] = useState([]);
   const [totemLabelData, setTotemLabelData] = useState([]);
   const [locationLabelData, setLocationLabelData] = useState([]);
 
-  const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
-  const zonedata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(zoneId));
-  const areadata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(areaId));
-  const rowdata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(rowId));
   const labelData = useSelector(LabellingSelectors.getLabelDetail);
 
   React.useEffect(() => {
-    if (labelData && zoneId && areaId && rowId && bayId) {
+    if (labelData && warehouseId && zoneId && areaId && rowId) {
       setAllLabelData(labelData);
     }
-  }, [labelData, zoneId, areaId, rowId]);
-
-  const headCells = [
-    {
-      id: 'warehouse',
-      label: 'Warehouse'
-    },
-    {
-      id: 'zone',
-      label: 'Zone'
-    },
-    {
-      id: 'area',
-      label: 'Area'
-    },
-    {
-      id: 'row',
-      label: 'Row'
-    },
-    {
-      id: 'bay',
-      label: 'Bay'
-    }
-  ];
+  }, [labelData, warehouseId, zoneId, areaId]);
 
   useEffect(() => {
     dispatch(
@@ -99,10 +102,12 @@ function LabelingScreen() {
   }, []);
 
   const warehouseChange = (event) => {
-    const filterData = warehouseData.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
+    const id = event.target.value;
     const type = 'warehouse';
-    setZoneId(id);
+    setWarehouseId(id);
+    setZoneId('');
+    setAreaId('');
+    setRowId('');
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -114,10 +119,11 @@ function LabelingScreen() {
   };
 
   const zoneChange = (event) => {
-    const filterData = zonedata.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    const type = filterData[0].location;
-    setAreaId(id);
+    const id = event.target.value;
+    const type = 'zone';
+    setZoneId(id);
+    setAreaId('');
+    setRowId('');
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -129,10 +135,10 @@ function LabelingScreen() {
   };
 
   const areaChange = (event) => {
-    const filterData = areadata.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    const type = filterData[0].location;
-    setRowId(id);
+    const id = event.target.value;
+    const type = 'area';
+    setAreaId(id);
+    setRowId('');
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -144,10 +150,9 @@ function LabelingScreen() {
   };
 
   const rowChange = (event) => {
-    const filterData = rowdata.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    const type = filterData[0].location;
-    setBayId(id);
+    const id = event.target.value;
+    const type = 'row';
+    setRowId(id);
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -162,10 +167,10 @@ function LabelingScreen() {
         slug: API.GET_LABEL,
         method: 'post',
         data: {
-          warehouse: zoneId,
-          zone: areaId,
-          area: rowId,
-          row: bayId
+          warehouse: warehouseId,
+          zone: zoneId,
+          area: areaId,
+          row: rowId
         }
       })
     );
@@ -199,18 +204,19 @@ function LabelingScreen() {
           <Grid item xs={12} sm={6} md={3}>
             <Dropdown
               dropdownData={warehouseData}
-              dropdownChange={warehouseChange}
+              value={warehouseId}
               label="Select warehouse"
+              onChange={warehouseChange}
             />
           </Grid>
           <Grid item xs={12} sm={6} md={3}>
-            <Dropdown dropdownData={zonedata} dropdownChange={zoneChange} label="Select Zone" />
+            <Dropdown dropdownData={zonedata} label="Select Zone" onChange={zoneChange} />
           </Grid>
           <Grid item xs={12} sm={6} md={3}>
-            <Dropdown dropdownData={areadata} dropdownChange={areaChange} label="Select Area" />
+            <Dropdown dropdownData={areadata} label="Select Area" onChange={areaChange} />
           </Grid>
           <Grid item xs={12} sm={6} md={3}>
-            <Dropdown dropdownData={rowdata} dropdownChange={rowChange} label="Select Row" />
+            <Dropdown dropdownData={rowdata} label="Select Row" onChange={rowChange} />
           </Grid>
         </Grid>
         <br />
@@ -221,7 +227,7 @@ function LabelingScreen() {
           color="#8D8D8D"
         >
           <TableBody>
-            {bayId ? (
+            {rowId ? (
               allLabelData &&
               allLabelData.map((item) => (
                 <TableRow key={item._id}>