Skip to content

Commit 9739e9b

Browse files
daveearleydaveearley
authored
Merge pull request #76 from HiEventsDev/develop
Fix SSR for event pages
2 parents 484c7d1 + 7b930fb commit 9739e9b

File tree

9 files changed

+79
-58
lines changed

9 files changed

+79
-58
lines changed

‎backend/app/Resources/Event/EventResourcePublic.php

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22

33
namespace HiEvents\Resources\Event;
44

5-
use Illuminate\Http\Request;
65
use HiEvents\DomainObjects\EventDomainObject;
76
use HiEvents\Resources\BaseResource;
87
use HiEvents\Resources\Image\ImageResource;
8+
use HiEvents\Resources\Organizer\OrganizerResourcePublic;
99
use HiEvents\Resources\Question\QuestionResource;
1010
use HiEvents\Resources\Ticket\TicketResourcePublic;
11+
use Illuminate\Http\Request;
1112

1213
/**
1314
* @mixin EventDomainObject
@@ -50,6 +51,10 @@ public function toArray(Request $request): array
5051
!is_null($this->getImages()),
5152
fn() => ImageResource::collection($this->getImages())
5253
),
54+
'organizer' => $this->when(
55+
!is_null($this->getOrganizer()),
56+
fn() => new OrganizerResourcePublic($this->getOrganizer()),
57+
),
5358
];
5459
}
5560
}

‎backend/app/Resources/Organizer/OrganizerResourcePublic.php

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<?php
2+
3+
namespace HiEvents\Resources\Organizer;
4+
5+
use HiEvents\DomainObjects\OrganizerDomainObject;
6+
use HiEvents\Resources\Image\ImageResource;
7+
use Illuminate\Http\Resources\Json\JsonResource;
8+
9+
/**
10+
* @mixin OrganizerDomainObject
11+
*/
12+
class OrganizerResourcePublic extends JsonResource
13+
{
14+
public function toArray($request): array
15+
{
16+
return [
17+
'id' => $this->getId(),
18+
'name' => $this->getName(),
19+
'website' => $this->getWebsite(),
20+
'description' => $this->getDescription(),
21+
'images' => $this->when(
22+
(bool)$this->getImages(),
23+
fn() => ImageResource::collection($this->getImages())
24+
),
25+
];
26+
}
27+
}

‎backend/app/Services/Handlers/Event/GetPublicEventHandler.php

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
use HiEvents\DomainObjects\EventSettingDomainObject;
77
use HiEvents\DomainObjects\Generated\PromoCodeDomainObjectAbstract;
88
use HiEvents\DomainObjects\ImageDomainObject;
9+
use HiEvents\DomainObjects\OrganizerDomainObject;
910
use HiEvents\DomainObjects\TaxAndFeesDomainObject;
1011
use HiEvents\DomainObjects\TicketDomainObject;
1112
use HiEvents\DomainObjects\TicketPriceDomainObject;
@@ -38,6 +39,7 @@ public function handle(GetPublicEventDTO $data): EventDomainObject
3839
)
3940
->loadRelation(new Relationship(EventSettingDomainObject::class))
4041
->loadRelation(new Relationship(ImageDomainObject::class))
42+
->loadRelation(new Relationship(OrganizerDomainObject::class, name: 'organizer'))
4143
->findById($data->eventId);
4244

4345
$promoCodeDomainObject = $this->promoCodeRepository->findFirstWhere([

‎backend/config/jwt.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
|
9090
*/
9191

92-
'ttl' => env('JWT_TTL', 60 * 48),
92+
'ttl' => env('JWT_TTL', 60 * 24 * 7),
9393

9494
/*
9595
|--------------------------------------------------------------------------

‎backend/tests/Unit/Services/Handlers/Event/GetPublicEventHandlerTest.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ public function testHandleWithValidPromoCode(): void
8686

8787
private function setupEventRepositoryMock($event, $eventId): void
8888
{
89-
$this->eventRepository->shouldReceive('loadRelation')->andReturnSelf()->times(3);
89+
$this->eventRepository->shouldReceive('loadRelation')->andReturnSelf()->times(4);
9090
$this->eventRepository->shouldReceive('findById')->with($eventId)->andReturn($event);
9191
}
9292
}

‎frontend/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const App: FC<
3333
> = (props) => {
3434
const [isLoadedOnBrowser, setIsLoadedOnBrowser] = React.useState(false);
3535
const localeActivated = useRef(false);
36-
const [loaded, setLoaded] = useState(false);
36+
const [loaded, setLoaded] = useState(isSsr());
3737

3838
useEffect(() => {
3939
if (!localeActivated.current && typeof window !== "undefined") {

‎frontend/src/components/common/EventDocumentHead/index.tsx

+15-14
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,29 @@ export const EventDocumentHead = ({event}: EventDocumentHeadProps) => {
1818
const startDate = utcToTz(new Date(event.start_date), event.timezone);
1919
const endDate = event.end_date ? utcToTz(new Date(event.end_date), event.timezone) : undefined;
2020

21-
// Dynamically build the address object based on available data
2221
const address = {
23-
"@type": "PostalAddress",
24-
streetAddress: event.location_details?.address_line_1,
25-
addressLocality: event.location_details?.city,
26-
addressRegion: event.location_details?.state_or_region,
27-
postalCode: event.location_details?.zip_or_postal_code,
28-
addressCountry: event.location_details?.country
22+
"@type": "http://schema.org/PostalAddress",
23+
streetAddress: eventSettings?.location_details?.address_line_1,
24+
addressLocality: eventSettings?.location_details?.city,
25+
addressRegion: eventSettings?.location_details?.state_or_region,
26+
postalCode: eventSettings?.location_details?.zip_or_postal_code,
27+
addressCountry: eventSettings?.location_details?.country
2928
};
3029

3130
// Filter out undefined address properties
3231
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
3332
// @ts-ignore
3433
Object.keys(address).forEach(key => address[key] === undefined && delete address[key]);
3534

36-
const location = event.location_details && Object.keys(address).length > 1 ? {
37-
"@type": "Place",
35+
const location = eventSettings?.location_details && Object.keys(address).length > 1 ? {
36+
"@type": "http://schema.org/Place",
3837
name: event.location_details?.venue_name,
3938
address
4039
} : {};
4140

4241
const schemaOrgJSONLD = {
4342
"@context": "http://schema.org",
44-
"@type": "Event",
43+
"@type": "http://schema.org/Event",
4544
name: title,
4645
startDate,
4746
endDate,
@@ -50,19 +49,21 @@ export const EventDocumentHead = ({event}: EventDocumentHeadProps) => {
5049
description: description,
5150
keywords,
5251
organizer: {
53-
"@type": "Organization",
52+
"@type": "http://schema.org/Organization",
5453
name: event.organizer?.name,
5554
url: event.organizer?.website
5655
},
5756
url,
57+
eventStatus: 'https://schema.org/EventScheduled',
5858
eventAttendanceMode: event.settings?.is_online_event ? "https://schema.org/OnlineEventAttendanceMode" : "https://schema.org/OfflineEventAttendanceMode",
5959
currency: event.currency,
6060
offers: event.tickets?.map(ticket => ({
61-
"@type": "Offer",
61+
"@type": "http://schema.org/Offer",
6262
url,
63-
price: ticket.price?.toString(),
63+
price: ticket.prices?.[0]?.price,
6464
priceCurrency: event.currency,
65-
validFrom: startDate
65+
validFrom: startDate,
66+
availability: ticket.is_available ? "http://schema.org/InStock" : "http://schema.org/SoldOut",
6667
})),
6768
};
6869

‎frontend/src/entry.client.tsx

+26-39
Original file line numberDiff line numberDiff line change
@@ -18,47 +18,34 @@ if (window.__REHYDRATED_STATE__) {
1818
}
1919

2020
async function initClientApp() {
21-
if (window.__REHYDRATED_STATE__) {
22-
// Determine if any of the initial routes are lazy
23-
const lazyMatches = matchRoutes(router, window.location)?.filter(
24-
(m) => m.route.lazy
25-
);
26-
27-
// Load the lazy matches and update the routes before creating your router
28-
// so we can hydrate the SSR-rendered content synchronously
29-
if (lazyMatches && lazyMatches?.length > 0) {
30-
await Promise.all(
31-
lazyMatches.map(async (m) => {
32-
const routeModule = await m.route.lazy?.();
33-
Object.assign(m.route, {...routeModule, lazy: undefined});
34-
})
35-
);
36-
}
37-
38-
const browserRouter = createBrowserRouter(router);
39-
40-
ReactDOM.hydrateRoot(
41-
document.getElementById("app") as HTMLElement,
42-
<App
43-
queryClient={queryClient}
44-
locale={getClientLocale()}
45-
>
46-
<RouterProvider router={browserRouter} fallbackElement={null}/>
47-
</App>
48-
);
49-
} else {
50-
ReactDOM.createRoot(document.getElementById("app") as HTMLElement).render(
51-
<App
52-
queryClient={queryClient}
53-
locale={getClientLocale()}
54-
>
55-
<RouterProvider
56-
router={createBrowserRouter(router)}
57-
fallbackElement={null}
58-
/>
59-
</App>
21+
// Determine if any of the initial routes are lazy
22+
const lazyMatches = matchRoutes(router, window.location)?.filter(
23+
(m) => m.route.lazy
24+
);
25+
26+
// Load the lazy matches and update the routes before creating your router
27+
// so we can hydrate the SSR-rendered content synchronously
28+
if (lazyMatches && lazyMatches?.length > 0) {
29+
await Promise.all(
30+
lazyMatches.map(async (m) => {
31+
const routeModule = await m.route.lazy?.();
32+
Object.assign(m.route, {...routeModule, lazy: undefined});
33+
})
6034
);
6135
}
36+
37+
// todo - Investigate using hydrateRoot instead of createRoot
38+
ReactDOM.createRoot(document.getElementById("app") as HTMLElement).render(
39+
<App
40+
queryClient={queryClient}
41+
locale={getClientLocale()}
42+
>
43+
<RouterProvider
44+
router={createBrowserRouter(router)}
45+
fallbackElement={null}
46+
/>
47+
</App>
48+
);
6249
}
6350

6451
initClientApp();

‎frontend/src/entry.server.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export async function render(params: {
4343
<StaticRouterProvider
4444
router={routerWithContext}
4545
context={context}
46-
nonce="the-nonce"
4746
/>
4847
</App>
4948
);

0 commit comments

Comments
 (0)