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

Skip to content

Commit 3373dbf

Browse files
pbteja1998pbteja1998
committed
Change the recent updates panel
1 parent 07ca341 commit 3373dbf

File tree

6 files changed

+245
-124
lines changed

6 files changed

+245
-124
lines changed

‎src/adapters/fauna/shell.mjs

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,13 @@ const client = new faunadb.Client({
99
})
1010

1111
async function main() {
12-
const userId = '290862832026649088'
13-
const allUsers = q.Filter(q.Documents(q.Collection('users')), (ref) =>
14-
q.Not(q.Equals(q.Select(['ref', 'id'], q.Get(ref)), userId))
15-
)
16-
17-
const isFollowing = (followingId) => {
18-
const followerId = userId
19-
return q.Let(
20-
{
21-
ref: q.Match(q.Index('unique_user_and_follower'), [
22-
q.Ref(q.Collection('users'), followingId),
23-
q.Ref(q.Collection('users'), followerId),
24-
]),
25-
},
26-
q.If(
27-
q.Exists(q.Var('ref')),
28-
q.Select(['data', 'isFollowing'], q.Get(q.Var('ref'))),
29-
false
30-
)
31-
)
32-
}
33-
34-
const whoToFollow = q.Paginate(
35-
q.Filter(allUsers, (ref) =>
36-
q.Not(isFollowing(q.Select(['ref', 'id'], q.Get(ref))))
37-
)
38-
)
39-
12+
const goalId = '290932327237812736'
4013
const response = await client.query(
41-
q.Map(whoToFollow, (ref) => {
42-
const doc = q.Get(ref)
43-
return {
44-
id: q.Select(['ref', 'id'], doc),
45-
name: q.Select(['data', 'name'], doc, null),
46-
image: q.Select(['data', 'image'], doc, null),
47-
username: q.Select(['data', 'username'], doc, null),
48-
account: {
49-
firstName: q.Select(['data', 'account', 'firstName'], doc, null),
50-
},
51-
}
52-
})
14+
q.Map(q.Paginate(q.Documents(q.Collection('goals'))), (goalRef) =>
15+
q.Select(['ref', 'id'], q.Get(goalRef))
16+
)
5317
)
54-
console.log({ response: JSON.stringify(response, null, 2) })
18+
console.log(JSON.stringify(response, null, 2))
5519
}
5620

5721
main().catch((e) => console.error(e))

‎src/components/AppNavBar.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Link from 'next/link'
55
import { useRouter } from 'next/router'
66
import { User } from 'src/pages/members'
77
import { Toggle } from '@/ui'
8+
import { Gear, RocketLaunch, SignOut, UserCircle } from 'phosphor-react'
89

910
const navbarItems = [
1011
{
@@ -62,12 +63,20 @@ export default function AppNavBar() {
6263
href={`/${(session.user as User).username}`}
6364
passHref={true}
6465
>
65-
<Menu.Item>Your Profile</Menu.Item>
66+
<Menu.Item icon={UserCircle}>Your Profile</Menu.Item>
67+
</Link>
68+
<Link
69+
href={`/${(session.user as User).username}`}
70+
passHref={true}
71+
>
72+
<Menu.Item icon={RocketLaunch}>Your Goal</Menu.Item>
6673
</Link>
6774
<Link href="/profile/settings" passHref={true}>
68-
<Menu.Item>Settings</Menu.Item>
75+
<Menu.Item icon={Gear}>Settings</Menu.Item>
6976
</Link>
70-
<Menu.Item onClick={() => signOut()}>Sign Out</Menu.Item>
77+
<Menu.Item onClick={() => signOut()} icon={SignOut}>
78+
Sign Out
79+
</Menu.Item>
7180
</Menu>
7281
</>
7382
) : (

‎src/components/HomePageFeed.tsx

Lines changed: 99 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,10 @@ function reducer(state: LikeData, action: { type: string; payload?: any }) {
5454

5555
export function HomePageFeedUpdate({
5656
update,
57+
setGoalId,
5758
}: {
5859
update: HomePageFeedUpdateType
60+
setGoalId: () => void
5961
}) {
6062
const [session, loading] = useSession()
6163
const [showComments, setShowComments] = useState(false)
@@ -130,11 +132,11 @@ export function HomePageFeedUpdate({
130132
</div>
131133
</div>
132134
<div className="mt-4 flex">
133-
<A href={`${postedBy.username}`}>
135+
<button onClick={() => setGoalId()}>
134136
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-brand-100 text-brand-800 hover:text-brand-600">
135137
🚀 Goal: {goal.title}
136138
</span>
137-
</A>
139+
</button>
138140
</div>
139141
</div>
140142
<div className="mt-2 text-sm text-gray-700 space-y-4">
@@ -225,6 +227,7 @@ export default function HomePageFeed({
225227
showGoal: boolean
226228
}) {
227229
const [session, loading] = useSession()
230+
const [goalId, setgoalId] = useState('')
228231
return (
229232
<div className="min-h-screen bg-gray-100 flex flex-col">
230233
<header className="bg-white shadow-sm sticky top-0 z-10">
@@ -233,10 +236,10 @@ export default function HomePageFeed({
233236
{!loading && !session && <Hero />}
234237
<div className="py-10 flex-1">
235238
<div className="max-w-3xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
236-
<div className="hidden lg:block lg:col-span-3 xl:col-span-2">
239+
<div className="hidden xl:block xl:col-span-2">
237240
<HomePageSideNavBar />
238241
</div>
239-
<main className="lg:col-span-9 xl:col-span-6 px-2">
242+
<main className="lg:col-span-7 xl:col-span-6 px-2">
240243
<div className="space-y-3">
241244
{showGoal ? (
242245
<div className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg">
@@ -270,13 +273,19 @@ export default function HomePageFeed({
270273
<h1 className="sr-only">Recent questions</h1>
271274
<ul className="space-y-4">
272275
{updates.map((update: HomePageFeedUpdateType) => (
273-
<HomePageFeedUpdate update={update} key={update.id} />
276+
<HomePageFeedUpdate
277+
update={update}
278+
key={update.id}
279+
setGoalId={() => setgoalId(update.goal.id)}
280+
/>
274281
))}
275282
</ul>
276283
</div>
277284
</div>
278285
</main>
279-
<HomePageAside updates={updates.slice(0, 3)} />
286+
<aside className="hidden lg:block lg:col-span-5 xl:col-span-4">
287+
<HomePageAside goalId={goalId} />
288+
</aside>
280289
</div>
281290
</div>
282291

@@ -406,62 +415,75 @@ function FollowButton({ user }: { user: User }) {
406415
)
407416
}
408417

409-
function HomePageAside({ updates }: { updates: HomePageFeedUpdateType[] }) {
418+
function HomePageAside({ goalId }: { goalId: string }) {
410419
const [session] = useSession()
411420
const { isLoading, isError, data: response } = useQuery(
412-
'api/fauna/who-to-follow',
413-
() => {
414-
return fetch(`/api/fauna/who-to-follow`).then((res) => res.json())
415-
}
421+
['/api/fauna/recent-updates', goalId],
422+
() =>
423+
fetch(`/api/fauna/recent-updates`, {
424+
method: 'POST',
425+
headers: {
426+
'Content-Type': 'application/json',
427+
},
428+
body: JSON.stringify({
429+
goalId,
430+
}),
431+
}).then((res) => {
432+
if (!res.ok) {
433+
throw new Error('Something went wrong!!')
434+
}
435+
return res.json()
436+
})
416437
)
438+
const {
439+
isLoading: isWhoToFollowLoading,
440+
isError: isWhoToFollowError,
441+
data: whoToFollowResponse,
442+
} = useQuery('api/fauna/who-to-follow', () => {
443+
return fetch(`/api/fauna/who-to-follow`).then((res) => res.json())
444+
})
445+
446+
const shouldShowRecentUpdates = Boolean(goalId) && goalId !== ''
417447

418448
return (
419449
<>
420-
<aside className="hidden xl:block xl:col-span-4">
421-
<div className="sticky top-4 space-y-4">
450+
<div className="sticky top-4 space-y-4">
451+
{shouldShowRecentUpdates && (
422452
<section aria-labelledby="trending-heading">
423453
<div className="bg-white rounded-lg shadow">
424454
<div className="p-6">
425455
<h2
426456
id="trending-heading"
427457
className="text-base font-medium text-gray-900"
428458
>
429-
Recent Updates
459+
All Updates
430460
</h2>
431461
<div className="mt-6 flow-root">
432462
<ul className="-my-4 divide-y divide-gray-200">
433-
{updates.map((update) => (
434-
<li className="flex py-4 space-x-3" key={update.id}>
435-
<div className="flex-shrink-0">
436-
<img
437-
className="h-8 w-8 rounded-full"
438-
src={update.postedBy.image}
439-
alt=""
440-
/>
441-
</div>
442-
<div className="min-w-0 flex-1">
443-
<div className="prose prose-sm max-w-none">
444-
<Markdown>{update.description}</Markdown>
463+
{!isLoading &&
464+
!isError &&
465+
response.updates.map((update) => (
466+
<li className="flex py-4 space-x-3" key={update.id}>
467+
<div className="flex-shrink-0">
468+
<img
469+
className="h-8 w-8 rounded-full"
470+
src={update.postedBy.image}
471+
alt=""
472+
/>
445473
</div>
446-
<div className="mt-2 flex">
447-
<span className="inline-flex items-center text-sm">
448-
<button className="inline-flex space-x-2 text-gray-400 hover:text-gray-500">
449-
<ChatCenteredDots className="h-5 w-5" />
450-
<span className="font-medium text-gray-900">
451-
{update.comments.data.length}
452-
</span>
453-
</button>
454-
</span>
474+
<div className="min-w-0 flex-1">
475+
<div className="prose prose-sm max-w-none">
476+
<Markdown>{update.description}</Markdown>
477+
</div>
455478
</div>
456-
</div>
457-
</li>
458-
))}
479+
</li>
480+
))}
459481
</ul>
460482
</div>
461483
{session ? (
462484
<div className="mt-6">
463485
<A
464-
href={`/${(session.user as User).username}`}
486+
href={`/${response?.updates?.[0].postedBy.username}`}
465487
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"
466488
>
467489
View all
@@ -480,47 +502,47 @@ function HomePageAside({ updates }: { updates: HomePageFeedUpdateType[] }) {
480502
</div>
481503
</div>
482504
</section>
505+
)}
483506

484-
<section aria-labelledby="who-to-follow-heading">
485-
<div className="bg-white rounded-lg shadow">
486-
<div className="p-6">
487-
<h2
488-
id="who-to-follow-heading"
489-
className="text-base font-medium text-gray-900"
490-
>
491-
Who to follow
492-
</h2>
493-
<div className="mt-6 flow-root">
494-
<ul className="-my-4 divide-y divide-gray-200">
495-
{!isLoading &&
496-
!isError &&
497-
response.users.map((user: User) => (
498-
<FollowButton user={user} key={user.id} />
499-
))}
500-
</ul>
501-
</div>
502-
<div className="mt-6">
503-
{session ? (
504-
<A
505-
href="/members"
506-
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"
507-
>
508-
View all
509-
</A>
510-
) : (
511-
<button
512-
onClick={() => signIn('github')}
513-
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"
514-
>
515-
Join
516-
</button>
517-
)}
518-
</div>
507+
<section aria-labelledby="who-to-follow-heading">
508+
<div className="bg-white rounded-lg shadow">
509+
<div className="p-6">
510+
<h2
511+
id="who-to-follow-heading"
512+
className="text-base font-medium text-gray-900"
513+
>
514+
Who to follow
515+
</h2>
516+
<div className="mt-6 flow-root">
517+
<ul className="-my-4 divide-y divide-gray-200">
518+
{!isWhoToFollowLoading &&
519+
!isWhoToFollowError &&
520+
whoToFollowResponse.users.map((user: User) => (
521+
<FollowButton user={user} key={user.id} />
522+
))}
523+
</ul>
524+
</div>
525+
<div className="mt-6">
526+
{session ? (
527+
<A
528+
href="/members"
529+
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"
530+
>
531+
View all
532+
</A>
533+
) : (
534+
<button
535+
onClick={() => signIn('github')}
536+
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"
537+
>
538+
Join
539+
</button>
540+
)}
519541
</div>
520542
</div>
521-
</section>
522-
</div>
523-
</aside>
543+
</div>
544+
</section>
545+
</div>
524546
</>
525547
)
526548
}

‎src/pages/api/fauna/all-updates.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const FaunaCreateHandler: NextApiHandler = async (
1515
res: NextApiResponse
1616
) => {
1717
try {
18-
const updates = await client.query(
18+
const response: any = await client.query(
1919
q.Map(q.Paginate(q.Match(q.Index('all_recent_updates'))), (result) => {
2020
const goalUpdateRef = q.Select(1, result)
2121
const goalUpdateDoc = q.Get(goalUpdateRef)
@@ -92,7 +92,7 @@ const FaunaCreateHandler: NextApiHandler = async (
9292
})
9393
)
9494

95-
res.status(200).json({ updates })
95+
res.status(200).json({ updates: response.data })
9696
} catch (error) {
9797
console.error({ msg: error.message })
9898
res.status(500).json({ message: error.message })

0 commit comments

Comments
 (0)