hahano/components/Joke.js at main · codingjlu/hahano · GitHub

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { getUserScoreRatio, getVote } from "@/server/lib/dal"
import { vote as updateVote } from "@/server/actions/vote"
import styled from "styled-components"
import Link from "next/link"
import Form from "next/form"
import { revalidatePath } from "next/cache"
import { Up, Down } from "@/components/icons"

const Wrapper = styled.div`
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
`

const JokeText = styled.p`
  margin-bottom: 15px;
`

const Tags = styled.div`
  display: flex;
  flex-direction: row;
  gap: 10px;
`

const Tag = styled.div`
  background-color: rgba(255, 200, 200, 0.2);
  width: fit-content;
  padding: 5px 7px;
  border-radius: 15px;
  height: 30px;
`

const VoteDisplay = styled(Tag)`
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
`

const VoteButton = styled.button`
  padding: 0 5px;
  background-color: transparent;
  border: none;
  color: rgb(230, 230, 230);
  cursor: pointer;

  & svg {
    width: 17px;
    color: rgb(180, 180, 180);
    ${({ $voted }) => ($voted ? "stroke-width: 3px; color: white;" : "")}
  }
`

const User = styled(Tag)`
  text-decoration: none;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 10px;
  background-color: rgba(255, ${({ $green }) => $green}, 0, 0.3);
`
const Color = styled.div`
  height: 30px;
  width: 30px;
  background-color: rgb(255, ${({ $green }) => $green}, 0);
  border-radius: 50%;
`
const Username = styled.span`
  padding-right: 15px;
  font-weight: bold;
`

// path needed because revalidatePath needs it
export default async function Joke({ joke, path = "/jokes", showUser = true }) {
  const [scoreRatio, vote] = await Promise.all([
    getUserScoreRatio(joke.author_id),
    getVote(joke.id)
  ])

  return (
    <Wrapper>
      <JokeText>{joke.body}</JokeText>
      <Tags>
        <VoteDisplay as={Form}>
          <VoteButton
            $voted={vote?.value > 0}
            formAction={async () => {
              "use server"
              await updateVote({
                jokeId: joke.id,
                action: vote?.value > 0 ? "revoke" : "upvote"
              })
              revalidatePath(path)
            }}
          >
            <Up />
          </VoteButton>{" "}
          {joke.vote_total}{" "}
          <VoteButton
            $voted={vote?.value < 0}
            formAction={async () => {
              "use server"
              await updateVote({
                jokeId: joke.id,
                action: vote?.value < 0 ? "revoke" : "downvote"
              })
              revalidatePath(path)
            }}
          >
            <Down />
          </VoteButton>
        </VoteDisplay>
        {showUser && (
          <User
            as={Link}
            href={`/users/${joke.author_id}`}
            $green={255 * (1 - scoreRatio)}
          >
            <Color $green={255 * (1 - scoreRatio)} />
            <Username>{joke.author_username}</Username>
          </User>
        )}
      </Tags>
    </Wrapper>
  )
}