diff --git a/src/containers/ActionsMetadata/ActionsMetadata.tsx b/src/containers/ActionsMetadata/ActionsMetadata.tsx new file mode 100644 index 00000000..b1e40ce9 --- /dev/null +++ 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 ( + + ) + } + + return ( + + ) +} diff --git a/src/containers/ActionsMetadata/index.ts b/src/containers/ActionsMetadata/index.ts new file mode 100644 index 00000000..8bfb3bd9 --- /dev/null +++ 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 index c5143e4f..a1553079 100644 --- 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 ? : 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 ? : undefined + if (!googleMapApiIsLoaded) { + return + } return ( <> diff --git a/src/containers/MapContainer/MapPOIs/MapPOIs.tsx b/src/containers/MapContainer/MapPOIs/MapPOIs.tsx index 740bb632..789f952d 100644 --- 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) ? : 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 + } + return ( <> ) - 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 = ( - <> - - } - dateLabel={dataLabel} - description={description} - isAssociation={!!partner} - onClickAvatar={onClickAuthorAvatar} - organizerLabel={organizerLabel} - organizerPictureURL={author.avatarUrl} - title={title} - /> - + } + 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 = ( - <> - - } - address={feedItem.metadata.displayAddress} - dateLabel={dateLabel} - description={feedItem.description} - organizerLabel={feedItem.author.displayName} - organizerPictureURL={feedItem.author.avatarUrl} - title={feedItem.title} - /> - + } + 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 index 2de9745c..161d1bea 100644 --- 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 ( - <> - - } - href="/pois" - isLoading={isLoading} - /> - + } + href="/pois" + isLoading={isLoading} + /> ) } diff --git a/src/containers/MetaData/MetaData.tsx b/src/containers/MetaData/MetaData.tsx index 5534f863..5d0bcb82 100644 --- a/src/containers/MetaData/MetaData.tsx +++ b/src/containers/MetaData/MetaData.tsx @@ -31,7 +31,7 @@ export function MetaData(props: MetaDataProps) { return ( - + {title} diff --git a/src/containers/POIsMetadata/POIsMetadata.tsx b/src/containers/POIsMetadata/POIsMetadata.tsx index 42902870..b89c397c 100644 --- 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 ( ) } diff --git a/src/core/useCases/feed/feed.saga.ts b/src/core/useCases/feed/feed.saga.ts index 7303cbd3..30fd0b2c 100644 --- 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 = 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 index 516531e3..df1d682a 100644 --- 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 = () => { - const googleMapApiIsLoaded = useLoadGoogleMapApi() - return ( <> - - { !googleMapApiIsLoaded ? : } + + ) } -// 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 index efcb982e..516b0da4 100644 --- a/src/pages/messages.tsx +++ b/src/pages/messages.tsx @@ -22,7 +22,7 @@ const MessagesPage: StatelessPage = () => { <> diff --git a/src/pages/pois.tsx b/src/pages/pois.tsx index 7bd614c0..709f23cf 100644 --- a/src/pages/pois.tsx +++ b/src/pages/pois.tsx @@ -1,22 +1,18 @@ import { AppContext } from 'next/app' import React from 'react' -import { SplashScreen } from 'src/components/SplashScreen' import { MapPOIs } from 'src/containers/MapContainer' import { POIsMetadata } from 'src/containers/POIsMetadata' import { wrapperStore } from 'src/core/boostrapStore' import { poisActions, selectPOIsIsIdle, selectPOIsIsFetching, selectPOIDetailsIsFetching } from 'src/core/useCases/pois' -import { useLoadGoogleMapApi } from 'src/utils/misc' import { StatelessPage } from 'src/utils/types' interface Props {} const POIs: StatelessPage = () => { - const googleMapApiIsLoaded = useLoadGoogleMapApi() - return ( <> - { !googleMapApiIsLoaded ? : } + ) } @@ -25,22 +21,26 @@ POIs.getInitialProps = wrapperStore.getInitialPageProps((store) => { return (ctx: AppContext['ctx']) => { const poiId = ctx.query.poiId as string - return new Promise((resolve) => { - store.subscribe(() => { - const POIsIsIdle = selectPOIsIsIdle(store.getState()) - const POIsIsFetching = selectPOIsIsFetching(store.getState()) - const POIDetailsIsFetching = selectPOIDetailsIsFetching(store.getState()) + if (poiId) { + return new Promise((resolve) => { + store.subscribe(() => { + const POIsIsIdle = selectPOIsIsIdle(store.getState()) + const POIsIsFetching = selectPOIsIsFetching(store.getState()) + const POIDetailsIsFetching = selectPOIDetailsIsFetching(store.getState()) + + const isReady = !POIsIsIdle && !POIsIsFetching && !POIDetailsIsFetching - const isReady = !POIsIsIdle && !POIsIsFetching && !POIDetailsIsFetching + if (isReady) { + resolve() + } + }) - if (isReady) { - resolve() - } + store.dispatch(poisActions.init()) + store.dispatch(poisActions.setCurrentPOIUuid(poiId)) }) + } - store.dispatch(poisActions.init()) - store.dispatch(poisActions.setCurrentPOIUuid(poiId)) - }) + return Promise.resolve() } })