@@ -111,8 +111,11 @@ export function HomePageFeedUpdate({
111
111
} , [ data ?. liked , isError , isLoading , update . likes . data ] )
112
112
113
113
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 >
116
119
< div >
117
120
< div className = "flex space-x-3" >
118
121
< div className = "flex-shrink-0" >
@@ -134,11 +137,16 @@ export function HomePageFeedUpdate({
134
137
</ div >
135
138
</ div >
136
139
< div className = "mt-4 flex" >
137
- < button onClick = { ( ) => setGoalId ( ) } >
140
+ < button onClick = { ( ) => setGoalId ( ) } className = "hidden lg:block" >
138
141
< 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" >
139
142
🚀 Goal: { goal . title }
140
143
</ span >
141
144
</ 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 >
142
150
</ div >
143
151
</ div >
144
152
< div className = "mt-2 text-sm text-gray-700 space-y-4" >
@@ -248,9 +256,8 @@ export default function HomePageFeed({
248
256
< div className = "flex" >
249
257
< A href = { `${ ( session . user as User ) . username } ` } >
250
258
< span className = "block text-base text-center text-brand-600 font-semibold tracking-wide" >
251
- 🚀 Your Goal:
252
259
< 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 }
254
261
</ span >
255
262
</ span >
256
263
</ A >
@@ -263,7 +270,7 @@ export default function HomePageFeed({
263
270
< div className = "bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg" >
264
271
< div className = "flex" >
265
272
< span className = "block text-lg text-center text-brand-600 font-semibold tracking-wide" >
266
- 🚀 Set Your Goal:
273
+ 🚀 Set Goal:
267
274
</ span >
268
275
</ div >
269
276
< NewGoal />
@@ -272,7 +279,7 @@ export default function HomePageFeed({
272
279
)
273
280
) }
274
281
< div >
275
- < h1 className = "sr-only" > Recent questions </ h1 >
282
+ < h1 className = "sr-only" > Recent updates </ h1 >
276
283
< ul className = "space-y-4" >
277
284
{ updates . map ( ( update : HomePageFeedUpdateType ) => (
278
285
< HomePageFeedUpdate
@@ -302,7 +309,7 @@ function HomePageSideNavBar() {
302
309
< >
303
310
< nav
304
311
aria-label = "Sidebar"
305
- className = "sticky top-4 divide-y divide-gray-300"
312
+ className = "sticky top-24 divide-y divide-gray-300"
306
313
>
307
314
< div className = "pb-8 space-y-1" >
308
315
{ session && (
@@ -421,8 +428,11 @@ function HomePageAside({ goalId }: { goalId: string }) {
421
428
const [ session ] = useSession ( )
422
429
const { isLoading, isError, data } = useQuery (
423
430
[ '/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` , {
426
436
method : 'POST' ,
427
437
headers : {
428
438
'Content-Type' : 'application/json' ,
@@ -436,6 +446,7 @@ function HomePageAside({ goalId }: { goalId: string }) {
436
446
}
437
447
return res . json ( )
438
448
} )
449
+ }
439
450
)
440
451
const {
441
452
isLoading : isWhoToFollowLoading ,
@@ -451,32 +462,51 @@ function HomePageAside({ goalId }: { goalId: string }) {
451
462
452
463
return (
453
464
< >
454
- < div className = "sticky top-4 space-y-4" >
455
- { shouldShowRecentUpdates && (
465
+ < div className = "sticky top-24 space-y-4" >
466
+ { Boolean ( goalId ) && (
456
467
< section
457
468
aria-labelledby = "trending-heading"
458
469
className = "h-100 overflow-y-auto"
459
470
>
460
471
< div className = "bg-white rounded-lg shadow" >
461
472
< 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"
474
504
>
475
- { update . description }
476
- </ Goal . Update >
477
- ) ) }
478
- </ Goal . UpdatesList >
479
- </ Goal . Updates >
505
+ View more details
506
+ </ A >
507
+ </ div >
508
+ </ >
509
+ ) }
480
510
</ div >
481
511
</ div >
482
512
</ section >
0 commit comments