123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- import { actionOnePost, actionUploadFile } from '../../actions'
- import user from '../../materials/user.png'
- import React, { useState, useEffect } from 'react'
- import { Card } from '../../components/PostCard'
- import ListOfUsers from '../../components/ListOfUsers'
- import { connect } from 'react-redux'
- import { Avatar, Button } from 'antd'
- import { actionFullProfilePageUser } from '../../redux/saga'
- import { Row, Col } from 'antd'
- import { CSubscribe } from '../../components/Subscribe'
- import { CEditSetting } from '../setting'
- import { Link,useParams} from 'react-router-dom'
- export const PageAboutUser = ({
- // match: {
- // params: { _id },
- // },
-
- my_Id,
- aboutUser: { login, nick, createdAt, avatar, followers, following } = {},
- allPosts,
- onPost,
- onAboutUser,
- countAllPostsUser,
- }) => {
- const { _id } = useParams();
- useEffect(() => {
- onAboutUser(_id)
- // console.log('USER DATA ', login, _id)
- }, [_id])
- const checkMyId = _id === my_Id
- return (
- <>
- <Row>
- <Col span={12} offset={6}>
- <section className="AboutMe">
- <Row>
- {avatar?.url ? (
- <Avatar
- style={{
- marginRight: '20px',
- width: '150px',
- height: '150px',
- }}
- src={'/' + avatar?.url}
- />
- ) : (
- <Avatar
- style={{
- marginRight: '20px',
- width: '150px',
- height: '150px',
- }}
- src={user}
- />
- )}
- <div className="Info">
- {login ? <h1> {login}</h1> : <h1> {'Anon'}</h1>}
- <h3>
- Created Account:{' '}
- {new Intl.DateTimeFormat('en-GB').format(createdAt)}
- </h3>
- <div style={{ display: 'flex' }}>
- {countAllPostsUser > 0 ? (
- <div
- style={{
- display: 'flex',
- justifyContent: 'space-between',
- }}
- >
- <h3> {countAllPostsUser} posts </h3>
- </div>
- ) : (
- <h3> 0 posts </h3>
- )}
- <ListOfUsers
- listResult={followers}
- listUsers={followers}
- onPageData={onAboutUser}
- text={'followers'}
- />
- <ListOfUsers
- listResult={following}
- listUsers={following}
- onPageData={onAboutUser}
- text={'following'}
- />
- </div>
- <h3> nick: {nick == null ? login : nick}</h3>
- {checkMyId ? (
- <>
- <CEditSetting />
- </>
- ) : (
- <CSubscribe />
- )}
- </div>
- </Row>
- </section>
- </Col>
- </Row>
- <Row>
- <Col span={17} offset={4}>
- <div
- style={{
- display: 'flex',
- flexWrap: 'wrap',
- // padding: '20px',
- margin: '20px',
- }}
- >
- {(allPosts || [])?.map((item) => (
- <Card post={item} onPost={onPost} />
- ))}
- </div>
- </Col>
- </Row>
- </>
- )
- }
- export const CPageAboutUser = connect(
- (state) => ({
- my_Id: state.auth?.payload?.sub?.id,
- aboutUser: state.userData?.aboutUser,
- countAllPostsUser: state.promise?.countAllPostsUser?.payload,
- allPosts: state.userData?.allPosts,
- }),
- {
- onAboutUser: actionFullProfilePageUser,
- onPost: actionOnePost,
- // onPageData: actionFullProfilePageUser,
- },
- )(PageAboutUser)
|