Skip to content

Commit efddbb4

Browse files
udzuraudzura
authored
Merge pull request #17 from pepabo-college/develop-frontend
フロントエンド開発
2 parents 780d2a1 + 9a5cb57 commit efddbb4

14 files changed

+318
-3
lines changed

‎.gitignore

+96
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,105 @@
1616
/tmp/*
1717
!/log/.keep
1818
!/tmp/.keep
19+
npm-debug.log*
1920

2021
# Ignore Byebug command history file.
2122
.byebug_history
2223

2324
/app/assets/javascripts/bundle.js
25+
### https://raw.github.com/github/gitignore/f51d32528bcd110bc8fb8b09e2b0164f6c243663/Node.gitignore
26+
27+
# Logs
28+
logs
29+
*.log
30+
npm-debug.log*
31+
32+
# Runtime data
33+
pids
34+
*.pid
35+
*.seed
36+
*.pid.lock
37+
38+
# Directory for instrumented libs generated by jscoverage/JSCover
39+
lib-cov
40+
41+
# Coverage directory used by tools like istanbul
42+
coverage
43+
44+
# nyc test coverage
45+
.nyc_output
46+
47+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
48+
.grunt
49+
50+
# node-waf configuration
51+
.lock-wscript
52+
53+
# Compiled binary addons (http://nodejs.org/api/addons.html)
54+
build/Release
55+
56+
# Dependency directories
57+
node_modules
58+
jspm_packages
59+
60+
# Optional npm cache directory
61+
.npm
62+
63+
# Optional eslint cache
64+
.eslintcache
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
73+
### https://raw.github.com/github/gitignore/f51d32528bcd110bc8fb8b09e2b0164f6c243663/Rails.gitignore
74+
75+
*.rbc
76+
capybara-*.html
77+
.rspec
78+
/log
79+
/tmp
80+
/db/*.sqlite3
81+
/db/*.sqlite3-journal
82+
/public/system
83+
/coverage/
84+
/spec/tmp
85+
**.orig
86+
rerun.txt
87+
pickle-email-*.html
88+
89+
# TODO Comment out this rule if you are OK with secrets being uploaded to the repo
90+
config/initializers/secret_token.rb
91+
92+
# Only include if you have production secrets in this file, which is no longer a Rails default
93+
# config/secrets.yml
94+
95+
# dotenv
96+
# TODO Comment out this rule if environment variables can be committed
97+
.env
98+
99+
## Environment normalization:
100+
/.bundle
101+
/vendor/bundle
102+
103+
# these should all be checked in to normalize the environment:
104+
# Gemfile.lock, .ruby-version, .ruby-gemset
105+
106+
# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
107+
.rvmrc
108+
109+
# if using bower-rails ignore default bower_components path bower.json files
110+
/vendor/assets/bower_components
111+
*.bowerrc
112+
bower.json
113+
114+
# Ignore pow environment settings
115+
.powenv
116+
117+
# Ignore Byebug command history file.
118+
.byebug_history
119+
24120

‎app/assets/javascripts/Task.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
3+
export default class Task extends React.Component {
4+
handleUpdate(e) {
5+
e.preventDefault();
6+
this.props.onTaskUpdate({task: {id: this.props.id, status: e.target.value}});
7+
}
8+
9+
render() {
10+
return (
11+
<tr key={this.props.id}>
12+
<td>
13+
{this.props.content}
14+
</td>
15+
<td>
16+
<select className="form-control" defaultValue={this.props.status} onChange={this.handleUpdate.bind(this)} >
17+
<option value="todo" key="todo">todo</option>
18+
<option value="doing" key="doing">doing</option>
19+
<option value="done" key="done">done</option>
20+
</select>
21+
</td>
22+
</tr>
23+
);
24+
}
25+
}

‎app/assets/javascripts/TaskApp.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from "react";
2+
import TaskForm from "./TaskForm";
3+
import TaskList from "./TaskList";
4+
import request from 'superagent';
5+
6+
export default class TaskApp extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
data: []
11+
};
12+
}
13+
14+
loadTaskFromServer() {
15+
request
16+
.get(this.props.url)
17+
.accept('application/json')
18+
.end((err, res) => {
19+
if (err || !res.ok) {
20+
console.error(this.props.url,
21+
status, err.toString());
22+
} else {
23+
this.setState({data: res.body});
24+
}
25+
});
26+
}
27+
28+
handleTaskSubmit(task) {
29+
var tasks = this.state.data;
30+
var newTasks = tasks.concat([task]);
31+
this.setState({data: newTasks});
32+
request
33+
.post(this.props.url)
34+
.accept('application/json')
35+
.send({task: task})
36+
.end((err, res) => {
37+
if (err || !res.ok) {
38+
console.error(this.props.url,
39+
status, err.toString());
40+
} else {
41+
this.setState({data: newTasks});
42+
}
43+
});
44+
}
45+
46+
taskUpdate(task) {
47+
request
48+
.patch(this.props.url + '/' + task.task.id)
49+
.accept('application/json')
50+
.send(task)
51+
.end((err, res) => {
52+
if (err || !res.ok) {
53+
console.error(this.props.url, status, err.toString());
54+
} else {
55+
this.setState({data: res.body});
56+
}
57+
});
58+
}
59+
60+
componentDidMount() {
61+
this.loadTaskFromServer();
62+
setInterval(this.loadTaskFromServer.bind(this),
63+
this.props.pollInterval);
64+
}
65+
66+
render() {
67+
return (
68+
<div className="TaskApp">
69+
<TaskForm
70+
onTaskSubmit={this.handleTaskSubmit.bind(this)} />
71+
<table className="table table-striped">
72+
<thead>
73+
<tr>
74+
<th>Content</th>
75+
<th>Status</th>
76+
<th colSpan="3"></th>
77+
</tr>
78+
</thead>
79+
<TaskList data={this.state.data} onTaskUpdate={this.taskUpdate.bind(this)} />
80+
</table>
81+
</div>
82+
);
83+
}
84+
}

‎app/assets/javascripts/TaskForm.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
4+
export default class TaskForm extends React.Component {
5+
handleSubmit(e) {
6+
e.preventDefault();
7+
var content = ReactDOM.findDOMNode(this.refs.content).value.trim();
8+
if (!content) {
9+
return;
10+
}
11+
this.props.onTaskSubmit({content: content, status: 'todo'});
12+
ReactDOM.findDOMNode(this.refs.content).value = '';
13+
return;
14+
}
15+
16+
render() {
17+
return (
18+
<form className="todoForm" onSubmit={this.handleSubmit.bind(this)}>
19+
<div className="input-group">
20+
<input type="text" className="form-control" placeholder="ToDo" ref="content" />
21+
<span className="input-group-btn">
22+
<input type="submit" className="btn btn-primary" value="登録" />
23+
</span>
24+
</div>
25+
</form>
26+
);
27+
}
28+
}

‎app/assets/javascripts/TaskList.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
import Task from "./Task";
3+
4+
export default class TaskList extends React.Component {
5+
render() {
6+
var tasks = this.props.data.map((task) => {
7+
return (
8+
<Task key={task.id} id={task.id}
9+
content={task.content} status={task.status} onTaskUpdate={this.props.onTaskUpdate} >
10+
</Task>
11+
);
12+
});
13+
return (
14+
<tbody>
15+
{tasks}
16+
</tbody>
17+
);
18+
}
19+
}

‎app/assets/javascripts/app.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import TaskApp from "./TaskApp";
4+
5+
$(function() {
6+
ReactDOM.render(
7+
<TaskApp url="/tasks" pollInterval={2000} />,
8+
document.getElementById('container')
9+
);
10+
});

‎app/assets/javascripts/application.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@
1313
//= require jquery
1414
//= require jquery_ujs
1515
//= require turbolinks
16-
//= require_tree .
16+
//= require bundle

‎app/controllers/application_controller.rb

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
class ApplicationController < ActionController::Base
22
#protect_from_forgery with: :exception
3+
protect_from_forgery with: :null_session
34
USERS = { ENV['USER'] => ENV['PASS'] }
45

5-
before_action :digest_auth
6+
# before_action :digest_auth
67

78
def digest_auth
89
authenticate_or_request_with_http_digest do |user|

‎app/controllers/welcome_controller.rb

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
class WelcomeController < ApplicationController
2+
def index
3+
end
4+
end

‎app/views/layouts/application.html.erb

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<title>Todo</title>
5+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
56
<%= csrf_meta_tags %>
67

78
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

‎app/views/welcome/index.html.erb

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div id="container">
2+
<h1 class="page-header">Listing Tasks</h1>
3+
<div id="container"></div>
4+
</div>

‎config/application.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ class Application < Rails::Application
1111
# Settings in config/environments/* take precedence over those specified here.
1212
# Application configuration should go into files in config/initializers
1313
# -- all .rb files in that directory are automatically loaded.
14-
config.api_only = true
14+
config.api_only = false
1515
end
1616
end

‎config/routes.rb

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
Rails.application.routes.draw do
22
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
33
resources :tasks
4+
5+
root to: 'welcome#index'
46
end

‎package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "takapi-todo-app",
3+
"version": "1.0.0",
4+
"description": "## index curl -X GET http://127.0.0.1:3000/tasks/ ## show curl -X GET http://127.0.0.1:3000/tasks/#{id} ## Create curl -F \"task[content]=#{contentの値}\" -F \"task[status]=#{statusの値}\" http://127.0.0.1:3000/tasks.json ## UPDATE curl -X PUT -F \"task[content]=#{id}\" -F \"task[status]=#{statusの値}\" http://127.0.0.1:3000/tasks/#{id}.json ## DELETE curl -X DELETE http://127.0.0.1:3000/tasks/#{id}.json",
5+
"main": "app.js",
6+
"directories": {
7+
"test": "test"
8+
},
9+
"scripts": {
10+
"build": "browserify app/assets/javascripts/app.js -t babelify -o app/assets/javascripts/bundle.js -v",
11+
"watch": "watchify app/assets/javascripts/app.js -t babelify -o app/assets/javascripts/bundle.js -v"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/pepabo-college/takapi-todo-app.git"
16+
},
17+
"keywords": [],
18+
"author": "",
19+
"license": "ISC",
20+
"bugs": {
21+
"url": "https://github.com/pepabo-college/takapi-todo-app/issues"
22+
},
23+
"homepage": "https://github.com/pepabo-college/takapi-todo-app#readme",
24+
"devDependencies": {
25+
"babel-preset-es2015": "^6.16.0",
26+
"babelify": "^7.3.0",
27+
"watchify": "^3.7.0"
28+
},
29+
"dependencies": {
30+
"babel-preset-react": "^6.16.0",
31+
"react": "^15.3.2",
32+
"react-dom": "^15.3.2",
33+
"superagent": "^2.3.0"
34+
},
35+
"babel": {
36+
"presets": [
37+
"es2015",
38+
"react"
39+
]
40+
}
41+
}

0 commit comments

Comments
 (0)