Add display of marks earned in the last 24 hours in addition to the total marks, and enhancements to Canvas #1318
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Suggestion of modifications: Adding a sorting option: A "Minted" and "Not Minted" option is added to the dropdown menu to allow filtering of the badges based on their status. Managing minted badges: A mintedItems array is passed as a prop, containing the keys of badges already minted by the user. The filteredItems function filters the badges to display only those that match the selected filter. Filtering logic: If the "Not Minted" option is selected, only badges that have not yet been minted (i.e., those not present in mintedItems) will be displayed. By default, all badges are shown.
1. Tracking marks over 24 hours: We introduced a state variable marks24hAgo to store the number of marks the user had 24 hours ago. This allows us to calculate how many marks were earned in the last 24 hours. The useEffect hook is used to fetch these marks when the component mounts. This could either be done through an API call or from local storage, depending on how the data is being managed in your system. 2. Calculating the difference in marks: The difference between the current total marks and the marks from 24 hours ago is calculated using the variable marksLast24h. This gives the user a clear idea of how many marks they gained in the last 24 hours. 3. Displaying the change in marks: The component now shows the total marks followed by the variation over the last 24 hours in parentheses. For example, it will display something like 3050 (+50 earned in the last 24 hours). This allows the user to quickly understand both their current total marks and how much they’ve earned recently. Backend Requirements: For this feature to work, your backend (or API) must be able to store or fetch the number of marks from the previous day. This can be implemented via an API endpoint that provides historical marks or by locally storing this data and updating it daily.
👷 Deploy request for scroll-io pending review.Visit the deploys page to approve it
|
|
@isonips is attempting to deploy a commit to the Scroll Team on Vercel. A member of the Team first needs to authorize it. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces two main changes:
1. Display of marks earned within the last 24 hours alongside the total marks.
2. Enhancements to the Scroll Canvas UI.
Problem:
The original interface only displayed the total number of scores obtained by the user, without highlighting recent progress. In addition, given the number of badges available, improvements in the search section to the Canvas presentation were necessary.
Solution:
The marks system now calculates the difference between the current total marks and those from 24 hours ago, displaying this alongside the total, allowing users to track daily progress.
Modifications were made to the Canvas to improve the user experience by refining the layout and adding clearer displays for badges and activity data with the addition of the ability to filter by badges already mined and badges not yet mined
Checklist
There are breaking changes
I've added/changed/removed ENV variable(s)
I checked whether I should update the docs and did so by updating /docs
**This PR includes:
Marks Tracking:**
Added a new state (marks24hAgo) that tracks the marks from 24 hours ago.
Implemented logic to calculate the difference between total marks and marks earned in the last 24 hours.
The frontend now displays the total marks, with the recent marks shown as (+X earned in the last 24h).
Canvas Enhancements:
Updated Scroll Canvas layout for improved display of badges and user activity.
Improvements to the user interface ensure a smoother experience and clearer presentation of activity data.
These changes improve both functionality and user experience, enabling better tracking of progress through sorting by badges already held by the user, or by badges that can be obtained by performing the necessary tasks.