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

Skip to content

Commit b5d810e

Browse files
pbteja1998pbteja1998
committed
Fix the bug in follow button when in logged out view
1 parent 84bae66 commit b5d810e

File tree

10 files changed

+220
-92
lines changed

10 files changed

+220
-92
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
},
2020
"dependencies": {
2121
"@badrap/bar-of-progress": "0.1.1",
22-
"@headlessui/react": "0.2.0",
22+
"@headlessui/react": "0.3.1",
2323
"classnames": "2.2.6",
2424
"faunadb": "4.0.0",
2525
"luxon": "1.25.0",

‎src/components/FollowModal.tsx

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { Transition } from '@headlessui/react'
2+
import { UserPlus } from 'phosphor-react'
3+
import { User } from 'src/pages/members'
4+
import { signIn } from 'next-auth/client'
5+
6+
export default function FollowModal({
7+
user,
8+
isOpen,
9+
setIsOpen,
10+
}: {
11+
user: User
12+
isOpen: boolean
13+
setIsOpen: (open: boolean) => void
14+
}) {
15+
if (!isOpen) {
16+
return <></>
17+
}
18+
return (
19+
<div className="fixed z-10 inset-0 overflow-y-auto">
20+
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
21+
<Transition
22+
show={isOpen}
23+
enter="ease-out duration-300"
24+
enterFrom="opacity-0"
25+
enterTo="opacity-100"
26+
leave="ease-in duration-200"
27+
leaveFrom="opacity-100"
28+
leaveTo="opacity-0"
29+
className="fixed inset-0 transition-opacity"
30+
aria-hidden="true"
31+
>
32+
<div className="absolute inset-0 bg-gray-500 opacity-75"></div>
33+
</Transition>
34+
35+
<span
36+
className="hidden sm:inline-block sm:align-middle sm:h-screen"
37+
aria-hidden="true"
38+
>
39+
&#8203;
40+
</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+
*/}
51+
<Transition
52+
show={isOpen}
53+
enter="ease-out duration-300"
54+
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
55+
enterTo="opacity-100 translate-y-0 sm:scale-100"
56+
leave="ease-in duration-200"
57+
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
58+
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
59+
className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
60+
role="dialog"
61+
aria-modal="true"
62+
aria-labelledby="modal-headline"
63+
>
64+
<div className="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
65+
<button
66+
type="button"
67+
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
68+
onClick={() => setIsOpen(false)}
69+
>
70+
<span className="sr-only">Close</span>
71+
<svg
72+
className="h-6 w-6"
73+
xmlns="http://www.w3.org/2000/svg"
74+
fill="none"
75+
viewBox="0 0 24 24"
76+
stroke="currentColor"
77+
aria-hidden="true"
78+
>
79+
<path
80+
strokeLinecap="round"
81+
strokeLinejoin="round"
82+
strokeWidth="2"
83+
d="M6 18L18 6M6 6l12 12"
84+
/>
85+
</svg>
86+
</button>
87+
</div>
88+
<div>
89+
<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" />
91+
</div>
92+
<div className="mt-3 text-center sm:mt-5">
93+
<h3
94+
className="text-lg leading-6 font-medium text-gray-900"
95+
id="modal-headline"
96+
>
97+
Follow {user.account?.firstName ?? user.name} to see their
98+
updates.
99+
</h3>
100+
<div className="mt-2">
101+
<p className="text-sm text-gray-500">
102+
Join our community to never miss their updates.
103+
</p>
104+
</div>
105+
</div>
106+
</div>
107+
<div className="mt-5 sm:mt-6">
108+
<button
109+
type="button"
110+
className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
111+
onClick={() => signIn('github')}
112+
>
113+
Join Our Community
114+
</button>
115+
</div>
116+
</Transition>
117+
</div>
118+
</div>
119+
)
120+
}

‎src/components/Hero.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function Hero() {
2929
href="https://chat.coderplex.org"
3030
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-brand-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
3131
>
32-
Join Discord
32+
Join Chatroom
3333
</A>
3434
</div>
3535
</div>

‎src/components/HomePageFeed.tsx

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
UserCircle,
99
Users,
1010
} from 'phosphor-react'
11+
import * as React from 'react'
1112
import { HomePageFeedUpdateType } from 'src/pages'
1213
import { DateTime } from 'luxon'
1314
import { useMutation, useQuery } from 'react-query'
@@ -28,6 +29,7 @@ import {
2829
UpdateComment,
2930
UpdateComments,
3031
UpdateCommentsList,
32+
FollowModal,
3133
} from '@/components'
3234
import { Goal } from './goals'
3335
import type { GoalResponse } from 'src/pages/[username]'
@@ -345,14 +347,6 @@ function HomePageSideNavBar() {
345347
)}
346348
{!session && (
347349
<>
348-
<button
349-
onClick={() => signIn('github')}
350-
className="text-gray-600 hover:bg-gray-50 group flex items-center px-3 py-2 text-sm font-medium rounded-md"
351-
aria-current="false"
352-
>
353-
<RocketLaunch className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
354-
<span className="truncate">Get Started</span>
355-
</button>
356350
<A
357351
href="/members"
358352
className="text-gray-600 hover:bg-gray-50 group flex items-center px-3 py-2 text-sm font-medium rounded-md"
@@ -373,6 +367,7 @@ function FollowButton({ user }: { user: User }) {
373367
const [session] = useSession()
374368
const { toggleFollow } = useFollowUser(user.id)
375369
const [isFollowing, setIsFollowing] = useState(false)
370+
const [isModalOpen, setIsModalOpen] = useState(false)
376371
return (
377372
<li className="flex items-center py-4 space-x-3">
378373
<div className="flex-shrink-0">
@@ -394,7 +389,7 @@ function FollowButton({ user }: { user: User }) {
394389
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"
395390
onClick={() => {
396391
if (!session) {
397-
signIn('github')
392+
setIsModalOpen(true)
398393
return
399394
}
400395
setIsFollowing(true)
@@ -420,6 +415,13 @@ function FollowButton({ user }: { user: User }) {
420415
<span>{isFollowing ? 'Following' : 'Follow'}</span>
421416
</button>
422417
</div>
418+
{!session && (
419+
<FollowModal
420+
user={user}
421+
isOpen={isModalOpen}
422+
setIsOpen={setIsModalOpen}
423+
/>
424+
)}
423425
</li>
424426
)
425427
}
@@ -511,45 +513,48 @@ function HomePageAside({ goalId }: { goalId: string }) {
511513
</div>
512514
</section>
513515
)}
514-
515-
<section aria-labelledby="who-to-follow-heading">
516-
<div className="bg-white rounded-lg shadow">
517-
<div className="p-6">
518-
<h2
519-
id="who-to-follow-heading"
520-
className="text-base font-medium text-gray-900"
521-
>
522-
Who to follow
523-
</h2>
524-
<div className="mt-6 flow-root">
525-
<ul className="-my-4 divide-y divide-gray-200">
526-
{!isWhoToFollowLoading &&
527-
!isWhoToFollowError &&
528-
whoToFollowResponse.users.map((user: User) => (
529-
<FollowButton user={user} key={user.id} />
530-
))}
531-
</ul>
532-
</div>
533-
<div className="mt-6">
534-
{session ? (
535-
<A
536-
href="/members"
537-
className="w-full block text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
538-
>
539-
View all
540-
</A>
541-
) : (
542-
<button
543-
onClick={() => signIn('github')}
544-
className="w-full block text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
516+
{!isWhoToFollowLoading &&
517+
!isWhoToFollowError &&
518+
whoToFollowResponse.users.length > 0 && (
519+
<section aria-labelledby="who-to-follow-heading">
520+
<div className="bg-white rounded-lg shadow">
521+
<div className="p-6">
522+
<h2
523+
id="who-to-follow-heading"
524+
className="text-base font-medium text-gray-900"
545525
>
546-
Join
547-
</button>
548-
)}
526+
Who to follow
527+
</h2>
528+
<div className="mt-6 flow-root">
529+
<ul className="-my-4 divide-y divide-gray-200">
530+
{whoToFollowResponse.users.map((user: User) => (
531+
<React.Fragment key={user.id}>
532+
<FollowButton user={user} />
533+
</React.Fragment>
534+
))}
535+
</ul>
536+
</div>
537+
<div className="mt-6">
538+
{session ? (
539+
<A
540+
href="/members"
541+
className="w-full block text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
542+
>
543+
View all
544+
</A>
545+
) : (
546+
<button
547+
onClick={() => signIn('github')}
548+
className="w-full block text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
549+
>
550+
Join
551+
</button>
552+
)}
553+
</div>
554+
</div>
549555
</div>
550-
</div>
551-
</div>
552-
</section>
556+
</section>
557+
)}
553558
</div>
554559
</>
555560
)

‎src/components/goals/NewUpdate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default function NewUpdate({
107107

108108
<div className="mt-6 flex items-center justify-end space-x-4">
109109
<Button variant="solid" variantColor="brand" type="submit">
110-
Add Update
110+
Post Update
111111
</Button>
112112
</div>
113113
</form>

‎src/components/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +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'

‎src/components/members/Member.tsx

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@ import { A } 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'
18+
import { useSession } from 'next-auth/client'
1719

1820
export default function Member({ user }: { user: User }) {
21+
const [session] = useSession()
1922
const router = useRouter()
2023
const socials = user.socials
2124
const account = user.account
@@ -26,6 +29,7 @@ export default function Member({ user }: { user: User }) {
2629
toggleFollow,
2730
isLoading,
2831
} = useFollowUser(user.id)
32+
const [isModalOpen, setIsModalOpen] = useState(false)
2933

3034
const [isFollowing, setIsFollowing] = useState(false)
3135
useEffect(() => {
@@ -146,9 +150,25 @@ export default function Member({ user }: { user: User }) {
146150
</>
147151
) : (
148152
<>
149-
<Button onClick={() => toggle()} leadingIcon={IconPlus}>
153+
<Button
154+
onClick={() => {
155+
if (!session) {
156+
setIsModalOpen(true)
157+
return
158+
}
159+
toggle()
160+
}}
161+
leadingIcon={IconPlus}
162+
>
150163
Follow
151164
</Button>
165+
{!session && (
166+
<FollowModal
167+
user={user}
168+
isOpen={isModalOpen}
169+
setIsOpen={setIsModalOpen}
170+
/>
171+
)}
152172
</>
153173
)}
154174
</dd>
@@ -185,18 +205,6 @@ export default function Member({ user }: { user: User }) {
185205
<span className="ml-3">Visit</span>
186206
</A>
187207
</div>
188-
189-
{/* {!shouldShowFollowButton && (
190-
<div className="-ml-px w-0 flex-1 flex">
191-
<A
192-
href={`/profile/settings`}
193-
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
194-
>
195-
<IconEdit className="w-5 h-5text-gray-400" aria-hidden={true} />
196-
<span className="ml-3">Edit</span>
197-
</A>
198-
</div>
199-
)} */}
200208
</div>
201209
</div>
202210
</li>

0 commit comments

Comments
 (0)