98 lines
2.4 KiB
JavaScript
98 lines
2.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Card, Button } from "react-bootstrap";
|
|
import CircularImage from "./CircularImage";
|
|
import PostModal from "./PostModal";
|
|
import "./CreatePost.css";
|
|
import { HiOutlinePhotograph } from "react-icons/hi";
|
|
import { AiFillYoutube } from "react-icons/ai";
|
|
import { useSelector } from "react-redux";
|
|
|
|
const CreatePost = (props) => {
|
|
const { firstname, isCurrentUser, ...rest } = props;
|
|
|
|
const user = useSelector((state) => state.currentUser);
|
|
|
|
const PLACEHOLDER_FOR_CURRENT_USER = `What's on your mind ${user.firstname}?`;
|
|
const PLACEHOLDER_FOR_ANOTHER_USER = `Write something to ${firstname}`;
|
|
|
|
const [showPostModal, setShowPostModal] = useState(false);
|
|
const [isYoutubeBtnPressed, setYoutubeBtnPressed] = useState(false);
|
|
|
|
const [text, setText] = useState("");
|
|
|
|
const handleClose = () => {
|
|
setShowPostModal(false);
|
|
setYoutubeBtnPressed(false);
|
|
};
|
|
|
|
const handleClick = () => setShowPostModal(true);
|
|
|
|
const handleYoutubeBtnClick = () => {
|
|
setYoutubeBtnPressed(true);
|
|
setShowPostModal(true);
|
|
};
|
|
|
|
function getPlaceholder() {
|
|
if (isCurrentUser) return PLACEHOLDER_FOR_CURRENT_USER;
|
|
else return PLACEHOLDER_FOR_ANOTHER_USER;
|
|
}
|
|
|
|
function getText() {
|
|
const MAX_LENGTH = 55;
|
|
const length = text.length;
|
|
if (length === 0) return getPlaceholder();
|
|
else {
|
|
let newText = text.slice(0, MAX_LENGTH);
|
|
if (length > MAX_LENGTH) newText += "...";
|
|
return newText;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Card className="create-post-card" {...rest}>
|
|
<Card.Body>
|
|
<Card.Title>
|
|
<CircularImage size="40" url={user.profilePictureURL} />
|
|
<button
|
|
type="button"
|
|
className="p-2 text-dark text-btn"
|
|
onClick={handleClick}>
|
|
{getText()}
|
|
</button>
|
|
</Card.Title>
|
|
<hr></hr>
|
|
<div className="d-flex">
|
|
<Button
|
|
variant="light"
|
|
className="add-btn"
|
|
size="sm"
|
|
onClick={handleYoutubeBtnClick}>
|
|
<AiFillYoutube size="28px" className="text-danger" />
|
|
YouTube
|
|
</Button>
|
|
<Button
|
|
variant="light"
|
|
className="add-btn"
|
|
size="sm"
|
|
onClick={handleClick}>
|
|
<HiOutlinePhotograph size="28px" className="text-success" />
|
|
Photo
|
|
</Button>
|
|
</div>
|
|
</Card.Body>
|
|
</Card>
|
|
|
|
<PostModal
|
|
show={showPostModal}
|
|
onClose={handleClose}
|
|
setText={setText}
|
|
isYoutubeBtnPressed={isYoutubeBtnPressed}
|
|
placeholder={getPlaceholder()}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CreatePost;
|