updated readme

lab2/README.md

@@ -1,17 +1,17 @@
 # Lab 2
 
 ## Starta applikationen för Lab 2
-Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå sedan in på http://localhost:3000/ för att öppna upp applikationen. 
+Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå sedan in på http://localhost:3000/ för att öppna upp applikationen.
 
 ## Uppgift
 1. Bekanta dig med hur applikationen är uppbyggt komponentmässigt. Utgå från `App.js`.
 2. Byt titel ("*Insert title") på `List`-komponenten genom att skicka in ett annat värde för rätt `prop`.
 3. Just nu går det inte att byta bakgrundfärg. Komponenten `App.js` har ett `state` för sidans bakgrundsfärg (`bgColor`). Använd callbacken från `BackgroundColorPicker` för att få färgväljaren att fungera. Hur sätts själva färgen?
 4. Skicka in en lista med användare som `prop` till komponenten `List`. Hur hämtas listan med användare?
 5. Användarna syns fortfarande inte listade. Använd __React Devtools Extension__ för att verifiera att komponenten `List` har fått in en lista med användare.
-6. Rendera ut lista med användare i funktionen `render()` i komponenten `List.js`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast). 
+6. Rendera ut lista med användare i funktionen `render()` i komponenten `List.js`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast).
 7. Nu vill vi kunna filtera listan. I `List.js` använader vi komponenten `SearchBar` som tar en callback, `onKeyPressed`. Vad vill vi göra då? Implementera `onKeyPressed()` i `List.js`!
-8. Nu när `List.js` känner till söktermen vill vi filtrera listan av användare. Det finns en funktion `filterListItemsBySearchTerm()` som gör just detta. Instansiera konstanten `filteredItems` och iterera över denna istället för `this.props.items`.
+8. Nu när `List.js` känner till söktermen vill vi filtrera listan av användare. Det finns en metod `filterListItemsBySearchTerm()` som gör just detta. Tilldela konstanten `filteredItems` och iterera över denna istället för `this.props.items`.
 
 
 ## Jag har tid över, vad gör jag nu?

lab2/src/components/App/App.js

@@ -37,7 +37,7 @@ class App extends Component {
             </p>
           </div>
           <BackgroundColorPicker onChange={(this.changeBackgroundColor)}/>
-          <List title={/*TODO: Task 1*/'*Insert title'} items={/*TODO: Task 4 */[]}/>
+          <List title={/*TODO: Task 2*/'*Insert title'} items={/*TODO: Task 4 */[]}/>
         </div>
     );
   }

lab2/src/components/List/List.js

@@ -39,7 +39,8 @@ class List extends Component {
           {this.props.items.length === 0 ? (<div>Empty list...</div>) : (
               <ul className="list-group">
                 {
-                  // TODO: Task 6. Iterate over items and return <li>-tags.
+                  // TODO: Task 6. Map (see react-examples.md if stuck :D) over items and return <li>-tags.
+                  // <li className="list-group-item">A list item</li>
                   console.log("ITEMS", this.props.items)
                 }
               </ul>

lab3/README.md

@@ -4,17 +4,17 @@
 Från projektroten: `$ cd lab3`, `$ npm install` följt av `$ npm start`. Gå sedan in på http://localhost:3000/ för att öppna upp applikationen.
 
 ## Del 1 - Redux-snurran
-1. Ta en till på befintliga komponenter och hur Redux-snurran är implementerad för att välja bakgrund. Ladda ner och använd [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) för detta. 
-2. Bakgrundsfärgen är satt till `lavender` från början. Hur sätts den? Byt default från `lavender` till `gold`. Ladda om sidan och se så att det fungerar. _Hint: Detta görs i en reducer_
+1. Ta en till på befintliga komponenter och hur Redux-snurran är implementerad för att välja bakgrund. Ladda ner och använd [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) för detta.
+2. Bakgrundsfärgen är satt till `lavender` från början via initialState. Byt default från `lavender` till `gold`. Ladda om sidan och se så att det fungerar. _Hint: Detta görs i en reducer_
 3. Användarna visas inte i listan just nu. Börja med att dispatcha ett action när användare har hämtats asynkront i `userActions`.
 4. När vi har dispatchat en action måste vi hantera den i våra reducers. Öppna `userReducers.js` och stoppa in resultatet från din nya action i applikationens state.
-5. I `Container.js` har vi nu tillgång till applikationens state och dipatches tack vare `connect()`. Vi vill här hämta alla användare när componenten mountas. Implementera detta.    
-6. Nu när vi har användaran i vår store vill vi kunna läsa dom i komponenten `List.js`. Implementera funktionen `mapStateToProps()` i `List.js`.
-7. Nu ska applikationen fungera fullt ut. Eftersom vi läser användare från store behöver vi inte längre skicka in `items` som `prop` när vi använder komponenten `<List />` i `Container.js`. Ta bort den. Applikationen fungerar ändå.  
+5. I `Container.js` har vi nu tillgång till applikationens state och dipatches tack vare `connect()`. Vi vill här hämta alla användare när componenten mountas. Implementera detta.
+6. Nu när vi har användaran i vår store vill vi kunna läsa dom i komponenten `List.js`. Implementera funktionen `mapStateToProps()` i `List.js`. _Hint: Check how mapStateToProps is used in `container.js`_
+7. Nu ska applikationen fungera fullt ut. Eftersom vi läser användare från store behöver vi inte längre skicka in `items` som `prop` när vi använder komponenten `<List />` i `Container.js`. Ta bort den. Applikationen fungerar ändå.
 
 ## Del 2 - Egen komponent
 
-Nu är det dags att sätta allt du lärt dig hittills på prov. Gör så långt du hinner. Uppgiften är att du ska skapa en egen komponent och visa detaljerad användarinformation i denna. I `List.js` finns det nu en callback, `onClick`, som kommer att skicka med ett id för användaren som klickades på. I `api.js` finns det en funktion som hämtar användardata basert på ett id.
+Nu är det dags att sätta allt du lärt dig hittills på prov. Gör så långt du hinner. Uppgiften är att du ska skapa en egen komponent och visa detaljerad användarinformation i denna. I `List.js` finns det nu en callback, `onClick`, som kommer att skicka med ett id för användaren som klickades på. I `api.js` finns det en funktion som hämtar användardata baserat på ett id.
 
 För att lösa uppgiften behöver du:
 - Skapa en ny komponent `<UserDetails>` (eller liknande namn) och använda denna i `Container.js`.
@@ -24,4 +24,6 @@ För att lösa uppgiften behöver du:
 - Dispatcha ett nytt action för detaljerad användardata från `onItemClick()` i `List.js` via `connect`.
 - Läsa in den detaljerade användardatan från applikationens state till din nya komponent.
 
-Lycka till!
+##### _Del två finns löst i solutions-branchen om du bara vill se lösningen_ 😇
+
+### Lycka till!

lab3/src/actions/userActions.js

@@ -4,10 +4,16 @@ export const USERS_RECEIVED = "USERS_RECEIVED";
 export const GET_USERS_ERROR = "GET_USERS_ERROR";
 
 export const getAllUsers = () => {
+    /*
+        Actions should generally be POJO (Plain JavaScript Object), but getting the users is made
+        asynchronously.
+        Thanks to the thunk middleware (declared in store.js) we can handle asynchronous events
+        in our actions.
+    */
     return dispatch => {
-        getUsers()
+        getUsers() // Gets users from our API and returns a promise.
         .then((users) => {
-            // TODO: Task 3 - Dispatch async action. getUsers is a function from out api that returns a promise.
+            // TODO: Task 3 - Dispatch an action of type USERS_RECEIVED and payload: users.
         })
         .catch((e) => {
             dispatch({

lab3/src/components/Container/Container.js

@@ -29,7 +29,7 @@ class Container extends Component {
   }
 }
 
-// Maps the aplication state directly to component props
+// Maps the application state directly to component props
 const mapStateToProps = (state) => {
   return {
     backgroundColor: state.background.bgColor