Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e1a67af

Browse files
pbteja1998pbteja1998
committed
Fix the bug in like button when in logged out view
1 parent f6d0542 commit e1a67af

File tree

7 files changed

+85
-27
lines changed

7 files changed

+85
-27
lines changed

‎src/components/HomePageFeed.tsx

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
UpdateComments,
3131
UpdateCommentsList,
3232
FollowModal,
33+
LikeModal,
3334
} from '@/components'
3435
import { Goal } from './goals'
3536
import type { GoalResponse } from 'src/pages/[username]'
@@ -63,6 +64,7 @@ export function HomePageFeedUpdate({
6364
update: HomePageFeedUpdateType
6465
setGoalId: () => void
6566
}) {
67+
const [isLikeModalOpen, setIsLikeModalOpen] = useState(false)
6668
const [session] = useSession()
6769
const [showComments, setShowComments] = useState(false)
6870
const { postedBy, createdAt: createdAtInMillis, goal, description } = update
@@ -162,10 +164,12 @@ export function HomePageFeedUpdate({
162164
<button
163165
className="inline-flex space-x-2 text-gray-400 hover:text-gray-500"
164166
onClick={() => {
165-
if (session) {
166-
dispatch({ type: 'toggle' })
167-
mutate()
167+
if (!session) {
168+
setIsLikeModalOpen(true)
169+
return
168170
}
171+
dispatch({ type: 'toggle' })
172+
mutate()
169173
}}
170174
>
171175
<ThumbsUp
@@ -178,6 +182,11 @@ export function HomePageFeedUpdate({
178182
<span className="font-medium text-gray-900">{likesCount}</span>
179183
<span className="sr-only">likes</span>
180184
</button>
185+
<LikeModal
186+
user={postedBy}
187+
isOpen={isLikeModalOpen}
188+
setIsOpen={setIsLikeModalOpen}
189+
/>
181190
</span>
182191
<span className="inline-flex items-center text-sm">
183192
<button
@@ -367,7 +376,7 @@ function FollowButton({ user }: { user: User }) {
367376
const [session] = useSession()
368377
const { toggleFollow } = useFollowUser(user.id)
369378
const [isFollowing, setIsFollowing] = useState(false)
370-
const [isModalOpen, setIsModalOpen] = useState(false)
379+
const [isFollowModalOpen, setIsFollowModalOpen] = useState(false)
371380
return (
372381
<li className="flex items-center py-4 space-x-3">
373382
<div className="flex-shrink-0">
@@ -389,7 +398,7 @@ function FollowButton({ user }: { user: User }) {
389398
className="inline-flex items-center px-3 py-0.5 rounded-full bg-brand-50 text-sm font-medium text-brand-700 hover:bg-brand-100"
390399
onClick={() => {
391400
if (!session) {
392-
setIsModalOpen(true)
401+
setIsFollowModalOpen(true)
393402
return
394403
}
395404
setIsFollowing(true)
@@ -418,8 +427,8 @@ function FollowButton({ user }: { user: User }) {
418427
{!session && (
419428
<FollowModal
420429
user={user}
421-
isOpen={isModalOpen}
422-
setIsOpen={setIsModalOpen}
430+
isOpen={isFollowModalOpen}
431+
setIsOpen={setIsFollowModalOpen}
423432
/>
424433
)}
425434
</li>

‎src/components/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ export * from './goals'
1010
export { default as Markdown } from './Markdown'
1111
export { default as HomePageFeed } from './HomePageFeed'
1212
export { default as Hero } from './Hero'
13-
export { default as FollowModal } from './FollowModal'
13+
export * from './modal'

‎src/components/members/Member.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,10 @@ import {
1010
IconExternalLink,
1111
IconPlus,
1212
} from 'tabler-icons'
13-
import { A } from '@/components'
13+
import { A, FollowModal } from '@/components'
1414
import useFollowUser from '../profile/useFollowUser'
1515
import { useEffect, useState } from 'react'
1616
import { useRouter } from 'next/router'
17-
import FollowModal from '../FollowModal'
1817
import { useSession } from 'next-auth/client'
1918

2019
export default function Member({ user }: { user: User }) {

‎src/components/modal/FollowModal.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { UserPlus } from 'phosphor-react'
2+
import { User } from 'src/pages/members'
3+
import { Modal } from '.'
4+
5+
export default function FollowModal({
6+
user,
7+
isOpen,
8+
setIsOpen,
9+
}: {
10+
user: User
11+
isOpen: boolean
12+
setIsOpen: (open: boolean) => void
13+
}) {
14+
return (
15+
<Modal
16+
user={user}
17+
isOpen={isOpen}
18+
setIsOpen={setIsOpen}
19+
headerText={`Follow ${user.account?.firstName ?? user.name} to see their
20+
updates.`}
21+
subHeaderText="Join our community to never miss their updates."
22+
icon={UserPlus}
23+
/>
24+
)
25+
}

‎src/components/modal/LikeModal.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { ThumbsUp } from 'phosphor-react'
2+
import { User } from 'src/pages/members'
3+
import { Modal } from '.'
4+
5+
export default function LikeModal({
6+
user,
7+
isOpen,
8+
setIsOpen,
9+
}: {
10+
user: User
11+
isOpen: boolean
12+
setIsOpen: (open: boolean) => void
13+
}) {
14+
return (
15+
<Modal
16+
user={user}
17+
isOpen={isOpen}
18+
setIsOpen={setIsOpen}
19+
headerText="Like the updates shared by the community members"
20+
subHeaderText={`Join our community now to let ${
21+
user.account?.firstName ?? user.name
22+
} know you like their update.`}
23+
icon={ThumbsUp}
24+
/>
25+
)
26+
}

‎src/components/FollowModal.tsx renamed to ‎src/components/modal/Modal.tsx

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,25 @@ import { Transition } from '@headlessui/react'
22
import { UserPlus } from 'phosphor-react'
33
import { User } from 'src/pages/members'
44
import { signIn } from 'next-auth/client'
5+
import type { TablerIcon } from 'tabler-icons'
6+
import type { Icon as PhosphorIcon } from 'phosphor-react'
57

6-
export default function FollowModal({
8+
export default function Modal({
79
user,
810
isOpen,
911
setIsOpen,
12+
headerText,
13+
subHeaderText,
14+
icon,
1015
}: {
1116
user: User
1217
isOpen: boolean
1318
setIsOpen: (open: boolean) => void
19+
headerText: string
20+
subHeaderText: string
21+
icon: TablerIcon | PhosphorIcon
1422
}) {
23+
const Icon = icon
1524
if (!isOpen) {
1625
return <></>
1726
}
@@ -38,16 +47,6 @@ export default function FollowModal({
3847
>
3948
&#8203;
4049
</span>
41-
{/*
42-
Modal panel, show/hide based on modal state.
43-
44-
Entering: "ease-out duration-300"
45-
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
46-
To: "opacity-100 translate-y-0 sm:scale-100"
47-
Leaving: "ease-in duration-200"
48-
From: "opacity-100 translate-y-0 sm:scale-100"
49-
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
50-
*/}
5150
<Transition
5251
show={isOpen}
5352
enter="ease-out duration-300"
@@ -87,20 +86,17 @@ export default function FollowModal({
8786
</div>
8887
<div>
8988
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-brand-100">
90-
<UserPlus className="h-6 w-6 text-brand-600" />
89+
<Icon className="h-6 w-6 text-brand-600" />
9190
</div>
9291
<div className="mt-3 text-center sm:mt-5">
9392
<h3
9493
className="text-lg leading-6 font-medium text-gray-900"
9594
id="modal-headline"
9695
>
97-
Follow {user.account?.firstName ?? user.name} to see their
98-
updates.
96+
{headerText}
9997
</h3>
10098
<div className="mt-2">
101-
<p className="text-sm text-gray-500">
102-
Join our community to never miss their updates.
103-
</p>
99+
<p className="text-sm text-gray-500">{subHeaderText}</p>
104100
</div>
105101
</div>
106102
</div>

‎src/components/modal/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as Modal } from './Modal'
2+
export { default as FollowModal } from './FollowModal'
3+
export { default as LikeModal } from './LikeModal'

0 commit comments

Comments
 (0)