As a developer,
I want to be able to access the userData state in multiple components,
So that our data and displayed information stays in sync, and is easy to manipulate
Acceptance Criteria:
Currently we are defining userData and setUserData variables inside the Passport.js file to manage state. This means that their values are only available inside of Passport. This is problematic because we want to store state data in userData that will be eventually be referenced by other components, such as Palette and SaveModal.
[x] Move const [userData, setUserData] = React.useState(null); out of Passport.js and into App.js
[x] Move the getUser function out of Passport.js and into App.js
[x] Replace the function declaration with React's useEffect
[x] You'll also need to import axios
[x] Remove the "Get Logged in user" button, and the h2 below it from Passport.js
[x] Using userData, display the username anywhere you like in the JSX to test that you are successfully getting userData from App.js. ({userData && userData.username} or something like that)
Note: It can be helpful to comment out and copy the chunks of code you're moving, rather than just cutting and pasting, so you can look back on how it used to work
User Story:
Acceptance Criteria:
Currently we are defining
userDataandsetUserDatavariables inside thePassport.jsfile to manage state. This means that their values are only available inside ofPassport. This is problematic because we want to store state data inuserDatathat will be eventually be referenced by other components, such asPaletteandSaveModal.const [userData, setUserData] = React.useState(null);out ofPassport.jsand intoApp.jsgetUserfunction out ofPassport.jsand intoApp.jsuseEffectaxiosh2below it fromPassport.jsuserData, display the username anywhere you like in the JSX to test that you are successfully getting userData fromApp.js. ({userData && userData.username}or something like that)Note: It can be helpful to comment out and copy the chunks of code you're moving, rather than just cutting and pasting, so you can look back on how it used to work