mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 18:44:16 +00:00
use like logic
This commit is contained in:
parent
914655ecd6
commit
e7561c06c8
@ -1,62 +1,19 @@
|
||||
import React from "react"
|
||||
import * as antd from "antd"
|
||||
import { Icons } from "components/Icons"
|
||||
import classnames from "classnames"
|
||||
import { LikeButton } from "components"
|
||||
import moment from "moment"
|
||||
import classnames from "classnames"
|
||||
|
||||
import { User } from "models"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
function LikeButton(props) {
|
||||
const [liked, setLiked] = React.useState(props.defaultLiked ?? false)
|
||||
const [clicked, setCliked] = React.useState(false)
|
||||
|
||||
const handleClick = async () => {
|
||||
let to = !liked
|
||||
|
||||
setCliked(to)
|
||||
|
||||
if (typeof props.onClick === "function") {
|
||||
const result = await props.onClick(to)
|
||||
if (typeof result === "boolean") {
|
||||
to = result
|
||||
}
|
||||
}
|
||||
|
||||
setLiked(to)
|
||||
}
|
||||
|
||||
return <button
|
||||
className={classnames("likeButton", { ["clicked"]: liked })}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
"ripple",
|
||||
{ ["clicked"]: clicked }
|
||||
)}
|
||||
></div>
|
||||
<svg
|
||||
className={classnames(
|
||||
"heart",
|
||||
{ ["empty"]: !liked },
|
||||
{ ["clicked"]: clicked },
|
||||
)}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
|
||||
function PostHeader({ postData }) {
|
||||
function PostHeader(props) {
|
||||
const [timeAgo, setTimeAgo] = React.useState(0)
|
||||
|
||||
const updateTimeAgo = () => {
|
||||
setTimeAgo(moment(postData.created_at ?? "").fromNow())
|
||||
setTimeAgo(moment(props.postData.created_at ?? "").fromNow())
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
@ -69,16 +26,17 @@ function PostHeader({ postData }) {
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, [postData.created_at])
|
||||
}, [props.postData.created_at])
|
||||
|
||||
return <div className="userInfo">
|
||||
return <div className="postHeader">
|
||||
<div className="userInfo">
|
||||
<div className="avatar">
|
||||
<antd.Avatar src={postData.user?.avatar} />
|
||||
<antd.Avatar src={props.postData.user?.avatar} />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div>
|
||||
<h1>
|
||||
{postData.user?.fullName ?? `@${postData.user?.username}`}
|
||||
{props.postData.user?.fullName ?? `@${props.postData.user?.username}`}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@ -87,12 +45,21 @@ function PostHeader({ postData }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="postHeaderActions">
|
||||
<div className="item" onClick={props.onClickLike}>
|
||||
{props.isLiked && <Icons.Heart id="likeIndicator" />}
|
||||
</div>
|
||||
<div className="item" onClick={props.onClickSave}>
|
||||
<Icons.Bookmark />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
function PostContent({ message }) {
|
||||
return <div className="content">
|
||||
{message}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
function PostActions(props) {
|
||||
@ -147,7 +114,6 @@ export default class PostCard extends React.Component {
|
||||
|
||||
await this.setState({
|
||||
selfId,
|
||||
likes: this.props.data.likes,
|
||||
loading: false
|
||||
})
|
||||
}
|
||||
@ -166,30 +132,49 @@ export default class PostCard extends React.Component {
|
||||
return result
|
||||
}
|
||||
|
||||
onClickSave = async () => {
|
||||
// TODO: save post
|
||||
}
|
||||
|
||||
hasLiked = () => {
|
||||
return this.props.data.likes.some(user_id => user_id === this.state.selfId)
|
||||
return this.state.data.likes.some(user_id => user_id === this.state.selfId)
|
||||
}
|
||||
|
||||
isSelf = () => {
|
||||
return this.state.selfId === this.state.data.user._id
|
||||
}
|
||||
|
||||
render() {
|
||||
const defaultLiked = this.hasLiked()
|
||||
const hasLiked = this.hasLiked()
|
||||
|
||||
if (this.state.loading) {
|
||||
return <antd.Skeleton active />
|
||||
}
|
||||
|
||||
return <div id={this.props.data._id} key={this.props.data._id} className="postCard">
|
||||
return <div
|
||||
id={this.props.data._id}
|
||||
key={this.props.data._id}
|
||||
className={classnames("postCard", { ["liked"]: hasLiked })}
|
||||
>
|
||||
<div className="wrapper">
|
||||
<PostHeader
|
||||
postData={this.props.data}
|
||||
isLiked={hasLiked}
|
||||
onClickLike={() => this.onClickLike(false)}
|
||||
onClickSave={this.onClickSave}
|
||||
/>
|
||||
<PostContent
|
||||
message={this.props.data.message}
|
||||
/>
|
||||
</div>
|
||||
<div className="actionsIndicator">
|
||||
<Icons.MoreHorizontal />
|
||||
</div>
|
||||
<div className="actionsWrapper">
|
||||
<PostActions
|
||||
onClickLike={this.onClickLike}
|
||||
defaultLiked={defaultLiked}
|
||||
defaultLiked={hasLiked}
|
||||
isSelf={this.isSelf()}
|
||||
likes={this.state.data.likes.length}
|
||||
comments={this.state.data.comments.length}
|
||||
/>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
width : 100%;
|
||||
max-width: 40vw;
|
||||
max-width: 600px;
|
||||
|
||||
filter: drop-shadow(3px 3px 2px #c5c5c5);
|
||||
|
||||
@ -12,6 +12,29 @@
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
|
||||
&.liked {
|
||||
filter: drop-shadow(0px 0px 2px var(--primaryColor));
|
||||
|
||||
//outline-color: ;
|
||||
}
|
||||
|
||||
.actionsIndicator {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
|
||||
width : 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
font-size: 18px;
|
||||
color : var(--background-color-contrast);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display : inline-flex;
|
||||
flex-direction: column;
|
||||
@ -22,6 +45,11 @@
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.postHeader {
|
||||
display : inline-flex;
|
||||
flex-direction : row;
|
||||
justify-content: space-between;
|
||||
|
||||
.userInfo {
|
||||
display : inline-flex;
|
||||
flex-direction: row;
|
||||
@ -55,14 +83,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
.postHeaderActions {
|
||||
display : inline-flex;
|
||||
flex-direction: row;
|
||||
font-size : 16px;
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#likeIndicator {
|
||||
color: var(--primaryColor);
|
||||
fill : var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display : inline-flex;
|
||||
flex-direction: column;
|
||||
align-items : flex-start;
|
||||
|
||||
background-color: var(--background-color-primary);
|
||||
padding : 10px;
|
||||
border-radius : 8px;
|
||||
//background-color: var(--background-color-primary);
|
||||
|
||||
padding : 0 10px 10px 10px;
|
||||
border-radius: 8px;
|
||||
|
||||
font-size : 14px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
@ -112,39 +157,38 @@
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
#likes {
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
color: var(--primaryColor) !important;
|
||||
|
||||
svg {
|
||||
transition: all 0.2s ease-in-out;
|
||||
color : var(--background-color-contrast) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#likes:hover {
|
||||
svg {
|
||||
color: var(--primaryColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
display : inline-flex;
|
||||
flex-direction: column;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.icon {
|
||||
cursor : pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.value {
|
||||
svg {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
bottom : 0;
|
||||
|
||||
font-size : 14px;
|
||||
font-family: "DM Mono", monospace;
|
||||
|
||||
transform : translate(0, 50%);
|
||||
transition: all 0.2s ease-in-out;
|
||||
width : 0;
|
||||
opacity : 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
.value {
|
||||
margin-left: 3px;
|
||||
width : 20px;
|
||||
opacity : 1;
|
||||
.icon {
|
||||
svg {
|
||||
color: var(--primaryColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -191,156 +235,3 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@color-heart : #EA442B;
|
||||
@likeAnimationDuration : .5s;
|
||||
@likeAnimationEasing : cubic-bezier(.7, 0, .3, 1);
|
||||
|
||||
.likeButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ripple,
|
||||
.ripple:before,
|
||||
.ripple:after {
|
||||
position : relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
font-size : 40px;
|
||||
border : none;
|
||||
border-radius: 50%;
|
||||
width : 1em;
|
||||
height : 1em;
|
||||
padding : 0;
|
||||
margin : 0;
|
||||
outline : none;
|
||||
z-index : 2;
|
||||
transition : transform @likeAnimationDuration @likeAnimationEasing;
|
||||
cursor : pointer;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
z-index : -1;
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
border-radius: inherit;
|
||||
transition : inherit;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
border-radius : inherit;
|
||||
z-index : -1;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: relative;
|
||||
>path {
|
||||
stroke : var(--primaryColor);
|
||||
stroke-width: 2;
|
||||
transition : fill @likeAnimationDuration @likeAnimationEasing;
|
||||
fill : var(--primaryColor);
|
||||
}
|
||||
|
||||
&.empty {
|
||||
>path {
|
||||
stroke : var(--primaryColor);
|
||||
stroke-width: 2;
|
||||
transition : fill @likeAnimationDuration @likeAnimationEasing;
|
||||
fill : transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.clicked {
|
||||
animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;
|
||||
|
||||
@keyframes heart-bounce {
|
||||
40% {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
height : 1em;
|
||||
width : 1em;
|
||||
border-radius: 50%;
|
||||
overflow : hidden;
|
||||
z-index : 1;
|
||||
|
||||
&:before {
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
border : .4em solid var(--primaryColor);
|
||||
border-radius: inherit;
|
||||
transform : scale(0);
|
||||
}
|
||||
|
||||
&.clicked {
|
||||
&:before {
|
||||
animation: ripple-out @likeAnimationDuration @likeAnimationEasing;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple-out {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(5);
|
||||
}
|
||||
}
|
||||
@keyframes depress {
|
||||
|
||||
from,
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(5%) scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes depress-shadow {
|
||||
|
||||
from,
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user