trying to make webpack-dev-server work

xtrinch · xtrinch · commit 19fc31879dbf · 2016-09-09T18:31:37.000+02:00
diff --git a/client/Dockerfile b/client/Dockerfile
@@ -0,0 +1,11 @@
+FROM node:6.5.0-slim
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+COPY package.json /usr/src/app/
+ENV NODE_ENV development
+RUN npm install
+
+#COPY . /usr/src/app
+#CMD [ "bash", "sleep 10m" ]
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body lang="en">
+<div id="react-app"></div>
+<script src="/bundle.js" type="text/javascript"></script>
+</body></html>
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "go-react-todo",
+  "version": "1.0.0",
+  "description": "Todo application using go & reactjs",
+  "main": "index.js",
+  "scripts": {
+    "build": "NODE_ENV=production ./node_modules/webpack/bin/webpack.js",
+    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot"
+  },
+  "keywords": [
+    "go",
+    "reactjs"
+  ],
+  "author": "xTrinch",
+  "license": "MIT",
+  "dependencies": {
+    "clean-webpack-plugin": "0.1.10",
+    "copy-webpack-plugin": "3.0.1",
+    "express": "4.14.0",
+    "jquery": "3.1.0",
+    "react": "15.3.0",
+    "react-dom": "15.3.0",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "webpack": "1.13.1"
+  },
+  "devDependencies": {
+    "babel-loader": "6.2.4",
+    "babel-preset-es2015": "6.13.2",
+    "babel-preset-react": "6.11.1",
+    "css-loader": "0.23.1",
+    "less": "2.7.1",
+    "less-loader": "2.2.3",
+    "style-loader": "0.13.1",
+    "webpack-dev-server": "1.14.1"
+  }
+}
diff --git a/client/src/actions/index.jsx b/client/src/actions/index.jsx
@@ -0,0 +1,22 @@
+let nextTodoId = 0
+export const addTodo = (text) => {
+  return {
+    type: 'ADD_TODO',
+    id: nextTodoId++,
+    text
+  }
+}
+
+export const setVisibilityFilter = (filter) => {
+  return {
+    type: 'SET_VISIBILITY_FILTER',
+    filter
+  }
+}
+
+export const toggleTodo = (id) => {
+  return {
+    type: 'TOGGLE_TODO',
+    id
+  }
+}
diff --git a/client/src/components/app.jsx b/client/src/components/app.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import Footer from './footer.jsx'
+import AddTodo from '../containers/addtodo.jsx'
+import VisibleTodoList from '../containers/visibletodolist.jsx'
+
+const App = () => (
+  <div>
+    <AddTodo />
+    <VisibleTodoList />
+    <Footer />
+  </div>
+)
+
+export default App
diff --git a/client/src/components/footer.jsx b/client/src/components/footer.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import FilterLink from '../containers/filterlink.jsx'
+
+const Footer = () => (
+  <p>
+    Show:
+    {" "}
+    <FilterLink filter="SHOW_ALL">
+      All
+    </FilterLink>
+    {", "}
+    <FilterLink filter="SHOW_ACTIVE">
+      Active
+    </FilterLink>
+    {", "}
+    <FilterLink filter="SHOW_COMPLETED">
+      Completed
+    </FilterLink>
+  </p>
+)
+
+export default Footer
diff --git a/client/src/components/link.jsx b/client/src/components/link.jsx
@@ -0,0 +1,26 @@
+import React, { PropTypes } from 'react'
+
+const Link = ({ active, children, onClick }) => {
+  if (active) {
+    return <span>{children}</span>
+  }
+
+  return (
+    <a href="#"
+       onClick={e => {
+         e.preventDefault()
+         onClick()
+       }}
+    >
+      {children}
+    </a>
+  )
+}
+
+Link.propTypes = {
+  active: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired
+}
+
+export default Link
diff --git a/client/src/components/todo.jsx b/client/src/components/todo.jsx
@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react'
+
+const Todo = ({ onClick, completed, text }) => (
+  <li
+    onClick={onClick}
+    style={{
+      textDecoration: completed ? 'line-through' : 'none'
+    }}
+  >
+    {text}
+  </li>
+)
+
+Todo.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  completed: PropTypes.bool.isRequired,
+  text: PropTypes.string.isRequired
+}
+
+export default Todo
diff --git a/client/src/components/todolist.jsx b/client/src/components/todolist.jsx
@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react'
+import Todo from './todo.jsx'
+
+const TodoList = ({ todos, onTodoClick }) => (
+  <ul>
+    {todos.map(todo =>
+      <Todo
+        key={todo.id}
+        {...todo}
+        onClick={() => onTodoClick(todo.id)}
+      />
+    )}
+  </ul>
+)
+
+TodoList.propTypes = {
+  todos: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    completed: PropTypes.bool.isRequired,
+    text: PropTypes.string.isRequired
+  }).isRequired).isRequired,
+  onTodoClick: PropTypes.func.isRequired
+}
+
+export default TodoList
diff --git a/client/src/containers/addtodo.jsx b/client/src/containers/addtodo.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { addTodo } from '../actions/index.jsx'
+
+let AddTodo = ({ dispatch }) => {
+  let input
+
+  return (
+    <div>
+      <form onSubmit={e => {
+        e.preventDefault()
+        if (!input.value.trim()) {
+          return
+        }
+        dispatch(addTodo(input.value))
+        input.value = ''
+      }}>
+        <input ref={node => {
+          input = node
+        }} />
+        <button type="submit">
+          Add Todo
+        </button>
+      </form>
+    </div>
+  )
+}
+AddTodo = connect()(AddTodo)
+
+export default AddTodo
diff --git a/client/src/containers/filterlink.jsx b/client/src/containers/filterlink.jsx
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import { setVisibilityFilter } from '../actions/index.jsx'
+import Link from '../components/link.jsx'
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    active: ownProps.filter === state.visibilityFilter
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    onClick: () => {
+      dispatch(setVisibilityFilter(ownProps.filter))
+    }
+  }
+}
+
+const FilterLink = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Link)
+
+export default FilterLink
diff --git a/client/src/containers/visibletodolist.jsx b/client/src/containers/visibletodolist.jsx
@@ -0,0 +1,35 @@
+import { connect } from 'react-redux'
+import { toggleTodo } from '../actions/index.jsx'
+import TodoList from '../components/todolist.jsx'
+
+const getVisibleTodos = (todos, filter) => {
+  switch (filter) {
+    case 'SHOW_ALL':
+      return todos
+    case 'SHOW_COMPLETED':
+      return todos.filter(t => t.completed)
+    case 'SHOW_ACTIVE':
+      return todos.filter(t => !t.completed)
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    todos: getVisibleTodos(state.todos, state.visibilityFilter)
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onTodoClick: (id) => {
+      dispatch(toggleTodo(id))
+    }
+  }
+}
+
+const VisibleTodoList = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList)
+
+export default VisibleTodoList
diff --git a/client/src/index.jsx b/client/src/index.jsx
@@ -0,0 +1,17 @@
+require("./stylesheets/main.less");
+
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import todoApp from './reducers/index.jsx'
+import App from './components/app.jsx'
+
+let store = createStore(todoApp)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('react-app')
+)
diff --git a/client/src/reducers/index.jsx b/client/src/reducers/index.jsx
@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux'
+import todos from './todos.jsx'
+import visibilityFilter from './visibilityFilter.jsx'
+
+const todoApp = combineReducers({
+  todos,
+  visibilityFilter
+})
+
+export default todoApp
diff --git a/client/src/reducers/todos.jsx b/client/src/reducers/todos.jsx
@@ -0,0 +1,39 @@
+const todo = (state = {}, action) => {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return {
+        id: action.id,
+        text: action.text,
+        completed: false
+      }
+    case 'TOGGLE_TODO':
+      if (state.id !== action.id) {
+        return state
+      }
+
+      return Object.assign({}, state, {
+        completed: !state.completed
+      })
+
+    default:
+      return state
+  }
+}
+
+const todos = (state = [], action) => {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return [
+        ...state,
+        todo(undefined, action)
+      ]
+    case 'TOGGLE_TODO':
+      return state.map(t =>
+        todo(t, action)
+      )
+    default:
+      return state
+  }
+}
+
+export default todos
diff --git a/client/src/reducers/visibilityFilter.jsx b/client/src/reducers/visibilityFilter.jsx
@@ -0,0 +1,10 @@
+const visibilityFilter = (state = 'SHOW_ALL', action) => {
+  switch (action.type) {
+    case 'SET_VISIBILITY_FILTER':
+      return action.filter
+    default:
+      return state
+  }
+}
+
+export default visibilityFilter
diff --git a/client/src/stylesheets/main.less b/client/src/stylesheets/main.less
@@ -0,0 +1,3 @@
+html, body {
+    background-color: lightpink;
+}
diff --git a/client/webpack.config.js b/client/webpack.config.js
diff --git a/docker-compose.yml b/docker-compose.yml
diff --git a/server/Dockerfile b/server/Dockerfile
