New Summary Screen Reflect & Share (KIDS-1395)

[MaikelStuivenberg]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a new event for tracking family reflection summaries.
  • Added a SummaryScreen to display family activity results with key metrics.

• User Interface Changes

  • Updated button label from "Reflect & Share" to "Gratitude game."
  • Changed title from "Reflect and share" to "Gratitude game" on the introduction screen.

• Enhancements

  • Improved tracking of interview progress and time spent through new methods.
  • Added metrics for total questions asked and time spent to enhance user engagement analytics.

• Refactor

  • Simplified FunTile from a stateful to a stateless widget for better maintainability.
  • Made onTap callbacks optional in ActionContainer for increased flexibility.

[coderabbitai]

Walkthrough

This pull request introduces several enhancements to the application, including the addition of a new enumeration value in the AmplitudeEvents enum for tracking user interactions. It modifies user interface labels and improves the tracking of interview progress by incrementing the total questions asked and time spent. A new SummaryCubit class is added to manage summary details, alongside a SummaryDetails model to encapsulate key metrics. Additionally, a new SummaryScreen is introduced to display these metrics, enhancing user engagement and analytics capabilities.

Changes

File	Change Summary
lib/core/enums/amplitude_events.dart	Added familyReflectSummaryBackToHome to AmplitudeEvents enum.
lib/features/family/features/profiles/screens/profile_selection_screen.dart	Renamed label from "Reflect & Share" to "Graditude game".
lib/features/family/features/reflect/bloc/interview_cubit.dart	Added method to increment totalQuestionsAsked and a new method increaseTimeSpent.
lib/features/family/features/reflect/bloc/summary_cubit.dart	Introduced SummaryCubit class for managing summary state and metrics.
lib/features/family/features/reflect/domain/models/summary_details.dart	Added SummaryDetails class to encapsulate minutesPlayed and questionsAsked.
lib/features/family/features/reflect/domain/reflect_and_share_repository.dart	Added fields totalQuestionsAsked and totalTimeSpent to track metrics.
lib/features/family/features/reflect/presentation/pages/record_answer_screen.dart	Added call to cubit.increaseTimeSpent() in state update logic.
lib/features/family/features/reflect/presentation/pages/reflect_intro_screen.dart	Renamed title from "Reflect and share" to "Graditude game".
lib/features/family/features/reflect/presentation/pages/result_screen.dart	Changed navigation logic to direct to SummaryScreen instead of FamilyPages.profileSelection.
lib/features/family/features/reflect/presentation/pages/summary_screen.dart	Introduced SummaryScreen class to display summary metrics.
lib/features/family/shared/design/components/actions/fun_tile.dart	Refactored FunTile from StatefulWidget to StatelessWidget and made several properties nullable.
lib/features/family/shared/widgets/layout/action_container.dart	Changed onTap parameter to optional and updated interaction logic accordingly.

Assessment against linked issues

Objective	Addressed	Explanation
Use a rounded number to show the amount of minutes of game play (KIDS-1395)	✅
Number of questions is amount shown on the screen during game play (KIDS-1395)	✅
To get here the user selects finish reflecting button on previous screen (KIDS-1395)	❓	Unclear if the navigation logic meets this requirement.
Add amplitude tracking for minutes together and questions asked (KIDS-1395)	✅

Possibly related PRs

• Add missing tracking  #1041: Adds a new enumeration value in the AmplitudeEvents enum, related to tracking changes.
• Reflect and Share exit button (KIDS-1380) #1043: Introduces new entries to the AmplitudeEvents enum, establishing a connection through similar modifications.
• Refactor logic to start next round, show buttons (KIDS-1344) #1057: Modifies the AmplitudeEvents enum, relating to tracking events in the same context.
• Keep record answer screen awake (KIDS-1402) #1059: Involves changes to the record_answer_screen.dart file, indicating a potential connection through shared file alterations.

Suggested labels

enhancement

Poem

🐰 In the meadow where changes bloom,
A new screen shines, dispelling gloom.
With metrics tracked, our joy takes flight,
Family time, a pure delight!
So hop along, let’s celebrate,
For gratitude games await our fate! 🌼

Tip

OpenAI O1 model for chat

• We have deployed OpenAI's latest O1 model for chat.
• OpenAI claims that this model has superior reasoning capabilities than their GPT-4o model.
• Please share any feedback with us in the discussions post.

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 944756b and c4d96a3.

Files selected for processing (12)

• lib/core/enums/amplitude_events.dart (1 hunks)
• lib/features/family/features/profiles/screens/profile_selection_screen.dart (1 hunks)
• lib/features/family/features/reflect/bloc/interview_cubit.dart (2 hunks)
• lib/features/family/features/reflect/bloc/summary_cubit.dart (1 hunks)
• lib/features/family/features/reflect/domain/models/summary_details.dart (1 hunks)
• lib/features/family/features/reflect/domain/reflect_and_share_repository.dart (1 hunks)
• lib/features/family/features/reflect/presentation/pages/record_answer_screen.dart (1 hunks)
• lib/features/family/features/reflect/presentation/pages/reflect_intro_screen.dart (1 hunks)
• lib/features/family/features/reflect/presentation/pages/result_screen.dart (2 hunks)
• lib/features/family/features/reflect/presentation/pages/summary_screen.dart (1 hunks)
• lib/features/family/shared/design/components/actions/fun_tile.dart (2 hunks)
• lib/features/family/shared/widgets/layout/action_container.dart (4 hunks)

Files skipped from review due to trivial changes (1)

• lib/features/family/features/reflect/presentation/pages/reflect_intro_screen.dart

Additional comments not posted (26)

lib/features/family/features/reflect/domain/models/summary_details.dart (1)

1-6: LGTM!

The SummaryDetails class is well-structured and encapsulates the key metrics for the summary screen, which aligns with the PR objectives. The class properties are correctly typed as integers, and the constructor correctly marks the parameters as required.

lib/features/family/features/reflect/bloc/summary_cubit.dart (1)

6-25: LGTM!

The SummaryCubit class is well-structured and follows the Cubit architecture pattern. It has a clear single responsibility of managing the summary details.

The init method performs the necessary calculations to determine the total minutes played and the amount of questions asked, and emits a SummaryDetails object with the calculated values.

The class takes a ReflectAndShareRepository as a dependency, which is used to retrieve the total time spent and total questions asked. This promotes a clean separation of concerns and allows for easier testing and maintenance.

Overall, the implementation looks good and adheres to best practices.

lib/features/family/features/reflect/bloc/interview_cubit.dart (2)

65-65: LGTM!

The change correctly increments the totalQuestionsAsked property to track the total number of questions asked during the interview process.

---

105-107: Verify the usage of the increaseTimeSpent method.

The increaseTimeSpent method is correctly implemented and aligns with the objective of tracking the time spent on the interview. However, it's important to ensure that the method is called at the appropriate places to accurately track the time spent.

Please run the following script to verify the usage of the increaseTimeSpent method:

Verification successful

---

The increaseTimeSpent method is correctly implemented and used.

The verification process has confirmed that the increaseTimeSpent method is being called in an appropriate location within the record_answer_screen.dart file. It appears to be used in conjunction with a timer, which aligns with the intended purpose of tracking the interview duration. The implementation is correct and no issues were found.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify that the `increaseTimeSpent` method is being called at the appropriate places.

# Test: Search for the method usage. Expect: At least one occurrence.
rg --type dart -A 5 $'increaseTimeSpent'

Length of output: 970

lib/features/family/features/reflect/presentation/pages/summary_screen.dart (5)

1-15: LGTM!

The imports are relevant and necessary for the implementation of the SummaryScreen widget.

---

16-21: LGTM!

The SummaryScreen widget is correctly defined as a stateful widget with a corresponding state class.

---

23-30: LGTM!

• The SummaryCubit instance is correctly initialized using the getIt function from the dependency injection container.
• The didChangeDependencies method is overridden to initialize the SummaryCubit instance, which is a good practice.

---

32-91: LGTM!

• The build method correctly constructs the UI of the SummaryScreen widget using the FunScaffold, FunTopAppBar, and FunTile widgets.
• The summary details are correctly obtained from the SummaryCubit instance using the BaseStateConsumer widget.
• The "Back to home" button correctly navigates back to the FamilyPages.profileSelection screen when tapped.

---

73-85: LGTM!

The "Back to home" button is correctly implemented with the appropriate navigation and analytics tracking.

lib/features/family/shared/widgets/layout/action_container.dart (5)

9-9: LGTM!

Making the onTap parameter optional provides flexibility in using the ActionContainer widget. It allows instances to be created without providing an onTap function, which is useful in scenarios where the container doesn't need to respond to tap gestures.

---

18-18: LGTM!

Changing the type of the onTap parameter to VoidCallback? correctly reflects its optionality. This change is consistent with making the onTap parameter optional in the constructor.

---

42-45: LGTM!

The updated logic in the _isPressed getter correctly handles the case when onTap is null. By considering the container as pressed when onTap is null, along with the existing conditions of being disabled or selected, the container will behave as expected and disable interaction when no tap callback is provided.

---

59-59: LGTM!

The updated rendering logic in the build method correctly handles the nullability of onTap. By checking if onTap is null and rendering the container accordingly, the interaction is effectively disabled when no tap callback is provided. This ensures that the container behaves as expected and prevents potential null pointer exceptions.

---

64-64: LGTM!

Modifying the invocation of onTap to use a null-aware operator enhances the robustness of the code. By ensuring that onTap is only called if it is not null, potential null pointer exceptions are prevented when the callback is not provided. This change aligns with the optionality of the onTap parameter and ensures safe invocation of the callback.

lib/features/family/features/reflect/presentation/pages/result_screen.dart (2)

9-9: LGTM!

The import statement for the SummaryScreen class is correct and necessary for the changes made in this file.

---

98-99: Navigation logic change looks good!

The updated navigation logic, which transitions to the SummaryScreen using Navigator.push, aligns with the PR objectives and enhances the user experience by providing a more straightforward flow after completing the reflection process.

lib/features/family/features/reflect/presentation/pages/record_answer_screen.dart (1)

71-71: Verify the implementation of the increaseTimeSpent() method.

The change correctly tracks the time spent on the screen by incrementing it every time the state is updated and the remaining seconds are decreased. This aligns with the PR objective of integrating Amplitude tracking to capture data on the total minutes spent together.

Ensure that the increaseTimeSpent() method is correctly implemented in the cubit class to increment the time spent. Run the following script to verify the method implementation:

Verification successful

---

Implementation of increaseTimeSpent() method verified

The increaseTimeSpent() method has been correctly implemented in the lib/features/family/features/reflect/bloc/interview_cubit.dart file. The method increments the totalTimeSpent property of the _reflectAndShareRepository, which aligns with the PR objective of integrating Amplitude tracking to capture data on the total minutes spent together.

Here's the implementation:

void increaseTimeSpent() {
  _reflectAndShareRepository.totalTimeSpent++;
}

This implementation fulfills the requirement of tracking the time spent on the screen by incrementing it whenever the state changes and the remaining seconds are decreased.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the implementation of the `increaseTimeSpent()` method in the `cubit` class.

# Test: Search for the method declaration. Expect: A method that increments the time spent.
ast-grep --lang dart --pattern $'void increaseTimeSpent() {
  $$$
}'

Length of output: 69

---

Script:

#!/bin/bash
# Description: Search for implementations related to increasing time spent

# Search for methods containing "increaseTimeSpent" or similar
rg -i "def\s+.*increase.*time.*spent" --type dart

# Search for any usage of "timeSpent"
rg -i "timeSpent" --type dart

# Search for cubit classes that might contain the method
ast-grep --lang dart --pattern 'class $_ extends Cubit<$_> {
  $$$
}'

Length of output: 409782

lib/features/family/shared/design/components/actions/fun_tile.dart (6)

7-7: LGTM!

The refactoring of FunTile from a StatefulWidget to a StatelessWidget is a good change. It simplifies the structure and eliminates the need for a separate state management class, as the widget does not seem to manage any internal state.

---

13-13: LGTM!

The updates to the constructor are beneficial:

• Making the onTap callback optional provides flexibility in usage.
• Allowing titleBig, titleSmall, subtitle, iconData, and iconColor to be nullable enhances the robustness of the widget by handling cases where these properties are not provided.

Also applies to: 16-18, 22-22, 70-70, 77-79, 82-82

---

26-46: LGTM!

The introduction of the gold and blue factory constructors is a great addition. They enhance usability and readability by providing a convenient way to create FunTile instances with specific color themes. The constructors take care of setting the appropriate colors for the border, background, text, and icon based on the chosen theme, making it easier to create consistently styled tiles.

Also applies to: 48-68

---

87-87: LGTM!

The updates to the build method improve the handling of the isDisabled state:

• Setting new local variables for backgroundColor and borderColor based on the isDisabled state ensures that the appropriate colors are used when the tile is disabled.
• Adjusting the opacity of the icon based on the isDisabled state provides visual feedback to the user about the tile's interactivity.

Also applies to: 89-90, 92-96, 98-101, 105-105, 108-108, 110-110, 112-112

---

113-113: LGTM!

The updates to the icon rendering are beneficial:

• Checking for iconData being null ensures that the appropriate widget is rendered based on whether an icon is provided or not.
• Using the iconColor property to set the color of the icon allows for customization of the icon's appearance.

Also applies to: 116-118, 121-123, 126-128

---

135-135: LGTM!

The updates to the text rendering and selection state handling are great:

• Checking for nullability of titleBig, titleSmall, and subtitle ensures that the text elements are only rendered when the corresponding properties are provided. This improves the robustness of the widget by handling cases where these properties are not provided.
• Rendering a checkmark icon when the tile is selected provides visual feedback to the user about the tile's selection state, enhancing the user experience.

Also applies to: 137-137, 141-143, 148-148, 150-150, 154-156, 161-162, 164-164, 168-168, 179-179

lib/features/family/features/reflect/domain/reflect_and_share_repository.dart (1)

13-14: Consider making the new fields private.

The addition of totalQuestionsAsked and totalTimeSpent fields is a good enhancement for tracking user interactions and game sessions. However, consider making these fields private and providing getter methods if needed, to ensure they are managed internally by the class and not modified from outside.

- int totalQuestionsAsked = 0;
- int totalTimeSpent = 0;
+ int _totalQuestionsAsked = 0;
+ int _totalTimeSpent = 0;
+ 
+ int get totalQuestionsAsked => _totalQuestionsAsked;
+ int get totalTimeSpent => _totalTimeSpent;

Also, it would be helpful to understand how these fields will be utilized and incremented within the class. Could you please provide more context on this?

lib/features/family/features/profiles/screens/profile_selection_screen.dart (1)

171-171: LGTM!

The button label change from "Reflect & Share" to "Graditude game" aligns with the PR objective of implementing a new summary screen for the reflect and share loop. The analytics event remains unchanged, ensuring continued tracking of user interactions.

lib/core/enums/amplitude_events.dart (1)

320-320: LGTM!

The new enum value familyReflectSummaryBackToHome has been added correctly, following the existing naming convention and using a consistent string value. This addition expands the tracking capabilities for user interactions related to family reflection summaries and navigation back to the home interface.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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>.
  • 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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @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.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.