@material-ui/core/#Button JavaScript Examples

function Intro({}) {

  return (
    <>
   
    <div className="intro-bg" >
    <div className="intro-blankSpace">
          

         </div>
        <img src={Exel} alt="intro-exel-image" className="intro-exelImg"></img>
        

        <div className="intro-Buttons">
        

        </div>

    <h3 className="intro-typeWrite">
        <Typewriter
        options={{
            strings: ['API', 'Website','Fun Game'],
            autoStart: true,
            loop: true,
        }}
        
        /> 
        <Link to="/api" >
        <Button style={{
            
            borderRadius: 25,
            backgroundColor: "#47ff8c",
            color: "#787c7a",
            textDecoration: false,
            marginRight: 5,

            
    
        }} ><h3 className="intro-button-text">Convert into API</h3></Button> 
        </Link>
        <Link to="/webbuilder/">
        <Button
         style={{
            
            borderRadius: 25,
            backgroundColor: "#787c7a",
            color:"#47ff8c",
            borderWidth: 5,
            borderColor: "#787c7a",
            textDecoration: false,
            marginRight: 3,

            
    
        }}
        ><h3 className="intro-button-text">Convert into Website</h3></Button> 
        </Link>
        </h3>
      
        <h2 className="intro-h3">
           Convert Google Sheets into
        </h2>
       <h1 className="intro-h1">
           Site Sheet
      

        </h1>
  
    </div>
  
  

    

    </>
  );
}

AddUpdateForm = () => {
  const [entry, setEntry] = useState(initialInputValues);
  const [tagInput, setTagInput] = useState('');
  const [error, setError] = useState('');
  const [{ editValues, isLoading }, dispatch] = useEntryContext();
  const history = useHistory();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const classes = useFormStyles();

  useEffect(() => {
    if (editValues) {
      setEntry(editValues);
    }
  }, [editValues]);

  const { title, link, description, type, tags } = entry;

  const handleOnChange = (e) => {
    setEntry({
      ...entry,
      [e.target.name]: e.target.value,
    });
  };

  const handleTagButton = () => {
    if (tagInput === '') return;
    if (tags.includes(tagInput)) {
      return setError(`Tags need to be unique. Two tags can't be same.`);
    }
    setEntry({ ...entry, tags: tags.concat(tagInput.toLowerCase()) });
    setTagInput('');
  };

  const handleTagDelete = (targetTag) => {
    setEntry({ ...entry, tags: tags.filter((t) => t !== targetTag) });
  };

  const handleClearInput = () => {
    if (editValues) {
      dispatch(resetEditValues());
    }
    setEntry(initialInputValues);
    setTagInput('');
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (tags.length === 0) {
      return setError('Atleast one tag is required.');
    }

    try {
      dispatch(toggleIsLoading());
      if (editValues) {
        const entryRes = await entryService.update(editValues.id, entry);
        dispatch(updateEntry(entryRes));
        notify(
          dispatch,
          `Entry "${editValues.title}" has been successfully updated.`,
          'success'
        );
        dispatch(resetEditValues());
      } else {
        const entryRes = await entryService.create(entry);
        dispatch(addEntry(entryRes));
        notify(
          dispatch,
          `New entry "${entryRes.title}" has been successfully added!`,
          'success'
        );
      }

      dispatch(toggleIsLoading());
      setEntry(initialInputValues);
      setTagInput('');
      history.push('/');
    } catch (err) {
      dispatch(toggleIsLoading());

      const errRes = err?.response?.data;

      if (
        errRes?.error.includes('title') &&
        errRes?.error.includes('allowed length (40)')
      ) {
        return setError(`Title field's maximum character limit is 40. `);
      } else if (
        errRes?.error.includes('description') &&
        errRes?.error.includes('allowed length (250)')
      ) {
        return setError(`Description field's maximum character limit is 250. `);
      } else if (errRes?.error) {
        return setError(errRes.error);
      } else {
        return setError(err.message);
      }
    }
  };

  return (
    <Paper>
      <form onSubmit={handleSubmit} className={classes.root}>
        <Typography
          variant={isMobile ? 'h5' : 'h4'}
          color="primary"
          className={classes.formTitle}
        >
          {editValues ? 'Update the entry' : 'Add a new entry'}
        </Typography>
        <div className={classes.input}>
          <TitleIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            label="Title"
            value={title}
            name="title"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LinkIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            label="Link"
            value={link}
            name="link"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <DescriptionIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            multiline
            label="Description"
            value={description}
            name="description"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.tagArea}>
          <div className={classes.input}>
            <LocalOfferIcon color="secondary" className={classes.inputIcon} />
            <TextField
              color="secondary"
              label="Add Tags"
              value={tagInput}
              onChange={({ target }) => setTagInput(target.value)}
            />
            <Button
              color="primary"
              size="small"
              variant="outlined"
              onClick={handleTagButton}
              className={classes.tagButton}
            >
              Add
            </Button>
          </div>
          <div className={classes.tagGroup}>
            {tags.map((tag) => (
              <Chip
                key={tag}
                label={tag}
                onDelete={() => handleTagDelete(tag)}
                variant="outlined"
                color="secondary"
                className={classes.tag}
              />
            ))}
          </div>
        </div>
        <div className={classes.radioInput}>
          <CheckCircleOutlineIcon color="secondary" />
          <FormLabel component="legend" className={classes.radioLabel}>
            Link Type:
          </FormLabel>
          <RadioGroup
            row
            label="Type"
            value={type}
            name="type"
            onChange={handleOnChange}
            className={classes.radioGroup}
          >
            <FormControlLabel
              label="Article"
              control={<Radio color="secondary" />}
              value="article"
              checked={type === 'article'}
            />
            <FormControlLabel
              label="Video"
              control={<Radio color="secondary" />}
              value="video"
              checked={type === 'video'}
            />
            <FormControlLabel
              label="Other"
              control={<Radio color="secondary" />}
              value="other"
              checked={type === 'other'}
            />
          </RadioGroup>
        </div>
        <div className={classes.buttonGroup}>
          <Button
            variant="outlined"
            color="primary"
            size={isMobile ? 'medium' : 'large'}
            startIcon={<BackspaceIcon />}
            onClick={handleClearInput}
          >
            Clear
          </Button>
          <Button
            type="submit"
            variant="contained"
            color="primary"
            size={isMobile ? 'medium' : 'large'}
            startIcon={editValues ? <EditIcon /> : <PostAddIcon />}
            disabled={isLoading}
          >
            {editValues
              ? isLoading
                ? 'Updating Entry'
                : 'Update Entry'
              : isLoading
              ? 'Adding Entry'
              : 'Add Entry'}
          </Button>
        </div>
        {error && (
          <AlertBox
            message={error}
            severity="error"
            clearError={() => setError(null)}
          />
        )}
      </form>
    </Paper>
  );
}

LoginForm = () => {
  const [credentials, setCredentials] = useState({
    email: '',
    password: '',
  });
  const [error, setError] = useState(null);
  const [showPass, setShowPass] = useState(false);
  const [, authDispatch] = useAuthContext();
  const [{ isLoading }, entryDispatch] = useEntryContext();
  const classes = useRegisterLoginForm();
  const history = useHistory();
  const { email, password } = credentials;

  const handleOnChange = (e) => {
    setCredentials({ ...credentials, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      entryDispatch(toggleIsLoading());
      const user = await authService.login(credentials);
      entryService.setToken(user.token);
      authDispatch(loginUser(user));
      storageService.saveUser(user);
      entryDispatch(toggleIsLoading());

      setCredentials({
        email: '',
        password: '',
      });
      setError(null);
      history.push('/');
      notify(
        entryDispatch,
        `Welcome, ${user.displayName}! You're logged in.`,
        'success'
      );
    } catch (err) {
      entryDispatch(toggleIsLoading());

      if (err?.response?.data?.error) {
        setError({ message: err.response.data.error, severity: 'error' });
      } else {
        setError({ message: err.message, severity: 'error' });
      }
    }
  };

  return (
    <Paper className={classes.root}>
      <form onSubmit={handleLogin} className={classes.form}>
        <Typography variant="h4" color="primary" className={classes.formTitle}>
          Login to your account
        </Typography>
        <div className={classes.input}>
          <AlternateEmailIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type="email"
            label="Email"
            value={email}
            name="email"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LockIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type={showPass ? 'text' : 'password'}
            label="Password"
            value={password}
            name="password"
            onChange={handleOnChange}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={() => setShowPass(!showPass)}>
                    {showPass ? <VisibilityOffIcon /> : <VisibilityIcon />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>

        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.submitButton}
          startIcon={<ExitToAppIcon />}
          disabled={isLoading}
        >
          {isLoading ? 'Logging in' : 'Login'}
        </Button>
        <Typography variant="body1" className={classes.bottomText}>
          Don't have an account?{' '}
          <Link component={RouterLink} to="/register">
            Register.
          </Link>
        </Typography>
        {error && (
          <AlertBox
            message={error.message}
            severity={error.severity}
            clearError={() => setError(null)}
            title={error.title}
          />
        )}
        <DemoCredsBox />
      </form>
    </Paper>
  );
}

RegisterForm = () => {
  const [userDetails, setUserDetails] = useState({
    displayName: '',
    email: '',
    password: '',
  });
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState(null);
  const [showPass, setShowPass] = useState(false);
  const [showConfirmPass, setShowConfirmPass] = useState(false);
  const [, authDispatch] = useAuthContext();
  const [{ isLoading }, entryDispatch] = useEntryContext();
  const classes = useRegisterLoginForm();
  const history = useHistory();
  const { displayName, email, password } = userDetails;

  const handleOnChange = (e) => {
    setUserDetails({ ...userDetails, [e.target.name]: e.target.value });
  };

  const handleRegister = async (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      return setError(`Confirm password failed! Both passwords need to match.`);
    }
    try {
      entryDispatch(toggleIsLoading());
      const user = await authService.register(userDetails);
      entryService.setToken(user.token);
      authDispatch(registerUser(user));
      storageService.saveUser(user);
      entryDispatch(toggleIsLoading());

      setUserDetails({
        displayName: '',
        email: '',
        password: '',
      });
      setConfirmPassword('');
      setError(null);
      history.push('/');
      notify(
        entryDispatch,
        `Welcome, ${user.displayName}! Your account has been registered.`,
        'success'
      );
    } catch (err) {
      entryDispatch(toggleIsLoading());

      if (err?.response?.data?.error) {
        setError(err.response.data.error);
      } else {
        setError(err.message);
      }
    }
  };

  return (
    <Paper className={classes.root}>
      <form onSubmit={handleRegister} className={classes.form}>
        <Typography variant="h4" color="primary" className={classes.formTitle}>
          Create an account
        </Typography>
        <div className={classes.input}>
          <PersonIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            label="Display Name"
            value={displayName}
            name="displayName"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <AlternateEmailIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type="email"
            label="Email"
            value={email}
            name="email"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LockIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type={showPass ? 'text' : 'password'}
            label="Password"
            value={password}
            name="password"
            onChange={handleOnChange}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={() => setShowPass(!showPass)}>
                    {showPass ? <VisibilityOffIcon /> : <VisibilityIcon />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>
        <div className={classes.input}>
          <EnhancedEncryptionIcon
            color="secondary"
            className={classes.inputIcon}
          />
          <TextField
            color="secondary"
            required
            type={showConfirmPass ? 'text' : 'password'}
            label="Confirm Password"
            value={confirmPassword}
            name="confirmPassword"
            onChange={({ target }) => setConfirmPassword(target.value)}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    onClick={() => setShowConfirmPass(!showConfirmPass)}
                  >
                    {showConfirmPass ? (
                      <VisibilityOffIcon />
                    ) : (
                      <VisibilityIcon />
                    )}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>
        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.submitButton}
          startIcon={<PersonAddIcon />}
          disabled={isLoading}
        >
          {isLoading ? 'Registering' : 'Register'}
        </Button>
        <Typography variant="body1" className={classes.bottomText}>
          Already have an account?{' '}
          <Link component={RouterLink} to="/login">
            Login.
          </Link>
        </Typography>
        {error && (
          <AlertBox
            message={error}
            severity="error"
            clearError={() => setError(null)}
          />
        )}
        <DemoCredsBox />
      </form>
    </Paper>
  );
}

DeviceDialog = (props) => {
  const { onClose, open } = props;

  const { playback } = useContext(ClientContext);
  const [state, setState] = playback;
  const [selected, setSelected] = useState(null);
  const loading = state.devices.length === 0;

  const handleChange = (deviceName) => {
    const deviceIndex = state.devices.findIndex(
      (device) => device.name === deviceName
    );
    state.devices[deviceIndex].selected = !state.devices[deviceIndex].selected;
    setSelected({ ...state });
  };
  const handleOnClose = () => {
    if (selected !== null) {
      setState({ ...selected });
    }
    onClose();
  };

  const refreshDeviceList = () => {
    setState({
      devices: [],
      playing: false,
    });
    fetch();
  };

  return (
    <Dialog
      onClose={handleOnClose}
      maxWidth="xs"
      fullWidth
      aria-labelledby="simple-dialog-title"
      open={open}
    >
      <CustomDialogTitle onRefresh={refreshDeviceList} id="simple-dialog-title">
        Select Devices
      </CustomDialogTitle>
      <DialogContent>
        <List>
          {loading ? (
            <CircularProgress
              style={{ marginLeft: "180px" }}
              color="secondary"
            />
          ) : (
            state.devices.map((device) => (
              <ListItem
                button
                onClick={() => handleChange(device.name)}
                key={device.name}
              >
                <ListItemIcon>
                  <SpeakerIcon />
                </ListItemIcon>
                <ListItemText
                  id="switch-list-label-wifi"
                  primary={device.name}
                />
                <ListItemSecondaryAction>
                  <Checkbox
                    checked={device.selected}
                    name={device.name}
                    onClick={() => handleChange(device.name)}
                  />
                </ListItemSecondaryAction>
              </ListItem>
            ))
          )}
        </List>
        <DialogActions>
          <Button onClick={handleOnClose} color="primary" autoFocus>
            SAVE
          </Button>
        </DialogActions>
      </DialogContent>
    </Dialog>
  );
}

function SpeechToText() {


    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [copy, setCopy] = useState(false)
    const [copied, setCopied] = useState(false)
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };

    const handleCopyClick = () => {
        setCopy(true);
      };

    const handleCopyClose = () => {
        setCopy(false);
      };

    const { transcript, interimTranscript, finalTranscript, resetTranscript, listening } = useSpeechRecognition();

    useEffect(() => {
        if (finalTranscript !== '') {
         console.log('Got final result:', finalTranscript);
        }
    }, [interimTranscript, finalTranscript]);

    if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
        return null;
      }
     
    if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');
    }
    const listenContinuously = () => {
    SpeechRecognition.startListening({
        continuous: true,
        language: 'en-GB',
    });
    };

    console.log(transcript);

    return (
        <div className="speechToText">
          <div className="textInfo2">
            <div className="textLeft2">
              {/* <img src={convert} alt="" /> */}
            </div>
            <div className="textRight2">
              <p>
                Introducing voice typing. <br/>
                Now you just have to speak and we will convert it into text for you!<br />
                Get started by clicking the button below.
              </p>
            </div>
          </div>
          <Button variant="contained" color="primary" onClick={handleClickOpen}>
            Voice Typing
          </Button>



            <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
            <AppBar className={classes.appBar}>
            <Toolbar>
                <Typography variant="h6" className={classes.title}>
                        Voice Typing
                </Typography>
                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                  <CloseIcon />
                </IconButton>
            </Toolbar>
            </AppBar>  


            <div className="convertVoice" >
                <div className="recorder">
                    {' '}
                    {listening ? <MicIcon /> : <MicOffIcon />}
                    <div className="buttonsContainer">
                        <Button type="button" onClick={listenContinuously}>Listen</Button>
                        <Button type="button" onClick={SpeechRecognition.stopListening}>Stop</Button>
                        <Button type="button" onClick={resetTranscript}>Clear</Button>
                    </div>
                </div>
                <div className="recodedText">
                    <Paper elevation={3} className="textPaper">
                            <CopyToClipboard text={transcript}
                                onCopy={() => setCopied(true)}>
                                    <IconButton aria-label="delete"  onClick={handleCopyClick}>
                                        <FileCopyIcon fontSize="large"/>
                                    </IconButton>
                            </CopyToClipboard>
                            <p>{transcript}</p>
                    </Paper>
                </div>
            </div>
            

             
                
            </Dialog>
            <Snackbar open={copy} autoHideDuration={6000} onClose={handleCopyClose}>
                <Alert onClose={handleCopyClose} severity="success" style={{backgroundColor: '#262626', color: '#ec4c4c'}}>
                Copied to Clipboard
                </Alert>
            </Snackbar>
            
        </div>
    )
}

function TesseractScan() {

    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [copy, setCopy] = useState(false)
    const [text, setText] = useState(true)
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };

    const handleCopyClick = () => {
        setCopy(true);
      };

    const handleCopyClose = () => {
        setCopy(false);
      };

    const [scanText, setScanText] = useState('Scanned Text Will Appear Here. Please be patient, it might take 1-2 mins')
    const [image, setImage] = useState(null)
    const [copied, setCopied] = useState(false)

    const imageUpload = (event) => {
        setImage(URL.createObjectURL(event.target.files[0]))
    }

    const ScanText = () => {
        const worker = createWorker({
            logger: m => console.log(m)
          });
          
          (async () => {
            await worker.load();
            await worker.loadLanguage('eng');
            await worker.initialize('eng');
            const { data: { text } } = await worker.recognize(image);
            setScanText(text)
            console.log(text);
            await worker.terminate();
          })();
    }

    

    return (
        <div className="tesseractScan">
          <div className="textInfo">
            <div className="textLeft">
              <img src={convert} alt="" />
            </div>
            <div className="textRight">
              <p>
                Too lazy to type in the text? <br/>
                Well, we have it covered for you. Now you can upload an image and extract the text from it. <br />
                Get started by clicking the button below.
              </p>
            </div>
          </div>
          <Button variant="contained" color="primary" onClick={handleClickOpen}>
            Extract Text From Image
          </Button>



            <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition} >
            <AppBar className={classes.appBar}>
            <Toolbar>
                <Typography variant="h6" className={classes.title}>
                    Extract Text From Image
                </Typography>
                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                  <CloseIcon />
                </IconButton>
            </Toolbar>
            </AppBar>   
                
            <div className="scanContainer">
                <div className="image_left">

                  <img src={upload} alt="" style={{display: text ? 'block': 'none', width: '300px'}}/>

                    <label htmlFor="fileUpload" className="custom-file-upload">
                        <input id="fileUpload" type="file" onChange={imageUpload} accept="image/*" name="image" 
                            onClick={() => setText(false)}/>
                        Upload Image
                    </label>
                    
                    <img src={image} alt="" />

                    <div className="uploadText" style={{display: text ? 'block': 'none'}}>
                        <h3 className="helpText"><RiQuillPenLine/> Upload image that contain any text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> Click the SCAN Button to extract the text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> This might take a while depending on the amount of text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> Click the copy icon <FileCopyIcon /> to copy the text to clipboard</h3>
                    </div>
                    
                    
                </div>

              <div className="buttonContainer">
                <Button variant="contained" onClick={ScanText}>Scan</Button>
              </div>
                

                <div className="image_right">
                <Paper elevation={3} className="textPaper">
                    <CopyToClipboard text={scanText}
                        onCopy={() => setCopied(true)}>
                            <IconButton aria-label="delete"  onClick={handleCopyClick}>
                                <FileCopyIcon fontSize="large"/>
                            </IconButton>
                    </CopyToClipboard>
                    <p>{scanText}</p>
                </Paper>
                    
                </div>
            </div>
            </Dialog>
            <Snackbar open={copy} autoHideDuration={6000} onClose={handleCopyClose}>
                <Alert onClose={handleCopyClose} severity="success" style={{backgroundColor: '#262626', color: '#ec4c4c'}}>
                Copied to Clipboard
                </Alert>
            </Snackbar>
            
        </div>
    )
}