{"size": 3743, "ext": "js", "max_stars_repo_path": "src/components/MessageSender/SendMessage.js", "max_stars_repo_name": "serifselim/linkedin-clone", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/MessageSender/SendMessage.js", "max_issues_repo_name": "serifselim/linkedin-clone", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/MessageSender/SendMessage.js", "max_forks_repo_name": "serifselim/linkedin-clone", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 38.9895833333, "max_line_length": 226, "alphanum_fraction": 0.429869089}
import React, { useState } from 'react';
import { ProfileBox, ProfileContent, SendMessageContainer, SendMessageContext, TopBox, ProfileDetails, MessageBox, MessageArea, BottomBox, BottomContent, ImageInput, SendButton, ImageInputLabel } from './MessageSender.styled';
import { ImCancelCircle } from 'react-icons/im';
import { useDispatch, useSelector } from 'react-redux';
import { setPostItem } from '../../features/post/postSlice';
import { MdImageSearch } from 'react-icons/md';
import { setImage } from '../../app/utils';

const SendMessage = ({ setIsOpen }) => {

    const { currentUser } = useSelector(state => state.user);
    const dispatch = useDispatch();

    const [postMessage, setPostMessage] = useState('');
    const [postImage, setPostImage] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();

        const post = {
            postOwner: currentUser,
            postMessage,
            postImageURL: postImage
        };

        dispatch(setPostItem(post));
        setIsOpen(false);
    };

    return (
        <SendMessageContainer>
            <SendMessageContext>
                <TopBox>
                    <h2>
                        Gönderi Oluşturun
                    </h2>
                    <a href="/#" onClick={() => setIsOpen(false)}>
                        <ImCancelCircle size={25} color="gray" />
                    </a>
                </TopBox>

                <ProfileBox>
                    <ProfileContent>
                        <img src={currentUser.profilePic} alt="profile" />

                        <ProfileDetails>
                            <h3>
                                {currentUser.userName}
                            </h3>
                            <span>
                                {currentUser.job}
                            </span>
                        </ProfileDetails>
                    </ProfileContent>
                </ProfileBox>

                <form onSubmit={handleSubmit}>
                    <MessageBox>
                        <MessageArea value={postMessage} onChange={(e) => setPostMessage(e.target.value)} type="textarea" required placeholder='Ne hakkında konuşmak istiyorsunuz?' />
                    </MessageBox>

                    <BottomBox>
                        <BottomContent>
                            {/* <ImageInput value={postImageURL} onChange={(e) => setPostImageURL(e.target.value)} type='url' placeholder='Resim ekle (URL)' /> */}
                            <ImageInput
                                type='file'
                                accept='image/*'
                                id="postImage"
                                onChangeCapture={(e) => setImage({
                                    file: e.target.files[0],
                                    setState: setPostImage
                                })}
                            />{
                                postImage
                                    ?
                                    <ImageInputLabel>Görsel Tanımlandı.</ImageInputLabel>
                                    :
                                    <ImageInputLabel htmlFor='postImage'>
                                        Görsel Ekle
                                        <MdImageSearch size={20} />
                                    </ImageInputLabel>
                            }

                            <SendButton>
                                Yayınla
                            </SendButton>
                        </BottomContent>
                    </BottomBox>
                </form>

            </SendMessageContext>
        </SendMessageContainer>
    );
};

export default SendMessage;