react/src/components/middlewares/post/post.jsx

import React, { useContext, useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import PostSavedButton from './PostSavedButton';
import PostReButton from './PostReButton';
import DeletedPost from './DeletedPost';
import PostCommentWrite from './PostCommentWrite';
import PostComments from './PostComments';
import { openPopup, renderPopup } from '../../../middlewares/popups/popup';
import { GSContext } from '../../../middlewares/GlobalStore';
import Popup from '../../popup/Popup';
import { convertHTML } from '../../../middlewares/general/Text';

export default function Post({data}) {
    const {globalState} = useContext(GSContext);

    console.log();

    if(data.reblog === true){
        return (
            <div key={data.id} className='flex bg-white rounded-2xl overflow-hidden w-full'>
                <div className='flex flex-col p-2 gap-4 w-full'>
                    <div className='flex justify-between'>
                        <div className='flex gap-1 items-center'>
                            {/* <div className='flex'>
                                <img src='/profile-photo.svg' className='h-12'></img>
                            </div> */}
                            <div className='flex flex-col'>
                                <Link to={"/profile/" + data.reUser.username}>{data.reUser.first_name} {data.reUser.second_name}</Link>
                                <Link to={"/profile/" + data.reUser.username}>@{data.reUser.username}</Link>
                            </div>
                        </div>
                        <p>{data.reBlog.date.updatedAt.normal.dateText}</p>
                    </div>
                    <div className='flex flex-col p-2 gap-4 w-full border-solid border-2 rounded-2xl bg-gray-100'>
                        <div className='flex justify-between'>
                            <div className='flex gap-1 items-center'>
                                {/* <div className='flex'>
                                    <img src='/profile-photo.svg' className='h-12'></img>
                                </div> */}
                                <div className='flex flex-col'>
                                    <Link to={"/profile/" + data.user.username}>{data.user.first_name} {data.user.second_name}</Link>
                                    <Link to={"/profile/" + data.user.username}>@{data.user.username}</Link>
                                </div>
                            </div>
                            <div className='flex flex-col justify-end text-right p-1'>
                                <Link to={"/blogs/" + data.category.href}>{data.category.title}</Link>
                                <Link to={"/blog/" + data.id}>{data.date.createdAt.normal.dateText}</Link>
                            </div>
                        </div>
                        <div>
                            <p className='font-bold'>{data.title}</p>
                            <p>{data.text}</p>
                        </div>
                        {/* <div className='flex max-h-96 bg-black rounded-2xl'>
                            <img className='w-full object-contain' src='/1.1.jpg'></img>
                        </div> */}
                        <div className='flex justify-between gap-2'>
                            <PostSavedButton data={data} postId={data.id}/>
                            <PostReButton data={data} postId={data.id}/>
                        </div>
                        <div className='flex flex-col'>
                            <hr/>
                            <p onClick={() => (data.comments.length > 0) && renderPopup(globalState.states.setPopup, "Yorumlar", <PostComments postId={data.id}/>)} className='flex p-2 cursor-pointer font-bold'> {(data.comments.length > 0) ? data.comments.length + " yorum var" : "Hiç yorum yok"}</p>
                            {/* <PostComments data={data.comments}/> */}
                            <hr/>
                            <PostCommentWrite blogId={data.id}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }else if(data.reblog === undefined){
        return (
            <div key={data.id} className='flex bg-white rounded-2xl overflow-hidden w-full'>
                <div className='flex flex-col p-2 gap-4 w-full'>
                    <div className='flex justify-between'>
                        <div className='flex gap-1 items-center'>
                            {/* <div className='flex'>
                                <img src='/profile-photo.svg' className='h-12'></img>
                            </div> */}
                            <div className='flex flex-col'>
                                <Link to={"/profile/" + data.user.username}>{data.user.first_name} {data.user.second_name}</Link>
                                <Link to={"/profile/" + data.user.username}>@{data.user.username}</Link>
                            </div>
                        </div>
                        <div className='flex flex-col p-1 justify-end text-right'>
                            <Link to={"/blogs/" + data.category.href}>{data.category.title}</Link>
                            <Link to={"/blog/" + data.id}>{data.date.createdAt.normal.dateText}</Link>
                        </div>
                    </div>
                    <div>
                        <p className='font-bold'>{data.title}</p>
                        <p dangerouslySetInnerHTML={{ __html: convertHTML(data.text) }}></p>
                    </div>
                    {/* <div className='flex max-h-96 bg-black rounded-2xl'>
                        <img className='w-full object-contain' src='/profile-photo.svg'></img>
                    </div> */}
                    <div className='flex justify-between gap-2'>
                        <PostSavedButton data={data} postId={data.id}/>
                        <PostReButton data={data} postId={data.id}/>
                    </div>
                    <div className='flex flex-col'>
                        <hr/>
                        <p onClick={() => (data.comments.length > 0) && renderPopup(globalState.states.setPopup, "Yorumlar", <PostComments postId={data.id}/>)} className='flex p-2 cursor-pointer font-bold'> {(data.comments.length > 0) ? data.comments.length + " yorum var" : "Hiç yorum yok"}</p>
                        {/* <PostComments data={data.comments}/> */}
                        <hr/>
                        <PostCommentWrite blogId={data.id}/>
                    </div>
                </div>
            </div>
        );
    }
};