merge resolved

Author: ibirnam

P05-Adding-React-Router/content.md

@@ -20,9 +20,9 @@ To work with React Router it helps to understand some terminology.
 - **Router** - A parent component that manages Routes
 - **Route** - A component that displays another component
 
-Think of the Router as the manager, you only need one of these. The Router checks the URL in the address bar and passes this information to its descendant Routes. 
+Think of the Router as the manager, you only need one of these. The Router checks the URL in the address bar and passes this information to its descendant Routes.
 
-Imagine a website with three pages built with React using React Router. The Router and Route components might be arranged like this: 
+Imagine a website with three pages built with React using React Router. The Router and Route components might be arranged like this:
 
 - Router
   - Route - Home Page
@@ -31,7 +31,7 @@ Imagine a website with three pages built with React using React Router. The Rout
 
 A Route is responsible for displaying components. Routes have a path property: when the path matches the URL in the address, the Route displays the appropriate component, otherwise not.
 
-In code this might look like: 
+In code this might look like:
 
 ```js
 <Router>
@@ -85,7 +85,7 @@ Router manages routes. It should be a top level component. For this reason you'l
 import { HashRouter as Router, Route } from 'react-router-dom'
 ```
 
-Why `HashRouter as Router`? This is an alias. You're importing HashRouter but using it under the name `Router` instead. This will make it easier to make changes in the future if needed. 
+Why `HashRouter as Router`? This is an alias. You're importing HashRouter but using it under the name `Router` instead. This will make it easier to make changes in the future if needed.
 
 > [action]
 >
@@ -460,9 +460,9 @@ const spaces = data.map(({ title, address, images, hours }, i) => {
 })
 ```
 
-On the first line there is a second parameter to: 
+On the first line there is a second parameter to:
 
-`map(obj, i)`, or 
+`map(obj, i)`, or
 
 `map({ ... }, i)`. here is the whole line as it is shown above:
 

P06-Organizing-Files/content.md

@@ -23,23 +23,26 @@ Organizing components and their dependencies in folders is one way to keep compo
 >
 > Move all of your components into this folder. It should include all of the following files:
 >
-> - src
->   - components
->       - About.js
->       - App.css
->       - App.js
->       - App.test.js
->       - index.css
->       - index.js
->       - POPOSDetails.js
->       - POPOSList.css
->       - POPOSList.js
->       - POPOSSpace.css
->       - POPOSSpace.js
->       - serviceWorker.js
->       - setupTests.js
->       - Title.css
->       - Title.js
+```
+- src
+  - App.css
+  - App.js
+  - App.test.js
+  - components
+    - About.js
+    - POPOSDetails.js
+    - POPOSList.css
+    - POPOSList.js
+    - POPOSSpace.css
+    - POPOSSpace.js
+    - serviceWorker.js
+    - setupTests.js
+    - Title.css
+    - Title.js
+  - index.css
+  - index.js
+```
+>
 
 All of your components should now be in the `components` folder, **except for index.js and index.css**. After this change, your folder structure should look like the following:
 

P08-Styling-Spaces/content.md

@@ -99,7 +99,7 @@ Give it a try!
 > Edit `POPOSSpace.css `, set the position property of the parent element to relative.
 > 
 ```CSS
-.POPOSSpace-title {
+.POPOSSpace {
 	position: relative;
 }
 ```

P10-Search-Spaces/content.md

@@ -180,6 +180,114 @@ const spaces = data.filter((obj) => {
 })
 ```
 
+### ids out sync
+
+At this point the List page will show the search results. Filter is returning a new array with the spaces that match your search results **the index of these new items won't match the position of those items in the data array.** 
+
+For example: 
+
+```JS 
+const data = ['100 Pine', '50 Market', '101 California']
+// Note the indexes
+// 0:'100 Pine', 1:'50 Market', 2:'101 California'
+
+const filteredData = data.filter((item) => item.includes('1'))
+// Note the indexes - Notice 50 market is removed and 101 California is now index 1! 
+// 0:'100 Pine', 1:'101 California'
+```
+
+The code in our detail page relies on the index to find the information in the source data. 
+
+In the example code above if we use the index from the filtered data the details page would show 50 market instead of 101 California. 
+
+To fix this let's add an id property to our data. 
+
+> [info] 
+> 
+> Add a new file: `sfpopos-data.js` put this in the same folder as `sfpopos-data.json`.
+>
+> Add the following code to `sfpopos-data.js`:
+> 
+```JS
+import data from './sfpopos-data.json'
+
+data.forEach((obj, i) => {
+	obj.id = i
+})
+
+export default data
+```
+>
+
+What happened here? This file imports `./sfpopos-data.json`, loops over the data and adds a new id property to each object. Where the objects originally looked like this: 
+
+```JS
+{
+	title: 'Transamerica Redwood Park',
+	desc: 'Located in the shadow of the Transamerica Pyramid ...',
+	address: '600 Montgomery St San ...',
+	...
+}
+```
+
+The objects now all look like this: 
+
+```js
+{
+	id: 0, // NEW id added here matches the index of this element! 
+	title: 'Transamerica Redwood Park',
+	desc: 'Located in the shadow of the Transamerica Pyramid ...',
+	address: '600 Montgomery St San ...',
+	...
+}
+```
+
+The last line exports the data. Our other files can now import the data from this file. You'll need to edit any of the files that import `./sfpopos-data.json` and change the import to `./sfpopos-data.js` (notice the difference `.json` to `.js`.)
+
+> [info]
+>
+> Edit the following follows changing: 
+```JS 
+// Change
+import data from '../../sfpopos-data.json'
+// to
+import data from '../../sfpopos-data.js'
+```
+> 
+> `components/RandomSpace.js`
+> `POPOSDetails.js`
+> `POPOSList.js`
+>
+
+> [info]
+> 
+> Use the id from data rather than the index from map as the id for each space. 
+> 
+> Edit `./components/POPOSList.js`
+> 
+```JS
+const spaces = data.filter(({ features, title, address }) => {
+	...
+	}).map((obj) => { // remove i here
+			// Add id here! 
+			const { id, title, address, images, hours, features } = obj
+		return (
+			<POPOSSpace
+				id={id} // use id here
+				key={`${title}-${id}`} // use id here
+        name={title}
+        address={address}
+				image={images[0]}
+				hours={hours}
+      />
+		)
+	})
+	...
+```
+>
+
+Here you replaced the index of the element in the array with the id of that element. Where the index might change when the array is filtered each object will always use the same value for the id. 
+
 ### Style the search field
 
 Here are a few ideas to style the search field. What you do here depends on where you positioned the search field. In my example code it ended up in the first grid cell in the list and I decided to go with it. 

P13-Publish-to-GitHub-Pages/content.md

@@ -0,0 +1,29 @@
+---
+title: "Publish to GitHub Pages"
+slug: publish-to-github-pages
+---
+
+## Publishing your React Projects to GitHub
+
+Sharing your work with world is a good thing. GitHub provides an easy way to publish your work. GitHub doesn't allow you to run backend code, upload files, or host a database. Within those limitations GitHub Pages provides a service for the reasonable cost of $0. 
+
+GitHub Pages allows you to publish static web sites with little more than the push of a button. The performance is also very good. The pages load quickly and are always available. 
+
+### Publishing react
+
+React projects take a little more to publish. The React project source code doesn't run in the browser it must compiled/transpiled first. This process happen when you run your react code in the terminal with `yarn start` or `npm start`. If you want to publish your work you'll run `npm run build`. This will create a JS bundle and put it your public directly. This is the code that you would share with the world. 
+
+We can take this process one step further. Besides building the project we can build to a branch and publish that branch. This way your developer code that's in process can be worked on on the master branch while code that's been published can be served from another branch. 
+
+Luckily someone has made a library that automates the process. 
+
+> [info]
+> 
+> Install the `gh-pages` package. 
+> 
+> `npm install --save-dev gh-pages`
+>
+
+
+
+