Saga & component, action, reducer Connect

[choppaluv]

User page

component, reducer, action, saga 모두 연결하여 User page 완성하였습니다. @parkkyuyeon User page에서 필요한 action이 빠져있어 추가하면서 reducer도 수정하였습니다. component rendering할 때 User molecule에서 TripTitle atom이 들어있었는데 무슨 이유에서인지 component life cycle관련 문제로 error가 떠서 atom 따로 안쓰고 molecule에서 직접 Trip Title을 rendering하도록 하였습니다. css style은 그대로 옮겨놔서 rendering할 때 보이는 모습은 원래 의도하신 대로 보이도록 하였습니다. reducer랑 component 변경한 점 고려해서 test 작성해주세요~

@hjbc0921 User page에서 Add trip버튼, Trip Title 버튼 누르면 다른 page로 routing이 되어야 하는데 component(molecule/User)에서 해당하는 부분 각각 주석으로 표시해 두었습니다. add trip page도 이미 saga작업이 완성되어 있어 add trip button눌러 해당 page로 이동해서 trip 추가 하는 것까지 확인하실 수 있을 것 같습니다. 다른 page들도 saga 작업끝나는대로 component에서 어떤 button누르면 routing되어야하는지 주석처리 해서 올리도록 하겠습니다~

[choppaluv]

Intro page

@hjbc0921 Intro page도 saga작업 완료하였습니다. 다만 login success/fail에 따라 routing여부가 달라지는데 단순한 button click과는 다르기 때문에 조금 더 생각해봐야 할 것 같습니다.

[ghost]

기본적으로 조건 없이 버튼 누르면 라우팅은 모두 구현하였습니다. 추가로 구현해야할 버튼이 있으면 말씀해주세요.

조건에 따라 라우팅하는 것은 state 추가, saga 수정, action 및 reducer 수정까지 해야해서 현재 intro와 signup page 수정 중입니다.

[ghost]

@choppaluv login 후 state 변경할 때 selectors 파일은 비어있던데 username, token 같은 것은 다른 파일에 저장되는건가요? 구현해야하는건가요? 우선은 login/selectors.js에 구현해놓겠습니다.

[ghost]

login 실패 시 에러메시지와 함께 페이지 유지 구현하였습니다.

[ghost]

성공시 페이지 전환도 구현하였습니다. selectors, actions, reducers, sagas, component 모두 조금씩 수정했으니 testing할 때 참고하시기 바랍니다.

[choppaluv]

@hjbc0921 selectors.js에 따로 selector를 만들지 않았고 각 store마다 saga 파일에서 필요한 state(다른 store의 state포함)를 불러오도록 하였습니다. 처음에 string값으로 직접 saga파일에 적어서 backend 통신을 test하던 것을 state에서 그 값을 불러와서 사용하도록 하였으며 성공적으로 통신함을 확인하였습니다. 현재 addtrip, addschedule, addtrip page의 경우 이미 그렇게 변경하여 test를 마쳤고 다른 store의 saga들도 작업중에 있습니다.

[choppaluv]

Home page

현재 home page중에서 add user, add schedule부분은 saga작업을 마쳤습니다.

• @narajoa21 add user 에서 trip에 속한 user를 보여주기 위해 component와 container를 조금씩 변경하였습니다. store에 add user가 성공적으로 이루어졌는지를 나타내는 err(boolean 값), add user가 실패한 경우는 err message를 보여주고 아닌 경우에는 trip에 속한 user list를 보여주는 msg field를 추가하였습니다. saga에서 backend통신은 현재 잘 이루어져서 username을 input으로 받아 그 list에 이미 그 user가 있는 경우, username이 valid하지 않은 경우를 check해서 그렇지 않은 경우에만 PATCH(trip의 uesr list에 해당 user 추가) 되도록 작업을 해두었습니다. backend에 valid한 username이 들어온 경우에만 통신을 해서 db가 변경되도록 하였습니다.
• @narajoa21 add schedule부분은 saga작업 성공적으로 마쳐서 값을 넣으면 backend에 POST가 성공적으로 이루어집니다. add schedule과 calendar는 같은 store에 넣어야 할 것 같아 store/addschedule -> store/schedules로 옮겨놓았습니다.
• @parkkyuyeon Calendar는 아직 reducer가 없어서 saga에서 받아온 data를 어떻게 전달해야할 지 몰라 saga작업만 해두었습니다. store/schedules/sagas.js에서 loadSchedules에서 필요한 schedule list를 받아오는 것은 확인하였습니다. schedule list를 잘 받아와서 STORE_SCHEDULE action을 put하는 것까지는 saga에서 작업을 해두었습니다. 작성하신 component에 어떠한 형태로 schedule list를 전달해야하는건가요?? 그리고 아직 해당 home page에 calendar component는 빠져 있어 보이지 않는데 아직 작업이 안끝나서 넣지 않으신건가요??
• @narajoa21 addtodo와 todolist의 store에 해당하는 부분도 완성하였습니다. store/todos에서 그 code를 확인하실 수 있습니다. add todo에 새로운 todo의 내용을 입력하고 나면 새로운 todo가 성공적으로 생성되며 list에 바로 반영됨을 확인하실 수 있습니다. toggle todo의 경우 backend model도 수정해야 되서 일단 아직 구현하지 않았습니다. (미리 작성해주신 해당 code는 주석처리 해놓았습니다) Iteration2내에는 일단 test를 작성해야해서 어려울 것 같고 이후에 마저 toggle todo에 해당하는 saga와 그 연결 작업하도록 하겠습니다. Todo list component에서 atom component 사용시 lifecycle 관련 error가 계속 발생하여 atom 사용하지 않고 해당 css만 가져와서 Todolist molecule에 직접 list 형태로 수정하였습니다. 이점 고려해서 test 작성해주시면 감사하겠습니다.

해당 결과화면은 #9 에서 확인하실 수 있습니다.

[parkkyuyeon]

@choppaluv Add schedule을 했을 때 Calendar에 내용이 뜨게 하는 구현이 너무 복잡해서 다음 iteration에 해야할 것으로 미루려고 합니다.

[choppaluv]

@narajoa21 toggle todo 작업 완료하였습니다. backend model, serializer수정하였고 frontend에서도 해당 todo를 누를때마다 toggle되도록 하여 그 state가 store에 성공적으로 저장됩니다. toggle되어 line-through 형태로 보여지는 것을 직접 확인하실 수 있습니다.