forked from relayjs/relay-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
StoryLikeButton.tsx
111 lines (104 loc) · 2.6 KB
/
StoryLikeButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import * as React from "react";
import { graphql } from "relay-runtime";
import { useFragment, useMutation } from "react-relay";
import type { StoryLikeButtonFragment$key } from "./__generated__/StoryLikeButtonFragment.graphql";
type Props = {
story: StoryLikeButtonFragment$key;
};
const StoryLikeButtonFragment = graphql`
fragment StoryLikeButtonFragment on Story {
id
likeCount
doesViewerLike
}
`;
const StoryLikeButtonMutation = graphql`
mutation StoryLikeButtonMutation($id: ID!, $doesLike: Boolean!) {
likeStory(id: $id, doesLike: $doesLike) {
story {
...StoryLikeButtonFragment
}
}
}
`;
export default function StoryLikeButton({ story }: Props): React.ReactElement {
const [commitMutation, isMutationInFlight] = useMutation(
StoryLikeButtonMutation
);
const data = useFragment<StoryLikeButtonFragment$key>(
StoryLikeButtonFragment,
story
);
const onLikeButtonClicked = () => {
commitMutation({
variables: {
id: data.id,
doesLike: !data.doesViewerLike,
},
optimisticUpdater: (store) => {
const fragment = graphql`
fragment StoryLikeButton_updatable on Story @updatable {
likeCount
doesViewerLike
}
`;
const { updatableData } = store.readUpdatableFragment_EXPERIMENTAL(
fragment,
story
);
const alreadyLikes = updatableData.doesViewerLike;
updatableData.doesViewerLike = !alreadyLikes;
updatableData.likeCount += alreadyLikes ? -1 : 1;
},
});
};
return (
<div className="likeButton">
<LikeCount count={data.likeCount} />
<LikeButton
doesViewerLike={data.doesViewerLike}
onClick={onLikeButtonClicked}
disabled={isMutationInFlight}
/>
</div>
);
}
function LikeCount({ count }: { count: number }) {
return <div className="likeButton__count">{count} likes</div>;
}
function LikeButton({
doesViewerLike,
onClick,
disabled,
}: {
doesViewerLike: boolean;
onClick: () => void;
disabled?: boolean;
}) {
return (
<button
className="likeButton__button"
onClick={onClick}
disabled={disabled}
>
<span
className={
doesViewerLike
? "likeButton__thumb__viewerLikes"
: "likeButton__thumb__viewerDoesNotLike"
}
>
👍
</span>{" "}
<span
className={
doesViewerLike
? "likeButton__label__viewerLikes"
: "likeButton__label__viewerDoesNotLike"
}
>
Like
</span>
</button>
);
}