From 69a17d7452c7c3bad698ebcef69aebfd6b891b7e Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 2 May 2018 20:06:20 +0300 Subject: [PATCH 1/3] folder-structure.md --- docs/folder-structure.md | 101 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 docs/folder-structure.md diff --git a/docs/folder-structure.md b/docs/folder-structure.md new file mode 100644 index 00000000..3bcef81c --- /dev/null +++ b/docs/folder-structure.md @@ -0,0 +1,101 @@ +# Folder structure + +After cloning the repo, your project should look like this: + +``` +├── ext +│   └── default-mail-templates +├── package.json +├── docs +├── public +│   ├── 500.html +│   ├── index.html +│   ├── robots.txt +│   └── static +├── server +│   ├── index.js +│   ├── csp.js +│   ├── sitemap.js +│   └ ... +└── src + ├── Routes.js + ├── analytics + ├── app.js + ├── assets + ├── components + ├── config.js + ├── containers + ├── ducks + ├── examples.js + ├── forms + ├── index.js + ├── marketplace-custom-config.js + ├── marketplace.css + ├── marketplaceFonts.css + ├── marketplaceIndex.css + ├── reducers.js + ├── routeConfiguration.js + ├── store.js + ├── translations + └── util +``` + +## public/index.html + +This is the page template. It includes fonts, Stripe SDK, Google Maps JavaScript API, and app icons. +It also specifies placeholders for tags generated by +[React Helmet](https://github.com/nfl/react-helmet) + +## src/ + +* `src/index.js` is the JavaScript entry point on the client-side (it also exports `renderApp` + function to be used for server-side rendering). +* `src/app.js` creates ClientApp and ServerApp +* `src/routeConfiguration.js` defines logic between routes and page-level components +* `src/marketplace.css`, `src/marketplaceIndex.css`, `src/marketplaceIndex.css` define marketplace + level styling using [CSS Properties](http://cssnext.io/features/#custom-properties-var) and CSS + Property Sets. +* `src/translations/en.json` all English translations used in Saunatime template app. (A good place + to start customization.) + +### `src/components/` + +Normal components used in Flex Template for Web are defined here. The main file for the component is +behind path `src/components/ComponentName/ComponentName.js`, but you can import it through +`component/index.js`: + +`import { NamedLink } from 'path/to/components';` + +When creating new components, remember to import marketplace.css file to component's own CSS file - +that way you can use CSS Property variables defined in **marketplace.css**. + +### `src/containers/` + +Containers are components that are connected to [Redux](https://redux.js.org/) store. Currently, +this folder contains only page-level components and one common component: TopbarContainer. + +### `src/forms/` + +Forms are in their own folder since they are using a special library to handle validations, errors, +etc. - and we have had forms that have been connected to Redux store. + +_**NOTE:** Currently, we are migrating to +[🏁 Final Form](https://github.com/final-form/react-final-form) (away from +[Redux Form](http://redux-form.com/))._ + +## server/ + +* `server/index.js` handles server-side rendering (SSR). Build with [Express](http://expressjs.com) + (Node.js framework) +* `server/csp.js` [content security policy](https://content-security-policy.com) (a whitelist of + domains that external scripts are allowed to access) +* `server/sitemap.js` generates a minimal sitemap.xml for SEO purposes + +## ext/default-mail-templates/ + +This file contains default email templates for various needs (e.g. _booking-request-accepted_, or +_verify-your-email_). You should customize all the different files (\*-html.html, \*-subject.txt, +and \*-text.txt). + +_**NOTE:** Changing these doesn't change actual email templates - you need to send customized +templates to your FLEX contact person._ From 1e95444ccb647b3820a369e1bec8c7799463ccdc Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 2 May 2018 20:06:47 +0300 Subject: [PATCH 2/3] yarn run format-docs --- docs/extended-data.md | 6 +++--- docs/search-filters.md | 33 +++++++++++++++++---------------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/docs/extended-data.md b/docs/extended-data.md index 0fa75e4e..7c3f792e 100644 --- a/docs/extended-data.md +++ b/docs/extended-data.md @@ -22,7 +22,7 @@ presented to the customer after a booking has been confirmed. ## Data schema and searched -Extended data works out of the box without any prior configuration to the marketplace. Public and +Extended data works out of the box without any prior configuration to the marketplace. Public and protected data can be added to listings just by passing it in the create/update request to the API. However, optionally a _data schema_ can be defined for an extended data key. The data schema allows that extended data attribute to be used as a search parameter in some API endpoints, like in the @@ -31,7 +31,7 @@ listings query endpoint. Contact Sharetribe team if you need to add a schema to ## Extended data in Flex template app The Flex web template uses extended data by default with listing and user resources. In case of the -listings, category and amenities information is stored in the `publicData` attribute. For the -users, phone number is stored in the `protectedData` attribute. As for indexed data, the template app +listings, category and amenities information is stored in the `publicData` attribute. For the users, +phone number is stored in the `protectedData` attribute. As for indexed data, the template app relies on data schemas for categories and amenities to be configured for the marketplace in the API as those values are used as filters in the listing search. diff --git a/docs/search-filters.md b/docs/search-filters.md index 7084e608..02095634 100644 --- a/docs/search-filters.md +++ b/docs/search-filters.md @@ -25,15 +25,16 @@ desktop search view. Next we'll guide you through the steps of adding a _capacity_ filter to the marketplace. First step for adding a new filter is to make sure that the data being used for filtering is saved -in the listing's `publicData` attribute. On how to achieve this, please refer to the [documentation -on extending the listing data model](./extend-listing.md). Another aspect in search filters is that -the public data needs to be indexed in the API. This is currently achieved with a manual operation -done by the Sharetribe support. Once a public data attribute is added to the listings and the data -attribute is indexed, the listing searches can be filtered by that attribute by adding a query -parameter that consists of a preceding "pub\_" and the attribute name, so for the _capacity_ -attribute the parameter would be "pub_capacity". +in the listing's `publicData` attribute. On how to achieve this, please refer to the +[documentation on extending the listing data model](./extend-listing.md). Another aspect in search +filters is that the public data needs to be indexed in the API. This is currently achieved with a +manual operation done by the Sharetribe support. Once a public data attribute is added to the +listings and the data attribute is indexed, the listing searches can be filtered by that attribute +by adding a query parameter that consists of a preceding "pub\_" and the attribute name, so for the +_capacity_ attribute the parameter would be "pub_capacity". -Further reading on public data can be found in the [extended data documentation](./extended-data.md). +Further reading on public data can be found in the +[extended data documentation](./extended-data.md). ### Common changes @@ -58,8 +59,7 @@ export const capacityOptions = [ ]; ``` -A few changes need to be made to the `SearchPage` container in order to get the filters to -work. +A few changes need to be made to the `SearchPage` container in order to get the filters to work. `SearchPage` needs the filter options. One handy way is to add the options as a prop to the component and then set `defaultProps` value from `config.custom` (contains the @@ -102,8 +102,8 @@ filters() { Final thing to do in `SearchPage` is to pass the filters configuration on to the components that take care of rendering the filters. This is achieved by `primaryFilters` and `secondaryFilters` -props that are passed to `MainPanel`. The configurations are passed as an object in the same form -as the configuration object in `filters`. +props that are passed to `MainPanel`. The configurations are passed as an object in the same form as +the configuration object in `filters`. ```js ` element to render the filters From 8bc1e0f92accace91e05a858744e0477a4c4c82e Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 3 May 2018 12:16:05 +0300 Subject: [PATCH 3/3] Review changes --- docs/folder-structure.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/folder-structure.md b/docs/folder-structure.md index 3bcef81c..cf69e2c8 100644 --- a/docs/folder-structure.md +++ b/docs/folder-structure.md @@ -67,7 +67,7 @@ behind path `src/components/ComponentName/ComponentName.js`, but you can import `import { NamedLink } from 'path/to/components';` When creating new components, remember to import marketplace.css file to component's own CSS file - -that way you can use CSS Property variables defined in **marketplace.css**. +that way you can use CSS Property variables defined in `src/marketplace.css`. ### `src/containers/` @@ -77,7 +77,7 @@ this folder contains only page-level components and one common component: Topbar ### `src/forms/` Forms are in their own folder since they are using a special library to handle validations, errors, -etc. - and we have had forms that have been connected to Redux store. +internal state, etc. _**NOTE:** Currently, we are migrating to [🏁 Final Form](https://github.com/final-form/react-final-form) (away from @@ -85,10 +85,10 @@ _**NOTE:** Currently, we are migrating to ## server/ -* `server/index.js` handles server-side rendering (SSR). Build with [Express](http://expressjs.com) +* `server/index.js` handles server-side rendering (SSR). Built with [Express](http://expressjs.com) (Node.js framework) -* `server/csp.js` [content security policy](https://content-security-policy.com) (a whitelist of - domains that external scripts are allowed to access) +* `server/csp.js` [content security policy](https://content-security-policy.com) A whitelist of + domains that the application and loaded scripts are allowed to access from the browser. * `server/sitemap.js` generates a minimal sitemap.xml for SEO purposes ## ext/default-mail-templates/