react-bootstrap#Figure JavaScript Examples

function Heading(props) {
    let { title, btnLogout, backButton, btnProfile } = props

    let dispatch = useDispatch()
    let history = useHistory()
    const isMobile = useMediaQuery({ query: '(max-width: 576px)' })
    let { user: authUser, isAuthenticated } = useSelector(state => state.auth)
    let [btnTxt, setBtnTxt] = React.useState("Don't click")
    if (backButton)
        backButton = (<button
            onClick={() => { isAuthenticated ? history.goBack() : history.push('/') }}
            className="ml-2 btn btn-naked-primary rounded-circle text-primary">
            <FontAwesomeIcon icon={faArrowLeft} size="lg" />
        </button>)
    if (btnLogout)
        btnLogout = (<button onClick={() => { dispatch(logout()) }}
            onMouseEnter={() => { setBtnTxt("Bola naa yaar") }}
            onMouseLeave={() => { setBtnTxt("Never click it") }}
            className="btn btn-outline-primary rounded-pill px-2 py-1 mr-2 font-weight-bold"
        >{btnTxt}
        </button>)
    if (btnProfile && isAuthenticated)
        btnProfile = (
            <Link
                className="d-flex align-items-end"
                to={`/user/${authUser.screen_name}`}
            >
                <Figure
                    className="bg-border-color rounded-circle overflow-hidden my-auto ml-2"
                    style={{ height: "35px", width: "35px" }}
                >
                    <Figure.Image
                        src={(authUser.default_profile_image) ? '/img/default-profile-vector.svg' : authUser.profile_image_url_https}
                        className="w-100 h-100"
                    />
                </Figure>
            </Link>
        )
    return (
        <div className="d-flex justify-content-between border-bottom sticky-top bg-white align-items-center">
            <Row className="d-flex align-items-center">
                {backButton}
                {isMobile && btnProfile}
                <h5 className="my-3 mx-2 font-weight-bold">{title}</h5>
            </Row>
            {btnLogout}
        </div>
    )
}

UserPopover = React.forwardRef(
    ({ popper, user, show, setShow, ...props }, ref) => {
        let dispatch = useDispatch()
        return (<Popover
            className="border-0"
            ref={ref}
            id="user-popover"
            {...props}>
            <Card
                onMouseEnter={() => { setShow(true) }}
                onMouseLeave={() => { setShow(undefined) }}
                className="border p-3 bg-transparent m-0">
                <Row className="d-flex justify-content-between align-items-center">
                    <Figure
                        style={{ height: "65px", width: "65px" }}
                        className="rounded-circle overflow-hidden bg-primary mr-3"
                    >
                        <Figure.Image
                            className="w-100 h-100"
                            src={user.profile_image_url_https}
                        />
                    </Figure>
                    <FollowButton
                        user={user}
                        followUser={() => { dispatch(followUser(user.screen_name)) }}
                        unFollowUser={() => { dispatch(unFollowUser(user.screen_name)) }}
                    />
                </Row>
                <div className="flex flex-column">
                    <b>{user.name}</b>
                    <div className="text-muted mb-2 mt-0">{user.screen_name}</div>
                </div>
                <blockquote>{truncateText(user.description, 7)}</blockquote>
                <Row className="d-flex flex-column">
                    <span className="text-muted">{user.location}</span>
                    <span className="text-muted">Joined {new Date(user.created_at).toDateString()}</span>
                </Row>
                <Row className="d-flex mt-1 mb-2">
                    <em className="mr-2">{numFormatter(user.followers_count)} <span className="text-muted">Followers</span></em>
                    <div className="mr-2">{numFormatter(user.friends_count)} <span className="text-muted">Following</span></div>
                </Row>
            </Card>
        </Popover>)
    }
)

render() {
        let disabled = this.state.disabled
        return (
            <Col style={{ maxWidth: "400px" }} className="mx-auto border px-3 pb-3">
                {!this.props.compact && (
                    <Figure className='d-flex flex-column align-items-end'>
                        <Figure.Image
                            className='align-self-start'
                            width={250}
                            height={250}
                            src="/img/login-thumb-vector.svg"
                            alt="people vector"
                        />
                        <Figure.Caption as="a" href="https://www.freepik.com/free-photos-vectors/people">
                            <small className="text-muted text-wrap">People vector created by pikisuperstar - www.freepik.com</small>
                        </Figure.Caption>
                    </Figure>
                )}
                <h5 className="font-weight-bolder mt-3">
                    Login to see what’s happening in the muzamilverse right now
                </h5>
                <fieldset disabled={disabled}>
                    <Form onSubmit={this.handleSubmit} >
                        <Form.Group controlId="username">
                            <Form.Label>Username</Form.Label>
                            <Form.Control
                                onChange={this.handleChange}
                                value={this.state.username}
                                type="text"
                                name="username"
                                autoCapitalize="off"
                            ></Form.Control>
                        </Form.Group>
                        <Form.Group className="mb-0" controlId="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control
                                onChange={this.handleChange}
                                value={this.state.password}
                                autoCorrect="off"
                                type="password"
                                name="password"
                            ></Form.Control>
                        </Form.Group>
                        <p>
                            {/* <small ><Link disabled to="/help">Forgot password?</Link></small>
                            <br /> */}
                            <small className="text-danger">{this.state.error}</small>
                        </p>
                        <div className="d-flex flex-column align-items-center">
                            <button type="submit" className="btn btn-outline-primary btn-block rounded-pill font-weight-bold">
                                Log in
                            </button>
                            <small className="text-muted m-2">or</small>
                            <Link
                                to="/signup"
                                className="btn btn-primary btn-block rounded-pill font-weight-bold"
                            >
                                Sign up
                            </Link>
                        </div>
                    </Form>
                </fieldset>
            </Col>
        )
    }

render() {
        let disabled = this.state.disabled
        return (
            <Col style={{ maxWidth: "400px" }} className="mx-auto border px-3 pb-3">
                <Figure className='d-flex flex-column align-items-end'>
                    <Figure.Image
                        className='align-self-start'
                        width={250}
                        height={250}
                        src="/img/login-thumb-vector.svg"
                        alt="people vector"
                    />
                    <Figure.Caption as="a" href="https://www.freepik.com/free-photos-vectors/people">
                        <small className="text-muted text-wrap">People vector created by pikisuperstar - www.freepik.com</small>
                    </Figure.Caption>
                </Figure>
                <h5 className="font-weight-bolder">
                    Signup to see what’s happening in the muzamilverse right now
                </h5>
                <fieldset disabled={disabled}>
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Group controlId="username">
                            <Form.Label>Choose a username - <small className="text-muted">required</small></Form.Label>
                            <Form.Control
                                type="text"
                                name="username"
                                autoCapitalize="off"
                                autoComplete="off"
                            ></Form.Control>
                        </Form.Group>
                        <Form.Group controlId="fillname">
                            <Form.Label>Full name - <small className="text-muted">optional</small></Form.Label>
                            <Form.Control
                                type="text"
                                name="fullname"
                                autoCapitalize="on"
                            ></Form.Control>
                        </Form.Group>
                        <Form.Group controlId="password">
                            <Form.Label>Choose a password - <small className="text-muted">required</small></Form.Label>
                            <Form.Control
                                type="password"
                                name="password"
                            ></Form.Control>
                        </Form.Group>
                        <p className="mt-n2">
                            <small>Already have account? <Link to="/login">login instead</Link></small>
                            <br />
                            <small className="text-danger">{this.state.error}</small>
                        </p>
                        <div className="d-flex flex-column align-items-center">
                            <button
                                type="submit"
                                className="btn btn-outline-primary font-weight-bold rounded-pill btn-block">
                                <span>Sign up</span>
                            </button>
                            <div className="seperator"><span>or</span></div>
                            <Link
                                to="login"
                                className="btn btn-primary font-weight-bold rounded-pill btn-block">
                                <span>Log in</span>
                            </Link>
                        </div>
                    </Form>
                </fieldset>
            </Col>
        )
    }

export default function PostsList(props) {
    let { posts = [], status, getPosts, no_reply_tag } = props

    /* 
        Not the best implementation, but I dont want to spend hours to check if changing it breaks anything
    */
    // eslint-disable-next-line
    useEffect(useCallback(() => {
        if ((status === 'idle' || status === 'done') && !posts.length) {
            getPosts()
            console.log('fetching on posts load, status:', status)
        }
    }, [status, posts, getPosts]), [getPosts])
    useBottomScrollListener(useCallback(() => {
        if (status === "idle" && posts.length) {
            getPosts()
            console.log('loading more posts, status:', status)
        }
    }, [status, posts, getPosts]), 700, 200, null, true)
    if (status === 'loading' && !posts.length)
        return <Spinner />
    return (
        <ListGroup variant="flush" className="border-bottom">
            {(posts.length > 0) ? posts.map(post => {
                let { retweeted_by } = post
                return (
                    <ListGroup.Item
                        className="px-3"
                        action
                        as={"div"}
                        // to={`/post/${post.id_str}`}
                        key={post.id_str + (retweeted_by && retweeted_by.id_str)}
                    >
                        <Row className="d-flex px-3 pb-1 mt-n2 text-muted">
                            <PostTag no_reply_tag={no_reply_tag} post={post} />
                        </Row>
                        <Link className="stretched-link" to={`/post/${post.id_str}`}></Link>
                        <Media className="mb-n2 w-100">
                            <UserLink
                                user={post.user}
                                className="rounded-circle"
                                to={`/user/${post.user.screen_name}`}
                            >
                                <Figure
                                    className="bg-border-color rounded-circle mr-2 overflow-hidden"
                                    style={{ height: "50px", width: "50px" }}
                                >
                                    <Figure.Image
                                        src={(post.user.default_profile_image) ? '/img/default-profile-vector.svg' : post.user.profile_image_url_https}
                                        className="w-100 h-100"
                                    />
                                </Figure>
                            </UserLink>
                            <Media.Body className="w-50">
                                <Row className="d-flex align-items-center">
                                    <UserLink
                                        user={post.user}
                                        to={`/user/${post.user.screen_name}`}
                                        className="text-dark font-weight-bold mr-1">
                                        {post.user.name}
                                    </UserLink>
                                    {/* tick */}
                                    <span className="text-muted mr-1">@{post.user.screen_name}</span>
                                    <pre className="m-0 text-muted">{" - "}</pre>
                                    <span className="text-muted"><ReactTimeAgo date={Date.parse(post.created_at)} timeStyle="twitter" /></span>
                                </Row>
                                <Row className="mb-n1 mt-1"><blockquote className="mb-1 mw-100">
                                    <PostText to={`/post/${post.id_str}`} post={post} />
                                </blockquote></Row>
                                <Row>
                                    <MultiMedia
                                        className="mt-2"
                                        post={post} />
                                    <QuotedPost className="mt-2" post={!no_reply_tag && post.quoted_status} />
                                </Row>
                                <Row className="d-flex justify-content-end align-items-center position-static">
                                    <ReactionsBar post={post} />
                                </Row>
                            </Media.Body>
                        </Media>
                    </ListGroup.Item>
                )
            }) : (status === 'idle' &&
                <div className="message">No posts for you right now</div>
            )}
            {status === 'loading' && <Spinner />}
            {status === 'error' && <TryAgain fn={getPosts} />}
        </ListGroup>
    )
}