react-bootstrap#Toast JavaScript Examples

Alert = ({ handleToast, show }) => {
  return (
    <ToastContainer
      position="bottom-start"
      style={{ zIndex: "10" }}
      className="p-3"
    >
      <Toast
        show={show}
        onClose={handleToast}
        delay={60000}
        autohide
        bg="warning"
      >
        <Toast.Header>
          <strong className="me-auto">Stream Alert!</strong>
        </Toast.Header>
        <Toast.Body>
          Thank you for watching! Looks like the streaming has stopped! Please
          stay tune and refresh the page if this alert does not shows up!
        </Toast.Body>
      </Toast>
    </ToastContainer>
  );
}

function App() {

  const [show, setShow] = useState(false);
  const [notification, setNotification] = useState({title: '', body: ''});
  const [isTokenFound, setTokenFound] = useState(false);
  getToken(setTokenFound);

  onMessageListener().then(payload => {
    setShow(true);
    setNotification({title: payload.notification.title, body: payload.notification.body})
    console.log(payload);
  }).catch(err => console.log('failed: ', err));

  return (
    <div className="App">
        <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide animation style={{
          position: 'absolute',
          top: 20,
          right: 20,
          minWidth: 200
        }}>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded mr-2"
              alt=""
            />
            <strong className="mr-auto">{notification.title}</strong>
            <small>just now</small>
          </Toast.Header>
          <Toast.Body>{notification.body}</Toast.Body>
        </Toast>
      <header className="App-header">
        {isTokenFound && <h1> Notification permission enabled ?? </h1>}
        {!isTokenFound && <h1> Need notification permission ❗️ </h1>}
        <img src={logo} className="App-logo" alt="logo" />
        <Button onClick={() => setShow(true)}>Show Toast</Button>
      </header>


    </div>
  );
}

export default function TranslateCard() {
    const [input, setText] = useState("");
    const [translation, setTranslation] = useState('...');
    const [srcLanguages, setSrcLanguages] = useState([]);
    const [tgtLanguages, setTgtLanguages] = useState([]);
    const [show, setShow] = useState(false);
    const [src_lang, setSrc_Lang] = useState('English');
    const [tgt_lang, setTgt_Lang] = useState('Swahili');
    const [feedBackForm, setFeedBackForm] = useState({});
    const textareaRef = useRef(null);
    const textareaRef2= useRef(null);
    const [feedbackToken, setFeedbackToken] = useState(
        localStorage.getItem('feedbackToken') || ''
    );

    const [copySuccess, setCopySuccess] = useState('');
    const [showToast, setShowToast] = useState('');

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const copyToClipboard = () => {
        setCopySuccess('Translation Copied!');
        setShowToast(true);
    };

    const handleChangeSrc_Lang= (e) => {
        //localstorage
        const name = e.target.value
        localStorage.setItem('src_lang', name);

        //set state
        setSrc_Lang(name);
        //get target languages
        const target = srcLanguages.filter(x => x.name === name)
        const target_languages = target[0].targets 
        setTgtLanguages(target_languages)
        setTgt_Lang(target_languages[0].name)       
    };

    const handleChangeTgt_Lang = (e) => {
        //localstorage
        localStorage.setItem('tgt_lang', e.target.value);

        //set state
        setTgt_Lang(e.target.value);

        // console.log(e.target.value)
        
    };

    const handleTranslate = (e) => {
        console.log('translating ..')
        console.log(src_lang)
        console.log(tgt_lang)
        e.preventDefault()
    
        fetch( 
            '/translate', 
            {
                method: 'post', 
                // mode: 'no-cors',
                body: JSON.stringify({input, src_lang, tgt_lang}),
                headers: {
                    'Content-Type': 'application/json'
                  },
                // credentials: 'same-origin',
            })
          .then(res => res.json())
          .then(data => {
            //   console.log({ data })
            // do something here
            setTranslation(data.output)
          })
    };

    const submitFeedBack = (formData) => {
        // first set state of feedback Form
        setFeedBackForm({...formData});
        // then submit feedback form to db here
        // here's where you write the function to push feedback to backend

        console.log({formData})

        fetch( 
            '/save', 
            {
                method: 'post', 
                // mode: 'no-cors',
                body: JSON.stringify({
                    src_lang: formData.src_lang,
                    tgt_lang: formData.tgt_lang,
                    accurate_translation:  formData.accurate_translation,
                    know_src_lang: formData.know_src_lang,
                    know_tgt_lang:  formData.know_tgt_lang,
                    own_translation: formData.own_translation,
                    text:  formData.text,
                    translation: formData.translation,
                    understand_translation: formData.understand_translation,
                    feedbackToken: formData.feedbackToken
            }),
                headers: {
                    'Content-Type': 'application/json'
                  },
                // credentials: 'same-origin',
            })
          .then(res => res.json())
          .then(data => {
            //console.log({data})
            // do something here
            handleClear()
          })

    }


    const handleClear = () => {
        // clears text part
        setText('');
        // clear translation
        setTranslation('...');
    }

    useLayoutEffect(() => {
        // Reset height - important to shrink on delete
        textareaRef.current.style.height = "inherit";
        // Set height
        textareaRef.current.style.height = `${Math.max(
          textareaRef.current.scrollHeight,
          MIN_TEXTAREA_HEIGHT
        )}px`;
      }, [input]);

    useLayoutEffect(() => {
        // Reset height - important to shrink on delete
        textareaRef2.current.style.height = "inherit";
        // Set height
        textareaRef2.current.style.height = `${Math.max(
          textareaRef2.current.scrollHeight,
          MIN_TEXTAREA_HEIGHT
        )}px`;
      }, [input]);

    //   console.log({feedbackToken});
    //   console.log({tgt_lang});

    // console.log({feedbackToken});

    let srcLang = [];
    let tgtLang = [];

    useEffect(()=> {
        // define fetch function 
        let src = [];
        let tgt = [];
        const fetchLanguages = async ()=> {
        await fetch( 
            '/translate', 
            {
                method: 'get', 
                headers: {
                    'Content-Type': 'application/json'
                  },
                // credentials: 'same-origin',
            })
          .then(res => res.json())
          .then(data => {
              console.log({ data})
            // do something here
            setSrcLanguages(data)
            setTgtLanguages(data[0].targets)
        
          })
        

        }
        // call fetch function
        fetchLanguages()

    }, [])
    // console.log(srcLanguages)
    // console.log(tgtLanguages)
    // console.log(tgt_lang)

    return (
        <Container className="border">
            
            <Modal 
                scrollable={true} 
                show={show} 
                onHide={handleClose} 
                centered 
                size="lg"
            >
                <Modal.Header closeButton style={{backgroundColor:'#F2F0E9'}}>
                    <Col style={{textAlign: 'center'}}>
                        <h4 style={{ fontSize: 14, color: '#717171' }}>GIVE FEEDBACK</h4>
                        <p style={{ fontSize: 11, color: 'gray' }}>We appreciate your feedback and your contribution will help make our translation better.</p>
                    </Col>
                </Modal.Header>
                <Modal.Body>
                    <MultiStepForm 
                        src_lang={src_lang} 
                        tgt_lang={tgt_lang} 
                        text={input} 
                        translation={translation} 
                        setShow={setShow}
                        submitFeedBack={submitFeedBack}
                        setFeedbackToken={setFeedbackToken}
                        feedbackToken={feedbackToken}
                    />
                </Modal.Body>
            </Modal>

            <Row className="header" style={{ backgroundColor: 'aliceblue', height: 60, fontSize: '1rem', padding: '0.5rem 0.5rem' }}>
                <Col className="border-right" style={{marginBottom: 10}}>
                    <Row>
                        <Col md={6} xs={12}>
                            <Form inline>
                                <Form.Group controlId="fromform">
                                    <Form.Label>From: </Form.Label>
                                    <Form.Control value={src_lang} style={{ border: 0, marginLeft: 10 }} as="select" size="sm" custom onChange={handleChangeSrc_Lang}>
                                    {
                                        srcLanguages && srcLanguages.map((option, index) => {
                                        return (<option key={index} value={option.name}>{option.name}</option>)
                                        })
                                    }
                                    </Form.Control>
                                </Form.Group>
                            </Form>
                        </Col>
                        {/* <Col className="d-none d-sm-block">
                             <Row>
                            {
                                srcLanguages.length > 1 && srcLanguages
                                .filter(x => x.value !== src_lang)
                                .slice(0, 2)
                                .map((option, index) => {
                                return (
                                    <Button key={option.id} variant="light" size="sm" onClick={() => setSrc_Lang(option.name)}>{option.name}</Button>                                   )
                                })
                            }
                            </Row>
                        </Col> */}
                    </Row>
                </Col>
                <Col style={{ marginLeft: '15px' }}>
                    <Row>
                        <Col md={6} xs={12}>
                            <Form inline>
                                <Form.Group controlId="fromform" as={Row}>
                                <Form.Label>To: </Form.Label>
                                    <Form.Control md={6} xs={12} value={tgt_lang} style={{ border: 0, marginLeft: 10 }} as="select" size="sm" custom onChange={handleChangeTgt_Lang}>
                        
                                    {
                                        tgtLanguages.map((option, index) => {
                                        return (<option key={index} value={option.name}>{option.name}</option>)
                                        })
                                    }

                                    </Form.Control>
                                </Form.Group>
                            </Form>
                        </Col>
                        {/* <Col className="d-none d-sm-block">
                            <Row>
                            {
                                tgtLanguages.length > 1 && tgtLanguages
                                .filter(x => x.value !== tgt_lang)
                                .slice(0, 2)
                                .map((option, index) => {
                                return (
                                    <Button key={option.id} variant="light" size="sm" onClick={() => setTgt_Lang(option.name)}>{option.name}</Button>                                   )
                                })
                            }
                            </Row>
                        </Col> */}
                    </Row>
                </Col>
            </Row>
            <Row style={{ minHeight: '250px', marginTop: '20px' }}>
                <Col md={6} xs={12} className="ml-1" style={{ paddingTop: '20px', paddingBottom: '20px', marginLeft: '10px' }}>
                    <Form>
                        <Form.Group controlId="Form.ControlTextarea">
                            <Form.Control 
                                as="textarea"
                                placeholder="Enter Text" 
                                rows="3" 
                                name="text"
                                ref={textareaRef}
                                style={{ fontSize: 24, minHeight: MIN_TEXTAREA_HEIGHT, resize: 'none' }} 
                                value={input}
                                onChange={e => setText(e.target.value)}
                            />
                        </Form.Group>
                    </Form>
                    
                    <Row>
                        <Col md={10} xs={10}>
                            <Button variant="primary" style={{ marginBottom: 10 }} onClick={handleTranslate}>Translate</Button>
                        </Col>
                        <Col md={2} xs={2} lg="2">
                            <Button style = {{color:'grey'}} variant = 'link' size="sm" onClick={handleClear}><i className="fas fa-times"></i></Button>{' '}
                        </Col>
                    </Row>
                </Col>
                <Col style={{ paddingTop: '20px', paddingBottom: '20px' }}>
                    <Form>
                        <Form.Group controlId="Form.ControlTextarea2">
                            <Form.Control 
                                controlid="translation"
                                as="textarea"
                                placeholder="..." 
                                rows="3" 
                                name="text"
                                ref={textareaRef2}
                                style={{ fontSize: 24, minHeight: MIN_TEXTAREA_HEIGHT, resize: 'none' }} 
                                value={translation}
                                readOnly
                                isInvalid={!translation}
                                // onChange={e => setText(e.target.value)}
                                // autoFocus={showToast}
                            />
                            {!translation && (
                                <Form.Control.Feedback type="invalid">
                                    Sorry, there’s no translation for that phrase.
                                </Form.Control.Feedback>
                            )}
                        </Form.Group>
                    </Form>
                    
                    <Row>
                        <Col md={10} xs={10}>
                            {/* <Button variant="light" size = 'sm' style={{ bottom: '10px' }} onClick={handleShow}>Give Feedback on Translation</Button> */}
                        </Col>
                        <Col md={2} xs={2} lg="2">
                            <OverlayTrigger
                                placement='top'
                                overlay={
                                <Tooltip id={'tooltip-top'}>
                                    Copy <strong>Translation</strong>.
                                </Tooltip>
                                }
                            >
                                <CopyToClipboard text={translation} onCopy={copyToClipboard}>
                                    <Button variant="light" size="sm"><i className="fa fa-copy"></i></Button>
                                </CopyToClipboard>
                            </OverlayTrigger>
                        </Col>
                    </Row>
                </Col>
            </Row>

            <div aria-live="polite" aria-atomic="true" style={{ position: 'relative' }}>
                <Toast
                    onClose={() => setShowToast(false)} 
                    show={showToast} 
                    delay={3000} 
                    autohide
                    style={{
                        position: 'absolute',
                        bottom: 0,
                        left: 0
                    }}
                >
                    <Toast.Body style={{color: 'black'}}>{copySuccess}</Toast.Body>
                </Toast>
            </div>
        </Container>
    )
}

export default function Login({ onLogIn }) {
  const [username, setUsername] = useState(
    () => DEMO_USERS[Math.floor(Math.random() * DEMO_USERS.length)]
  );
  const [password, setPassword] = useState("password123");
  const [error, setError] = useState(null);

  const onSubmit = async (event) => {
    event.preventDefault();
    onLogIn(username, password, setError);
  };

  return (
    <>
      <div className="login-form text-center login-page">
        <div
          className="rounded"
          style={{
            boxShadow: "0 0.75rem 1.5rem rgba(18,38,63,.03)",
          }}
        >
          <div className="position-relative">
            <div
              className="row no-gutters align-items-center"
              style={{
                maxWidth: 400,
                backgroundColor: "rgba(85, 110, 230, 0.25)",
                paddingLeft: 20,
                paddingRight: 20,
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
              }}
            >
              <div className="col text-primary text-left">
                <h3 className="font-size-15">Welcome Back !</h3>
                <p>Sign in to continue</p>
              </div>
              <div className="col align-self-end">
                <img
                  alt="welcome back"
                  style={{ maxWidth: "100%" }}
                  src={`${process.env.PUBLIC_URL}/welcome-back.png`}
                />
              </div>
            </div>
            <div
              className="position-absolute"
              style={{ bottom: -36, left: 20 }}
            >
              <div
                style={{
                  backgroundColor: "rgb(239, 242, 247)",
                  width: 72,
                  height: 72,
                }}
                className="rounded-circle d-flex align-items-center justify-content-center"
              >
                <Logo width={34} height={34} />
              </div>
            </div>
          </div>

          <form
            className="bg-white text-left px-4"
            style={{
              paddingTop: 58,
              borderBottomLeftRadius: 4,
              borderBottomRightRadius: 4,
            }}
            onSubmit={onSubmit}
          >
            <label className="font-size-12">Name</label>

            <div className="username-select mb-3">
              <UsernameSelect
                username={username}
                setUsername={setUsername}
                names={DEMO_USERS}
              />
            </div>

            <label htmlFor="inputPassword" className="font-size-12">
              Password
            </label>
            <input
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              type="password"
              id="inputPassword"
              className="form-control"
              placeholder="Password"
              required
            />
            <div style={{ height: 30 }} />
            <button className="btn btn-lg btn-primary btn-block" type="submit">
              Sign in
            </button>
            <div className="login-error-anchor">
              <div className="toast-box">
                <Toast
                  style={{ minWidth: 277 }}
                  onClose={() => setError(null)}
                  show={error !== null}
                  delay={3000}
                  autohide
                >
                  <Toast.Header>
                    <img
                      src="holder.js/20x20?text=%20"
                      className="rounded mr-2"
                      alt=""
                    />
                    <strong className="mr-auto">Error</strong>
                  </Toast.Header>
                  <Toast.Body>{error}</Toast.Body>
                </Toast>
              </div>
            </div>
            <div style={{ height: 30 }} />
          </form>
        </div>
      </div>
    </>
  );
}

export default function Login({ onLogIn,setShowLogin }) {
  const [username, setUsername] = useState(
    () => DEMO_USERS[Math.floor(Math.random() * DEMO_USERS.length)]
  );
  const [password, setPassword] = useState("password123");
  const [error, setError] = useState(null);

  const onSubmit = async (event) => {
    event.preventDefault();
    onLogIn(username, password, setShowLogin);
  };

  return (
    <>
      <div className="login-form text-center login-page">
        <div
          className="rounded"
          style={{
            boxShadow: "0 0.75rem 1.5rem rgba(18,38,63,.03)",
          }}
        >
          <div className="position-relative">
            <div
              className="row no-gutters align-items-center"
              style={{
                maxWidth: 400,
                backgroundColor: "rgba(85, 110, 230, 0.25)",
                paddingLeft: 20,
                paddingRight: 20,
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
              }}
            >
              <div className="col text-primary text-left">
                <h3 className="font-size-15">Welcome Back !</h3>
                <p>Sign in to continue</p>
              </div>
              <div className="col align-self-end">
                <img
                  alt="welcome back"
                  style={{ maxWidth: "100%" }}
                  src={`${process.env.PUBLIC_URL}/welcome-back.png`}
                />
              </div>
            </div>
            <div
              className="position-absolute"
              style={{ bottom: -36, left: 20 }}
            >
              <div
                style={{
                  backgroundColor: "rgb(239, 242, 247)",
                  width: 72,
                  height: 72,
                }}
                className="rounded-circle d-flex align-items-center justify-content-center"
              >
                <Logo width={34} height={34} />
              </div>
            </div>
          </div>

          <form
            className="bg-white text-left px-4"
            style={{
              paddingTop: 58,
              borderBottomLeftRadius: 4,
              borderBottomRightRadius: 4,
            }}
            onSubmit={onSubmit}
          >
            <label className="font-size-12">Name</label>

            <div className="username-select mb-3">
              <UsernameSelect
                username={username}
                setUsername={setUsername}
                names={DEMO_USERS}
              />
            </div>

            <label htmlFor="inputPassword" className="font-size-12">
              Password
            </label>
            <input
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              type="password"
              id="inputPassword"
              className="form-control"
              placeholder="Password"
              required
            />
            <div style={{ height: 30 }} />
            <button className="btn btn-lg btn-primary btn-block" type="submit">
              Sign in
            </button>
            <div className="login-error-anchor">
              <div className="toast-box">
                <Toast
                  style={{ minWidth: 277 }}
                  onClose={() => setError(null)}
                  show={error !== null}
                  delay={3000}
                  autohide
                >
                  <Toast.Header>
                    <img
                      src="holder.js/20x20?text=%20"
                      className="rounded mr-2"
                      alt=""
                    />
                    <strong className="mr-auto">Error</strong>
                  </Toast.Header>
                  <Toast.Body>{error}</Toast.Body>
                </Toast>
              </div>
            </div>
            <div style={{ height: 30 }} />
          </form>
        </div>
      </div>
    </>
  );
}