Fleshing out client-side

todo-app-production/app/controllers/todos_controller.rb

@@ -15,14 +15,6 @@ def show
     render json: @todo
   end
 
-  # GET /todos/new
-  def new
-    @todo = Todo.new
-  end
-
-  # GET /todos/1/edit
-  def edit; end
-
   # POST /todos
   # POST /todos.json
   def create

todo-app-production/client/.bootstraprc

@@ -3,36 +3,30 @@
 # loglevel: debug
 
 # Major version of Bootstrap: 3 or 4
-bootstrapVersion: 3
+bootstrapVersion: 4
+
+# If Bootstrap version 4 is used - turn on/off flexbox model
+useFlexbox: true
 
 # Webpack loaders, order matters
 styleLoaders:
-  - style-loader
-  - css-loader
-  - sass-loader
+  - style
+  - css
+  - postcss
+  - sass
 
-# Extract styles to stand-alone css file
-# Different settings for different environments can be used,
-# It depends on value of NODE_ENV environment variable
-# This param can also be set in webpack config:
-#   entry: 'bootstrap?extractStyles!./app'
-# extractStyles: false
-# env:
-#   development:
-#     extractStyles: false
-#   production:
-#     extractStyles: true
+env:
+  development:
+    extractStyles: false
+  test:
+    extractStyles: false
+  production:
+    extractStyles: true
 
-# Customize Bootstrap variables that get imported before the original Bootstrap variables.
-# Thus original Bootstrap variables can depend on values from here.
 preBootstrapCustomizations: ./app/assets/styles/bootstrap/pre-customizations.scss
 
-# This gets loaded after bootstrap/variables is loaded
-# So you can refer to bootstrap variables
 bootstrapCustomizations: ./app/assets/styles/bootstrap/post-customizations.scss
 
-# With CSS Modules we load all application styles directly in React components
-# appStyles: ./app/assets/styles/globals/_index
 
 ### Bootstrap styles
 styles:
@@ -43,52 +37,56 @@ styles:
   # Reset and dependencies
   normalize: true
   print: true
-  glyphicons: true
 
   # Core CSS
-  scaffolding: true
+  reboot: true
   type: true
+  images: true
   code: true
   grid: true
   tables: true
   forms: true
   buttons: true
 
   # Components
-  component-animations: true
-  dropdowns: true
-  button-groups: true
-  input-groups: true
-  navs: true
+  animation: true
+  dropdown: true
+  button-group: true
+  input-group: true
+  custom-forms: true
+  nav: true
   navbar: true
-  breadcrumbs: true
+  card: true
+  breadcrumb: true
   pagination: true
-  pager: true
-  labels: true
-  badges: true
   jumbotron: true
-  thumbnails: true
-  alerts: true
-  progress-bars: true
+  alert: true
+  progress: true
   media: true
   list-group: true
-  panels: true
-  wells: true
   responsive-embed: true
   close: true
+  tags: true
 
   # Components w/ JavaScript
-  modals: true
+  modal: true
   tooltip: true
-  popovers: true
-  carousel: false
+  popover: true
+  carousel: true
 
   # Utility classes
   utilities: true
-  responsive-utilities: true
 
 ### Bootstrap scripts
 scripts:
   alert: true
   button: true
-  transition: true
+  carousel: true
+  collapse: true
+  dropdown: true
+  modal: true
+  popover: true
+  scrollspy: true
+  tab: true
+  tooltip: true
+  util: true

todo-app-production/client/.eslintignore

@@ -0,0 +1 @@
+/flow-typed

todo-app-production/client/.flowconfig

@@ -6,19 +6,15 @@
 
 [libs]
 ./flow-typed/
-./node_modules/fbjs/node_modules/promise
-./node_modules/fbjs/flow/lib
-./app/libs/interfaces/
 node_modules/iflow-immutable/index.js.flow
-node_modules/iflow-moment/index.js.flow
 node_modules/iflow-react-router/index.js.flow
-node_modules/iflow-react-redux-logger/index.js.flow
-node_modules/iflow-react-redux-thunk/index.js.flow
 
 [options]
-module.system=haste
+module.system=node
 module.use_strict=true
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
 
-module.name_mapper='.*\.s?css' -> 'CSSModule'
+module.name_mapper='.*\.s?css$' -> '<PROJECT_ROOT>/app/libs/interfaces/CSSModule'
+module.name_mapper='^app\(.*\)$' -> '<PROJECT_ROOT>/app\1'
+module.name_mapper='^todosIndex\(.*\)$' -> '<PROJECT_ROOT>/app/bundles/todosIndex\1'

todo-app-production/client/.gitignore

@@ -0,0 +1 @@
+junit.xml

todo-app-production/client/app/api/todos.js

@@ -0,0 +1,19 @@
+// @flow
+import apiCall from 'app/libs/utils/api/apiCall';
+
+import type { tempTodo } from 'todosIndex/types';
+
+// /api/v1/guest_lists
+export const todosScope = (path: ?string) => `/todos${path || ''}`;
+
+// /api/v1/todos
+export const addTodo = (data: tempTodo) => {
+  const url = todosScope();
+  return apiCall.post({ url, data });
+};
+
+// /api/v1/todos/:todo_id
+export const removeTodo = (todoId: number) => {
+  const url = todosScope(`/${todoId}`);
+  return apiCall.delete({ url });
+};

todo-app-production/client/app/bundles/todosIndex/actions/AddTodoForm/actionTypes.js → todo-app-production/client/app/bundles/todosIndex/actionTypes/forms.js

@@ -1,5 +1,5 @@
 // @flow
-import { buildActionType } from '../../../../libs/utils/redux';
+import { buildActionType } from 'app/libs/utils/redux';
 
 export const buildFormsActionType = buildActionType('forms');
 

todo-app-production/client/app/bundles/todosIndex/actions/todos/actionTypes.js → todo-app-production/client/app/bundles/todosIndex/actionTypes/todos.js

@@ -1,5 +1,5 @@
 // @flow
-import { buildActionType } from '../../../../libs/utils/redux';
+import { buildActionType } from 'app/libs/utils/redux';
 
 export const buildTodosActionType = buildActionType('todos');
 

todo-app-production/client/app/bundles/todosIndex/actions/forms.js

@@ -0,0 +1,5 @@
+// @flow
+import { createAction } from 'redux-actions';
+import * as forms from '../actionTypes/forms';
+
+export const editAddTodoForm = createAction(forms.editAddTodoForm);

todo-app-production/client/app/bundles/todosIndex/actions/todos.js

@@ -0,0 +1,16 @@
+// @flow
+import _ from 'lodash/fp';
+import { createAction } from 'redux-actions';
+
+import * as todos from '../actionTypes/todos';
+
+export const addTodo = createAction(todos.addTodo, (description: string, id: string = _.uniqueId('TEMP_TODO_')) => ({
+  description,
+  id,
+}));
+export const addTodoSuccess = createAction(todos.addTodoSuccess);
+export const addTodoFailure = createAction(todos.addTodoFailure);
+export const removeTodo = createAction(todos.removeTodo);
+export const removeTodoSuccess = createAction(todos.removeTodoSuccess);
+export const removeTodoFailure = createAction(todos.removeTodoFailure);
+export const toggleTodo = createAction(todos.toggleTodo);

todo-app-production/client/app/bundles/todosIndex/components/AddTodoForm/index.jsx

@@ -3,17 +3,17 @@ import React from 'react';
 
 type Props = {
   text: string,
-  handleSubmit: Function,
-  handleChange: Function,
+  addTodo: Function,
+  editAddTodoForm: Function,
 };
 
-const AddTodoForm = ({ text, handleSubmit, handleChange }: Props) => (
-  <form onSubmit={event => (event.preventDefault() && handleSubmit())}>
+const AddTodoForm = ({ text, addTodo, editAddTodoForm }: Props) => (
+  <form onSubmit={event => event.preventDefault() && addTodo(event.target.value)}>
     <input
       type="text"
       value={text}
       placeholder="Describe what you need to do here."
-      onChange={event => handleChange(event.target.value)}
+      onChange={event => editAddTodoForm(event.target.value)}
     />
     <input className="hidden" type="submit" />
   </form>

todo-app-production/client/app/bundles/todosIndex/containers/AddTodoFormContainer.jsx

@@ -1,8 +1,10 @@
 // @flow
 import { connect } from 'react-redux';
+
 import AddTodoForm from '../components/AddTodoForm';
-import * as actionCreators from '../actions/AddTodoForm';
+import { editAddTodoForm } from '../actions/forms';
+import { addTodo } from '../actions/todos';
 
 const mapStateToProps = state => ({ text: state.AddTodoForm });
 
-export default connect(mapStateToProps, actionCreators)(AddTodoForm);
+export default connect(mapStateToProps, { editAddTodoForm, addTodo })(AddTodoForm);

todo-app-production/client/app/bundles/todosIndex/reducers/addTodoFormReducer.js

@@ -1,22 +1,24 @@
 // @flow
 import { handleActions } from 'redux-actions';
 import type { stringPayload } from '../types';
-import { editAddTodoForm } from '../actions/AddTodoForm/actionTypes';
-import { addTodo } from '../actions/todos/actionTypes';
+import { editAddTodoForm } from '../actionTypes/forms';
+import { addTodo } from '../actionTypes/todos';
 
 // types
 export type State = string;
 
 // initial state
 export const addTodoFormInitialState = '';
 
-const addTodoForm = handleActions(
-  {
-    // eslint-disable-next-line no-unused-vars
-    [editAddTodoForm]: (state: string, { payload }: stringPayload) => payload,
-    [addTodo]: () => '',
-  },
-  addTodoFormInitialState,
-);
+// helpers
+// eslint-disable-next-line no-unused-vars
+const stateToPayload = (state: string, { payload }: stringPayload) => payload;
+const stateToEmptyString = () => '';
 
-export default addTodoForm;
+// handlers
+const handlers = {
+  [editAddTodoForm]: stateToPayload,
+  [addTodo]: stateToEmptyString,
+};
+
+export default handleActions(handlers, addTodoFormInitialState);

todo-app-production/client/app/bundles/todosIndex/reducers/errorsReducer.js

@@ -0,0 +1,24 @@
+// @flow
+import { handleActions } from 'redux-actions';
+import { List as $$List } from 'immutable';
+
+import type { errorPayload } from '../types';
+import { addTodoFailure, removeTodoFailure } from '../actionTypes/todos';
+
+// types
+export type State = $$List<Error>;
+
+// initial state
+export const errorsInitialState = new $$List();
+
+// helpers
+const pushPayload = (state: State, { payload }: errorPayload) => state.push(payload);
+
+// handlers
+const handlers = {
+  [addTodoFailure]: pushPayload,
+  [removeTodoFailure]: pushPayload,
+};
+
+// reducer
+export default handleActions(handlers, errorsInitialState);

todo-app-production/client/app/bundles/todosIndex/reducers/errorsReducer.test.js

@@ -0,0 +1,25 @@
+// @flow
+import { addTodoFailure, removeTodoFailure } from '../actions/todos';
+import reducer, { errorsInitialState } from './errorsReducer';
+
+test('addTodoFailure', () => {
+  const payload = 'error message';
+  const state = errorsInitialState;
+  const action = addTodoFailure(payload);
+
+  const actual = reducer(state, action);
+  const expected = state.push(payload);
+
+  expect(actual).toEqual(expected);
+});
+
+test('removeTodoFailure', () => {
+  const payload = 'error message';
+  const state = errorsInitialState;
+  const action = removeTodoFailure(payload);
+
+  const actual = reducer(state, action);
+  const expected = state.push(payload);
+
+  expect(actual).toEqual(expected);
+});