Update lab instructions/solutions

lab3/DO_NOT_README.md

@@ -3,15 +3,19 @@
 ## Del 1
 
 ### Task 2
+
 I `backgroundReducers.js`:
+
 ```javascript
-    const initialState = {
-    bgColor: 'gold'
+const initialState = {
+  bgColor: "gold",
 };
 ```
 
 ### Task 3
+
 I `userActions.js`:
+
 ```javascript
     .then((users) => {
         dispatch({
@@ -22,7 +26,9 @@ I `userActions.js`:
 ```
 
 ### Task 4
+
 I `userReducers.js`:
+
 ```javascript
     ...
     case USERS_RECEIVED:
@@ -34,30 +40,23 @@ I `userReducers.js`:
 ```
 
 ### Task 5
+
 I `Container.js`:
+
 ```javascript
-    componentDidMount() {
-        this.props.getAllUsers();
-    }
+useEffect(() => {
+  dispatch(getAllUsers());
+}, []);
 ```
 
 ### Task 6
+
 I `List.js`:
-```javascript
-    const mapStateToProps = (state) => {
-        return {
-            items: state.users.all
-        };
-    }
-```
 
-### Task 7
-I `Container.js`:
 ```javascript
-    ...
-    <List title={'Users'} />
-    ...
+const users = useSelector((state) => state.users.all);
 ```
 
 ## Del 2
+
 Lösninsförslag till del två går att se genom att byta branch till `solutions`. Här finns även alla uppgifter till alla labbar lösta.

lab3/README.md

@@ -1,27 +1,30 @@
 # Lab 3
 
 ## Starta applikationen för Lab 3
+
 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 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_
+2. Bakgrundsfärgen är satt till `lavender` från början via initialState. Byt default från `lavender` till `gold`._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`. _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å.
+5. I `Container.js` har vi nu möjlighet att dipatcha actions tack vare vår hooks `useDispatch()`. Vi vill här hämta alla användare när komponenten mountas i `useEffect()` med vår nyss implementerade action creator. Implementera detta och bekräfta att det fungerar med Redux Dev Tools.
+6. Nu när vi har användaran i vår store vill vi kunna läsa dom i komponenten `List.js`. Deklarera konstanten `users` i `List.js` med hjälp av `useSelector()`. Just nu är den bara en tom array. _Hint: Hur används `useSelector()` i `container.js`?_
+7. Nu ska applikationen fungera fullt ut!
 
 ## 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 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`.
 - `<UserDetails>` behöver rendera ut JSX för detaljerad användardata.
 - Skapa en ny action creator i `userActions.js` som tar in ett id och gör ett asynkront anrop mot `api.js` för att hämta ut detlajerad användardata.
 - Utöka state för `userReducers.js` till att även innehålla detaljerad användardata och handera en ny typ av inkommade action.
-- Dispatcha ett nytt action för detaljerad användardata från `onItemClick()` i `List.js` via `connect`.
+- Dispatcha ett nytt action för detaljerad användardata från `onItemClick()` i `List.js` via `useDispatch()`.
 - Läsa in den detaljerade användardatan från applikationens state till din nya komponent.
 
 ##### _Del två finns löst i solutions-branchen om du bara vill se lösningen_ 😇