redux-todo.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import {
  2. HANDLE_CHANGE_EVENT,
  3. RESET_FORM,
  4. HANDLE_SUBMIT_EVENT,
  5. ADD_HOBBY,
  6. REMOVE_HOBBY,
  7. REMOVE_ITEM,
  8. EDIT_ITEM,
  9. SUBMIT_HANDLER_EDIT
  10. } from "../actionTypes/actionTypes";
  11. const list = [
  12. {
  13. id: 1,
  14. editable: true,
  15. firstName: "Tony",
  16. lastName: "Montana",
  17. age: 50,
  18. hobby: ["drugs", "guns"]
  19. }
  20. ];
  21. const initialValue = {
  22. list: list,
  23. editableForm: false,
  24. item: {
  25. editable: false,
  26. firstName: "",
  27. lastName: "",
  28. age: "",
  29. hobby: [
  30. {
  31. id: Math.random()
  32. .toString()
  33. .substr(2, 100),
  34. value: ""
  35. }
  36. ]
  37. },
  38. updateObject: {}
  39. };
  40. export default (state = initialValue, action) => {
  41. switch (action.type) {
  42. case HANDLE_CHANGE_EVENT: {
  43. const { name, value, checked, type, id } = action.payload.target;
  44. if (name === "hobby") {
  45. return {
  46. ...state,
  47. item: {
  48. ...state.item,
  49. hobby: state.item.hobby.map(el => (el.id === id ? { ...el, value } : el))
  50. }
  51. };
  52. }
  53. return {
  54. ...state,
  55. item: {
  56. ...state.item,
  57. [name]: type === "checkbox" ? checked : value
  58. }
  59. };
  60. }
  61. case RESET_FORM: {
  62. return { ...state, editableForm: initialValue.editableForm, item: initialValue.item };
  63. }
  64. case HANDLE_SUBMIT_EVENT: {
  65. return {
  66. ...state,
  67. list: state.list.concat({
  68. ...state.item,
  69. id: Math.random()
  70. .toString()
  71. .substr(2, 100),
  72. hobby: state.item.hobby.filter(el => el.value).map(el => el.value)
  73. }),
  74. editableForm: initialValue.editableForm,
  75. item: initialValue.item
  76. };
  77. }
  78. case ADD_HOBBY: {
  79. return {
  80. ...state,
  81. item: {
  82. ...state.item,
  83. hobby: state.item.hobby.concat({
  84. id: Math.random()
  85. .toString()
  86. .substr(2, 100),
  87. value: ""
  88. })
  89. }
  90. };
  91. }
  92. case REMOVE_HOBBY: {
  93. return {
  94. ...state,
  95. item: {
  96. ...state.item,
  97. hobby: state.item.hobby.filter(el => el.id !== action.payload)
  98. }
  99. };
  100. }
  101. case REMOVE_ITEM: {
  102. return {
  103. ...state,
  104. list: state.list.filter(el => el.id !== action.payload)
  105. };
  106. }
  107. case EDIT_ITEM: {
  108. const item = state.list.find(el => el.id === action.payload);
  109. return {
  110. ...state,
  111. item: {
  112. ...item,
  113. hobby: item.hobby.map(el => ({
  114. id: Math.random()
  115. .toString()
  116. .substr(2, 100),
  117. value: el
  118. }))
  119. },
  120. editableForm: true
  121. };
  122. }
  123. case SUBMIT_HANDLER_EDIT: {
  124. return {
  125. ...state,
  126. list: state.list.map(el =>
  127. el.id === state.item.id
  128. ? { ...state.item, hobby: state.item.hobby.filter(el => el.value).map(el => el.value) }
  129. : el
  130. ),
  131. editableForm: initialValue.editableForm,
  132. item: initialValue.item
  133. };
  134. }
  135. case "@@redux-form/CHANGE": {
  136. if (action.meta.form === "redux-form") {
  137. console.log("sdsasda");
  138. return {
  139. ...state,
  140. updateObject: {
  141. ...state.updateObject,
  142. [action.meta.field]: action.payload
  143. }
  144. };
  145. }
  146. return state;
  147. }
  148. default:
  149. return state;
  150. }
  151. };