This PR rewires how our forms get their data. It also folds in changes from #35 because @abutterworth and I had a pretty hefty conflict between our two branches.
This turned into a broader effort than I intended, admittedly.
The original goal was to take our form state out of component state and put it into redux state for all six forms on the profile page. This has been done, but doing so begged a bit of broader refactoring and renaming as well.
In no particular order:
1. We were referring to our forms as fields - that language has been fixed. They're forms now.
2. We were putting 'draft' form values in component state - that state has been moved up to the redux level.
3. The fetchProfile action is now responsible for making several underlying calls to the system for the profile's account information, preferences (if it's your own account), and certificates. Before, we had multiple actions responsible for each part, and coordination was hard.
4. `react-router-redux` has been replaced with `connected-react-router`. This is admittedly not something that ultimately needed to be in this PR - I _thought_ I was going to need it, but after the work was done, the need for the change fell out and it's essentially unrelated. That said, `react-router-redux` is deprecated and no longer supported, and `connected-react-router` has taken its place. I didn't see any reason to throw away the work, so here it is.
5. I updated some packages as part of number 4 above which didn't strictly need to be updated. I _thought_ I needed to update them w/r/t changing the router, but I didn't. As above, didn't see any reason to throw away the work, though.
6. Introduced `reselect` to handle derived state. This helps keep components clean.
7. Directly connected the forms to the store. This makes ProfilePage.jsx a lot cleaner.
8. The ProfilePage.jsx file still manages calling action creators to put stuff in redux - the forms are connected for their data, but are otherwise "dumb" about how the data gets back into redux. It felt weird, for instance, to have the Name.jsx component call an action creator called `saveProfile`... just seemed above its pay grade. Admittedly this is a bit asymmetrical, but it allowed ProfilePage.jsx to be a lot shorter/have less responsibility for passing data down.
Realigning and simplifying directories and naming.
- Combining “containers” into “components”.
- Flattening out “data” into “reducers” and “config” to consolidate configuration-like files in one place and to make reducers a peer of its teammates (components, actions, sagas, and services).
- Creating dev/prod-specific redux configurations.
- Converting “index.jsx” files into files named for their contents.
- Splitting up the top-level “index.jsx” file into an entry point and an “App” component.
- Renaming SCSS file to “index.scss” to keep it consistent with where it’s imported.
- Renaming/simplifying some variables.
Since we've added the ability for transition replace to have no content, we can't guarantee an onChildExited event will fire resetting the hieght to null
If a field isn’t present in another users profile (they either haven’t set it, or it’s not publicly visible), then hide it. If the field is present, then show it in a static way.
This PR has a refactoring of our actions/sagas/services. Rather than continue to put profile-related API actions into the frontend-auth project, we decided (against prior decision) to put them in this app, as that feels more correct, long term. This also let us unroll the service creation and decouple the services from the components.
The “fetchProfile” API is hitting the same ‘accounts’ API as fetchUserAccount from frontend-auth. This is an intentional abstraction for clarity of purpose and assuming they may diverge. It also lets us group all the profile app’s API methods together, letting the ‘session’ API stay in frontend-auth.
We also decided to do some renaming:
- “user profile” -> “profile” cause there’s no other type of profile here.
- The saga handlers are prefixed with “handle”
- The API methods use proper HTTP verbs.
- The actions keep fetch and save as verbs as they’re clearer in components than “get” and “patch”
- The goal here is to differentiate different parts of the code, making it easier to remember where you are.
* Add saving of profile photo
* Add removal of profile photo
Needs work on knowing when a default photo has been supplied.
* Add action creator tests
* Fix some reference issues after merge
* Fix broken test
use reactstrap
Add banner and header atoms
pull all user data out of JSX
Transform component to class
Add stub for editable content
Add height animation to editable content
progress with editing
Break out components to individual files. Make most editable.
Add ability to change tag of EditableContent
Add avatar
fix some prop type issues
Add an async button
Small update to avatar
Add height animation to editable content
pull edited data up to useraccount component callback
Updating oneOf prop type to provide arrays.
Fixing missing key attributes on repeated tags.
use reactstrap
Add state wrapper container to UserAccount component.
Move crossfade transition of in-context editable elements to a discrete component
Some reusable components.
Form row related stuff and an Alert box. All backed by reactstrap.
Add passthroughs for button save states
Pointing edx-bootstrap at 2.0 branch
Also adding font-awesome icons via the preferred method, and updating port to 1995.
Fixing font-awesome icons and getting bootstrap imported correctly.
Update edx bootstrap
There was a problem with a missing org prefix
Move headings to a common component. Add full name
fix missing key and conflict of value and defalutValue props
Remove extraneous div in TransitionReplace
Fix some wonkiness with the education component
Add classname prop to TransitionReplace
Add some more consistent margins
Update to layout for some editable content
Update markup to remove repeat renders
Add empty state for bio
Refactoring profile form state out of the user account “fetch” state from frontend-auth
Using redux-saga to manage action side-effects (async calls, secondary actions, and delays). redux-saga is a very flexible alternate side-effect model for redux (as opposed to redux-thunk). Used it to good effect in the past, and it helps separate concerns between action creators and side effect management. It also helps decouple react components from async actions by having redux-saga register as an observer of the redux action stream.
Add empty states for all fields except social links and my certificates
Close fields after save
Remove the delay after successfully saving
Update banner image. Update edit controls layout
Updated edx bootstrap to have focus ring on btn-link buttons
Add event handler props to TransitionReplace. Handle focus when edit fields are swapped in and out
Update empty content icon and width
Hide visibility if a field has no value
Add delays back in
Large reworking of components here. Social links still has a bug. Only twitter will save.
Renaming profileActions -> profile and tweaking editable state stuff.
Adding tests for profile actions - pulled over from frontend-auth.
Removing profile API helpers, fixing a few bugs in saving the user profile.
Make Social Links a full on component again. Can only save one field at a time.
Remove an old version of edx-bootstrap
Renaming UserAccount components to UserProfile.
