* fix: fixing broken linter script and linting
The linter script in package.json didn’t specify which files to lint, so it never linted anything. As soon as I fixed the script line, there was suddenly a ton of stuff that needed linting.
This fixes the script and cleans up all the things that needed linting. The vast majority were formatting auto-fixes in VSCode for me.
* fix: setting NODE_ENV to production in .env
Without this change, the NODE_ENV comes through as “null” (a string!) in the app. This causes a number of third party dependencies like React and Redux to potentially go into development mode, slowing them down, or to not realize they’re in production mode, causing them to throw some warnings.
* style: some additional linting
* feat: upgrading to modern paragon and a brand package
This commit updates the app from Paragon 7 to 12 and fixes the breaking changes in between. Mostly small changes to Button and Dropdown, as well as using “container” instead of “container-fluid” to preserve the page’s width as closely as possible.
It also adds the brand package, which is why it’s a feature. Using the brand package allows the MFE to be rebranded by using an npm alias to override the source of the brand.
* test: fixing test snapshots that failed when updating paragon
The test snapshots got a bit out of date when updating paragon. Also removing an unncessary “type” from Dropdown.Toggle which does nothing.
- container has been replaced by container-fluid
- The Button component is a different implementation, which adds slightly different properties to the rendered button. i.e., onKeyDown and disabled, but doesn’t add the id or onBlur.
- The Dropdown doesn’t render its contents until it’s opened, which is why “Upload Photo” and “Remove” are no longer in the snapshot.
-
* build: bumping paragon to 13
* fix: fixing broken test snapshot
btn-outline is definitely not a correct button type.
* fix: using the ‘size’ property on Button
* fix: updating dependencies
We needed to upgrade paragon to 13.1.2 to fix a transpilation issue that was causing ES6 code to be included in the build artifact. All other upgrades here were attempts at fixing that, but they’re all also perfectly valid and good to update, so I left them.
babel-polyfill has been replaced by including core-js and regenerator-runtime.
Upgrading frontend-build fixed an issue with eslint configuration that emerged during the other upgrades.
* fix: switch back to container-fluid
We want to leave it as container-fluid and solve the max width problem through paragon.
* style: cleanup and formatting of SCSS
Also removing an unnecessary variant of primary on a button.
* test: fix broken snapshot test
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.
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.
