Merge pull request shoutem#34 from shoutem/feature/getting-started-fixes

Feature/getting started fixes
infacq · Sep 15, 2016 · c101136 · c101136
2 parents 8bd919e + 64fba82
commit c101136
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 58 deletions.
diff --git a/_posts/1-1-5-UsingUIToolkit.md b/_posts/1-1-5-UsingUIToolkit.md
@@ -49,20 +49,18 @@ Implement `render` method that will use `ListView`. `ListView` accepts data in t
 
 Remove old `render` method and add these methods:
 
-```JSX{3-14,17-27}
+```JSX{3-12,15-25}
 #file: app/screens/RestaurantsList.js
   getRestaurants() {...}
 
   renderRow(restaurant) {
     return (
-      <Tile>
-        <Image source={% raw %}{{ uri: restaurant.image && restaurant.image.url  }}{% endraw %}>
-          <Overlay styleName="dark">
-            <Title>{restaurant.name}</Title>
-            <Subtitle>{restaurant.address}</Subtitle>
-           </Overlay>
-        </Image>
-      </Tile>
+      <Image styleName="large-banner" source={% raw %}{{ uri: restaurant.image && restaurant.image.url  }}{% endraw %}>
+        <Tile>
+          <Title>{restaurant.name}</Title>
+          <Subtitle>{restaurant.address}</Subtitle>
+        </Tile>
+      </Image>
     );
   }
 
@@ -154,30 +152,28 @@ class RestaurantsList extends Component {
 
 export default connect(
   undefined,
-  (dispatch) => { navigateTo }
+  { navigateTo }
 )(RestaurantsList);
 ```
 
 Implement `renderRow` function.
 
-```JSX{2,5-8,17}
+```JSX{2,5-8,15}
 #file: app/screens/RestaurantsList.js
   renderRow(restaurant) {
     const { navigateTo } = this.props;
 
     return (
       <TouchableOpacity onPress={() => navigateTo({
-          screen: ext('RestaurantDetails'),
-          props: { restaurant }
-        })}>
-        <Tile>
-          <Image source={% raw %}{{ uri: restaurant.image && restaurant.image.url  }}{% endraw %}>
-            <Overlay styleName="dark">
-              <Title>{restaurant.name}</Title>
-              <Subtitle>{restaurant.address}</Subtitle>
-             </Overlay>
-          </Image>
-        </Tile>
+        screen: ext('RestaurantDetails'),
+        props: { restaurant }
+      })}>
+        <Image styleName="large-banner" source={% raw %}{{ uri: restaurant.image && restaurant.image.url  }}{% endraw %}>
+          <Tile>
+            <Title>{restaurant.name}</Title>
+            <Subtitle>{restaurant.address}</Subtitle>
+          </Tile>
+        </Image>
       </TouchableOpacity>
     );
   }
@@ -222,24 +218,22 @@ class RestaurantsList extends Component {
 
     return (
       <TouchableOpacity onPress={() => navigateTo({
-          screen: ext('RestaurantDetails'),
-          props: { restaurant }
-        })}>
-        <Tile>
-          <Image source={% raw %}{{ uri: restaurant.image && restaurant.image.url }}{% endraw %}>
-              <Overlay styleName="dark">
-                <Title>{restaurant.name}</Title>
-                <Subtitle>{restaurant.address}</Subtitle>
-               </Overlay>
-          </Image>
-        </Tile>
+        screen: ext('RestaurantDetails'),
+        props: { restaurant }
+      })}>
+        <Image styleName="large-banner" source={% raw %}{{ uri: restaurant.image && restaurant.image.url  }}{% endraw %}>
+          <Tile>
+            <Title>{restaurant.name}</Title>
+            <Subtitle>{restaurant.address}</Subtitle>
+          </Tile>
+        </Image>
       </TouchableOpacity>
     );
   }
 
   render() {
     this.props.setNavBarProps({
-      title: RESTAURANTS
+      title: 'RESTAURANTS'
     });
 
     return (
@@ -253,7 +247,7 @@ class RestaurantsList extends Component {
 
 export default connect(
   undefined,
-  (dispatch) => { navigateTo }
+  { navigateTo }
 )(RestaurantsList)
 ```
 

diff --git a/_posts/1-1-7-UsingCloudStorage.md b/_posts/1-1-7-UsingCloudStorage.md
@@ -57,16 +57,17 @@ This schema was immediately exported in `extension.json` file:
   }],
   "dataSchemas": [{
     "name": "Restaurants",
-    "path": "server/schemas/Restaurants.json"
+    "path": "server/data-schemas/Restaurants.json"
   }]
 }
 ```
 
 Let's add now properties that we want to persist for a restaurant, such as: `name`, `address`, `description`, `url`, `image` and `mail`.
 
-```JSON{3-33}
+```JSON{4-34}
 #file: server/data-schemas/Restaurants.json
 {
+  "title": "Restaurant",
   "properties": {
     "name": {
       "format": "single-line",
@@ -100,7 +101,6 @@ Let's add now properties that we want to persist for a restaurant, such as: `nam
       "type": "string"
     }
   },
-  "title": "Restaurant",
   "titleProperty": "name",
   "type": "object"
 }

diff --git a/_posts/1-1-8-WorkingWithData.md b/_posts/1-1-8-WorkingWithData.md
@@ -53,7 +53,7 @@ The only thing left to do is to fetch data from **Shoutem Cloud Storage** on `Re
  - `shouldRefresh` - knows if data needs to be (re)fetched and
  - `getCollection` - combines `storage` and `collection` reducer data into an `array`.
 
-```javascript{1-4}
+```javascript{1-6}
 #file: app/screens/RestaurantsList.js
 import {
   find,
@@ -103,13 +103,13 @@ Implement rendering.
 
 In `render` method, we're expecting to get restaurants as an array. In `app/reducers/index.js` we defined `restaurants` dictionary that will be fetched through `storage` and `allRestaurants` collection that will be fetched through `collection` reducer. Combine both into an array with `getCollection` function from `@shoutem/redux-io` in 1st argument of `connect` function. In 2nd argument, we'll bind `find` action creator.
 
-```javascript{2-4}
+```javascript{2-5}
 #file: app/screens/RestaurantsList.js
 export default connect(
   (state) => ({
     restaurants: getCollection(state[ext()].allRestaurants, state)
   }),
-  (dispatch) => { navigateTo, find })
+  { navigateTo, find }
 )(RestaurantsList);
 ```
 
@@ -162,23 +162,20 @@ class RestaurantsList extends Component {
   }
 
   renderRow(restaurant) {
- 	  const { navigateTo } = this.props;
+    const { navigateTo } = this.props;
 
     return (
-    	<TouchableOpacity onPress={() => navigateTo({
-          screen: ext('RestaurantDetails'),
-          props: { restaurant }
-        })}>
-  		  <Tile>
-          <Image styleName="large-wide" source={% raw %}{{ uri: restaurant.image && restaurant.image.url }}{% endraw %}>
-            <Overlay styleName="dark">
-              <Title>{restaurant.name}</Title>
-              <Subtitle>{restaurant.address}</Subtitle>
-            </Overlay>
-          </Image>
-          <Divider styleName="line" />
-        </Tile>
-     </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigateTo({
+        screen: ext('RestaurantDetails'),
+        props: { restaurant }
+      })}>
+        <Image styleName="large-banner" source={% raw %}{{ uri: restaurant.image && restaurant.image.url  }}{% endraw %}>
+          <Tile>
+            <Title>{restaurant.name}</Title>
+            <Subtitle>{restaurant.address}</Subtitle>
+          </Tile>
+        </Image>
+      </TouchableOpacity>
     );
   }
 
@@ -195,7 +192,7 @@ class RestaurantsList extends Component {
     return (
       <ListView
         data={restaurants}
-        status={isBusy(restaurants) ? LOADING : IDLE}
+        status={isBusy(restaurants)}
         renderRow={restaurant => this.renderRow(restaurant, navigateTo)}
       />
     );
@@ -206,7 +203,7 @@ export default connect(
   (state) => ({
     restaurants: getCollection(state[ext()].allRestaurants, state)
   }),
-  (dispatch) => { navigateTo, find }
+  { navigateTo, find }
 )(RestaurantsList);
 
 ```