followers

This commit is contained in:
srgooglo 2022-03-15 01:54:00 +01:00
parent ebc0909c15
commit 4379c6e0da
2 changed files with 58 additions and 32 deletions

View File

@ -1,6 +1,7 @@
import React from "react" import React from "react"
import * as antd from "antd" import * as antd from "antd"
import { Translation } from "react-i18next" import { Translation } from "react-i18next"
import moment from "moment"
import { Icons } from "components/Icons" import { Icons } from "components/Icons"
import { Skeleton, PostsFeed, FollowButton } from "components" import { Skeleton, PostsFeed, FollowButton } from "components"
@ -16,6 +17,7 @@ export default class Account extends React.Component {
isFollowed: false, isFollowed: false,
user: null, user: null,
requestedUser: null, requestedUser: null,
followers: [],
} }
api = window.app.request api = window.app.request
@ -31,6 +33,7 @@ export default class Account extends React.Component {
let isSelf = false let isSelf = false
let user = null let user = null
let isFollowed = false let isFollowed = false
let followers = []
if (requestedUser != null) { if (requestedUser != null) {
if (token.username === requestedUser) { if (token.username === requestedUser) {
@ -40,11 +43,15 @@ export default class Account extends React.Component {
user = await this.fetchData(requestedUser) user = await this.fetchData(requestedUser)
if (!isSelf) { if (!isSelf) {
const result = await this.api.get.isFollowed(undefined, { user_id: user._id }).catch(() => false) const followedResult = await this.api.get.isFollowed(undefined, { user_id: user._id }).catch(() => false)
console.log(result) const followersResult = await this.api.get.followers(undefined, { user_id: user._id }).catch(() => false)
if (result) { if (followedResult) {
isFollowed = result.isFollowed isFollowed = followedResult.isFollowed
}
if (followersResult) {
followers = followersResult
} }
} }
} }
@ -55,6 +62,7 @@ export default class Account extends React.Component {
hasAdmin, hasAdmin,
requestedUser, requestedUser,
isFollowed, isFollowed,
followers,
}) })
} }
@ -78,10 +86,9 @@ export default class Account extends React.Component {
return false return false
}) })
console.log(result)
await this.setState({ await this.setState({
isFollowed: result.following, isFollowed: result.following,
followers: result.followers,
}) })
} }
@ -92,23 +99,33 @@ export default class Account extends React.Component {
return <Skeleton /> return <Skeleton />
} }
const createdAtYear = moment(new Date(Number(user.createdAt))).format("YYYY")
return ( return (
<div className="accountProfile"> <div className="accountProfile">
<div className="card"> <div className="card">
<div className="header"> <div className="header">
<div className="user"> <div className="user">
<img src={user.avatar} /> <div>
<div style={{ margin: "0 15px" }}> <img src={user.avatar} />
{Boolean(user.fullName) ? </div>
<> <div>
<h1>{user.fullName}</h1> <div>
<span>@{user.username}#{user._id}</span> <h1>{user.fullName ?? user.username}</h1>
</> : <span>@{user.username}</span>
<> </div>
<h1>@{user.username}</h1>
<span>#{user._id}</span> <div id="statistics" className="statistics">
</> <div>
} <span><Icons.Users /> {this.state.followers.length} Followers</span>
</div>
<div>
<span><Icons.FileText /> 0 Posts</span>
</div>
<div>
<span>Joined at {createdAtYear}</span>
</div>
</div>
</div> </div>
</div> </div>

View File

@ -36,23 +36,32 @@
word-break: break-all; word-break: break-all;
img { .user {
width : 70px; display: inline-flex;
height: 70px; flex-direction: row;
}
> div {
align-self: flex-start;
margin-right: 15px;
h1 { > div {
margin : 0; margin-bottom: 5px;
font-size: 35px; }
span {
font-size: 12px;
} }
}
>div { img {
display : inline-flex; width : 70px;
align-items: center; height: 70px;
border-radius: 4px;
}
h1 {
margin : 0;
font-size: 35px;
line-height: 37px;
}
} }
} }