@material-ui/icons KeyboardBackspace JavaScript Examples

Source File: QrCodeShow.js From pwa with MIT License

6 votes

export default function QrCodeShow() {
  let history = useHistory();
  const dispatch = useDispatch();
  const unique_id = useSelector((state) => state.MyActivities.user.unique_id);

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img alt="mask" src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Box className="qr-code-box">
        <QrCode value={'person:' + unique_id} />
      </Box>
      <Box className="warning-box">
        <Typography>
          در صورتی که با فردی ملاقت کرده‌اید، فرد مقابل بایستی با استفاده از
          آیکون دوربین در اپلیکیشن خود این صفحه را تصویربرداری کند.
        </Typography>
        <Typography component="span" variant="caption">
          این کد حاوی هیچ گونه اطلاعات شخصی یا درمانی شما نیست و تنها جهت
          شناسایی شما در نرم‌افزار استفاده می‌شود.
        </Typography>
      </Box>
    </>
  );
}

Source File: PostDetails.jsx From pwa with MIT License

5 votes

export default function PostDetails({ post, onClose }) {
  return (
    <Dialog
      open={Boolean(post)}
      onClose={onClose}
      fullScreen
      TransitionComponent={SlideTransition}
    >
      <AppBar position="static">
        <Toolbar>
          ادامه مطلب
          <IconButton color="inherit" onClick={onClose}>
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      {post && (
        <div className={styles.container}>
          <div className={styles.imageTitleContainer}>
            <div
              style={{ backgroundImage: `url("${post.image}")` }}
              className={styles.thumbnail}
            />
            <div className={styles.title}>{post.title}</div>
            <div className={styles.dateSourceContainer}>
              <Typography variant="caption">
                {engToPerDigits(
                  dayjs(post.create_time)
                    .locale('fa')
                    .calendar('jalali')
                    .format('DD MMMM YYYY')
                )}
              </Typography>
              {post.source && (
                <a
                  className={styles.source}
                  href={post.source}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {'منبع'}
                </a>
              )}
            </div>
          </div>
          <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
      )}
    </Dialog>
  );
}

Source File: BluetoothPage.jsx From pwa with MIT License

5 votes

export default function BluetoothPage() {
  let history = useHistory();
  const dispatch = useDispatch();
  const unique_id = useSelector((state) => state.MyActivities.user.unique_id);
  const [showTooltip, setShowTooltip] = useState(false);

  const handleCodeClick = () => {
    setShowTooltip(true);
    navigator.clipboard.writeText(`person:${unique_id}`);
    setTimeout(() => {
      setShowTooltip(false);
    }, 2000);
  };

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img alt="mask" src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Box className={styles['bt-box']}>
        <div className={styles['bt-box-body']}>
          <BluetoothSearching style={{ fontSize: 150, color: '#ff005c' }} />
          <Paper elevation={0} className={styles['uid-paper']}>
            <span>{'کد شخصی شما'}</span>
            <Tooltip
              PopperProps={{
                disablePortal: true,
              }}
              onClose={() => setShowTooltip(false)}
              open={showTooltip}
              disableFocusListener
              disableHoverListener
              disableTouchListener
              title="کپی شد!"
              placement="top"
            >
              <Button className={styles['uid-btn']} onClick={handleCodeClick}>
                {`person:${unique_id}`}
              </Button>
            </Tooltip>
          </Paper>
        </div>
      </Box>
      <Box className="warning-box">
        <Typography>
          برای ثبت ملاقات توسط افراد نزدیک به شما توسط بلوتوث، کد بالا را در نام
          بلوتوث دستگاه خود قرار دهید.
        </Typography>
        <Typography component="span" variant="caption">
          این کد حاوی هیچ گونه اطلاعات شخصی یا درمانی شما نیست و تنها جهت
          شناسایی شما در نرم‌افزار استفاده می‌شود.
        </Typography>
      </Box>
    </>
  );
}

Source File: QrScanner.js From pwa with MIT License

5 votes

export default function QrScanner() {
  let history = useHistory();
  const dispatch = useDispatch();

  function handleScan(data) {
    if (data) {
      // It is assumed that QR code has always the form person:code
      if (/^person:[a-z0-9]+$/i.test(data)) {
        dispatch(createQrEvent({ id: data.split(':')[1] }, history));
      }
    }
  }

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

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img alt="mask" src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <div className="qr-reader-container">
        <QrReader
          className="qr-reader"
          delay={1000}
          onError={() => handleError()}
          onScan={(data) => handleScan(data)}
        />
      </div>
    </>
  );
}

Source File: MyActivityEvents.js From pwa with MIT License

5 votes

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

Source File: Activation.jsx From pwa with MIT License

4 votes

export default function Activation({ onBackClick, onActivate }) {
  const ttl = useSelector((store) => store.MyActivities.ttl);
  const phone = useSelector((store) => store.MyActivities.phone);
  const condition = useSelector((store) => store.MyActivities.condition);

  const { i: countdown, start } = useTimer({ start: ttl });

  const [code, setCode] = useState('');
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [smsSent, setSmsSent] = useState(false);

  const [isAlertOpen, setIsAlertOpen] = useState(false);
  const [alertText, setAlertText] = useState('');

  useEffect(() => {
    start();
    /*eslint-disable-next-line react-hooks/exhaustive-deps*/
  }, []);

  function sendActivationSMS() {
    setIsDialogOpen(true);
    axios({
      method: 'POST',
      url: `${process.env.REACT_APP_REGISTER_USER_AGAIN}`,
      data: {
        phone_number: phone,
        risk_group: condition,
      },
    })
      .then(() => {
        setIsDialogOpen(false);
        setSmsSent(true);
      })
      .catch((err) => {
        console.error(err);
        setAlertText('ارسال کد با خطا مواجه شد!');
        setIsAlertOpen(true);
        setIsDialogOpen(false);
      });
  }

  function onSubmit() {
    setIsDialogOpen(true);
    axios({
      method: 'POST',
      url: `${process.env.REACT_APP_ACTIVATE_USER}`,
      data: {
        phone_number: phone,
        code: perToEngDigits(code),
      },
    })
      .then(({ data }) => {
        setIsDialogOpen(false);
        onActivate({
          token: data.access_token,
          user: data.user,
        });
      })
      .catch((err) => {
        console.error(err);
        setAlertText('کد واردشده اشتباه است!');
        setIsAlertOpen(true);
        setIsDialogOpen(false);
      });
  }

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img src={logo} className="app-header-logo" alt="logo" />
          <IconButton color="inherit" onClick={onBackClick}>
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <div className={styles.container}>
        {/* #FIXME Use formattedMessage */}
        <Typography align="center">
          کد فعال‌سازی ۵ رقمی که برای شما پیامک شد را وارد کنید.
        </Typography>
        <Box mt={2} textAlign="center">
          <Button color="primary" onClick={onBackClick}>
            <div>{phone}</div>
            <Edit className={styles.editIcon} fontSize="small" />
          </Button>
        </Box>
        <Box mt={4}>
          <TextField
            label="کد فعال‌سازی"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            fullWidth
          />
        </Box>
        <Box mt={3} textAlign="center">
          <Button
            variant="contained"
            color="primary"
            size="large"
            className="activation-btn"
            onClick={onSubmit}
          >
            فعال‌سازی
          </Button>
        </Box>
        <Box mt={3}>
          <Typography color="primary" align="center">
            {`فرصت باقی مانده برای ورود: ${Math.floor(countdown / 60)}:${
              countdown % 60
            }`}
          </Typography>
        </Box>
        {!smsSent && (
          <Box mt={2} textAlign="center">
            <Button color="primary" onClick={sendActivationSMS}>
              ارسال مجدد کد فعال‌سازی
            </Button>
          </Box>
        )}
      </div>
      <Dialog open={isDialogOpen}>
        <div className={styles.dialogContent}>
          <CircularProgress />
          <Box ml={3}>{'لطفا کمی صبر کنید.'}</Box>
        </div>
      </Dialog>
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        open={isAlertOpen}
        autoHideDuration={5000}
        onClose={() => setIsAlertOpen(false)}
        message={alertText}
      />
    </>
  );
}

Source File: SignUp.jsx From pwa with MIT License

4 votes

export default function SignUp({ onBackClick, onSMSSent }) {
  const [phone, setPhone] = useState('');
  const [condition, setCondition] = useState('');

  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const [isAlertOpen, setIsAlertOpen] = useState(false);
  const [alertText, setAlertText] = useState('');

  function onSubmit() {
    if (!/09\d{9}/.test(perToEngDigits(phone))) {
      setAlertText('شماره همراه وارد شده صحیح نمی‌باشد.');
      setIsAlertOpen(true);
      return;
    }
    if (condition === '') {
      setAlertText('وضعیت شرایط خاص را مشخص کنید.');
      setIsAlertOpen(true);
      return;
    }
    sendActivationSMS();
  }

  function sendActivationSMS() {
    setIsDialogOpen(true);
    axios({
      method: 'POST',
      url: `${process.env.REACT_APP_REGISTER_USER}`,
      data: {
        phone_number: perToEngDigits(phone),
        risk_group: condition,
      },
    })
      .then(({ data }) => {
        setIsDialogOpen(false);
        onSMSSent({
          phone: perToEngDigits(phone),
          condition,
          ttl: data.activate_ttl,
        });
      })
      .catch((err) => {
        console.error(err);
        setIsDialogOpen(false);
        setAlertText('ارسال کد با خطا مواجه شد!');
        setIsAlertOpen(true);
      });
  }

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img src={logo} className="app-header-logo" alt="logo" />
          <IconButton color="inherit" onClick={onBackClick}>
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <div className={styles.container}>
        <TextField
          label="شماره همراه"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          fullWidth
        />
        <Box mt={2}>
          <FormControl fullWidth>
            <InputLabel id="condition-select-label">
              شرایط خاص دارید؟
            </InputLabel>
            <Select
              id="condition-select"
              labelId="condition-select-label"
              value={condition}
              onChange={(e) => setCondition(e.target.value)}
            >
              <MenuItem value={0}>
                <div className={styles.menuItem}>
                  <strong>۱. بدون شرایط خاص</strong>
                </div>
              </MenuItem>
              <MenuItem
                value={1}
                style={{ whiteSpace: 'normal', textAlign: 'justify' }}
              >
                <div className={styles.menuItem}>
                  <strong>۲. بیماران با نقص ایمنی:</strong>
                  &nbsp; تحت درمان با کورتیکواستروئید، شیمی درمانی، بدخیمی‌ها،
                  پیوند اعضا، مبتلایان به HIV
                </div>
              </MenuItem>
              <MenuItem
                value={2}
                style={{ whiteSpace: 'normal', textAlign: 'justify' }}
              >
                <div className={styles.menuItem}>
                  <strong>۳. بیماران با بیماری زمینه‌ای و سالمندان:</strong>
                  &nbsp; بیماری قلبی عروقی، فشار خون، بیماری‌های تنفسی زمینه‌ای،
                  دیابت و افراد بالای ۵۰ سال
                </div>
              </MenuItem>
            </Select>
          </FormControl>
        </Box>
        <Box mt={2}>
          <Typography variant="subtitle2" align="center">
            برای استفاده از قابلیت پیگیری وضعیت سلامتی لازم است ابتدا در
            نرم‌افزار ثبت‌نام کنید.
          </Typography>
        </Box>
        <Box mt={2} className={styles.verificationButtonContainer}>
          <Button
            variant="contained"
            color="primary"
            size="large"
            onClick={onSubmit}
            className={styles.verificationButton}
          >
            ارسال کد فعال‌سازی
          </Button>
        </Box>
      </div>
      <Dialog open={isDialogOpen}>
        <div className={styles.dialogContent}>
          <CircularProgress />
          <Box ml={3}>{'لطفا کمی صبر کنید.'}</Box>
        </div>
      </Dialog>
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        open={isAlertOpen}
        autoHideDuration={5000}
        onClose={() => setIsAlertOpen(false)}
        message={alertText}
      />
    </>
  );
}

@material-ui/icons#KeyboardBackspace JavaScript Examples