Merge pull request #67 from BuddiX/modify_destroy_motion

close #56

app/models/project.rb

@@ -16,7 +16,6 @@ class Project < ApplicationRecord
   validates :title, presence: true, length: { maximum: 50 }
   validates :fixed_star_type, presence: true
 
-  enum planet_type: [:Uranus, :Mercury, :Pluto, :Jupitar, :Earth, :Moon, :Neputune,
   enum fixed_star_type: [:Uranus, :Mercury, :Pluto, :Jupitar, :Earth, :Moon, :Neputune,
                          :Sirius, :Love, :Mars, :Sun, :Venus, :Takoyaki, :Ball, :Egg]
 end

frontend/src/javascripts/actions/common.js

@@ -13,6 +13,20 @@ export function resetSelectedStar() {
   }
 }
 
+export function igniteDestroyPlanets(status) {
+  return {
+    type: actionTypes.IGNITE_DESTROY_ACTION,
+    status
+  }
+}
+
+export function resetDestroyPlanets(status) {
+  return {
+    type: actionTypes.RESET_DESTROY_ACTION,
+    status
+  }
+}
+
 export function setModalStatus(status) {
   return {
     type: actionTypes.OPEN_MODAL,

frontend/src/javascripts/actions/projects.js

@@ -3,8 +3,8 @@ import { actionTypes, ROOT_URL, JWT } from '../constants'
 
 
 export function fetchRevolvingProjects() {
-  return axios.get(`${ROOT_URL}/api/projects/`, { 
-    headers: {　'Authorization': `Bearer ${JWT}`　}
+  return axios.get(`${ROOT_URL}/api/projects/`, {
+    headers: { 'Authorization': `Bearer ${JWT}` }
   }).then(res => {
     return {
       type: actionTypes.FETCH_REVOLVING_PROJECTS,

frontend/src/javascripts/components/molecules/assignment-form.js

@@ -38,7 +38,7 @@ class AssignmentForm extends Component {
     )
   }
 
-  onSubmit({ title, description, deadline, planet_size, orbit_pos}) {
+  onSubmit({ title, description, deadline, planet_size, orbit_pos }) {
     const target = document.getElementById('form-balloon')
     const planet_type = this.props.selectedStar
     const project_id = this.props.currentProject.id
@@ -85,9 +85,7 @@ class AssignmentForm extends Component {
 
 function validate(values) {
   const errors = {}
-
-  //TODO: 現状validatが適当　→　rails側と絡めて後々実装
-
+  //TODO: 現状validatが適当 → rails側と絡めて後々実装
   if (!values.orbit_pos) {
     errors.orbit_pos = "Orbit Position required"
   }

frontend/src/javascripts/components/molecules/modal.js

@@ -4,8 +4,7 @@ import Modal from 'react-modal'
 
 import ConfirmBtn from '../atoms/confirm-btn'
 
-import { nullifySelectedAssignment } from '../../actions/assignments'
-import { setModalStatus, resetModalStatus } from '../../actions/common'
+import { igniteDestroyPlanets, resetDestroyPlanets, setModalStatus, resetModalStatus } from '../../actions/common'
 
 import '../../../stylesheets/modal.scss'
 
@@ -47,8 +46,7 @@ class ConfirmModal extends Component {
   closeModal(isDestroy) {
     this.props.resetModalStatus(false)
     if(isDestroy) {
-      this.props.parentMethod(this.props.selectedAssignments)
-      this.props.nullifySelectedAssignment()
+      this.props.igniteDestroyPlanets(true)
     }
   }
 
@@ -70,6 +68,5 @@ class ConfirmModal extends Component {
 }
 
 export default connect(
-  ({modalIsOpen, selectedAssignments}) => ({modalIsOpen, selectedAssignments}),
-  { nullifySelectedAssignment, setModalStatus, resetModalStatus }
+  ({isDestroyIgnited, modalIsOpen}) => ({isDestroyIgnited, modalIsOpen}), { igniteDestroyPlanets, resetDestroyPlanets, setModalStatus, resetModalStatus }
 )(ConfirmModal)

frontend/src/javascripts/components/molecules/mypage-orbit.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import _ from 'lodash'
 
+import { setCurrentProject } from '../../actions/projects'
+
 import { PlanetImgs } from '../../constants'
 
 class MypageOrbit extends Component {
@@ -45,4 +47,6 @@ class MypageOrbit extends Component {
   }
 }
 
-export default connect(({revolvingProjects}) => ({revolvingProjects}))(MypageOrbit)
+export default connect(({revolvingProjects}) => ({revolvingProjects}),
+  { setCurrentProject }
+)(MypageOrbit)

frontend/src/javascripts/components/molecules/project-bar.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import _ from 'lodash'
 
 import { fetchRevolvingAssignments } from '../../actions/assignments'
-import { changeCurrentProject　} from '../../actions/projects'
+import { changeCurrentProject } from '../../actions/projects'
 import { PlanetImgs } from '../../constants'
 
 import '../../../stylesheets/project_bar.scss'

frontend/src/javascripts/components/users/footer.js

@@ -7,8 +7,8 @@ import anime from 'animejs'
 import ConfirmModal from '../molecules/modal'
 import AssignmentForm from '../molecules/assignment-form'
 
-import { nullifySelectedAssignment } from '../../actions/assignments'
-import { setSelectedStar, resetSelectedStar, setModalStatus, resetModalStatus } from '../../actions/common'
+import { destroyAssignment, nullifySelectedAssignment } from '../../actions/assignments'
+import { setSelectedStar, resetSelectedStar, igniteDestroyPlanets, resetDestroyPlanets, setModalStatus, resetModalStatus } from '../../actions/common'
 
 import ImgHolderOpen from '../../../images/footer/planet_holder_btn.png'
 import { PlanetImgs } from '../../constants'
@@ -20,6 +20,7 @@ class Footer extends Component {
     super(props)
 
     this.state = {
+      selectAssignments: [],
       clickedStar: null
     }
   }
@@ -29,8 +30,36 @@ class Footer extends Component {
     planet_list.style.display = 'none'
   }
 
+  componentDidUpdate(prevProps, prevState){
+    if(this.props.isDestroyIgnited && !prevProps.isDestroyIgnited) {
+      if(this.props.selectedAssignments) {
+          console.log("didupdate")
+          this.onClickDestroyPlanets(this.props.selectedAssignments)
+      }
+    }
+  }
+
   onClickOpenModal() {
     this.props.setModalStatus(true)
+    this.motionControll()
+  }
+
+  removePlanet(parent) {
+    //FIXME: 一旦canvas以外のImgとballoonを削除・DOM上にはPlanetを表示する親要素は残る。
+    parent.map((doc) => {
+      let parent = doc
+      let child = doc.firstChild
+      console.log(parent,child)
+      parent.removeChild(child)
+    })
+  }
+
+  removeAssignmentData(parent) {
+    parent.map((doc) => {
+      let cvs = doc.children[1]
+      let cvs_info = cvs.id.split('-')
+      this.props.destroyAssignment(cvs_info[0])
+    })
   }
 
   onClickDestroyPlanets(selectedAssignments) {
@@ -74,8 +103,8 @@ class Footer extends Component {
     }
 
     function updateCoords() {
-      pointerX = 100
-      pointerY = 100
+      pointerX = 60
+      pointerY = 60
     }
 
     function removeImg() {
@@ -152,7 +181,11 @@ class Footer extends Component {
     updateCoords()
     removeImg()
     animateParticules(pointerX, pointerY)
-    //this.props.nullifySelectedAssignment()
+    this.props.resetDestroyPlanets(false)
+    this.removeAssignmentData(parent)
+    this.removePlanet(parent)
+    this.props.nullifySelectedAssignment()
+    this.motionControll()
   }
 
   motionControll() {
@@ -270,13 +303,13 @@ class Footer extends Component {
             {this.renderDeleteIcons(deleteButtonsclasses)}
           </ul>
         </div>
-        <ConfirmModal parentMethod={this.onClickDestroyPlanets} />
+        <ConfirmModal />
       </div>
     )
   }
 }
 
 export default connect(
-  ({ currentUser, selectedAssignments, selectedStar, modalIsOpen }) => ({ currentUser, selectedAssignments, selectedStar, modalIsOpen }),
-  { nullifySelectedAssignment, setSelectedStar, resetSelectedStar, setModalStatus, resetModalStatus }
+  ({ currentUser, selectedAssignments, selectedStar, isDestroyIgnited, modalIsOpen }) => ({ currentUser, selectedAssignments, isDestroyIgnited, selectedStar, modalIsOpen }),
+  { destroyAssignment, nullifySelectedAssignment, setSelectedStar, resetSelectedStar, igniteDestroyPlanets, resetDestroyPlanets, setModalStatus, resetModalStatus }
 )(Footer)

frontend/src/javascripts/components/users/mypage.js

@@ -7,8 +7,6 @@ import { JWT } from '../../constants'
 import MypageOrbit from '../molecules/mypage-orbit'
 import { fetchRevolvingProjects, setCurrentProject,  createProject, destroyProject } from '../../actions/projects'
 
-import ImgUser from '../../../images/main/user_default_icon.png'
-
 class MyPage extends Component {
   componentDidMount() {
     // TODO: 最初ログインした時Projectが設定されないバグ修正
@@ -48,7 +46,7 @@ class MyPage extends Component {
             {currentUser.name}
           </div>
         </div>
-        <MypageOrbit />
+        <MypageOrbit history={this.props.history} match={this.props.match}/>
       </div>
     )
   }

frontend/src/javascripts/constants.js

@@ -67,6 +67,8 @@ export const actionTypes = keyMirror({
   CLOSE_MODAL: null,
   SELECT_STAR: null,
   DISSELECT_STAR: null,
+  IGNITE_DESTROY_ACTION: null,
+  RESET_DESTROY_ACTION: null,
 
   // User
   SET_CURRENT_USER: null,

frontend/src/javascripts/reducers/common.js

@@ -14,6 +14,19 @@ export function selectedStar(state = null, action) {
   }
 }
 
+export function isDestroyIgnited(state = false, action) {
+  switch (action.type) {
+    case actionTypes.IGNITE_DESTROY_ACTION:
+      return action.status
+
+    case actionTypes.RESET_DESTROY_ACTION:
+      return action.status
+
+    default:
+      return state
+  }
+}
+
 export function modalIsOpen(state = false, action) {
   switch (action.type) {
     case actionTypes.OPEN_MODAL:

frontend/src/javascripts/reducers/index.js

@@ -3,14 +3,15 @@ import { reducer as formReducer } from 'redux-form'
 import currentUser from './current-user'
 import { revolvingProjects, currentProject } from './projects'
 import { revolvingAssignments, destroyedAssignments, selectedAssignments } from './assignments'
-import { selectedStar, modalIsOpen } from './common'
+import { selectedStar, isDestroyIgnited, modalIsOpen } from './common'
 
 const rootReducer = combineReducers({
   // Form
   form: formReducer,
 
   //commmon
   selectedStar,
+  isDestroyIgnited,
 
   // Users
   currentUser,