@material-ui/icons#Notifications JavaScript Examples

The following examples show how to use @material-ui/icons#Notifications. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.js    From covid-vaccine-notification-system with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up
/*
  *	Author:- Rahul Malhotra
  *	Description:- This method is used to render the UI
  */
  render() {
    const { classes } = this.props;
    const {
      states,
      districts,
      vaccines,
      prices,
      ages,
      centreIdsToSkip,
      searchOptions,
      hasSearched,
      vaccinesData,
      notify,
      selectedSearchBy,
      pincode,
      hasError,
      selectedState,
      selectedDistrict,
      selectedAge,
      selectedVaccine,
      selectedVaccinePrice,
      minDose1,
      minDose2,
      showBookVaccineConfirmationModal
    } = this.state;
    let showHiddenVaccineCentersButton, notifyButton, clearNotifyButton;

    // * Setting up show hidden vaccination centres button
    if (centreIdsToSkip.length) {
      showHiddenVaccineCentersButton = (
        <FormControl className={classes.formControl}>
          <Button
            variant="contained"
            color="secondary"
            onClick={this.clearCentreIdsToSkip.bind(this)}
            startIcon={<Visibility />}
          >
            Show Hidden Vaccination Centres
          </Button>
        </FormControl>
      );
    }

    // * Setting up notifications button
    if (
      hasSearched &&
      vaccinesData.length === 0 &&
      !notify &&
      (
        (
          selectedSearchBy === 'district' &&
          this.stateSelected() &&
          this.districtSelected()
        ) ||
        (
          selectedSearchBy === 'pincode' &&
          this.pincodeEntered()
        )
      )
    ) {
      notifyButton = (
        <FormControl className={classes.formControl}>
          <Button
            variant="contained"
            color="primary"
            onClick={this.notifyVaccineAvailability.bind(this)}
            endIcon={<Notifications />}
          >
            Notify me when vaccines are available
          </Button>
        </FormControl>
      );
    }

    // * Setting up stop notifications button
    if (notify) {
      clearNotifyButton = (
        <FormControl className={classes.formControl}>
          <Button
            variant="contained"
            color="secondary"
            onClick={this.clearNotificationSearch.bind(this)}
            endIcon={<Close />}
          >
            Stop Notifications
          </Button>
        </FormControl>
      )
    }

    // * Setting up the UI
  return (
      <div>
        <Card style={{ margin: '1rem' }}>
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              COVID-19 Vaccine Notification System
            </Typography>
            {/* Form Inputs */}
            <FormControl variant="outlined" className={classes.formControl}>
              <InputLabel id="searchBy-label">Search by</InputLabel>
              <Select
                labelId="searchBy-label"
                id="searchBy-input"
                value={selectedSearchBy}
                onChange={this.selectSearchBy}
                label="Search by"
                autoFocus
                >
                {searchOptions.map((searchOption) => (
                  <MenuItem key={searchOption.id} value={searchOption.value}>
                    {searchOption.name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
            {
              (selectedSearchBy === 'pincode') && (
                <FormControl required variant="outlined" className={classes.formControl} error={pincode && !this.pincodeEntered()}>
                  <TextField
                    required
                    id="outlined-pincode"
                    label="Enter pincode"
                    variant="outlined"
                    value={pincode}
                    type="number"
                    onChange={this.setPincode}
                    error={hasError && !this.pincodeEntered()}
                    helperText={
                      hasError && !this.pincodeEntered() &&
                      (
                        "Please enter pincode"
                      )
                    }
                  />
                </FormControl>
              )
            }
            {
              (selectedSearchBy === 'district') && (
                <span>
                  <FormControl required variant="outlined" className={classes.formControl} error={hasError && !this.stateSelected()}>
                  <InputLabel id="state-label">Select state</InputLabel>
                  <Select
                    labelId="state-label"
                    id="state-input"
                    value={selectedState}
                    onChange={this.selectState}
                    label="Select state"
                    error={hasError && !this.stateSelected()}
                  >
                    {states.map((state) => (
                      <MenuItem key={state.state_id} value={state.state_id}>
                        {state.state_name}
                      </MenuItem>
                    ))}
                  </Select>
                  {
                    hasError && !this.stateSelected() &&
                    (
                      <FormHelperText>Please select a state</FormHelperText>
                    )
                  }
                </FormControl>
                  <FormControl required variant="outlined" className={classes.formControl} error={hasError && !this.districtSelected()}>
                    <InputLabel id="district-label">Select district</InputLabel>
                    <Select
                      labelId="district-label"
                      id="district-input"
                      value={selectedDistrict}
                      onChange={this.selectDistrict}
                      label="Select district"
                      error={hasError && !this.districtSelected()}
                    >
                      {districts.map((district) => (
                        <MenuItem
                          key={district.district_id}
                          value={district.district_id}
                        >
                          {district.district_name}
                        </MenuItem>
                      ))}
                    </Select>
                    {
                      hasError && !this.districtSelected() &&
                      (
                        <FormHelperText>Please select a district</FormHelperText>
                      )
                    }
                  </FormControl>
                </span>
              )
            }
            <FormControl variant="outlined" className={classes.formControl}>
              <InputLabel id="vaccine-label">Select vaccine</InputLabel>
              <Select
                labelId="vaccine-label"
                id="vaccine-input"
                value={selectedVaccine}
                onChange={this.selectVaccine}
                label="Select vaccine"
              >
                {vaccines.map((vaccine) => (
                  <MenuItem key={vaccine.id} value={vaccine.value}>
                    {vaccine.name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
            <FormControl variant="outlined" className={classes.formControl}>
              <InputLabel id="price-label">Select price</InputLabel>
              <Select
                labelId="price-label"
                id="price-input"
                value={selectedVaccinePrice}
                onChange={this.selectVaccinePrice}
                label="Select price"
              >
                {prices.map((price) => (
                  <MenuItem key={price.id} value={price.value}>
                    {price.name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
            <FormControl variant="outlined" className={classes.formControl}>
              <InputLabel id="age-label">Minimum age</InputLabel>
              <Select
                labelId="age-label"
                id="age-input"
                value={selectedAge}
                onChange={this.selectAge}
                label="Minimum age"
              >
                {ages.map((age) => (
                  <MenuItem key={age.id} value={age.value}>
                    {age.name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
            <FormControl variant="outlined" className={classes.formControl}>
              <TextField
                id="outlined-min-vaccine-dose-1"
                label="Quantity required - 1st dose"
                variant="outlined"
                value={minDose1}
                type="number"
                onChange={this.setMinimumDose1}
                onFocus={this.focusMinimumDose1}
              />
            </FormControl>
            <FormControl variant="outlined" className={classes.formControl}>
              <TextField
                id="outlined-min-vaccine-dose-2"
                label="Quantity required - 2nd dose"
                variant="outlined"
                value={minDose2}
                type="number"
                onChange={this.setMinimumDose2}
                onFocus={this.focusMinimumDose2}
              />
            </FormControl>
            <br />
            <FormControl className={classes.formControl}>
              <Button
                variant="contained"
                color="primary"
                onClick={this.fetchVaccineCentres.bind(this)}
                startIcon={<Search />}
              >
                Search Vaccination Centres
              </Button>
            </FormControl>
            {showHiddenVaccineCentersButton}
            {notifyButton}
            {clearNotifyButton}
            <FormControl className={classes.formControl}>
              <Button
                variant="contained"
                color="primary"
                onClick={this.displayBookVaccineModal.bind(this)}
                endIcon={<ArrowForward />}
              >
                Book Vaccination Slot
              </Button>
              <ConfirmModal open={showBookVaccineConfirmationModal} onConfirm={this.bookVaccineSlot.bind(this)} onReject={this.closeBookVaccineModal.bind(this)} onClose={this.closeBookVaccineModal.bind(this)} heading="Book Vaccination Slot?" description="Please make sure that you take a note of the center details before proceeding" confirmButtonText="Yes" rejectButtonText="No" />
            </FormControl>
          </CardContent>
        </Card>
        {/* Data Table */}
        <div style={{ maxWidth: "100%", margin: '1rem' }}>
          <MaterialTable
            icons={tableIcons}
            columns={[
              { title: "Date", field: "date" },
              { title: "Center Name", field: "name" },
              { title: "Center Address", field: "address" },
              { title: "Vaccine Name", field: "vaccineName" },
              { title: "Minimum Age Required", field: "minAge" },
              { title: "Price", field: "price" },
              { title: "1st Dose Availability", field: "dose1Availability", type: "numeric" },
              { title: "2nd Dose Availability", field: "dose2Availability", type: "numeric" }
            ]}
            data={vaccinesData}
            title="Vaccination Centres"
            options={{ selection: true }}
            actions={[
              {
                tooltip: "Remove centres from search results",
                icon: () => {
                  return <VisibilityOff />;
                },
                onClick: (event, centres) => {
                  // * Removing selected centres from search results
                  let currentCentreIdsToSkip = [...centreIdsToSkip];
                  centres.forEach((centre) =>
                    currentCentreIdsToSkip.push(centre.center_id)
                  );
                  // * Setting up unique centre ids to skip
                  this.setState({
                    centreIdsToSkip: currentCentreIdsToSkip.filter(this.getUnique),
                  });
                  // * Removing centres from search results
                  this.setState({
                    vaccinesData: vaccinesData.filter((vaccine) => !currentCentreIdsToSkip.includes(vaccine.center_id))
                  });
                },
              },
            ]}
          />
        </div>
        {/* Hit Counter */}
        <br />
        <center><b>Total Views Worldwide</b></center>
        <br />
        <center>
          <a href="https://www.hitwebcounter.com" target="_blank" rel="noreferrer">
            <img src="https://hitwebcounter.com/counter/counter.php?page=7816923&style=0005&nbdigits=9&type=page&initCount=0" title="Free Counter" Alt="web counter" border="0" />
        </a>
        </center>
        <br />
    </div>
  );
}