Skip to content

Commit

Permalink
Merge commit '8bc9827731875c7d7cbb3042f408aed0da023624' into update-v…
Browse files Browse the repository at this point in the history
…10.1.0-from-upstream
  • Loading branch information
Gnito committed Feb 28, 2023
2 parents ad45006 + 8bc9827 commit 9f65b04
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 56 deletions.
15 changes: 15 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,24 @@ https://github.com/sharetribe/flex-template-web/

## Upcoming version 2023-XX-XX

## [v12.1.0] 2023-02-28

- [fix] AuthenticationPage.duck.js: had wrong asset name.
[#228](https://github.com/sharetribe/ftw-hourly/pull/228)

### Updates from upstream (FTW-daily v10.1.0)

- [change] remove background-color from images (to allow opacity).
[#1590](https://github.com/sharetribe/ftw-daily/pull/1590)
- [change] improve error handling possibilities on PageBuilder.
[#1589](https://github.com/sharetribe/ftw-daily/pull/1589)
- [fix] AuthenticationPage.duck.js: had wrong asset name.
[#1588](https://github.com/sharetribe/ftw-daily/pull/1588)
- [change] P.js: remove requirement for mandatory children.
[#1587](https://github.com/sharetribe/ftw-daily/pull/1587)

[v12.1.0]: https://github.com/sharetribe/ftw-hourly/compare/v12.0.0.../v12.1.0

## [v12.0.0] 2023-02-14

### Updates from upstream (FTW-daily v10.0.0)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "app",
"version": "12.0.0",
"version": "12.1.0",
"private": true,
"license": "Apache-2.0",
"dependencies": {
Expand Down
39 changes: 27 additions & 12 deletions src/containers/LandingPage/FallbackPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import PageBuilder from '../PageBuilder/PageBuilder';
import css from './FallbackPage.module.css';

// Create fallback content (array of sections) in page asset format:
export const fallbackSections = {
export const fallbackSections = error => ({
sections: [
{
sectionType: 'customMaintenance',
sectionId: 'maintenance-mode',
// pass possible error to SectionMaintenanceMode component
error,
},
],
meta: {
Expand All @@ -20,37 +22,50 @@ export const fallbackSections = {
content: 'Home page fetch failed',
},
},
};
});

// Note: this microcopy/translation does not come from translation file.
// It needs to be something that is not part of fetched assets but built-in text
const SectionMaintenanceMode = props => {
const { sectionId } = props;
const { sectionId, error } = props;
// 404 means that the landing-page asset was not found from the expected asset path
// which is defined in config.js
const is404 = error?.status === 404;

return (
<section id={sectionId} className={css.root}>
<div className={css.content}>
<h1>Maintenance mode</h1>
<p>
The marketplace is not fully operational at the moment. Try refreshing the page and if
that does not solve the issue, contact the marketplace admins.
</p>
</div>
{is404 ? (
<div className={css.content}>
<h2>Maintenance mode</h2>
<p>
The marketplace is not fully operational at the moment.
<br />
Try refreshing the page and if that does not solve the issue, contact the marketplace
admins.
</p>
</div>
) : (
<div className={css.content}>
<h2>Oops, something went wrong!</h2>
<p>{error?.message}</p>
</div>
)}
</section>
);
};

// This is the fallback page, in case there's no Landing Page asset defined in Console.
const FallbackPage = props => {
const { error, ...rest } = props;
return (
<PageBuilder
pageAssetsData={fallbackSections}
pageAssetsData={fallbackSections(error)}
options={{
sectionComponents: {
customMaintenance: { component: SectionMaintenanceMode },
},
}}
{...props}
{...rest}
/>
);
};
Expand Down
21 changes: 8 additions & 13 deletions src/containers/LandingPage/LandingPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,37 @@ import React from 'react';
import { bool, object } from 'prop-types';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import { injectIntl, intlShape } from '../../util/reactIntl';
import { camelize } from '../../util/string';
import { propTypes } from '../../util/types';

import PageBuilder from '../../containers/PageBuilder/PageBuilder';

import FallbackPage from './FallbackPage';
import { ASSET_NAME } from './LandingPage.duck';

export const LandingPageComponent = props => {
const { pageAssetsData, inProgress } = props;
const { pageAssetsData, inProgress, error } = props;

return (
<PageBuilder
pageAssetsData={pageAssetsData?.[camelize(ASSET_NAME)]?.data}
inProgress={inProgress}
fallbackPage={<FallbackPage />}
error={error}
fallbackPage={<FallbackPage error={error} />}
/>
);
};

LandingPageComponent.propTypes = {
// from injectIntl
intl: intlShape.isRequired,
pageAssetsData: object,
inProgress: bool,
error: propTypes.error,
};

const mapStateToProps = state => {
const { pageAssetsData, inProgress } = state.hostedAssets || {};
return { pageAssetsData, inProgress };
const { pageAssetsData, inProgress, error } = state.hostedAssets || {};
return { pageAssetsData, inProgress, error };
};

// Note: it is important that the withRouter HOC is **outside** the
Expand All @@ -42,10 +41,6 @@ const mapStateToProps = state => {
// lifecycle hook.
//
// See: https://github.com/ReactTraining/react-router/issues/4671
const LandingPage = compose(
withRouter,
connect(mapStateToProps),
injectIntl
)(LandingPageComponent);
const LandingPage = compose(connect(mapStateToProps))(LandingPageComponent);

export default LandingPage;
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

.media {
width: 100%;
background-color: var(--matterColorNegative); /* Loading state color for the images */
border-radius: 8px;
margin-bottom: 0;
}
Expand Down
12 changes: 10 additions & 2 deletions src/containers/PageBuilder/PageBuilder.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,17 @@ const getMetadata = (meta, schemaType, fieldOptions) => {
* @returns page component
*/
const PageBuilder = props => {
const { pageAssetsData, inProgress, fallbackPage, schemaType, options, ...pageProps } = props;
const {
pageAssetsData,
inProgress,
error,
fallbackPage,
schemaType,
options,
...pageProps
} = props;

if (!pageAssetsData && fallbackPage && !inProgress) {
if (!pageAssetsData && fallbackPage && !inProgress && error) {
return fallbackPage;
}

Expand Down
2 changes: 1 addition & 1 deletion src/containers/PageBuilder/Primitives/Image/Image.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const FieldImage = React.forwardRef((props, ref) => {
const firstImageVariant = variants[variantNames[0]];
const { width: aspectWidth, height: aspectHeight } = firstImageVariant || {};

const classes = classNames(rootClassName || css.markdownImage, className);
const classes = classNames(rootClassName || css.fieldImage, className);
return (
<AspectRatioWrapper className={classes} width={aspectWidth || 1} height={aspectHeight || 1}>
<ResponsiveImage
Expand Down
6 changes: 5 additions & 1 deletion src/containers/PageBuilder/Primitives/Image/Image.module.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
.markdownImage {
width: 100%;
/**
* Note: markdown images might be too small for filling the space.
*/
width: auto;
max-width: 100%;
border-radius: 8px;
object-fit: cover;
}
Expand Down
19 changes: 7 additions & 12 deletions src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@ import React from 'react';
import { bool, object } from 'prop-types';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import { injectIntl, intlShape } from '../../util/reactIntl';
import { camelize } from '../../util/string';
import { propTypes } from '../../util/types';

import { H1 } from '../PageBuilder/Primitives/Heading';
import PageBuilder, { SectionBuilder } from '../../containers/PageBuilder/PageBuilder';
Expand Down Expand Up @@ -47,27 +46,27 @@ const PrivacyPolicyContent = props => {

// Presentational component for PrivacyPolicyPage
const PrivacyPolicyPageComponent = props => {
const { pageAssetsData, inProgress } = props;
const { pageAssetsData, inProgress, error } = props;

return (
<PageBuilder
pageAssetsData={pageAssetsData?.[camelize(ASSET_NAME)]?.data}
inProgress={inProgress}
error={error}
fallbackPage={<FallbackPage />}
/>
);
};

PrivacyPolicyPageComponent.propTypes = {
// from injectIntl
intl: intlShape.isRequired,
pageAssetsData: object,
inProgress: bool,
error: propTypes.error,
};

const mapStateToProps = state => {
const { pageAssetsData, inProgress } = state.hostedAssets || {};
return { pageAssetsData, inProgress };
const { pageAssetsData, inProgress, error } = state.hostedAssets || {};
return { pageAssetsData, inProgress, error };
};

// Note: it is important that the withRouter HOC is **outside** the
Expand All @@ -76,11 +75,7 @@ const mapStateToProps = state => {
// lifecycle hook.
//
// See: https://github.com/ReactTraining/react-router/issues/4671
const PrivacyPolicyPage = compose(
withRouter,
connect(mapStateToProps),
injectIntl
)(PrivacyPolicyPageComponent);
const PrivacyPolicyPage = compose(connect(mapStateToProps))(PrivacyPolicyPageComponent);

const PRIVACY_POLICY_ASSET_NAME = ASSET_NAME;
export { PRIVACY_POLICY_ASSET_NAME, PrivacyPolicyPageComponent, PrivacyPolicyContent };
Expand Down
20 changes: 7 additions & 13 deletions src/containers/TermsOfServicePage/TermsOfServicePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import React from 'react';
import { bool, object } from 'prop-types';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import config from '../../config';
import { injectIntl, intlShape } from '../../util/reactIntl';
import { camelize } from '../../util/string';
import { propTypes } from '../../util/types';

import { H1 } from '../PageBuilder/Primitives/Heading';
import PageBuilder, { SectionBuilder } from '../../containers/PageBuilder/PageBuilder';
Expand Down Expand Up @@ -48,27 +46,27 @@ const TermsOfServiceContent = props => {

// Presentational component for TermsOfServicePage
const TermsOfServicePageComponent = props => {
const { pageAssetsData, inProgress } = props;
const { pageAssetsData, inProgress, error } = props;

return (
<PageBuilder
pageAssetsData={pageAssetsData?.[camelize(ASSET_NAME)]?.data}
inProgress={inProgress}
error={error}
fallbackPage={<FallbackPage />}
/>
);
};

TermsOfServicePageComponent.propTypes = {
// from injectIntl
intl: intlShape.isRequired,
pageAssetsData: object,
inProgress: bool,
error: propTypes.error,
};

const mapStateToProps = state => {
const { pageAssetsData, inProgress } = state.hostedAssets || {};
return { pageAssetsData, inProgress };
const { pageAssetsData, inProgress, error } = state.hostedAssets || {};
return { pageAssetsData, inProgress, error };
};

// Note: it is important that the withRouter HOC is **outside** the
Expand All @@ -77,11 +75,7 @@ const mapStateToProps = state => {
// lifecycle hook.
//
// See: https://github.com/ReactTraining/react-router/issues/4671
const TermsOfServicePage = compose(
withRouter,
connect(mapStateToProps),
injectIntl
)(TermsOfServicePageComponent);
const TermsOfServicePage = compose(connect(mapStateToProps))(TermsOfServicePageComponent);

const TOS_ASSET_NAME = ASSET_NAME;
export { TOS_ASSET_NAME, TermsOfServicePageComponent, TermsOfServiceContent };
Expand Down

0 comments on commit 9f65b04

Please sign in to comment.