@material-ui/icons#Search JavaScript Examples

SearchBar = (props) => {
  const {
    getAll, getSearched, classes, searchText,
  } = props;

  const onSearchClicked = (text) => {
    if (text === "") {
      getAll();
    } else {
      getSearched(text);
    }
  };

  const onTextChange = (e) => {
    onSearchClicked(e.target.value);
  };

  return (
    <TextField
      id="standard-search"
      variant="outlined"
      className={classes.root}
      placeholder="Search"
      value={searchText}
      onChange={onTextChange}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start" style={{ marginRight: 0 }}>
            <IconButton disabled>
              <Search />
            </IconButton>
          </InputAdornment>
        ),
        className: classes.input,
      }}
      type="search"
    />
  );
}

render() {
        let classes = this.props.classes;
        return (
            <Grid container direction={"row"} alignItems={"flex-end"} alignContent={"center"}>
                <Search className={classes.search}/>
                <Grid item>
                    <TextField
                        className={classes.textField}
                        placeholder={"Search"}
                        name="search"
                        value={this.state.searchValue}
                        onChange={this.handleSearchChange}
                    />
                </Grid>
                {this.props.showClearButton ?
                    <Cancel className={classes.clearSearch} onClick={() => {
                        this.updateSearch("")
                    }}/> :
                    null
                }
            </Grid>
        )
    }

tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <Delete {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
}

WebChatSearchBox = ({ onSendMessage }) => {
  const [message, setMessage] = useState("");

  function handleKeyDown(event) {
    if (event.key === "Enter") {
      event.preventDefault();
      onSendMessage(message);
      setMessage("");
    }
  } 

  return (
    // <Paper elevation={webConstants.PAPER_ELEVATION}>
    <div style={styles.parentView}>
      <InputBase
        multiline
        rowsMax={5}
        style={styles.userMessage}
        placeholder="Search or start new chat"
        value={message}
        onKeyPress={e => handleKeyDown(e)}
        onChange={event => {
          // onTyping(event);
          setMessage(event.target.value);
        }}
      >
        <Search width={30} />
      </InputBase>
    </div>
    // </Paper>
  );
}

function Input ({
  placeholder,
  label,
  type = 'text',
  icon,
  unit,
  value,
  onChange,
  paste,
  className,
  maxValue
}) {
  async function handlePaste () {
    try {
      const text = await navigator.clipboard.readText();
      if (text) {
        onChange({ target: { value: text } });
      }
    } catch (err) {
      // navigator clipboard api not supported in client browser
    }
  }

  function handleMaxClick () {
    onChange({ target: { value: maxValue } });
  }

  const overMax = new BN(value).gt(new BN(maxValue));

  return (
    <div className={[ styles.Input, className ].join(' ')}>
      {label && <div className={styles.label}>{label}</div>}
      <div
        className={[
          styles.field,
          overMax ? styles.error : ''
        ].join(' ')}
      >
        {icon && <Search className={styles.icon} />}
        <input
          className={styles.input}
          placeholder={placeholder}
          type={type}
          value={value}
          onChange={onChange}
        />
        {unit && (
          <div className={styles.unit}>
            {maxValue && (value !== maxValue) && (
              <div
                onClick={handleMaxClick}
                className={styles.maxValue}
              >
                MAX
              </div>
            )}
            {unit}
          </div>
        )}
        {paste && (
          <div onClick={handlePaste} className={styles.paste}>
            Paste
          </div>
        )}
      </div>
    </div>
  );
}

function IconsLibrary() {
	const [searchString, setSearchString] = useState("");
	const classes = useStyles();
	return (
		<div className={style.root}>
			<div className={style.panel}>
				<TextField
					id="outlined-search"
					label="Search Icons"
					type="search"
					variant="outlined"
					value={searchString}
					className={classes.search}
					autoComplete="off"
					autoFocus={true}
					onChangeCapture={e => setSearchString(e.target.value)}
					InputProps={{
						endAdornment: (
							<InputAdornment position="end">
								<IconButton>
									<Search />
								</IconButton>
							</InputAdornment>
						),
					}}
				/>
			</div>
			<Divider />
			<div className={style.iconLib}>
				<IconPreview
					iconPackSVGs={iconPack1SVGs}
					categoryTitle="Tech Stack Icons"
					searchString={searchString}
				/>
				{/* https://drwn.io/ */}
				<IconPreview
					iconPackSVGs={iconPack21SVGs}
					categoryTitle="Stick Figure Icons - Light"
					searchString={searchString}
				/>
				<IconPreview
					iconPackSVGs={iconPack22SVGs}
					categoryTitle="Stick Figure Icons - Bold"
					searchString={searchString}
				/>
				{/* https://svgsilh.com/tag/stickman-1.html */}
				<IconPreview
					iconPackSVGs={iconPack3SVGs}
					categoryTitle="Speech Bubble Icons"
					searchString={searchString}
				/>
				{/* https://drwn.io/ */}
				{/* https://freesvg.org/search/ */}
				{/* https://www.flaticon.com/free-icons/hand-drawn-speech-bubble */}
				{/* https://www.flaticon.com/packs/speech-bubbles-2 */}
				{/* https://www.svgrepo.com/svg/82688/thought-bubble */}
				<IconPreview
					iconPackSVGs={iconPack41SVGs}
					categoryTitle="Devices & Hardware Icons - Bold"
					searchString={searchString}
				/>
				<IconPreview
					iconPackSVGs={iconPack42SVGs}
					categoryTitle="Devices & Hardware Icons - Light"
					searchString={searchString}
				/>
				{/* https://www.svgrepo.com/vectors/device/ */}
				{/* https://www.flaticon.com/packs/smart-devices?k=1615927940770 */}
				{/* https://freeicons.io/material-icons-file-3/devices-icon-17364 */}
			</div>
		</div>
	);
}

/*
  *	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>
  );
}

WebChatRoomHeaderView = ({ item, isNewChat }) => {
  // console.log("isNewChat =>", isNewChat);
  const [userType, setUserType] = React.useState("");
  const [displayLastSeen, setDisplayLastSeen] = React.useState("");
  const [apiLastSeen, setApiLastSeen] = React.useState("");
  let styles = useStyles();

  let data = item.chat[0];

  useEffect(() => {
    populateUserType();
    listenUserLastSeen();
    getUserLastSeen();
  }, [item]);

  useEffect(() => {
    if (apiLastSeen != "") {
      calcLastSeen(apiLastSeen);
    }
  }, [apiLastSeen]);

  const populateUserType = () => {
    let userType = getUserType(item);
    setUserType(userType);
  };

  async function getUserLastSeen() {
    let userId = getLocalData(webConstants.USER_ID);
    // This to get id of the other user
    let id = data.userId === userId ? data.chatId : data.userId;
    let request = { id: id };
    let res = getLastSeenUser(request);
    res
      .then((lastSeen) => {
        if (lastSeen) {
          // console.log("User Last Seen ==> ", JSON.stringify(lastSeen));
          setApiLastSeen(lastSeen.data.lastSeen[0]);
        }
      })
      .catch((err) => {
        console.log("User Last Seen ==> ", err);
      });
  }

  function listenUserLastSeen() {
    socket.on(webConstants.LAST_SEEN, (status) => {
      // console.log("App Status == ", status);
      let newStatus = {
        userId: status.userId,
        userName: status.userName,
        status: status.status,
        lastSeen: status.lastSeen,
      };

      let id = getLocalData(webConstants.USER_ID);
      if (status.userId != id) {
        calcLastSeen(newStatus);
      } else {
        // setDisplayLastSeen("");
      }
    });
    sendPageLoadStatus();
  }

  async function calcLastSeen(lastSeen) {
    if (lastSeen) {
      if (lastSeen.userId === data.userId || lastSeen.userId === data.chatId) {
        let time =
          lastSeen.status === "Offline"
            ? `Last seen at ${getDateTimeInFormat(lastSeen.lastSeen)}`
            : lastSeen.status;
        setDisplayLastSeen(time);
      } else if (apiLastSeen != "") {
        let time = `Last seen at ${getDateTimeInFormat(apiLastSeen.lastSeen)}`;
        setDisplayLastSeen(time);
      }
    } else {
      // User last seen not available yet
      setApiLastSeen("");
      setDisplayLastSeen("");
    }
  }

  return (
    <div className={styles.parentView} elevation={webConstants.PAPER_ELEVATION}>
      <div
        style={{
          width: "5%",
          marginLeft: "1%",
          alignSelf: "center",
          marginTop: "0.2%",
        }}
      >
        <Avatar src={chatImage} className={styles.profileIcon} />

        {/* <chatImage width={40} height={40} style={styles.profileIcon} /> */}
      </div>
      <div
        style={{
          display: "flex",
          width: "76%",
          flexDirection: "column",
          marginLeft: "1%",
          alignSelf: "center",
        }}
      >
        <Typography className={styles.userName}>
          {userType == webConstants.FRIEND ? data.userName : data.chatName}
        </Typography>
        <Typography className={styles.userMessage}>
          {displayLastSeen}
        </Typography>
      </div>
      <div
        style={{
          width: "19%",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-evenly",
        }}
      >
        <Search className={styles.menuIcons} />
        <AttachFile className={styles.menuIcons} />
        <MoreVert className={styles.menuIcons} />
      </div>
    </div>
  );
}