matthew-black
commented
2 weeks ago We talked this through, and it'll reduce complexity (and prevent malformed data being stored in the db) to treat this multi-step form like the "redux feedback loop" assignment. (Just store all of the steps' input data in a reducer, then show the user a submit button at the end of the process.)
Description
I'm trying to implement the "create a loved one" flow as described in the FamliCare scope document. My multipart form navigation seems to work. Step one captures the loved one's name, and sends the POST request to the server. The endpoint inserts a record with the name fields, returns the ID, and then updates the current user's records to associate them with said ID. The issue comes when I try to pass that ID to other components to use for the PUT requests. the API seems to return the correct data when I console log response.data from within the lovedOne.api.js file. However, when I try to send it back to my saga and update the reducer, the API response is undefined. The error checks I've implemented to ensure I'm getting a valid response are not triggering, and the form seems to proceed to step 2. When. I click next to get to step 3, it bombs out, indicating that the ID should be an integer. Redux logger shows empty objects indicating the state is not being updated.
Your Real Name Jason
What do you want to happen? I want it to populate the database with the data in subsequent steps of the form, but it fails after the initial record is posted.
What is actually happening? CREATE_LOVED_ONE_REQUEST @ 23:21:01.343 LovedOneForm.jsx:30 prev state {errors: {…}, user: {…}, careTeam: {…}, careVault: {…}, lovedOne: {…}, …}careTeam: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}careVault: {}errors: {loginMessage: '', registrationMessage: ''}lovedOne: error: nullloading: truelovedOne: age: ""city: ""country: ""first_name: ""id: ""last_name: ""main_condition: ""postal_code: ""state_province: ""street_address: ""street_address2: ""[[Prototype]]: Object[[Prototype]]: Objectmessages: {}user: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}[[Prototype]]: Object LovedOneForm.jsx:30 action {type: 'CREATE_LOVED_ONE_REQUEST', payload: {…}}payload: first_name: "Ma"last_name: "Bear"[[Prototype]]: Objecttype: "CREATE_LOVED_ONE_REQUEST"[[Prototype]]: Object LovedOneForm.jsx:30 next state {errors: {…}, user: {…}, careTeam: {…}, careVault: {…}, lovedOne: {…}, …}careTeam: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}careVault: {}errors: {loginMessage: '', registrationMessage: ''}lovedOne: error: nullloading: truelovedOne: age: ""city: ""country: ""first_name: ""id: ""last_name: ""main_condition: ""postal_code: ""state_province: ""street_address: ""street_address2: ""[[Prototype]]: Object[[Prototype]]: Objectmessages: {}user: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}[[Prototype]]: Object lovedOne.api.js:31 Request URL: /api/loved-one Data being sent: {first_name: 'Ma', last_name: 'Bear'}first_name: "Ma"last_name: "Bear"[[Prototype]]: Object LovedOne_Name.jsx:15 Ma Bear lovedOne.api.js:33 {lovedOneId: 29, first_name: 'Ma', last_name: 'Bear'}first_name: "Ma"last_name: "Bear"lovedOneId: 29[[Prototype]]: Object lovedOne.saga.js:54 API response: undefined 9611.vendors.chunk.js:1 [DEFAULT]: WARN : Using DEFAULT root logger value @ 9611.vendors.chunk.js:1 (anonymous) @ 9611.vendors.chunk.js:1 value @ 9611.vendors.chunk.js:1 value @ 9611.vendors.chunk.js:1 value @ 9611.vendors.chunk.js:1 value @ 9611.vendors.chunk.js:1 get @ 9611.vendors.chunk.js:1 value @ 9611.vendors.chunk.js:1 get _log @ 6215.vendors.chunk.js:1 26215 @ 6215.vendors.chunk.js:1 l @ Grammarly.js:2 64757 @ 7695.vendors.chunk.js:1 l @ Grammarly.js:2 93986 @ 6755.vendors.chunk.js:2 l @ Grammarly.js:2 88294 @ 6755.vendors.chunk.js:2 l @ Grammarly.js:2 33782 @ cheetah.common.chunk.js:1 l @ Grammarly.js:2 Promise.then (async) init @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 _initializeCheetahService @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 t.tryOrUnsub @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t.notifyNext @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 e._trySubscribe @ Grammarly.js:2 e.subscribe @ Grammarly.js:2 c @ Grammarly.js:2 t._innerSub @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t.notifyNext @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 e._trySubscribe @ Grammarly.js:2 e.subscribe @ Grammarly.js:2 c @ Grammarly.js:2 t._innerSub @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t.next @ Grammarly.js:2 t.next @ Grammarly.js:2 set @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 t.tryOrUnsub @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t.next @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 t.tryOrUnsub @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t.notifyNext @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 _processObservableMessage @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 t.tryOrUnsub @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t._next @ Grammarly.js:2 t.next @ Grammarly.js:2 t @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 (anonymous) @ Grammarly.js:2 fire @ Grammarly.js:2 _onBgPortMessage @ Grammarly.js:2 Show 83 more frames Show lessUnderstand this warning LovedOneForm.jsx:33 action UPDATE_LOVED_ONE_REQUEST @ 23:21:35.992 LovedOneForm.jsx:33 prev state {errors: {…}, user: {…}, careTeam: {…}, careVault: {…}, lovedOne: {…}, …}careTeam: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}careVault: {}errors: {loginMessage: '', registrationMessage: ''}lovedOne: error: nullloading: truelovedOne: age: ""city: ""country: ""first_name: ""id: ""last_name: ""main_condition: ""postal_code: ""state_province: ""street_address: ""street_address2: ""[[Prototype]]: Object[[Prototype]]: Objectmessages: {}user: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}[[Prototype]]: Object LovedOneForm.jsx:33 action {type: 'UPDATE_LOVED_ONE_REQUEST', payload: {…}}payload: data: age: "70"lovedOneId: undefinedmain_condition: "dementia\n"[[Prototype]]: Objectloved_one_id: undefined[[Prototype]]: Objecttype: "UPDATE_LOVED_ONE_REQUEST"[[Prototype]]: Object LovedOneForm.jsx:33 next state {errors: {…}, user: {…}, careTeam: {…}, careVault: {…}, lovedOne: {…}, …}careTeam: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}careVault: {}errors: {loginMessage: '', registrationMessage: ''}lovedOne: error: nullloading: truelovedOne: age: ""city: ""country: ""first_name: ""id: ""last_name: ""main_condition: ""postal_code: ""state_province: ""street_address: ""street_address2: ""[[Prototype]]: Object[[Prototype]]: Objectmessages: {}user: {id: 6, username: 'Fozzie', first_name: null, last_name: null, email: null, …}[[Prototype]]: Object LovedOne_Details.jsx:16 undefined '70' 'dementia\n' lovedOne.saga.js:29 Saga error: Error: lovedOneId must be an integer at updateLovedOneApi (lovedOne.api.js:49:11) at runCallEffect (redux-saga.js?v=208ade3b:465:21) at runEffect (redux-saga.js?v=208ade3b:942:7) at digestEffect (redux-saga.js?v=208ade3b:987:5) at next (redux-saga.js?v=208ade3b:911:9) at currCb (redux-saga.js?v=208ade3b:975:7) at runSelectEffect (redux-saga.js?v=208ade3b:637:5) at runEffect (redux-saga.js?v=208ade3b:942:7) at digestEffect (redux-saga.js?v=208ade3b:987:5) at next (redux-saga.js?v=208ade3b:911:9)
Screenshots / Code Snippets
What did you try? Who did you ask?
I've been googling, and my pod is waiting for me to ok before they look at my code to merge it. I've been working on it for 2 days.
What branch is your code on? Did you git push?
I've committed all of my changes to the branch "feature/Create-loved-one-reg-flow"
When was the last time you took a break?
I took a break to have supper, but I've been working on it the rest of the night, aside from taking time to do the dishes.