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

Skip to content

Commit acfa447

Browse files
committed
Show the goal panel even when logged out
1 parent b4831e8 commit acfa447

File tree

2 files changed

+59
-37
lines changed

2 files changed

+59
-37
lines changed

src/components/HomePageFeed.tsx

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,11 @@ export function HomePageFeedUpdate({
111111
}, [data?.liked, isError, isLoading, update.likes.data])
112112

113113
return (
114-
<li className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg">
115-
<article aria-labelledby="question-title-81614">
114+
<li
115+
className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
116+
id={`homepage-update-${update.id}`}
117+
>
118+
<article>
116119
<div>
117120
<div className="flex space-x-3">
118121
<div className="flex-shrink-0">
@@ -134,11 +137,16 @@ export function HomePageFeedUpdate({
134137
</div>
135138
</div>
136139
<div className="mt-4 flex">
137-
<button onClick={() => setGoalId()}>
140+
<button onClick={() => setGoalId()} className="hidden lg:block">
138141
<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">
139142
🚀 Goal: {goal.title}
140143
</span>
141144
</button>
145+
<A href={`/${postedBy.username}`} className="lg:hidden">
146+
<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">
147+
🚀 Goal: {goal.title}
148+
</span>
149+
</A>
142150
</div>
143151
</div>
144152
<div className="mt-2 text-sm text-gray-700 space-y-4">
@@ -248,9 +256,8 @@ export default function HomePageFeed({
248256
<div className="flex">
249257
<A href={`${(session.user as User).username}`}>
250258
<span className="block text-base text-center text-brand-600 font-semibold tracking-wide">
251-
🚀 Your Goal:
252259
<span className="rounded-md bg-brand-100 text-brand-800 hover:text-brand-600 px-2.5 py-1.5 ml-2">
253-
{goal.title}
260+
🚀 Your Goal: {' '} {goal.title}
254261
</span>
255262
</span>
256263
</A>
@@ -263,7 +270,7 @@ export default function HomePageFeed({
263270
<div className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg">
264271
<div className="flex">
265272
<span className="block text-lg text-center text-brand-600 font-semibold tracking-wide">
266-
🚀 Set Your Goal:
273+
🚀 Set Goal:
267274
</span>
268275
</div>
269276
<NewGoal />
@@ -272,7 +279,7 @@ export default function HomePageFeed({
272279
)
273280
)}
274281
<div>
275-
<h1 className="sr-only">Recent questions</h1>
282+
<h1 className="sr-only">Recent updates</h1>
276283
<ul className="space-y-4">
277284
{updates.map((update: HomePageFeedUpdateType) => (
278285
<HomePageFeedUpdate
@@ -302,7 +309,7 @@ function HomePageSideNavBar() {
302309
<>
303310
<nav
304311
aria-label="Sidebar"
305-
className="sticky top-4 divide-y divide-gray-300"
312+
className="sticky top-24 divide-y divide-gray-300"
306313
>
307314
<div className="pb-8 space-y-1">
308315
{session && (
@@ -421,8 +428,11 @@ function HomePageAside({ goalId }: { goalId: string }) {
421428
const [session] = useSession()
422429
const { isLoading, isError, data } = useQuery(
423430
['/api/fauna/recent-updates', goalId],
424-
() =>
425-
fetch(`/api/fauna/recent-updates`, {
431+
() => {
432+
if (!goalId) {
433+
return
434+
}
435+
return fetch(`/api/fauna/recent-updates`, {
426436
method: 'POST',
427437
headers: {
428438
'Content-Type': 'application/json',
@@ -436,6 +446,7 @@ function HomePageAside({ goalId }: { goalId: string }) {
436446
}
437447
return res.json()
438448
})
449+
}
439450
)
440451
const {
441452
isLoading: isWhoToFollowLoading,
@@ -451,32 +462,51 @@ function HomePageAside({ goalId }: { goalId: string }) {
451462

452463
return (
453464
<>
454-
<div className="sticky top-4 space-y-4">
455-
{shouldShowRecentUpdates && (
465+
<div className="sticky top-24 space-y-4">
466+
{Boolean(goalId) && (
456467
<section
457468
aria-labelledby="trending-heading"
458469
className="h-100 overflow-y-auto"
459470
>
460471
<div className="bg-white rounded-lg shadow">
461472
<div className="p-6">
462-
<Goal.Title createdBy={goal.createdBy} showEditButton={false}>
463-
{goal.title}
464-
</Goal.Title>
465-
<Goal.Description>{goal.description}</Goal.Description>
466-
<Goal.Updates>
467-
<Goal.UpdatesList>
468-
{goal.updates.data.map((update, index) => (
469-
<Goal.Update
470-
postedBy={update.postedBy}
471-
key={update.id}
472-
postedOn={DateTime.fromMillis(update.createdAt)}
473-
isLastUpdate={index === goal.updates.data.length - 1}
473+
{isLoading && <p>loading...</p>}
474+
{isError && <p>Something went wrong!!!</p>}
475+
{shouldShowRecentUpdates && (
476+
<>
477+
<Goal.Title
478+
createdBy={goal.createdBy}
479+
showEditButton={false}
480+
>
481+
{goal.title}
482+
</Goal.Title>
483+
<Goal.Description>{goal.description}</Goal.Description>
484+
<Goal.Updates>
485+
<Goal.UpdatesList>
486+
{goal.updates.data.map((update, index) => (
487+
<Goal.Update
488+
postedBy={update.postedBy}
489+
key={update.id}
490+
postedOn={DateTime.fromMillis(update.createdAt)}
491+
isLastUpdate={
492+
index === goal.updates.data.length - 1
493+
}
494+
>
495+
{update.description}
496+
</Goal.Update>
497+
))}
498+
</Goal.UpdatesList>
499+
</Goal.Updates>
500+
<div className="mt-6">
501+
<A
502+
href={`/${goal.createdBy.username}`}
503+
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"
474504
>
475-
{update.description}
476-
</Goal.Update>
477-
))}
478-
</Goal.UpdatesList>
479-
</Goal.Updates>
505+
View more details
506+
</A>
507+
</div>
508+
</>
509+
)}
480510
</div>
481511
</div>
482512
</section>

src/pages/api/fauna/recent-updates.ts

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
2-
import { getSession } from 'next-auth/client'
3-
42
import faunadb from 'faunadb'
53
const q = faunadb.query
64
const isProduction = process.env.NODE_ENV === 'production'
@@ -15,12 +13,6 @@ const FaunaCreateHandler: NextApiHandler = async (
1513
req: NextApiRequest,
1614
res: NextApiResponse
1715
) => {
18-
const session = await getSession({ req })
19-
20-
if (!session) {
21-
return res.status(401).json({ message: 'Unauthorized' })
22-
}
23-
2416
try {
2517
const { goalId } = req.body
2618
const goalRef = q.Ref(q.Collection('goals'), goalId)

0 commit comments

Comments
 (0)