Skip to content

Fix initial value of user in WebComponentLoader #1021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 28, 2024

Conversation

floehopper
Copy link
Contributor

@floehopper floehopper commented May 28, 2024

Previously, even if the authKey property was provided and a logged-in user was stored in localStorage, on first render the value of user was null. This was because the localStorageUserMiddleware which dispatches setUser to store the user in Redux had not yet been triggered.

This meant that previously if we tried to use the web component to view a project that the logged-in user owned, the request to editor-api to load the project would respond with a 403 Forbidden and the project would not load.

I'm fairly (but not completely) sure that the assertions in the "with user set in local storage" group of examples in
src/containers/WebComponentLoader.test.js were incorrect, i.e. if the authKey is set and a user is present in localStorage we ought to load the project based on the fact the user is logged in. I have fixed these assertions.

The null value of the user property in the call to useProjectPersistence in the "When no user is in state with no user in local storage" group of examples in src/containers/WebComponentLoader.test.js is due to the return value for localStorage.getItem(authKey) and not the fallback in the new ternary expression in WebComponentLoader. I think this is fine.

I'm not sure whether my fix is definitely correct/idiomatic - maybe I should be using a useState hook for the localStorageUser in combination with a useEffect hook...?

Also stepping back a bit, it's not entirely clear to me that dispatching setUser in localStorageUserMiddleware is definitely the most sensible place to do that.

@floehopper floehopper force-pushed the fix-user-in-web-component-loader branch from c9c3e91 to afad6b9 Compare May 28, 2024 08:06
@floehopper floehopper temporarily deployed to previews/fix-user-in-web-component-loader May 28, 2024 08:06 — with GitHub Actions Inactive
@floehopper floehopper force-pushed the fix-user-in-web-component-loader branch from afad6b9 to 6c5fc18 Compare May 28, 2024 08:31
@floehopper floehopper temporarily deployed to previews/fix-user-in-web-component-loader May 28, 2024 08:31 — with GitHub Actions Inactive
Since we're viewing the web component page in this spec, I think it's
clearer to talk about viewing the project rather than visiting the
project's URL which only really makes sense in e.g. editor-standalone.
I'm planning to add checks when viewing the remixed project. This will
make that easier.
Previously, even if the `authKey` property was provided and a logged-in
user was stored in `localStorage`, on first render the value of `user`
was `null`. This was because the `localStorageUserMiddleware` which
dispatches `setUser` to store the user in Redux had not yet been
triggered.

This meant that previouly if we tried to use the web component to view a project
that the logged-in user owned, the request to editor-api to load the
project would respond with a 403 Forbidden and the project would not
load.

I'm fairly (but not completely) sure that the assertions in the "with
user set in local storage" group of examples in
`src/containers/WebComponentLoader.test.js` were incorrect, i.e. if the
`authKey` is set and a `user` is present in `localStorage` we ought to
load the project based on the fact the user is logged in. I have fixed
these assertions.

The `null` value of the `user` property in the call to
`useProjectPersistence` in the "When no user is in state with no user in
local storage" group of examples in
`src/containers/WebComponentLoader.test.js` is due to the return value
for `localStorage.getItem(authKey)` and not the fallback in the new
ternary expression in `WebComponentLoader`. I think this is fine.

I'm not sure whether my fix is definitely correct/idiomatic - maybe I
should be using a `useState` hook for the `localStorageUser` in
combination with a `useEffect` hook...?

Also stepping back a bit, it's not entirely clear to me that dispatching
`setUser` [1] in `localStorageUserMiddleware` is definitely the most
sensible place to do that.

[1]: https://github.com/RaspberryPiFoundation/editor-ui/blob/92b45d59d8187b26538c03af825bb34313b7e344/src/redux/middlewares/localStorageUserMiddleware.js#L11
Copy link

Copy link

Copy link
Contributor

@danhalson danhalson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks great..I do agree about dispatching setUser in middleware, but I'm not sure we need to address that now?

@floehopper floehopper merged commit 373b716 into main May 28, 2024
8 checks passed
@floehopper floehopper deleted the fix-user-in-web-component-loader branch May 28, 2024 10:45
@floehopper floehopper mentioned this pull request Jun 3, 2024
floehopper added a commit that referenced this pull request Jun 4, 2024
### Added

- Add `project_name_editable` attribute to web component (#1009)
- Fires custom event when the theme changes (#1015)
- Add `output_only` attribute to web component (#1019 & originally #782)
- Add `assets_identifier` attribute to web component (#1019 & originally
#901)
- Enhance `code` attribute on web component to override project main
component content (#1019 & originally #901)
- Add `runCode`, `stopCode` & `rerunCode` methods to web component
(#1019 & originally #899)
- Send error details in "editor-runCompleted" event (#1019 & originally
#915)
- Return error details to web component (#1019 & originally #915)
- Add `output_panels` attribute to web component (#1019 & originally
#909)

### Changed

- Remove unused `/embedded/projects/:identifier` route (#1013)

### Fixed

- Remove unused `REACT_APP_LOGIN_ENABLED` env var (#1006)
- Fix infinite remix loop when `BYPASS_AUTH` set in `editor-api` (#1007)
- Fixes for docker-compose.yml (#1008)
- Fix deprecation warnings in GitHub Actions (#1011)
- Removed unused `isEmbedded` param from `useProject` call in
`EmbeddedViewer` (#1016)
- Improvements to Cypress specs in CI (#1017)
- Fix warnings and verbose output when starting Webpack Dev Server
(#1018)
- Add e2e spec for project remix behaviour in web component (#1020)
- Fix initial value of `user` in `WebComponentLoader` (#1021)
- Make `authKey` in e2e web component spec more realistic (#1022)
- Remove unused `ComponentStore` (#1023)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants