Merge pull request #9 from wkdewey/nested_dynamic_form

Nested dynamic form

package.json

@@ -12,6 +12,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

src/App.js

@@ -22,23 +22,23 @@ class App extends Component {
             <Route
               path="/places"
               render={(routerProps) => {
-                console.log("PlacesContainer is being rendered");
                 return (
                   <PlacesContainer
                     {...routerProps}
                     places={this.props.places}
+                    ancestryGroups={this.props.ancestryGroups}
+                    placeAncestryGroups={this.props.placeAncestryGroups}
                   />
                 );
               }}
             />
             <Route
               path="/ancestry_groups"
               render={(routerProps) => {
-                console.log("AncestryGroupsContainer is being rendered");
                 return (
                   <AncestryGroupsContainer
                     {...routerProps}
-                    ancestry_groups={this.props.ancestry_groups}
+                    ancestryGroups={this.props.ancestryGroups}
                   />
                 );
               }}
@@ -55,7 +55,8 @@ class App extends Component {
 const mapStateToProps = (state) => {
   return {
     places: state.places,
-    ancestry_groups: state.ancestry_groups,
+    ancestryGroups: state.ancestryGroups,
+    placeAncestryGroups: state.placeAncestryGroups,
   };
 };
 const mapDispatchToProps = (dispatch) => {

src/actions/placeActions.js

@@ -8,24 +8,12 @@ export const fetchPlaces = () => {
       .then((json) => {
         dispatch({ type: "ADD_PLACES", places: json.data });
       });
-    // .then(data => {
-    // for (const key in data) {
-    //    places.push({name: data[key]["attributes"]["name"],
-    //    population: data[key]["attributes"]["population"],
-    //    percent_german: data[key]["attributes"]["percent_german"],
-    //    percent_african_american: data[key]["attributes"]["percent_african_american"],
-    //    percent_mexican: data[key]["attributes"]["percent_mexican"]
-    //   })
-    // }
   };
 };
 
 export const addPlace = (place) => {
   return (dispatch) => {
     dispatch({ type: "POSTING_PLACE" });
-    console.log(`in addPlace action`);
-    console.log(dispatch);
-    console.log(place);
     fetch("http://localhost:3000/api/v1/places", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -46,7 +34,11 @@ export const fetchAncestryGroups = () => {
         return response.json();
       })
       .then((json) => {
-        dispatch({ type: "ADD_ANCESTRY_GROUPS", ancestry_groups: json.data });
+        dispatch({ type: "ADD_ANCESTRY_GROUPS", ancestryGroups: json.data });
+        dispatch({
+          type: "ADD_PLACE_ANCESTRY_GROUPS",
+          ancestryGroups: json.data,
+        });
       });
   };
 };

src/components/ancestry_groups/AncestryGroup.js

@@ -5,31 +5,40 @@ const AncestryGroup = (props) => {
   console.log(props);
   let { ancestryGroupId } = useParams();
   console.log(useParams());
-  const ancestry_group = props.ancestry_groups[ancestryGroupId - 1];
-  const places = ancestry_group.attributes.place_ancestry_groups;
-  places.sort((a, b) => (a.attributes.percent < b.attributes.percent ? 1 : -1));
-  const ancestryGroupCard = ancestry_group ? (
-    <div className="ancestry group">
-      <h3>{ancestry_group.attributes.name}</h3>
-      <p>
-        Population in the United States:{" "}
-        {ancestry_group.attributes.national_pop}
-      </p>
-      {places.map((place) => {
-        return (
-          <div className="place" key={place.id}>
-            <p>
-              {place.attributes.place.name}: {place.attributes.percent}%,{" "}
-              {place.attributes.relative_to_national}x national average
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  ) : (
-    "Place not found"
-  );
-  return <div>{ancestryGroupCard}</div>;
+  if (props.ancestryGroups.length > 0) {
+    const ancestryGroup = props.ancestryGroups[ancestryGroupId - 1];
+    const places = ancestryGroup.attributes.place_ancestry_groups;
+    places.sort((a, b) =>
+      a.attributes.percent < b.attributes.percent ? 1 : -1
+    );
+    const ancestryGroupCard = ancestryGroup ? (
+      <div className="ancestry group">
+        <h3>{ancestryGroup.attributes.name}</h3>
+        <p>
+          Population in the United States:{" "}
+          {ancestryGroup.attributes.national_pop}
+        </p>
+        {places.map((place) => {
+          return (
+            <div className="place" key={place.id}>
+              <p>
+                {place.attributes.place.name}: {place.attributes.percent}%,{" "}
+                {place.attributes.relative_to_national}x national average
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      "Place not found"
+    );
+    return <div>{ancestryGroupCard}</div>;
+  } else
+    return (
+      <div>
+        <h3>Loading, please wait.</h3>
+      </div>
+    );
 };
 
 export default AncestryGroup;

src/components/ancestry_groups/AncestryGroups.js

@@ -1,24 +1,33 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const AncestryGroups = (props) =>
-  props.ancestry_groups.map((ancestry_group) => {
-    console.log(props.ancestry_groups);
+const AncestryGroups = (props) => {
+  if (props.ancestryGroups.length > 0) {
+    return props.ancestryGroups.map((ancestryGroup) => {
+      return (
+        <div className="ancestry_group" key={ancestryGroup.id}>
+          <h3>
+            <Link
+              key={ancestryGroup.id}
+              to={`/ancestry_groups/${ancestryGroup.id}`}
+            >
+              {ancestryGroup.attributes.name}
+            </Link>
+          </h3>
+          <p>
+            Percent of US Population:{" "}
+            {ancestryGroup.attributes.national_percent}
+          </p>
+        </div>
+      );
+    });
+  } else {
     return (
-      <div className="ancestry_group" key={ancestry_group.id}>
-        <h3>
-          <Link
-            key={ancestry_group.id}
-            to={`/ancestry_groups/${ancestry_group.id}`}
-          >
-            {ancestry_group.attributes.name}
-          </Link>
-        </h3>
-        <p>
-          Percent of US Population: {ancestry_group.attributes.national_percent}
-        </p>
+      <div>
+        <h3>Loading, please wait.</h3>
       </div>
     );
-  });
+  }
+};
 
 export default AncestryGroups;

src/components/places/Place.js

@@ -2,32 +2,39 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 const Place = (props) => {
-  console.log(props);
   let { placeId } = useParams();
-  const place = props.places[placeId - 1];
-  console.log(place);
-  const groups = place.attributes.place_ancestry_groups;
-  groups.sort((a, b) => (a.attributes.percent < b.attributes.percent ? 1 : -1));
-  const placeCard = place ? (
-    <div className="place">
-      <h3>{place.attributes.name}</h3>
-      <p>Population: {place.attributes.population}</p>
-      {groups.map((group) => {
-        console.log(group);
-        return (
-          <div className="ancestry group" key={group.id}>
-            <p>
-              {group.attributes.ancestry_group.name}: {group.attributes.percent}
-              %
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  ) : (
-    "Place not found"
-  );
-  return <div>{placeCard}</div>;
+  if (props.places.length > 0) {
+    const place = props.places[placeId - 1];
+    console.log(`place is ${place}`);
+    const groups = place.attributes.place_ancestry_groups;
+    groups.sort((a, b) =>
+      a.attributes.percent < b.attributes.percent ? 1 : -1
+    );
+    const placeCard = place ? (
+      <div className="place">
+        <h3>{place.attributes.name}</h3>
+        <p>Population: {place.attributes.population}</p>
+        {groups.map((group) => {
+          return (
+            <div className="ancestry group" key={group.id}>
+              <p>
+                {group.attributes.ancestry_group.name}:{" "}
+                {group.attributes.percent}%
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      "Place not found"
+    );
+    return <div>{placeCard}</div>;
+  } else
+    return (
+      <div>
+        <h3>Loading, please wait.</h3>
+      </div>
+    );
 };
 
 export default Place;

src/components/places/PlaceComparison.js

@@ -3,32 +3,36 @@ import { useParams } from "react-router-dom";
 
 const PlaceComparison = (props) => {
   let { placeId } = useParams();
-  const place = props.places[placeId - 1];
-  const groups = place.attributes.place_ancestry_groups;
-  groups.sort((a, b) =>
-    a.attributes.relative_to_national < b.attributes.relative_to_national
-      ? 1
-      : -1
-  );
-  const placeCard = place ? (
-    <div className="place compared">
-      <h3>Relative representation of groups</h3>
-      <p>(times the national average)</p>
-      {groups.map((group) => {
-        return (
-          <div className="ancestry group compared" key={group.id}>
-            <p>
-              {group.attributes.ancestry_group.name}:{" "}
-              {group.attributes.relative_to_national}
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  ) : (
-    "Place not found"
-  );
-  return <div>{placeCard}</div>;
+  if (props.places.length > 0) {
+    const place = props.places[placeId - 1];
+    const groups = place.attributes.place_ancestry_groups;
+    groups.sort((a, b) =>
+      a.attributes.relative_to_national < b.attributes.relative_to_national
+        ? 1
+        : -1
+    );
+    const placeCard = place ? (
+      <div className="place compared">
+        <h3>Relative representation of groups</h3>
+        <p>(times the national average)</p>
+        {groups.map((group) => {
+          return (
+            <div className="ancestry group compared" key={group.id}>
+              <p>
+                {group.attributes.ancestry_group.name}:{" "}
+                {group.attributes.relative_to_national}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      "Place not found"
+    );
+    return <div>{placeCard}</div>;
+  } else {
+    return null;
+  }
 };
 
 export default PlaceComparison;