feat(SSR): implement SSR

ReseauEntourage · Jun 3, 2021 · 387ee75 · 387ee75
1 parent 384adbb
commit 387ee75
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 105 deletions.
diff --git a/src/containers/ActionsMetadata/ActionsMetadata.tsx b/src/containers/ActionsMetadata/ActionsMetadata.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { MetaData } from 'src/containers/MetaData'
+import { env } from 'src/core/env'
+import { selectCurrentFeedItem } from 'src/core/useCases/feed'
+import { texts } from 'src/i18n'
+
+export function ActionsMetadata() {
+  const currentFeedItem = useSelector(selectCurrentFeedItem)
+
+  if (currentFeedItem && currentFeedItem.itemType === 'Entourage') {
+    const { author, title, description, entourageType, groupType } = currentFeedItem
+    const { partner } = author
+    const organizerName = partner ? partner.name : author.displayName
+
+    const pronoun = partner ? texts.content.map.actions.shareTitles.their : texts.content.map.actions.shareTitles.his
+
+    let shareTitle
+    if (groupType === 'outing') {
+      shareTitle = `${texts.content.map.actions.shareTitles.participate} ${organizerName}`
+    } else if (groupType === 'action') {
+      shareTitle = entourageType === 'contribution'
+        ? `${texts.content.map.actions.shareTitles.help} ${organizerName}`
+        + ` ${texts.content.map.actions.shareTitles.realize} ${pronoun} ${texts.content.map.actions.shareTitles.action}`
+        : `${texts.content.map.actions.shareTitles.comeToHelp} ${organizerName}`
+    }
+
+    const url = `${env.SERVER_URL}/actions${currentFeedItem ? `/${currentFeedItem.uuid}` : ''}`
+
+    return (
+      <MetaData
+        description={`${title}. ${description}`}
+        title={shareTitle}
+        url={url}
+      />
+    )
+  }
+
+  return (
+    <MetaData
+      description={texts.nav.pageDescriptions.actions}
+      title={`${texts.nav.pageTitles.actions} - ${texts.nav.pageTitles.main}`}
+      url={`${env.SERVER_URL}/actions`}
+    />
+  )
+}
diff --git a/src/containers/ActionsMetadata/index.ts b/src/containers/ActionsMetadata/index.ts
@@ -0,0 +1 @@
+export { ActionsMetadata } from './ActionsMetadata'
diff --git a/src/containers/MapContainer/MapActions/MapActions.tsx b/src/containers/MapContainer/MapActions/MapActions.tsx
@@ -9,6 +9,7 @@ import { MapContainer } from 'src/containers/MapContainer'
 
 import { feedActions, selectFeedIsIdle } from 'src/core/useCases/feed'
 import { useFirebase, useMount } from 'src/utils/hooks'
+import { useLoadGoogleMapApi } from 'src/utils/misc'
 import { useActionMarkers } from './useActionMarkers'
 import { useCurrentFeedItem } from './useCurrentFeedItem'
 
@@ -19,9 +20,14 @@ export function MapActions() {
   const currentFeedItem = useCurrentFeedItem()
   const feedIsIdle = useSelector(selectFeedIsIdle)
 
+  const googleMapApiIsLoaded = useLoadGoogleMapApi()
+
+  const { feedsMarkersContent, isLoading } = useActionMarkers()
+
+  const cards = currentFeedItem ? <FeedItemCards key={actionId} /> : undefined
+
   useMount(() => {
     sendEvent('View__Feed')
-    dispatch(feedActions.init())
     return () => {
       dispatch(feedActions.cancel())
     }
@@ -31,9 +37,20 @@ export function MapActions() {
     dispatch(feedActions.setCurrentFeedItemUuid(actionId || null))
   }, [actionId, dispatch])
 
-  const { feedsMarkersContent, isLoading } = useActionMarkers()
+  useEffect(() => {
+    if (googleMapApiIsLoaded) {
+      const hasNotLoadedFromSSR = !actionId
+      if (hasNotLoadedFromSSR) {
+        console.log('SET UUID FROM CLIENT')
+        dispatch(feedActions.init())
+        dispatch(feedActions.setCurrentFeedItemUuid(actionId || null))
+      }
+    }
+  }, [actionId, dispatch, googleMapApiIsLoaded])
 
-  const cards = currentFeedItem ? <FeedItemCards key={actionId} /> : undefined
+  if (!googleMapApiIsLoaded) {
+    return <SplashScreen />
+  }
 
   return (
     <>

diff --git a/src/containers/MapContainer/MapPOIs/MapPOIs.tsx b/src/containers/MapContainer/MapPOIs/MapPOIs.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { POIList } from '../LeftLists'
 import { POIFilters } from '../LeftLists/Filters'
@@ -8,6 +8,7 @@ import { SplashScreen } from 'src/components/SplashScreen'
 import { MapContainer } from 'src/containers/MapContainer'
 import { poisActions, selectPOIDetailsIsFetching, selectPOIsIsIdle } from 'src/core/useCases/pois'
 import { useFirebase, useMount } from 'src/utils/hooks'
+import { useLoadGoogleMapApi } from 'src/utils/misc'
 import { useCurrentPOI } from './useCurrentPOI'
 import { usePOIMarkers } from './usePOIMarkers'
 
@@ -19,6 +20,8 @@ export function MapPOIs() {
   const { sendEvent } = useFirebase()
   const poisIsIdle = useSelector(selectPOIsIsIdle)
 
+  const googleMapApiIsLoaded = useLoadGoogleMapApi()
+
   const { poisMarkersContent, isLoading } = usePOIMarkers()
 
   const cards = (poiDetailsFetching || currentPOI) ? <POICards key={poiId} /> : undefined
@@ -30,6 +33,21 @@ export function MapPOIs() {
     }
   })
 
+  useEffect(() => {
+    if (googleMapApiIsLoaded) {
+      const hasNotLoadedFromSSR = !poiId
+      if (hasNotLoadedFromSSR) {
+        console.log('SET UUID FROM CLIENT')
+        dispatch(poisActions.init())
+        dispatch(poisActions.setCurrentPOIUuid(poiId || null))
+      }
+    }
+  }, [dispatch, googleMapApiIsLoaded, poiId])
+
+  if (!googleMapApiIsLoaded) {
+    return <SplashScreen />
+  }
+
   return (
     <>
       <MapContainer

diff --git a/src/containers/MapContainer/RightCards/FeedItemCards/FeedItemCards.tsx b/src/containers/MapContainer/RightCards/FeedItemCards/FeedItemCards.tsx
@@ -9,9 +9,7 @@ import { openModal } from 'src/components/Modal'
 import { ActionCard, EventCard } from 'src/components/RightCards'
 import { UsersList } from 'src/components/UsersList'
 import { useCurrentFeedItem } from 'src/containers/MapContainer'
-import { MetaData } from 'src/containers/MetaData'
 import { ModalUserCard } from 'src/containers/ModalUserCard'
-import { env } from 'src/core/env'
 import { useQueryEntourageUsers } from 'src/core/store'
 import { FeedEntourage } from 'src/core/useCases/feed'
 import { useMe } from 'src/hooks/useMe'
@@ -43,7 +41,7 @@ export function FeedItemCards() {
   let card: React.ReactNode
 
   if (feedItem.groupType === 'action') {
-    const { author, title, description, entourageType, metadata, uuid } = feedItem
+    const { author, title, description, entourageType, metadata } = feedItem
     const { partner } = author
 
     const organizerName = partner ? partner.name : author.displayName
@@ -60,63 +58,39 @@ export function FeedItemCards() {
       </div>
     )
 
-    const pronoun = partner ? texts.content.map.actions.shareTitles.their : texts.content.map.actions.shareTitles.his
-
-    const shareTitle = entourageType === 'contribution'
-      ? `${texts.content.map.actions.shareTitles.help} ${organizerName}`
-      + ` ${texts.content.map.actions.shareTitles.realize} ${pronoun} ${texts.content.map.actions.shareTitles.action}`
-      : `${texts.content.map.actions.shareTitles.comeToHelp} ${organizerName}`
-
     card = (
-      <>
-        <MetaData
-          description={`${title}. ${description}`}
-          title={shareTitle}
-          url={`${env.SERVER_URL}/actions/${uuid}`}
-        />
-        <ActionCard
-          actions={<Actions iAmCreator={iAmCreator} />}
-          dateLabel={dataLabel}
-          description={description}
-          isAssociation={!!partner}
-          onClickAvatar={onClickAuthorAvatar}
-          organizerLabel={organizerLabel}
-          organizerPictureURL={author.avatarUrl}
-          title={title}
-        />
-      </>
+      <ActionCard
+        actions={<Actions iAmCreator={iAmCreator} />}
+        dateLabel={dataLabel}
+        description={description}
+        isAssociation={!!partner}
+        onClickAvatar={onClickAuthorAvatar}
+        organizerLabel={organizerLabel}
+        organizerPictureURL={author.avatarUrl}
+        title={title}
+      />
     )
   }
 
   if (feedItem.groupType === 'outing') {
-    const { author, title, description, metadata, uuid } = feedItem
-    const { partner } = author
+    const { metadata } = feedItem
 
-    const organizerName = partner ? partner.name : author.displayName
     const startDate = new Date(metadata.startsAt)
     const endDate = new Date(metadata.endsAt)
     const formattedEndHour = format(endDate, "H'h'mm", { locale: fr })
     const formattedStartDate = format(startDate, "iiii d MMMM 'de' H'h'mm", { locale: fr })
     const dateLabel = capitalize(`${formattedStartDate} à ${formattedEndHour}`)
 
-    const shareTitle = `${texts.content.map.actions.shareTitles.participate} ${organizerName}`
     card = (
-      <>
-        <MetaData
-          description={`${title}. ${description}`}
-          title={shareTitle}
-          url={`${env.SERVER_URL}/actions/${uuid}`}
-        />
-        <EventCard
-          actions={<Actions iAmCreator={iAmCreator} />}
-          address={feedItem.metadata.displayAddress}
-          dateLabel={dateLabel}
-          description={feedItem.description}
-          organizerLabel={feedItem.author.displayName}
-          organizerPictureURL={feedItem.author.avatarUrl}
-          title={feedItem.title}
-        />
-      </>
+      <EventCard
+        actions={<Actions iAmCreator={iAmCreator} />}
+        address={feedItem.metadata.displayAddress}
+        dateLabel={dateLabel}
+        description={feedItem.description}
+        organizerLabel={feedItem.author.displayName}
+        organizerPictureURL={feedItem.author.avatarUrl}
+        title={feedItem.title}
+      />
     )
   }
 

diff --git a/src/containers/MapContainer/RightCards/POICards/POICards.tsx b/src/containers/MapContainer/RightCards/POICards/POICards.tsx
@@ -3,10 +3,7 @@ import { useSelector } from 'react-redux'
 import { RightCard } from '../RightCard'
 import { POICard } from 'src/components/RightCards'
 import { useCurrentPOI } from 'src/containers/MapContainer'
-import { MetaData } from 'src/containers/MetaData'
-import { env } from 'src/core/env'
 import { selectPOIDetailsIsFetching } from 'src/core/useCases/pois'
-import { texts } from 'src/i18n'
 import { useDelayLoadingNext } from 'src/utils/hooks'
 import { assertIsDefined } from 'src/utils/misc'
 
@@ -18,20 +15,12 @@ export function POICards() {
   if (!poiDetailsFetching) {
     assertIsDefined(poi)
 
-    const { name, uuid, description } = poi
     return (
-      <>
-        <MetaData
-          description={description ?? texts.content.map.pois.shareDescription}
-          title={name}
-          url={`${env.SERVER_URL}/pois/${uuid}`}
-        />
-        <RightCard
-          card={<POICard {...poi} />}
-          href="/pois"
-          isLoading={isLoading}
-        />
-      </>
+      <RightCard
+        card={<POICard {...poi} />}
+        href="/pois"
+        isLoading={isLoading}
+      />
     )
   }
 

diff --git a/src/containers/MetaData/MetaData.tsx b/src/containers/MetaData/MetaData.tsx
@@ -31,7 +31,7 @@ export function MetaData(props: MetaDataProps) {
 
   return (
     <Head>
-      <meta content={texts.nav.pageTitles.main} property="og:site_name" />
+      <meta content="Entourage" property="og:site_name" />
       <title>{title}</title>
       <meta content={title} name="twitter:title" />
       <meta content={title} property="og:title" />

diff --git a/src/containers/POIsMetadata/POIsMetadata.tsx b/src/containers/POIsMetadata/POIsMetadata.tsx
@@ -9,13 +9,14 @@ export function POIsMetadata() {
   const currentPoi = useSelector(selectCurrentPOI)
 
   const title = currentPoi?.name || `${texts.nav.pageTitles.pois} - ${texts.nav.pageTitles.main}`
-  const description = currentPoi?.description || texts.nav.pageDescriptions.pois
+  const description = currentPoi ? texts.content.map.pois.shareDescription : texts.nav.pageDescriptions.pois
+  const url = `${env.SERVER_URL}/pois${currentPoi ? `/${currentPoi.uuid}` : ''}`
 
   return (
     <MetaData
       description={description}
       title={title}
-      url={`${env.SERVER_URL}/pois`}
+      url={url}
     />
   )
 }
diff --git a/src/core/useCases/feed/feed.saga.ts b/src/core/useCases/feed/feed.saga.ts
@@ -84,6 +84,7 @@ function* retrieveCurrentFeedItem() {
   const entourageUuid: ReturnType<typeof selectCurrentFeedItemUuid> = yield select(selectCurrentFeedItemUuid)
 
   if (!currentItem && entourageUuid) {
+    // TODO Add feedItemDetailsFetching
     const dependencies: Dependencies = yield getContext('dependencies')
     const { retrieveFeedItem } = dependencies.feedGateway
 

diff --git a/src/pages/actions.tsx b/src/pages/actions.tsx
@@ -1,32 +1,47 @@
+import { AppContext } from 'next/app'
 import React from 'react'
-import { SplashScreen } from 'src/components/SplashScreen'
+import { ActionsMetadata } from '../containers/ActionsMetadata'
+import { wrapperStore } from '../core/boostrapStore'
+import { feedActions, selectFeedIsFetching, selectFeedIsIdle } from '../core/useCases/feed'
 import { MapActions } from 'src/containers/MapContainer'
-import { MetaData } from 'src/containers/MetaData'
-import { env } from 'src/core/env'
-import { texts } from 'src/i18n'
-import { useLoadGoogleMapApi } from 'src/utils/misc'
 import { StatelessPage } from 'src/utils/types'
 
 interface Props {}
 
 const Actions: StatelessPage<Props> = () => {
-  const googleMapApiIsLoaded = useLoadGoogleMapApi()
-
   return (
     <>
-      <MetaData
-        description={texts.nav.pageDescriptions.actions}
-        title={`${texts.nav.pageTitles.actions} - ${texts.nav.pageTitles.main}`}
-        url={`${env.SERVER_URL}/actions`}
-      />
-      { !googleMapApiIsLoaded ? <SplashScreen /> : <MapActions /> }
+      <ActionsMetadata />
+      <MapActions />
     </>
   )
 }
 
-// Actions.getInitialProps = async (ctx) => {
-//    Wait until React Queries support SSR. Coming soon
-//    see https://github.com/tannerlinsley/react-query/issues/14
-// }
+Actions.getInitialProps = wrapperStore.getInitialPageProps((store) => {
+  return (ctx: AppContext['ctx']) => {
+    const poiId = ctx.query.actionId as string
+
+    if (poiId) {
+      return new Promise((resolve) => {
+        store.subscribe(() => {
+          const feedIsIdle = selectFeedIsIdle(store.getState())
+          const feedIsFetching = selectFeedIsFetching(store.getState())
+          // const feedItemDetailsIsFetching = selectFeedItemDetailsIsFetching(store.getState())
+
+          const isReady = !feedIsIdle && !feedIsFetching
+
+          if (isReady) {
+            resolve()
+          }
+        })
+
+        store.dispatch(feedActions.init())
+        store.dispatch(feedActions.setCurrentFeedItemUuid(poiId))
+      })
+    }
+
+    return Promise.resolve()
+  }
+})
 
 export default Actions
diff --git a/src/pages/messages.tsx b/src/pages/messages.tsx
@@ -22,7 +22,7 @@ const MessagesPage: StatelessPage<MessagesProps> = () => {
     <>
       <MetaData
         title={`${texts.nav.pageTitles.messages} - ${texts.nav.pageTitles.main}`}
-        url={`${env.SERVER_URL}/messages/${entourageUuid ?? ''}`}
+        url={`${env.SERVER_URL}/messages${entourageUuid ? `/${entourageUuid}` : ''}`}
       />
       <PrivateRoute>
         <Messages />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ActionsMetadata } from './ActionsMetadata'