Skip to content
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

feat(react-spa): New modal when user switches from child to self #16951

Closed
wants to merge 2 commits into from

Conversation

snaerseljan
Copy link
Contributor

@snaerseljan snaerseljan commented Nov 20, 2024

New BFF modal for user switch

What

New modal when user switches from child to self. This is more relevant when mínarsíður makes the bff transition.

Why

When switching from child to user the other tabs where not detecting it.
I added a new modal telling the user that new user switch had happened.

Screenshots / Gifs

image

Checklist:

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • Formatting passes locally with my changes
  • I have rebased against main before asking for a review

Summary by CodeRabbit

  • New Features
    • Introduced a new modal for new users in the same session, enhancing user experience.
    • Added a reusable warning modal for improved session management.
  • Bug Fixes
    • Updated session expired modal to streamline the login prompt presentation.
  • Refactor
    • Enhanced user session checking capabilities with new utility functions for better type safety.

@snaerseljan snaerseljan requested a review from a team as a code owner November 20, 2024 10:53
Copy link
Contributor

coderabbitai bot commented Nov 20, 2024

Walkthrough

This pull request introduces a new React functional component, BffNewUserSameSessionModal, which displays a modal for new users within the same session. It also adds a reusable component, BffProblemTemplateModal, designed for warning messages. The BffProvider component is modified to manage the visibility of the new modal based on user session checks, while the BffSessionExpiredModal is updated to utilize the BffProblemTemplateModal. Additionally, utility functions related to user session checks are enhanced for better functionality.

Changes

File Path Change Summary
libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx - New component BffNewUserSameSessionModal added.
libs/react-spa/bff/src/lib/BffProblemTemplateModal.tsx - New component BffProblemTemplateModal added.
- New type BffProblemTemplateModalProps added.
`libs/react-spa/bff/src/lib/BffProvider.tsx - Added state showNewUserScreen for modal visibility.
- Integrated BffNewUserSameSessionModal.
libs/react-spa/bff/src/lib/BffSessionExpiredModal.tsx - Updated BffSessionExpiredModal to use BffProblemTemplateModal.
`libs/react-spa/bff/src/lib/bff.utils.ts - Added function isNewUserWithSameSession.
- Updated isNewSession signature and logic.

Possibly related PRs

Suggested labels

automerge, high priority

Suggested reviewers

  • Toti91
  • eirikurn

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
warning eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
warning eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning jest > @jest/core > jest-config > [email protected]: Glob versions prior to v9 are no longer supported
warning jest > @jest/core > jest-runtime > [email protected]: Glob versions prior to v9 are no longer supported
warning jest > @jest/core > @jest/reporters > [email protected]: Glob versions prior to v9 are no longer supported
warning jest > @jest/core > @jest/transform > babel-plugin-istanbul > test-exclude > [email protected]: Glob versions prior to v9 are no longer supported
warning storybook > @storybook/cli > puppeteer-core > [email protected]: Rimraf versions prior to v4 are no longer supported
warning storybook > @storybook/cli > puppeteer-core > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning storybook > @storybook/cli > tempy > del > [email protected]: Rimraf versions prior to v4 are no longer supported
warning storybook > @storybook/cli > jscodeshift > temp > [email protected]: Rimraf versions prior to v4 are no longer supported
warning storybook > @storybook/cli > jscodeshift > temp > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning storybook > @storybook/cli > jscodeshift > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning storybook > @storybook/cli > jscodeshift > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning storybook > @storybook/cli > jscodeshift > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
error Couldn't find any versions for "@rollup/rollup-linux-arm-musleabihf" that matches "4.27.3"


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot]
coderabbitai bot previously requested changes Nov 20, 2024
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (10)
libs/react-spa/bff/src/lib/BffSessionExpiredModal.tsx (1)

16-24: Consider implementing i18n support for better reusability

While the comment explains why translations are not available, consider implementing a fallback mechanism or default language configuration to make the component more reusable across different applications.

Consider:

  1. Creating a constants file for default strings
  2. Adding a prop for optional translation overrides
  3. Implementing a simple fallback mechanism
+ type Translations = {
+   title?: string;
+   prefixText?: string;
+   actionText?: string;
+   postfixText?: string;
+ }

  type BffSessionExpiredModalProps = {
    onLogin(): void;
+   translations?: Translations;
  }
libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx (1)

1-25: Consider enhancing component configurability

Since this is a reusable library component, consider making the modal more configurable:

  1. Allow customization of action button styles
  2. Support custom content rendering
  3. Add event tracking capabilities for analytics

This would improve reusability across different NextJS applications within the system.

libs/react-spa/bff/src/lib/BffProblemTemplateModal.tsx (3)

1-2: Consider making CSS more modular

The fullScreen CSS import from ErrorScreen.css seems to be shared with an error screen component. Consider moving shared styles to a common styles file or using a more specific CSS module for this component.


4-12: Enhance type documentation for better reusability

The type definition is well-structured, but could benefit from JSDoc documentation explaining its purpose and usage patterns.

+/**
+ * Props for the BffProblemTemplateModal component
+ * @property title - The main heading of the modal
+ * @property action - Configuration for the action button and surrounding text
+ */
 export type BffProblemTemplateModalProps = {
   title: string
   action: {
     prefixText: string
     text: string
     postfixText: string
     onClick(): void
   }
 }

17-43: Consider performance and accessibility improvements

The component implementation is clean and well-structured, but could benefit from the following enhancements:

  1. Memoize the component to prevent unnecessary re-renders:
-export const BffProblemTemplateModal = ({
+export const BffProblemTemplateModal = React.memo(({
   title,
   action: { prefixText, text, postfixText, onClick },
-}: BffProblemTemplateModalProps) => (
+}: BffProblemTemplateModalProps) => {
+  const handleClick = React.useCallback(() => {
+    onClick();
+  }, [onClick]);
+
+  return (
   <Box
     display="flex"
     justifyContent="center"
     alignItems="center"
     padding={[0, 6]}
     className={fullScreen}
   >
     <ProblemTemplate
       variant="warning"
       expand
       title={title}
+      role="alertdialog"
+      aria-modal="true"
       message={
         <>
           {prefixText}{' '}
-          <Button variant="text" onClick={onClick}>
+          <Button variant="text" onClick={handleClick}>
             {text}
           </Button>{' '}
           {postfixText}
         </>
       }
     />
   </Box>
-)
+  );
+});
+
+BffProblemTemplateModal.displayName = 'BffProblemTemplateModal';
  1. Add prop-types validation for non-TypeScript consumers:
import PropTypes from 'prop-types';

BffProblemTemplateModal.propTypes = {
  title: PropTypes.string.isRequired,
  action: PropTypes.shape({
    prefixText: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    postfixText: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
  }).isRequired,
};
libs/react-spa/bff/src/lib/bff.utils.ts (3)

45-50: Consider using explicit Boolean conversion

While the double negation (!!) works, consider using a more explicit boolean conversion for better readability.

-  return !!(oldSid && newSid && oldSid !== newSid)
+  return Boolean(oldSid && newSid && oldSid !== newSid)

52-62: Consider adding null/undefined checks for profile properties

The function looks good and aligns with the PR objectives. However, consider adding null/undefined checks for the profile properties to make it more robust.

 export const isNewUserWithSameSession: UserCheckFn = (oldUser, newUser) => {
   const isSameSession = !isNewSession(oldUser, newUser)
 
   if (isSameSession) {
-    return oldUser.profile.nationalId !== newUser.profile.nationalId
+    return oldUser.profile?.nationalId != null && 
+           newUser.profile?.nationalId != null && 
+           oldUser.profile.nationalId !== newUser.profile.nationalId
   }
 
   return false
 }

40-62: Well-structured utility functions with good reusability

The implementation follows good practices for reusable utilities:

  • Pure functions that are easy to test and maintain
  • Effective TypeScript usage
  • Clear separation of concerns
  • Tree-shakeable exports
libs/react-spa/bff/src/lib/BffProvider.tsx (2)

51-58: Consider extracting event handling logic.

While the logic is correct, consider extracting the event handling into a separate function for better maintainability:

+ const handleNewSession = (userInfo: UserInfo) => {
+   if (isNewSession(state.userInfo, userInfo)) {
+     setSessionExpiredScreen(true)
+   } else if (isNewUserWithSameSession(state.userInfo, userInfo)) {
+     setNewUserScreen(true)
+   }
+ }

  const { postMessage } = useBffBroadcaster((event) => {
    if (isLoggedIn && event.data.type === BffBroadcastEvents.NEW_SESSION) {
-     if (isNewSession(state.userInfo, event.data.userInfo)) {
-       setSessionExpiredScreen(true)
-     } else if (isNewUserWithSameSession(state.userInfo, event.data.userInfo)) {
-       setNewUserScreen(true)
-     }
+     handleNewSession(event.data.userInfo)
    } else if (event.data.type === BffBroadcastEvents.LOGOUT) {

231-233: Simplify the reload handler.

The reload handler can be simplified by directly passing window.location.reload:

  <BffNewUserSameSessionModal
-   onReload={() => {
-     window.location.reload()
-   }}
+   onReload={window.location.reload}
  />
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 5832eb7 and 9a87c30.

📒 Files selected for processing (5)
  • libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx (1 hunks)
  • libs/react-spa/bff/src/lib/BffProblemTemplateModal.tsx (1 hunks)
  • libs/react-spa/bff/src/lib/BffProvider.tsx (4 hunks)
  • libs/react-spa/bff/src/lib/BffSessionExpiredModal.tsx (2 hunks)
  • libs/react-spa/bff/src/lib/bff.utils.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
libs/react-spa/bff/src/lib/BffProblemTemplateModal.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
libs/react-spa/bff/src/lib/BffProvider.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
libs/react-spa/bff/src/lib/BffSessionExpiredModal.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
libs/react-spa/bff/src/lib/bff.utils.ts (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
🔇 Additional comments (8)
libs/react-spa/bff/src/lib/BffSessionExpiredModal.tsx (1)

1-1: LGTM: Clean import statement

The import statement follows best practices for tree-shaking and bundling.

libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx (2)

1-1: LGTM! Clean import statement.

The import is specific and follows good tree-shaking practices.


13-25: LGTM! Clean component implementation with a note about i18n.

The component is well-structured and follows React best practices. The comment about translation limitations is helpful.

Consider documenting a future TODO to implement translations once user locale becomes available.

libs/react-spa/bff/src/lib/BffProblemTemplateModal.tsx (1)

17-43: LGTM! The component meets reusability requirements

The component is well-designed for reuse across NextJS apps:

  • Uses shared UI components from island-ui/core
  • Implements proper TypeScript types
  • Has a focused, single responsibility
  • Follows proper tree-shaking practices with named exports
libs/react-spa/bff/src/lib/bff.utils.ts (1)

40-41: LGTM! Well-defined TypeScript type alias

The UserCheckFn type alias improves code maintainability and type safety by providing a clear contract for user comparison functions.

libs/react-spa/bff/src/lib/BffProvider.tsx (3)

6-6: LGTM! Well-structured imports and state management.

The new imports and state management follow good practices:

  • Modular component imports support tree-shaking
  • Utility functions are properly segregated
  • TypeScript types are properly utilized

Also applies to: 12-16, 35-35


228-237: LGTM! Clean modal integration.

The render logic for the new user screen is well-structured and follows React best practices.


228-237: Verify the user experience flow.

Please ensure that:

  1. The modal appears at the right moment during user switching
  2. Users understand why they need to reload the page
  3. The reload action maintains the user's context appropriately

Copy link

codecov bot commented Nov 20, 2024

Codecov Report

Attention: Patch coverage is 16.66667% with 20 lines in your changes missing coverage. Please review.

Project coverage is 36.41%. Comparing base (369c8cc) to head (a0c38c2).
Report is 11 commits behind head on main.

Files with missing lines Patch % Lines
libs/react-spa/bff/src/lib/BffProvider.tsx 0.00% 10 Missing ⚠️
libs/react-spa/bff/src/lib/bff.utils.ts 28.57% 5 Missing ⚠️
...act-spa/bff/src/lib/BffNewUserSameSessionModal.tsx 25.00% 3 Missing ⚠️
.../react-spa/bff/src/lib/BffProblemTemplateModal.tsx 50.00% 1 Missing ⚠️
...s/react-spa/bff/src/lib/BffSessionExpiredModal.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main   #16951      +/-   ##
==========================================
- Coverage   36.41%   36.41%   -0.01%     
==========================================
  Files        6898     6900       +2     
  Lines      144874   144893      +19     
  Branches    41404    41411       +7     
==========================================
+ Hits        52755    52758       +3     
- Misses      92119    92135      +16     
Flag Coverage Δ
api 3.34% <ø> (ø)
application-system-api 41.01% <ø> (-0.01%) ⬇️
application-template-api-modules 27.73% <ø> (ø)
application-templates-accident-notification 28.98% <ø> (ø)
application-templates-car-recycling 3.12% <ø> (ø)
application-templates-driving-license 18.14% <ø> (ø)
application-templates-estate 12.16% <16.66%> (+0.01%) ⬆️
application-templates-financial-aid 15.77% <ø> (ø)
application-templates-general-petition 23.07% <ø> (ø)
application-templates-inheritance-report 6.52% <ø> (ø)
application-templates-marriage-conditions 15.04% <ø> (ø)
application-templates-mortgage-certificate 43.42% <ø> (+0.05%) ⬆️
application-templates-parental-leave 29.86% <ø> (ø)
application-ui-components 1.27% <ø> (ø)
application-ui-shell 20.58% <16.66%> (+<0.01%) ⬆️
portals-admin-regulations-admin 1.85% <ø> (ø)
portals-core 15.91% <16.66%> (+0.01%) ⬆️
shared-components 26.88% <16.66%> (-0.02%) ⬇️
shared-form-fields 31.26% <ø> (ø)
web 1.76% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
.../react-spa/bff/src/lib/BffProblemTemplateModal.tsx 50.00% <50.00%> (ø)
...s/react-spa/bff/src/lib/BffSessionExpiredModal.tsx 50.00% <0.00%> (ø)
...act-spa/bff/src/lib/BffNewUserSameSessionModal.tsx 25.00% <25.00%> (ø)
libs/react-spa/bff/src/lib/bff.utils.ts 23.80% <28.57%> (-1.20%) ⬇️
libs/react-spa/bff/src/lib/BffProvider.tsx 2.32% <0.00%> (-0.09%) ⬇️

... and 1 file with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 369c8cc...a0c38c2. Read the comment docs.

---- 🚨 Try these New Features:

@datadog-island-is
Copy link

datadog-island-is bot commented Nov 20, 2024

Datadog Report

All test runs ba82085 🔗

19 Total Test Services: 0 Failed, 18 Passed
🔻 Test Sessions change in coverage: 3 decreased, 99 no change

Test Services
This report shows up to 10 services
Service Name Failed Known Flaky New Flaky Passed Skipped Total Time Code Coverage Change Test Service View
api 0 0 0 4 0 2.86s 1 no change Link
application-system-api 0 0 0 112 2 3m 36.49s 1 no change Link
application-template-api-modules 0 0 0 116 0 2m 27.98s 1 no change Link
application-templates-accident-notification 0 0 0 148 0 19.79s 1 no change Link
application-templates-driving-license 0 0 0 13 0 15.94s 1 no change Link
application-templates-financial-aid 0 0 0 11 0 15.6s 1 no change Link
application-templates-general-petition 0 0 0 5 0 11.49s 1 no change Link
application-templates-health-insurance 0 0 0 0 0 599.34ms 1 no change Link
application-templates-mortgage-certificate 0 0 0 3 0 21.55s 1 no change Link
application-templates-parental-leave 0 0 0 163 0 20.67s 1 no change Link

🔻 Code Coverage Decreases vs Default Branch (3)

  • shared-components - jest 33.2% (-0.08%) - Details
  • portals-core - jest 23.81% (-0.03%) - Details
  • application-ui-shell - jest 26.75% (-0.02%) - Details

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)
libs/react-spa/bff/src/lib/BffProvider.tsx (2)

51-58: Consider simplifying the nested conditions.

While the logic is correct, the nested conditions could be simplified for better readability.

Consider this alternative structure:

- if (isLoggedIn && event.data.type === BffBroadcastEvents.NEW_SESSION) {
-   if (isNewSession(state.userInfo, event.data.userInfo)) {
-     setSessionExpiredScreen(true)
-   } else if (isNewUserWithSameSession(state.userInfo, event.data.userInfo)) {
-     setNewUserScreen(true)
-   }
+ if (!isLoggedIn || event.data.type !== BffBroadcastEvents.NEW_SESSION) {
+   return;
+ }
+ 
+ if (isNewSession(state.userInfo, event.data.userInfo)) {
+   setSessionExpiredScreen(true);
+   return;
+ }
+ 
+ if (isNewUserWithSameSession(state.userInfo, event.data.userInfo)) {
+   setNewUserScreen(true);
+ }

Line range hint 1-258: Well-structured provider implementation.

The BffProvider maintains good separation of concerns and follows React best practices:

  • Proper TypeScript usage throughout the component
  • Clear state management and event handling
  • Reusable design that can be shared across different NextJS apps
  • Effective error handling and loading states

Consider adding JSDoc comments for the new functionality to improve documentation.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 9a87c30 and a0c38c2.

📒 Files selected for processing (2)
  • libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx (1 hunks)
  • libs/react-spa/bff/src/lib/BffProvider.tsx (4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx
🧰 Additional context used
📓 Path-based instructions (1)
libs/react-spa/bff/src/lib/BffProvider.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
🔇 Additional comments (3)
libs/react-spa/bff/src/lib/BffProvider.tsx (3)

6-6: LGTM! Import changes follow best practices.

The imports are properly structured for effective tree-shaking and maintain type safety.

Also applies to: 12-16


35-36: LGTM! State management follows React best practices.

The new state variable is well-named and properly typed through inference.


228-231: LGTM! Render logic maintains consistency.

The new modal rendering condition follows the established pattern and maintains the component's reusability across different NextJS apps.

@snaerseljan snaerseljan added the automerge Merge this PR as soon as all checks pass label Nov 20, 2024
@snaerseljan snaerseljan removed the automerge Merge this PR as soon as all checks pass label Nov 20, 2024
}

/**
* Checks if the user is a new user with the same session
Copy link
Member

Choose a reason for hiding this comment

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

I'm concerned about this "new user with the same session" as IDS should be making new sessions.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes exactly

libs/react-spa/bff/src/lib/bff.utils.ts Show resolved Hide resolved
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.

3 participants