Merge pull request #816 from sharetribe/folder-structure

Folder structure

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.

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 `src/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,
+internal state, etc.
+
+_**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). 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 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/
+
+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._

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
 <MainPanel
@@ -123,9 +123,9 @@ passed as props to the components that render the filters: `SearchFilters`, `Sea
 `SearchFiltersMobile` .The difference between filters passed as primary and secondary varies in
 mobile and desktop views:
 
-* __Desktop:__ Primary filters are shown in the top of the search view, secondary filters are
-   rendered in a distinct panel that opens on top of search results.
-* __Mobile:__ Both primary and secondary filters are rendered in the same modal.
+* **Desktop:** Primary filters are shown in the top of the search view, secondary filters are
+  rendered in a distinct panel that opens on top of search results.
+* **Mobile:** Both primary and secondary filters are rendered in the same modal.
 
 ### Desktop filters
 
@@ -163,7 +163,8 @@ The mobile view uses the same `SelectSingleFilterPlain` and `SelectMultipleFilte
 as the filter panel. In this case the filter components are declared in `SearchFiltersMobile`. The
 following steps are required to add a mobile filter:
 
-* declare a prop with the same name that you added the filter config to `primaryFilters` or `secondaryFilters`
+* declare a prop with the same name that you added the filter config to `primaryFilters` or
+  `secondaryFilters`
 * resolve the filters initial value with `initialValue` and `initialValues` methods
 * use the `SelectSingleFilterPlain` and `SelectMultipleFilterPlain` components inside the
   `<div className={css.filtersWrapper}>` element to render the filters