maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 12:43:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Extract host section into separate file

Browse source
This commit is contained in:
Kimmo Puputti 2018-04-10 15:19:11 +03:00
parent 79f599e9a8
commit ee8f25c162
4 changed files with 127 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/containers/ListingPage/ListingPage.css
View file

@ -467,7 +467,7 @@
}
}
.yourHostContainer {
.sectionHost {
position: relative;
padding: 0 24px;
margin-bottom: 5px;

51
src/containers/ListingPage/ListingPage.js
View file

@ -24,15 +24,13 @@ import {
Page,
NamedLink,
NamedRedirect,
Modal,
LayoutSingleColumn,
LayoutWrapperTopbar,
LayoutWrapperMain,
LayoutWrapperFooter,
Footer,
UserCard,
} from '../../components';
import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '../../containers';
import { BookingDatesForm, TopbarContainer, NotFoundPage } from '../../containers';
import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
import SectionImages from './SectionImages';
@ -40,6 +38,7 @@ import SectionHeading from './SectionHeading';
import SectionDescription from './SectionDescription';
import SectionFeatures from './SectionFeatures';
import SectionReviews from './SectionReviews';
import SectionHost from './SectionHost';
import SectionRulesMaybe from './SectionRulesMaybe';
import SectionMapMaybe from './SectionMapMaybe';
import css from './ListingPage.css';
@ -484,38 +483,20 @@ export class ListingPageComponent extends Component {
listingId={currentListing.id}
/>
<SectionReviews reviews={reviews} fetchReviewsError={fetchReviewsError} />
<div id="host" className={css.yourHostContainer}>
<h2 className={css.yourHostHeading}>
<FormattedMessage id="ListingPage.yourHostHeading" />
</h2>
{isOwnListing ? (
<NamedLink className={css.editProfileLink} name="ProfileSettingsPage">
<FormattedMessage id="ListingPage.editProfileLink" />
</NamedLink>
) : null}
<UserCard
user={currentListing.author}
currentUser={currentUser}
onContactUser={this.onContactUser}
/>
<Modal
id="ListingPage.enquiry"
contentClassName={css.enquiryModalContent}
isOpen={isAuthenticated && this.state.enquiryModalOpen}
onClose={() => this.setState({ enquiryModalOpen: false })}
onManageDisableScrolling={onManageDisableScrolling}
>
<EnquiryForm
className={css.enquiryForm}
submitButtonWrapperClassName={css.enquirySubmitButtonWrapper}
listingTitle={title}
authorDisplayName={authorDisplayName}
sendEnquiryError={sendEnquiryError}
onSubmit={this.onSubmitEnquiry}
inProgress={sendEnquiryInProgress}
/>
</Modal>
</div>
<SectionHost
title={title}
listing={currentListing}
isOwnListing={isOwnListing}
authorDisplayName={authorDisplayName}
onContactUser={this.onContactUser}
isEnquiryModalOpen={isAuthenticated && this.state.enquiryModalOpen}
onCloseEnquiryModal={() => this.setState({ enquiryModalOpen: false })}
sendEnquiryError={sendEnquiryError}
sendEnquiryInProgress={sendEnquiryInProgress}
onSubmitEnquiry={this.onSubmitEnquiry}
currentUser={currentUser}
onManageDisableScrolling={onManageDisableScrolling}
/>
</div>
<ModalInMobile

55
src/containers/ListingPage/SectionHost.js Normal file
View file

@ -0,0 +1,55 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { NamedLink, UserCard, Modal } from '../../components';
import { EnquiryForm } from '../../containers';
import css from './ListingPage.css';
const SectionHost = props => {
const {
title,
listing,
isOwnListing,
authorDisplayName,
onContactUser,
isEnquiryModalOpen,
onCloseEnquiryModal,
sendEnquiryError,
sendEnquiryInProgress,
onSubmitEnquiry,
currentUser,
onManageDisableScrolling,
} = props;
return (
<div id="host" className={css.sectionHost}>
<h2 className={css.yourHostHeading}>
<FormattedMessage id="ListingPage.yourHostHeading" />
</h2>
{isOwnListing ? (
<NamedLink className={css.editProfileLink} name="ProfileSettingsPage">
<FormattedMessage id="ListingPage.editProfileLink" />
</NamedLink>
) : null}
<UserCard user={listing.author} currentUser={currentUser} onContactUser={onContactUser} />
<Modal
id="ListingPage.enquiry"
contentClassName={css.enquiryModalContent}
isOpen={isEnquiryModalOpen}
onClose={onCloseEnquiryModal}
onManageDisableScrolling={onManageDisableScrolling}
>
<EnquiryForm
className={css.enquiryForm}
submitButtonWrapperClassName={css.enquirySubmitButtonWrapper}
listingTitle={title}
authorDisplayName={authorDisplayName}
sendEnquiryError={sendEnquiryError}
onSubmit={onSubmitEnquiry}
inProgress={sendEnquiryInProgress}
/>
</Modal>
</div>
);
};
export default SectionHost;

105
src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
View file

@ -258,41 +258,48 @@ exports[`ListingPage matches snapshot 1`] = `
fetchReviewsError={null}
reviews={Array []}
/>
<div
id="host"
>
<h2>
<FormattedMessage
id="ListingPage.yourHostHeading"
values={Object {}}
/>
</h2>
<UserCard
className={null}
currentUser={
Object {
"attributes": Object {
"banned": false,
"email": "user-2@example.com",
"emailVerified": true,
"profile": Object {
"abbreviatedName": "user-2 abbreviated name",
"displayName": "user-2 display name",
"firstName": "user-2 first name",
"lastName": "user-2 last name",
},
"stripeConnected": true,
<SectionHost
authorDisplayName="user-1 display name"
currentUser={
Object {
"attributes": Object {
"banned": false,
"email": "user-2@example.com",
"emailVerified": true,
"profile": Object {
"abbreviatedName": "user-2 abbreviated name",
"displayName": "user-2 display name",
"firstName": "user-2 first name",
"lastName": "user-2 last name",
},
"id": UUID {
"uuid": "user-2",
},
"type": "currentUser",
}
"stripeConnected": true,
},
"id": UUID {
"uuid": "user-2",
},
"type": "currentUser",
}
onContactUser={[Function]}
rootClassName={null}
user={
Object {
}
isEnquiryModalOpen={false}
isOwnListing={false}
listing={
Object {
"attributes": Object {
"deleted": false,
"description": "listing1 description",
"geolocation": LatLng {
"lat": 40,
"lng": 60,
},
"price": Money {
"amount": 5500,
"currency": "USD",
},
"publicData": Object {},
"state": "published",
"title": "listing1 title",
},
"author": Object {
"attributes": Object {
"banned": false,
"profile": Object {
@ -304,24 +311,22 @@ exports[`ListingPage matches snapshot 1`] = `
"uuid": "user-1",
},
"type": "user",
}
},
"id": UUID {
"uuid": "listing1",
},
"images": Array [],
"type": "listing",
}
/>
<InjectIntl(ModalComponent)
id="ListingPage.enquiry"
isOpen={false}
onClose={[Function]}
onManageDisableScrolling={[Function]}
>
<ReduxForm
authorDisplayName="user-1 display name"
inProgress={false}
listingTitle="listing1 title"
onSubmit={[Function]}
sendEnquiryError={null}
/>
</InjectIntl(ModalComponent)>
</div>
}
onCloseEnquiryModal={[Function]}
onContactUser={[Function]}
onManageDisableScrolling={[Function]}
onSubmitEnquiry={[Function]}
sendEnquiryError={null}
sendEnquiryInProgress={false}
title="listing1 title"
/>
</div>
<withViewport(ModalInMobileComponent)
id="BookingDatesFormInModal"