Extract a Spinner component and use for login_user loading state.

Author: metamarcdw

src/components/App.py

@@ -5,6 +5,7 @@
 from containers.FormPanelContainer import FormPanelContainer
 from containers.ButtonPanelContainer import ButtonPanelContainer
 from containers.TodoListContainer import TodoListContainer
+from components.Spinner import Spinner
 
 React = require("react")
 PropTypes = require("prop-types")
@@ -44,7 +45,8 @@ def render_todo_panel(self):
  ); """)
 
  def render(self):
- logged_in, error = destruct(self.props, "logged_in", "error")
+ logged_in, loading, error = destruct(self.props,
+ "logged_in", "loading", "error")
  visible_component = self.render_todo_panel() if logged_in else self.render_login_panel()
 
  return __pragma__("xtrans", None, "{}", """ (
@@ -61,6 +63,7 @@ def render(self):
  <h2>My Todos</h2>
  </div>
  {visible_component}
+ <Spinner loading={loading} />
  <span className="text-danger">{error}</span>
  </div>
  </Jumbotron>

src/components/Spinner.py

@@ -0,0 +1,24 @@
+from Component_py.stubs import require, __pragma__ # __:skip
+React = require("react")
+PropTypes = require("prop-types")
+RingLoader = require("react-spinners").RingLoader
+
+def Spinner(props):
+ loading = props["loading"]
+ if not loading:
+ return None
+
+ loading = True
+ return __pragma__("xtrans", None, "{}", """ (
+ <div className="d-flex justify-content-center align-items-center">
+ <RingLoader
+ color="#999"
+ size={42}
+ loading={loading} />
+ Loading..
+ </div>
+ ); """)
+
+Spinner.propTypes = {
+ "loading": PropTypes.bool.isRequired
+}

src/components/TodoList.py

@@ -1,11 +1,11 @@
 from Component_py.component import Component, destruct
 from Component_py.stubs import require, __pragma__, window # __:skip
+from components.Spinner import Spinner
 
 React = require("react")
 PropTypes = require("prop-types")
 ListGroup, ListGroupItem, Button = destruct(
  require("reactstrap"), "ListGroup", "ListGroupItem", "Button")
-RingLoader = require("react-spinners").RingLoader
 FontAwesomeIcon = require("react-fontawesome")
 
 
@@ -39,21 +39,6 @@ def closure():
  delete_todo(todo["id"], token)
  return closure
 
- def render_spinner(self):
- if not self.props["loading"]:
- return None
-
- loading = True
- return __pragma__("xtrans", None, "{}", """ (
- <div className="d-flex justify-content-center align-items-center">
- <RingLoader
- color="#999"
- size={42}
- loading={loading} />
- Loading..
- </div>
- ); """)
-
  def render_checkmark(self, todo):
  if not todo["complete"]:
  return None
@@ -92,7 +77,7 @@ def render_list_item(self, todo):
  ); """)
 
  def render(self):
- todos, error = destruct(self.props, "todos", "error")
+ todos, error, loading = destruct(self.props, "todos", "error", "loading")
  list_items = map(self.render_list_item, todos)
 
  return __pragma__("xtrans", None, "{}", """ (
@@ -101,6 +86,6 @@ def render(self):
  {list_items}
  </ListGroup>
  <span className="text-danger">{error}</span>
- {self.render_spinner()}
+ <Spinner loading={loading} />
  </div>
  ); """)

src/containers/AppContainer.py

@@ -5,10 +5,12 @@
 
 
 def mapStateToProps(state):
- text, logged_in = destruct(state["login_user"], "text", "logged_in")
+ logged_in, loading, error = destruct(state["login_user"],
+ "logged_in", "loading", "error")
  return {
- "text": text,
- "logged_in": logged_in
+ "logged_in": logged_in,
+ "loading": loading,
+ "error": error
  }