@material-ui/icons#LocationOn JavaScript Examples

export default function MyActivityEvents(props) {
  let history = useHistory();
  const dispatch = useDispatch();
  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar variant="regular">
          <img src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <div className={`contentWrapper MyActivityEventsWrapper`}>
        <div
          className="myActivityRow healthInfo"
          onClick={() => {
            history.push('/my-health-event');
          }}
        >
          <Person color="primary" style={{ fontSize: 50 }} />
          <div className="content">
            <h3>{PersianLan.myActivitiesTab.interHealthInfo}</h3>
            <p>{PersianLan.myActivitiesTab.interHealthInfoContent}</p>
          </div>
        </div>
        <div className="myActivityRow locationInfo disabled">
          <LocationOn color="primary" style={{ fontSize: 50 }} />
          <div className="content">
            <h3>{PersianLan.myActivitiesTab.interLocation}</h3>
            <p>{PersianLan.myActivitiesTab.interLocationContent}</p>
          </div>
        </div>
        <div className="myActivityRow meetings disabled">
          <People color="primary" style={{ fontSize: 50 }} />
          <div className="content">
            <h3>{PersianLan.myActivitiesTab.interMeetings}</h3>
            <p>{PersianLan.myActivitiesTab.interMeetingsContent}</p>
          </div>
        </div>
      </div>
    </>
  );
}

Verify = (props) => {
  const verifyContext = useContext(VerifyContext);
  const speciesContext = useContext(SpeciesContext);
  const tagsContext = useContext(TagsContext);
  const classes = useStyles(props);
  const [complete, setComplete] = useState(0);
  const [isFilterShown, setFilterShown] = useState(false);
  const [disableHoverListener, setDisableHoverListener] = useState(false);
  const [isImagesLarge, setImagesLarge] = useState(true);
  const [captureDetail, setCaptureDetail] = useState({
    isOpen: false,
    capture: {},
  });
  const [growerDetail, setGrowerDetail] = useState({
    isOpen: false,
    grower: {},
  });
  const refContainer = useRef();
  const captureSelected = verifyContext.getCaptureSelectedArr();
  const numFilters = verifyContext.filter.countAppliedFilters();

  /*
   * effect to load page when mounted
   */

  useEffect(() => {
    log.debug('verify mounted:');
    // update filter right away to prevent non-Filter type objects loading
    document.title = `Verify - ${documentTitle}`;
  }, []);

  /* to display progress */
  useEffect(() => {
    setComplete(verifyContext.approveAllComplete);
  }, [verifyContext.approveAllComplete]);

  function handleCaptureClick(e, captureId) {
    e.stopPropagation();
    e.preventDefault();
    log.debug('click on capture:%d', captureId);
    verifyContext.clickCapture({
      captureId,
      isShift: e.shiftKey,
    });
  }

  function handleCapturePinClick(e, captureId) {
    e.stopPropagation();
    e.preventDefault();
    log.debug('click on capture pin:%d', captureId);
    const url = `${process.env.REACT_APP_WEBMAP_DOMAIN}/?treeid=${captureId}`;
    window.open(url, '_blank').opener = null;
  }

  function handleGrowerMapClick(e, growerId) {
    e.stopPropagation();
    e.preventDefault();
    log.debug('click on grower:%d', growerId);
    const url = `${process.env.REACT_APP_WEBMAP_DOMAIN}/?userid=${growerId}`;
    window.open(url, '_blank').opener = null;
  }

  function resetApprovalFields() {
    tagsContext.setTagInput([]);
    speciesContext.setSpeciesInput('');
  }

  async function handleSubmit(approveAction) {
    // log.debug('approveAction:', approveAction);
    //check selection
    if (captureSelected.length === 0) {
      window.alert('Please select one or more captures');
      return;
    }
    const speciesId = await speciesContext.getSpeciesId();
    if (speciesId) {
      approveAction.speciesId = speciesId;
    }

    /*
     * create/retrieve tags
     */
    approveAction.tags = await tagsContext.createTags();
    const result = await verifyContext.approveAll(approveAction);
    if (!result) {
      window.alert('Failed to approve a capture');
    } else if (!approveAction.rememberSelection) {
      resetApprovalFields();
    }
  }

  async function handleShowGrowerDetail(e, capture) {
    e.preventDefault();
    e.stopPropagation();
    setGrowerDetail({
      isOpen: true,
      growerId: capture.planterId,
    });
  }

  function handleCloseGrowerDetail() {
    setGrowerDetail({
      isOpen: false,
      growerId: null,
    });
  }

  function handleShowCaptureDetail(e, capture) {
    e.preventDefault();
    e.stopPropagation();
    setDisableHoverListener(true);
    setCaptureDetail({
      isOpen: true,
      capture,
    });
  }

  function handleCloseCaptureDetail() {
    setDisableHoverListener(false);
    setCaptureDetail({
      isOpen: false,
      capture: {},
    });
  }

  function handleChangePageSize(event) {
    verifyContext.setCurrentPage(0);
    verifyContext.setPageSize(event.target.value);
  }

  function handleChangePage(event, page) {
    verifyContext.setCurrentPage(page);
  }

  const captureImages = verifyContext.captureImages;

  const tooltipStyles = makeStyles(() => ({
    tooltipTop: {
      top: '12px',
    },
    tooltipBottom: {
      top: '-16px',
    },
  }));

  const tooltipPositionStyles = tooltipStyles();

  const placeholderImages = verifyContext.isLoading
    ? Array(Math.max(verifyContext.pageSize - captureImages.length, 0))
        .fill()
        .map((_, index) => {
          return {
            id: index,
            placeholder: true,
          };
        })
    : [];

  /*=============================================================*/

  const [captureImageContainerWidth, setCaptureImageContainerWidth] = useState(
    0
  );
  const refCaptureImageContainer = useRef(0);

  const handleResize = () => {
    setCaptureImageContainerWidth(refCaptureImageContainer.current.clientWidth);
  };

  useEffect(() => {
    handleResize();
  }, [refCaptureImageContainer?.current?.clientWidth]);

  useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [window]);

  // Calculate the number of captures per row based on the container width
  // and whether large or small images are toggled

  const containerWidth = captureImageContainerWidth || 100;
  const minCaptureSize = isImagesLarge ? 350 : 250; // Shouldn't this be reversed?

  const breakpoints = Array.from({ length: 16 }, (_, idx) => {
    return minCaptureSize * (idx + 1);
  });

  // The index of the next breakpoint up from the container width
  // gives the number of captures per row
  const capturesPerRow = breakpoints.findIndex((val, idx) => {
    if (idx === 0) {
      return false;
    }
    if (
      (idx === 1 && containerWidth <= val) ||
      (containerWidth > breakpoints[idx - 1] && containerWidth <= val) ||
      (containerWidth > val && idx === breakpoints.length - 1)
    ) {
      return true;
    }
    return false;
  });

  const captureImageItems = captureImages
    .concat(placeholderImages)
    .map((capture) => {
      return (
        <Grid
          item
          key={capture.id}
          style={{
            width: `calc(100% / ${capturesPerRow})`,
          }}
        >
          <div
            className={clsx(
              classes.cardWrapper,
              verifyContext.captureImagesSelected[capture.id]
                ? classes.cardSelected
                : undefined,
              capture.placeholder && classes.placeholderCard
            )}
          >
            <Tooltip
              key={capture.id}
              placement="top"
              arrow={true}
              interactive
              enterDelay={500}
              enterNextDelay={500}
              onMouseEnter={() => setDisableHoverListener(false)}
              disableHoverListener={disableHoverListener}
              classes={{
                tooltipPlacementTop: tooltipPositionStyles.tooltipTop,
              }}
              title={
                <CaptureDetailTooltip
                  capture={capture}
                  showCaptureClick={handleShowCaptureDetail}
                />
              }
            >
              <Card
                onClick={(e) => handleCaptureClick(e, capture.id)}
                id={`card_${capture.id}`}
                className={classes.card}
                elevation={capture.placeholder ? 0 : 3}
              >
                <CardContent className={classes.cardContent}>
                  <Paper className={classes.cardCheckbox} elevation={4}>
                    {verifyContext.captureImagesSelected[capture.id] && (
                      <CheckIcon />
                    )}
                  </Paper>
                  <OptimizedImage
                    src={capture.imageUrl}
                    width={isImagesLarge ? 400 : 250}
                    className={classes.cardMedia}
                    alertWidth="100%"
                    alertHeight="200%"
                    alertPosition="absolute"
                    alertPadding="5rem 0 0 1rem"
                    alertTitleSize="1.6rem"
                    alertTextSize="1rem"
                  />
                </CardContent>

                <Grid
                  justify="center"
                  container
                  className={classes.cardActions}
                >
                  <Grid item>
                    <IconButton
                      onClick={(e) => handleShowGrowerDetail(e, capture)}
                      aria-label={`Grower details`}
                      title={`Grower details`}
                    >
                      <Person color="primary" />
                    </IconButton>
                    <IconButton
                      onClick={(e) => handleShowCaptureDetail(e, capture)}
                      aria-label={`Capture details`}
                      title={`Capture details`}
                    >
                      <Nature color="primary" />
                    </IconButton>
                    <IconButton
                      variant="link"
                      href={`${process.env.REACT_APP_WEBMAP_DOMAIN}/?treeid=${capture.id}`}
                      target="_blank"
                      onClick={(e) => handleCapturePinClick(e, capture.id)}
                      aria-label={`Capture location`}
                      title={`Capture location`}
                    >
                      <LocationOn color="primary" />
                    </IconButton>
                    <IconButton
                      variant="link"
                      href={`${process.env.REACT_APP_WEBMAP_DOMAIN}/?userid=${capture.planterId}`}
                      target="_blank"
                      onClick={(e) =>
                        handleGrowerMapClick(e, capture.planterId)
                      }
                      aria-label={`Grower map`}
                      title={`Grower map`}
                    >
                      <Map color="primary" />
                    </IconButton>
                  </Grid>
                </Grid>
              </Card>
            </Tooltip>
          </div>
        </Grid>
      );
    });

  /*=============================================================*/

  function handleFilterClick() {
    if (isFilterShown) {
      setFilterShown(false);
    } else {
      setFilterShown(true);
    }
  }

  let imagePagination = (
    <TablePagination
      rowsPerPageOptions={[24, 96, 192, 384]}
      component="div"
      count={verifyContext.captureCount || 0}
      rowsPerPage={verifyContext.pageSize}
      page={verifyContext.currentPage}
      onChangePage={handleChangePage}
      onChangeRowsPerPage={handleChangePageSize}
      labelRowsPerPage="Captures per page:"
      className={classes.pagination}
    />
  );

  let imageSizeControl = (
    <>
      <Typography className={classes.imageSizeLabel}>Images:</Typography>

      <ToggleButtonGroup
        value={isImagesLarge === true ? 'large' : 'small'}
        exclusive
        aria-label="image size"
      >
        <ToggleButton
          value="small"
          aria-label="small"
          onClick={() => setImagesLarge(false)}
          className={classes.imageSizeToggle}
        >
          Small
        </ToggleButton>

        <ToggleButton
          value="large"
          aria-label="large"
          onClick={() => setImagesLarge(true)}
          className={classes.imageSizeToggle}
        >
          Large
        </ToggleButton>
      </ToggleButtonGroup>
    </>
  );

  return (
    <>
      <Grid item className={classes.body}>
        <Grid item className={classes.bodyInner}>
          <Grid item>
            <Navbar
              buttons={[
                <Button
                  variant="outlined"
                  color="primary"
                  onClick={handleFilterClick}
                  startIcon={<IconFilter />}
                  key={1}
                >
                  Filter
                  {numFilters > 0 && (
                    <Avatar className={classes.activeFilters}>
                      {numFilters}
                    </Avatar>
                  )}
                </Button>,
              ]}
            >
              {isFilterShown && (
                <FilterTop
                  isOpen={isFilterShown}
                  onSubmit={(filter) => {
                    verifyContext.updateFilter(filter);
                  }}
                  filter={verifyContext.filter}
                  onClose={handleFilterClick}
                />
              )}
            </Navbar>
          </Grid>
          <Grid
            item
            ref={refContainer}
            style={{
              overflow: 'hidden auto',
            }}
          >
            <Grid container>
              <Grid
                item
                style={{
                  width: '100%',
                }}
              >
                <Grid
                  container
                  justify="space-between"
                  alignItems="center"
                  className={classes.title}
                >
                  <Grid
                    style={{
                      display: 'flex',
                      flexGrow: 1,
                      alignItems: 'center',
                      justifyContent: 'space-between',
                    }}
                    item
                  >
                    <Typography variant="h5">
                      {verifyContext.captureCount !== null &&
                        `${countToLocaleString(
                          verifyContext.captureCount
                        )} capture${
                          verifyContext.captureCount === 1 ? '' : 's'
                        }`}
                    </Typography>

                    <div style={{ display: 'flex' }}>{imageSizeControl}</div>
                  </Grid>

                  <Grid item className={classes.paginationContainer}>
                    {imagePagination}
                  </Grid>
                </Grid>
              </Grid>
              <Grid
                item
                style={{
                  width: '100%',
                }}
              >
                <Grid
                  container
                  className={classes.wrapper}
                  spacing={2}
                  ref={refCaptureImageContainer}
                >
                  {captureImageItems}
                </Grid>
              </Grid>
              <Grid item container justify="flex-end" className={classes.title}>
                {imagePagination}
              </Grid>
            </Grid>
          </Grid>
        </Grid>
        <SidePanel
          onSubmit={handleSubmit}
          submitEnabled={captureSelected && captureSelected.length > 0}
        />
      </Grid>
      {verifyContext.isApproveAllProcessing && (
        <AppBar
          position="fixed"
          style={{
            zIndex: 10000,
          }}
        >
          <LinearProgress
            color="primary"
            variant="determinate"
            value={complete}
          />
        </AppBar>
      )}
      {verifyContext.isApproveAllProcessing && (
        <Modal open={true}>
          <div></div>
        </Modal>
      )}
      {false /* close undo */ &&
        !verifyContext.isApproveAllProcessing &&
        // !context.isRejectAllProcessing &&
        verifyContext.captureImagesUndo.length > 0 && (
          <Snackbar
            open
            autoHideDuration={15000}
            ContentProps={{
              className: classes.snackbarContent,
              'aria-describedby': 'snackbar-fab-message-id',
            }}
            message={
              <span id="snackbar-fab-message-id">
                You have{' '}
                {verifyContext.isBulkApproving ? ' approved ' : ' rejected '}
                {verifyContext.captureImagesUndo.length} captures
              </span>
            }
            color="primary"
            action={
              <Button
                color="inherit"
                size="small"
                onClick={async () => {
                  await verifyContext.undoAll();
                  log.log('finished');
                }}
              >
                Undo
              </Button>
            }
            className={classes.snackbar}
          />
        )}
      <GrowerDetail
        open={growerDetail.isOpen}
        growerId={growerDetail.growerId}
        onClose={() => handleCloseGrowerDetail()}
      />
      <CaptureDetailProvider>
        <CaptureDetailDialog
          open={captureDetail.isOpen}
          onClose={() => handleCloseCaptureDetail()}
          capture={captureDetail.capture}
        />
      </CaptureDetailProvider>
    </>
  );
}

export default function RideShareSteps(props) {
  const classes = useStyles();
  const [rideManager, setRideManager] = React.useState(props.rideManager);
  const [account, setAccount] = React.useState(props.account);
  const [web3, setWeb3] = React.useState(props.web3);
  const [activeStep, setActiveStep] = React.useState(0);
  const [loading, isLoading] = React.useState(true);
  const [seats, updateSeats] = React.useState(1);
  const [selectedDrivers, setSelectedDrivers] = React.useState([]);
  const [userSelectedDriver, setUserSelectedDriver] = React.useState('');
  const [rideRequests, setRideRequests] = React.useState([]);
  const [rideContractAddress, setRideContractAddress] = React.useState('');
  const [confirmed, setConfirmed] = React.useState(false);
  const [previewStyle, setPreviewStyle] = React.useState({
    height: 300,
    width: 300,
  });
  const [qrcodeResult, setqrcodeResult] = React.useState('');

  
  function handleScan(data) {
    setqrcodeResult(data);
    if (data === rideContractAddress) {
      alert('QR code verified successfully! Enjoy your ride!');
      setActiveStep(4);
    }
  }

  function handleError(err) {
    console.error(err)
  }

  const steps = getSteps();

  function getStepContent(step) {
    if (localStorage.getItem('type') !== null && localStorage.getItem('type') === "0") {
      switch (step) {
        case 0:
          return (
            <div>
              <Card>
                <CardActionArea>
                  <CardMedia
                    image=""
                    title="Google Maps"
                    className={classes.media}
                    image={image}
                  />
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                      Ride-Share Location
                  </Typography>
                    {
                      localStorage.getItem("destinationLng") === null ?
                        <Typography variant="body2" color="textSecondary" component="p">
                          To book a Ride-Share all you would need to do is login to your Ride-Share account and choose a location. Enter your pickup and drop locations and click on ‘Ride Now’.
                </Typography>
                        :

                        <Typography variant="body2" color="textSecondary" component="p">
                          Time: {localStorage.getItem('time')}<br />
                          Distance: {localStorage.getItem('distance')}<br />
                        </Typography>

                    }
                  </CardContent>
                </CardActionArea>
                <CardActions>
                  <Button
                    variant="outlined"
                    color="secondary"
                    href="/admin/maps"
                    className={classes.button}
                    startIcon={<LocationOn />}
                  >
                    Go To Maps
                  </Button>
                </CardActions>
              </Card>

            </div>);
        case 1:
          return (
            <div>
              <TextField
                type='number'
                label="No. of Seats"
                id="filled-margin-none"
                defaultValue="Default Value"
                onKeyDown={handleNext}
                className={classes.textField}
                onChange={handleNext}
                value={seats}
                helperText="Before confirming the booking you would need to choose the number of seats that you would wish to book. You can book up to 2 seats on your Ola Share ride. If you choose to book 2 seats, the pickup and drop location of the co-passenger traveling should be same."
                variant="outlined"
              />
            </div>);
        case 2:
          return loading ? `` : <div>
            <CardBody>
              <Table
                tableHeaderColor="primary"
                tableHead={["Name", "Contact", "Car No.", "Rating", "Amount", "Accept/Decline"]}
                tableData={selectedDrivers}
              />
            </CardBody>
          </div>;
        case 3:
          return !confirmed ? `` : <QrReader
            delay={100}
            style={previewStyle}
            onError={handleError}
            onScan={handleScan}
          />;
        case 4:
          return 'Ready to begin your Ride-Share journey for eco-friendly rides at pocket - friendly rates';
        case 5:
          return `Ride Completed!`;
        default:
          return 'Unknown step';
      }
    } else {
      switch (step) {
        case 0:
          return loading ? `` :  <div>
            <CardBody>
              <Table
                tableHeaderColor="primary"
                tableHead={["Ride Address", "Rider Address", "From", "To", "Accept/Decline"]}
                tableData={rideRequests}
              />
            </CardBody>
          </div>;
        case 1:
          return !confirmed ? `` : <QRCode value={rideContractAddress} />;
        case 2:
          return ``;
        default:
          return 'Unknown step';
      }
    }

  }
  const handleNext = async (e) => {
    const { value, id } = e.target;
    if (localStorage.getItem('type') !== null && localStorage.getItem('type') === "0") {

      if (activeStep === 0) {
        console.log(account);
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
      }
      else if (activeStep === 1) {
        updateSeats(value)
        if (e.key == 'Enter') {
          rideManager.methods.requestRide(
            account,
            [String(localStorage.getItem('sourceLat')), String(localStorage.getItem('sourceLng'))],
            [String(localStorage.getItem('destinationLat')), String(localStorage.getItem('destinationLng'))],
            web3.utils.padRight(web3.utils.fromAscii(20 + 0.5 * Number(localStorage.getItem('distance').split(" ")[0])), 64)).send({ from: account })
            .once('receipt', async (receipt) => {
              let data = await rideManager.methods.getRiderInfo(account).call({ 'from': account });
              console.log(data);
              setRideContractAddress(data[5][data[5].length - 1]);
              // isLoading(false);
              // let a = '';
              // while (a === '') {
              //   a = qrcodeResult;
              // }
              setActiveStep((prevActiveStep) => prevActiveStep + 1);
            });
          // setActiveStep((prevActiveStep) => prevActiveStep + 1);

        }
      } else if (activeStep === 2) {
        isLoading(true);
        axios.post('http://localhost:8000/api/rider/request-ride', {
          user: {
            "account": account,
            "latitude": 25,
            "longitude": 25
          }
        }).then((response) => {
          console.log(response.data.selectedDrivers);
          let temp = response.data.selectedDrivers;
          const tempList = temp.map(data => {
            return (
              [
                web3.utils.hexToUtf8(data.name).trim(),
                web3.utils.hexToUtf8(data.contact).trim(),
                web3.utils.hexToUtf8(data.carNo).trim(),
                data.rating.toString(),
                "2 ETH", 
                <Button
                  variant="contained"
                  color="primary"
                  className={classes.button}
                  onClick={() => {
                    setUserSelectedDriver(data.ethAddress);
                    rideManager.methods.requestDriver(account, data.ethAddress, rideContractAddress).send({ from: account })
                      .once('receipt', async (receipt) => {
                        console.log(receipt);
                        setActiveStep((prevActiveStep) => prevActiveStep + 1);
                      });
                  }}
                >
                  Accept
              </Button>
              ]
            );
          });
          console.log(tempList);
          setSelectedDrivers(tempList);
          isLoading(false);
        }).catch((err) => {
          console.log(err);
        })
        props.notifyNotificationListener("Sample")
        // setActiveStep((prevActiveStep) => prevActiveStep + 1);

      } else if (activeStep === 3) {
        const ride = new web3.eth.Contract(Ride.abi, rideContractAddress);
        let events = await ride.getPastEvents('UpdateConfirmationEvent', { filter: { _riderAddr: account }, fromBlock: 0, toBlock: 'latest' });
        events = events.filter((event) => {
          return event.returnValues._riderAddr === account && event.returnValues._driverAddr === userSelectedDriver;
        });
        console.log(events);
        if (events.length > 0) { 
          alert('Driver has accepted request');
          ride.methods.updateRiderConfirmation(true).send({ from: account })
            .once('receipt', async (receipt) => {
              console.log(receipt);
            });
          setConfirmed(true);

        }

      } else if (activeStep === 4) {
        const ride = new web3.eth.Contract(Ride.abi, rideContractAddress);
        ride.methods.updateRideComplete(true).send({ from: account })
          .once('receipt', async (receipt) => {
            console.log(receipt);
            let info = await ride.methods.getRideInfo().call({ from: account });
            console.log(info);
            alert('Ride Completed!');
          });
      }
    } else {
      //For Driver
      if (activeStep === 0) {
        console.log('heere');
        let events = await rideManager.getPastEvents('requestDriverEvent', { filter: { _driverAddr: account }, fromBlock: 0, toBlock: 'latest' });
        events = events.filter((event) => {
          return event.returnValues._driverAddr === account;
        });
        console.log(events);
        setRideContractAddress(events[events.length - 1].returnValues.rideAddr);

        const ride = new web3.eth.Contract(Ride.abi, events[events.length - 1].returnValues.rideAddr);
        let info = await ride.methods.getRideInfo().call({ from: account });
        var sourceDisplayName = '';
        var destDisplayName = '';


        axios.get('https://us1.locationiq.com/v1/reverse.php?key=pk.7440d726e8b0dde92f02c33d4b74dcfd&lat=' + info[2][0] + '&lon=' + info[2][1] + '&format=json')
          .then((response) => {
            sourceDisplayName = response.data.display_name;
            axios.get('https://us1.locationiq.com/v1/reverse.php?key=pk.7440d726e8b0dde92f02c33d4b74dcfd&lat=' + info[3][0] + '&lon=' + info[3][1] + '&format=json')
              .then((response) => {
                destDisplayName = response.data.display_name;
                setRideRequests([[events[events.length - 1].returnValues.rideAddr, info[0], sourceDisplayName, destDisplayName,
                <Button
                  variant="contained"
                  color="primary"
                  className={classes.button}
                  onClick={() => {
                    ride.methods.updateDriverAddress(account).send({ from: account })
                      .once('receipt', async (receipt) => {
                        console.log(receipt);
                        ride.methods.updateDriverConfirmation(true).send({ from: account })
                          .once('receipt', async (receipt) => {
                            console.log(receipt);
                            setConfirmed(true);
                            setActiveStep((prevActiveStep) => prevActiveStep + 1);
                          });
                      });
                  }}
                >
                  Accept
          </Button>
                ]]);
                isLoading(false);
                console.log(rideRequests);
              })
              .catch((e) => {
                console.log(e);
              })
          })
          .catch((e) => {
            console.log(e);
          })

      } else if (activeStep == 1) {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);

      } else if (activeStep == 2) {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);

      }
    }
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <div>
      <GridContainer>
        <GridItem xs={12} sm={12} md={10}>
          <Card>
            <CardHeader color="warning">
              <h4 className={classes.cardTitleWhite}>Enjoy Ride Share</h4>
              <p className={classes.cardCategoryWhite}>
                Travel management made secure &amp; easy
              </p>
            </CardHeader>
            <CardBody>
              <Stepper activeStep={activeStep} orientation="vertical">
                {steps.map((label, index) => (
                  <Step key={label}>
                    <StepLabel>{label}</StepLabel>
                    <StepContent>
                      <Typography>{getStepContent(index)}</Typography>
                      <div className={classes.actionsContainer}>
                        <div>
                          <Button
                            disabled={activeStep === 0}
                            onClick={handleBack}
                            className={classes.button}
                          >
                            Back
                  </Button>
                          <Button
                            variant="contained"
                            color="primary"
                            onClick={handleNext}
                            className={classes.button}
                          >
                            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                          </Button>
                        </div>
                      </div>
                    </StepContent>
                  </Step>
                ))}
              </Stepper>
              {activeStep === steps.length && (
                <Paper square elevation={0} className={classes.resetContainer}>
                  <Typography>All steps completed - you&apos;re finished</Typography>
                  <Button onClick={handleReset} className={classes.button}>
                    Reset
          </Button>
                </Paper>
              )}
            </CardBody>
          </Card>
        </GridItem>
      </GridContainer>
    </div>
  );
}