got basic list there

src/App.css

@@ -2,3 +2,13 @@
   font: 14px "Century Gothic", Futura, sans-serif;
   margin: 1rem;
 }
+
+.mainContent{
+  display: flex;
+  justify-content: center;
+}
+
+body {
+  background-color: rgb(240, 240, 240);
+  color: rgb(50, 50, 50);
+}

src/App.js

@@ -1,18 +0,0 @@
-import React from "react";
-import {hot} from "react-hot-loader";
-import "./App.css";
-import ActionsContainer from "./components/ActionsContainer.js"
-
-class App extends React.Component {
-
-  render() {
-    return(
-      <div className="App">
-        <h1> Hello, World! </h1>
-        <ActionsContainer />
-      </div>
-    );
-  }
-}
-
-export default hot(module)(App);

src/App.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import {hot} from "react-hot-loader";
+import "./App.css";
+import AllPlansComponent from "./components/AllPlansComponent.jsx";
+
+class App extends React.Component {
+	render() {
+		const plan = {
+			plan_id: 1,
+			plan_date: "snth",
+		};
+		return (
+			<div className="App">
+				<h1> Hello, World! </h1>
+				<div className="mainContent">
+					<AllPlansComponent />
+				</div>
+			</div>
+		);
+	}
+}
+
+export default hot(module)(App);

src/components/Action.css

@@ -0,0 +1,28 @@
+.actionID, .actionDescription, .actionChunks {
+	margin-left: 1rem;
+	margin-right: 1rem;
+}
+
+.actionCompleted {
+	flex: 1
+}
+
+.actionChunks {
+	flex: 4
+}
+
+.actionID {
+	flex: 4
+}
+
+.actionDescription {
+	flex: 8
+}
+
+.actionWrapper {
+	align-items: flex-end;
+	display: flex;
+	margin-top: .5rem;
+	margin-bottom: .5rem;
+	padding-top: 1rem;
+}

src/components/Action.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./Action.css";
+
+class Action extends React.Component {
+	render() {
+		const action = this.props.action;
+		var completed = "completed_on" in action;
+		console.log([action.completed_on, completed]);
+		return (
+			<div className="actionWrapper">
+				<div className="actionCompleted">{completed ? "X" : " "}</div>
+				<div className="actionID">ID: {action.action_id} | {action.plan_id}</div>
+				<div className="actionDescription">{action.action_description}</div>
+				<div className="actionChunks">
+					{action.completed_chunks}/{action.estimated_chunks}
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Action;

src/components/ActionsContainer.js

@@ -1,52 +0,0 @@
-import React from "react";
-
-class ActionsContainer extends React.Component {
-	constructor(props) {
-		super(props)
-		this.state = {
-			actions: []
-		}
-	}
-
-	getActions() {
-		fetch("http://localhost:3000/api/actions", {
-				headers: {
-					"Accept": "application/json",
-				}
-			})
-			.then(response => {
-				console.log(response);
-				const data = response.json();
-				this.setState({
-					actions: data,
-				});
-			}).catch(error => console.error(error));
-
-	}
-
-	componentDidMount() {
-		this.getActions();
-	}
-
-	render() {
-		return (
-			<div className = "ActionsContainer" >
-				<div className = "ActionsListWrapper" >
-					<ul className="ActionsList">
-						{
-							this.state.actions.map((action) => {
-								return (
-									<li className="Action" action={action} key={action.action_id}>
-										<span>{action.action_description}</span>
-									</li>
-								)
-							})
-						}
-					</ul>
-				</div>
-			</div>
-		);
-	}
-}
-
-export default ActionsContainer;

src/components/ActionsContainer.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Action from "./Action.jsx";
+
+class ActionsContainer extends React.Component {
+
+	render() {
+		return (
+			<div className="ActionsListWrapper">
+				<ul className="ActionsList">
+					{this.props.actions.map(action => {
+						return (
+							<li className="Action" key={action.action_id}>
+								<Action action={action} />
+							</li>
+						);
+					})}
+				</ul>
+			</div>
+		);
+	}
+}
+
+export default ActionsContainer;

src/components/AllPlansComponent.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import PlanList from "./PlanList.jsx";
+
+class AllPlansComponent extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			plans: []
+		};
+	}
+	getPlans() {
+
+		fetch("http://localhost:3000/api/plans", {
+			headers: {
+				Accept: "application/json"
+			}
+		})
+			.then(response => response.json())
+			.then(data => {
+				this.setState({
+					plans: data
+				});
+			})
+			.catch(error => console.error(error));
+	}
+
+	componentDidMount() {
+		this.getPlans();
+	}
+
+	render() {
+		return (
+			<div className="AllPlans">
+				<PlanList plans={this.state.plans}/>
+			</div>
+		);
+	}
+}
+
+export default AllPlansComponent;

src/components/Plan.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import ActionsContainer from "./ActionsContainer.jsx";
+
+
+class Plan extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			actions: []
+		};
+	}
+	getActions() {
+
+		fetch("http://localhost:3000/api/actions?" + new URLSearchParams({
+			plan_id: this.props.plan.plan_id
+		}), {
+			headers: {
+				Accept: "application/json"
+			}
+		})
+			.then(response => response.json())
+			.then(data => {
+				this.setState({
+					actions: data
+				});
+			})
+			.catch(error => console.error(error));
+	}
+
+	componentDidMount() {
+		this.getActions();
+	}
+
+	render() {
+		return (
+			<div className="PlanActionsWrapper">
+				<div><h3>Plan for {this.props.plan.plan_date}</h3></div>
+				<ActionsContainer actions={this.state.actions.slice()} />
+			</div>
+		);
+	}
+}
+
+export default Plan;

src/components/PlanList.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Plan from "./Plan.jsx";
+
+class PlanList extends React.Component {
+
+	render() {
+		return (
+			<div className="PlanListWrapper">
+				<ul className="PlanList">
+					{this.props.plans.map(plan => {
+						return (
+							<li className="Plan" key={plan.plan_id}>
+								<Plan plan={plan} />
+							</li>
+						);
+					})}
+				</ul>
+			</div>
+		);
+	}
+}
+
+export default PlanList;

src/index.jsx

@@ -1,4 +1,4 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App.js";
+import App from "./App.jsx";
 ReactDOM.render(<App />, document.getElementById("root"));

webpack.config.js

@@ -2,7 +2,7 @@ const path = require("path");
 const webpack = require("webpack");
 
 module.exports = {
-  entry: "./src/index.js",
+  entry: "./src/index.jsx",
   mode: "development",
   module: {
     rules: [