編集履歴

質問編集履歴

components/sideArea.jsの追加

2019/03/17 01:40

投稿

y_aka

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -405,3 +405,229 @@
 }
 ```
+components/sideArea.js
+```
+import React from "react";
+import ReactDOM from "react-dom";
+import AddGroupDialog from "./addGroupDialog";
+import EditGroupDialog from "./editGroupDialog"
+export default class SideArea extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showAddGroupDialog: false,
+      showEditGroupDialog: false,
+      selectedGroup: undefined
+    }
+  }
+  onClickGroup(event) {
+    let listItem = ReactDOM.findDOMNode(event.target);
+    let id = listItem.dataset.id;
+    this.props.onSelect(id);
+  }
+  onClickAddGroup(event) {
+    this.setState({ showAddGroupDialog: true });
+  }
+  onSaveAddGroupDialog(groupName) {
+    console.log("onSaveAddGroupDialog", groupName);
+    this.props.onAddGroup(groupName);
+    this.setState({ showAddGroupDialog: false });
+  }
+  onCancelAddGroupDialog() {
+    this.setState({ showAddGroupDialog: false });
+  }
+  onSaveEditGroupDialog(id, groupName) {
+    this.props.onEditGroup(id, groupName);
+    this.setState({ showEditGroupDialog: false });
+  }
+  onCancelEditGroupDialog() {
+    this.setState({ showEditGroupDialog: false });
+  }
+  onDeleteEditGroupDialog(id) {
+    this.props.onDeleteGroup(id);
+    this.setState({ showEditGroupDialog: false });
+  }
+  onClickGroupEdit(event) {
+    let editButton = ReactDOM.findDOMNode(event.target);
+    let id =editButton.dataset.id;
+    let selectedGroup;
+    for (let i = 0; i < this.props.groupList.length; i++) {
+      if (this.props.groupList[i].id === id) {
+        selectedGroup = this.props.groupList[i];
+        break;
+      }
+    }
+    this.setState({
+      showEditGroupDialog: true,
+      selectedGroup: selectedGroup
+    });
+  }
+  renderGroup() {
+    let groupListDom = [];
+    for (let i = 0; i < this.props.groupList.length; i++) {
+      let group = this.props.groupList[i];
+      let groupItem = (<li key={group.id}>
+        <span
+          data-id={group.id}
+          onClick={this.onClickGroup.bind(this)}>
+          {group.label}</span>
+        <button
+          data-id={group.id}
+          className="group-edit-button"
+          onClick={this.onClickGroupEdit.bind(this)}>編集</button>
+      </li>);
+      groupListDom.push(groupItem);
+    }
+    return groupListDom;
+  }
+  render() {
+    return (
+      <div className="side-area">
+        <ul className="group-list">
+          {this.renderGroup()}
+        </ul>
+        <div className="side-area-footer">
+          <button
+            className="add-group-button"
+            onClick={this.onClickAddGroup.bind(this)}>グループ新規作成</button>
+        </div>
+        <AddGroupDialog
+          show={this.state.showAddGroupDialog}
+          onSave={this.onSaveAddGroupDialog.bind(this)}
+          onCancel={this.onCancelAddGroupDialog.bind(this)} />
+        <EditGroupDialog
+          show={this.state.showEditGroupDialog}
+          group={this.state.selectedGroup}
+          onSave={this.onSaveEditGroupDialog.bind(this)}
+          onCancel={this.onCancelEditGroupDialog.bind(this)}
+          onDelete={this.onDeleteEditGroupDialog.bind(this)} />
+      </div>
+    )
+  }
+}
+```

誤りがあったので修正しました。

2019/03/17 01:40

投稿

y_aka

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -316,94 +316,56 @@
-components/addGroupDialog.js
+containers\sideArea.js
-```
+```
-import React from 'react';
+import { connect } from "react-redux";
+import { groupActions } from "../actions/groupActions";
-export default class AddGroupDialog extends React.Component {
+import SideArea from "../components/sideArea";
-onCancel(event) {
-  this.props.onCancel();
-}
-onSave(event) {
-  let groupNameInput = this.refs.groupName;
-  this.props.onSave(groupNameInput.value);
+const mapStateToProps = (state) => {
-}
-  render() {
-    if (this.props.show) {
-      return (
+  return {
-        <div className="modal-layer">
-          <div className="dialog">
-            <div className="dialog-header">グループ新規作成</div>
-            <div className="dialog-content">
-              グループ名:
-           <input
-                ref="groupName"
-                type="text"
+    groupList: state.groupList
-                name="groupName"
-                className="group-text-input" />
-            </div>
-            <div className="dialog-footer">
-              <button
-                className="cancel-button"
-                onClick={this.onCancel.bind(this)}>キャンセル</button>
-              <button
-                className="save-button"
-                onClick={this.onSave.bind(this)}>保存</button>
-            </div>
-          </div>
-        </div>
-      )
-    } else {
-      return (<div></div>);
-    }
   }
 }
+const mapDispatchToProps = (dispatch) => {
+  return {
+   onAddGroup: (data) => {
+    dispatch(groupActions.addGroup(data));
+   }
+  }
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SideArea)
 ```

components/addGroupDialog.js components/addGroupDialog.js を追加しました。

2019/03/17 01:13

投稿

y_aka

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -307,3 +307,139 @@
 export default reducer;
 ```
+追記
+-------------------------------
+components/addGroupDialog.js
+```
+import React from 'react';
+export default class AddGroupDialog extends React.Component {
+onCancel(event) {
+  this.props.onCancel();
+}
+onSave(event) {
+  let groupNameInput = this.refs.groupName;
+  this.props.onSave(groupNameInput.value);
+}
+  render() {
+    if (this.props.show) {
+      return (
+        <div className="modal-layer">
+          <div className="dialog">
+            <div className="dialog-header">グループ新規作成</div>
+            <div className="dialog-content">
+              グループ名:
+           <input
+                ref="groupName"
+                type="text"
+                name="groupName"
+                className="group-text-input" />
+            </div>
+            <div className="dialog-footer">
+              <button
+                className="cancel-button"
+                onClick={this.onCancel.bind(this)}>キャンセル</button>
+              <button
+                className="save-button"
+                onClick={this.onSave.bind(this)}>保存</button>
+            </div>
+          </div>
+        </div>
+      )
+    } else {
+      return (<div></div>);
+    }
+  }
+}
+```
+actions/groupAction.js
+```
+export const groupActionNames = {
+ ADD_GROUP: "ADD_GROUP"
+}
+export const groupActions = {
+ addGroup: (data) => {
+   return {
+     type: groupActionNames.ADD_GROUP,
+     payload: {
+       data: data
+     }
+   }
+ }
+}
+```

誤字の修正

2019/03/17 01:05

投稿

y_aka

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,7 +2,7 @@
 表題の通りTodoのグループを追加したいのですが
-下記エラーが発生します。reduxdevToolsでstateにはgroupListには
+下記エラーが発生します。reduxdevToolsでstateのgroupListには
 `{id: "group-2", label: "グループ２"}`