ex10 prepared

Sfeir · wolfgangGoedel · Mar 25, 2019 · Mar 22, 2019 · Mar 24, 2019 · Mar 24, 2019
commit aaf04be8b147a3e664ac8141893c8ee9f4e8f97c
diff --git a/src/ex10/App.js b/src/ex10/App.js
@@ -8,12 +8,13 @@ import { Person } from "../solution/EditablePerson";
 import { Loading } from "../solution/Loading";
 
 import { withLoading, withPeople, withPerson } from "./connect";
+// import { withLoading, withPeople, withPerson } from "../solution/ex10/connect";
 
 const ConnectedList = withPeople(SearchableList);
 const ConnectedPlayer = withPeople(Player);
 const ConnectedPerson = withPerson(Person);
 
-export const App = withLoading(({ loadPeople, loading }) => {
+export const App = withLoading(({ loadPeople = () => {}, loading = true }) => {
   useEffect(() => void loadPeople(), [loadPeople]);
   return (
     <>

diff --git a/src/ex10/connect.js b/src/ex10/connect.js
@@ -1,28 +1,13 @@
 import { connect } from "react-redux";
 import { savePerson, loadPeople } from "../utils";
 
-export const withPeople = connect(state => ({
-  people: state.people
-}));
+// provide people from state
+export const withPeople = connect();
 
-export const withLoading = connect(
-  state => ({
-    loading: state.loading
-  }),
-  dispatch => ({
-    loadPeople: () =>
-      loadPeople().then(people => dispatch({ type: "SET_PEOPLE", people }))
-  })
-);
+// provide loading from state
+// and the loadPeople function dispatching SET_PEOPLE
+export const withLoading = connect();
 
-export const withPerson = connect(
-  (state, { personId }) => ({
-    person: state.people.find(p => p.id === personId)
-  }),
-  dispatch => ({
-    onUpdate: person =>
-      savePerson(person).then(person =>
-        dispatch({ type: "SET_PERSON", person })
-      )
-  })
-);
+// provide person from state using the personId prop
+// and the onUpdate callback dispatching SET_PERSON
+export const withPerson = connect();
diff --git a/src/ex10/main.js b/src/ex10/main.js
@@ -1,11 +1,16 @@
 import React from "react";
 import { render } from "react-dom";
+import { createStore } from "redux";
+import { devToolsEnhancer } from "redux-devtools-extension";
 import { Provider } from "react-redux";
 
 import { Config } from "../solution/Config";
+
 import { App } from "./App";
+import { reducer } from "./state";
+// import { reducer } from "../solution/ex10/state";
 
-import { store } from "./store";
+const store = createStore(reducer, devToolsEnhancer());
 
 render(
   <Config useRouter>

diff --git a/src/ex10/state.js b/src/ex10/state.js
@@ -0,0 +1,10 @@
+const initialState = {};
+
+export const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case "SET_PEOPLE":
+    case "SET_PERSON":
+    default:
+      return state;
+  }
+};
diff --git a/src/solution/ex10/connect.js b/src/solution/ex10/connect.js
@@ -0,0 +1,28 @@
+import { connect } from "react-redux";
+import { savePerson, loadPeople } from "../../utils";
+
+export const withPeople = connect(state => ({
+  people: state.people
+}));
+
+export const withLoading = connect(
+  state => ({
+    loading: state.loading
+  }),
+  dispatch => ({
+    loadPeople: () =>
+      loadPeople().then(people => dispatch({ type: "SET_PEOPLE", people }))
+  })
+);
+
+export const withPerson = connect(
+  (state, { personId }) => ({
+    person: state.people.find(p => p.id === personId)
+  }),
+  dispatch => ({
+    onUpdate: person =>
+      savePerson(person).then(person =>
+        dispatch({ type: "SET_PERSON", person })
+      )
+  })
+);
diff --git a/src/ex10/store.js → src/solution/ex10/state.js b/src/ex10/store.js → src/solution/ex10/state.js
@@ -1,12 +1,9 @@
-import { createStore } from "redux";
-import { devToolsEnhancer } from "redux-devtools-extension";
-
 const initialState = {
   people: [],
   loading: true
 };
 
-const reducer = (state = initialState, action) => {
+export const reducer = (state = initialState, action) => {
   switch (action.type) {
     case "SET_PEOPLE":
       return {
@@ -25,5 +22,3 @@ const reducer = (state = initialState, action) => {
       return state;
   }
 };
-
-export const store = createStore(reducer, devToolsEnhancer());