Words Review Redesign #392

tfnribeiro · 2024-05-30T13:59:11Z

This has become quite a large change, but I will try to summarize the changes included.

This requires API changes: zeeguu/api#156

Main features:

Users can now edit the words directly when they are in the review page when 10 or more words have been translated. This is done by toggling an edit mode where users can add or review words.
Paired with the previous feature, Zeeguu now prioritizes the top 10 most common words that the user translated to study in exercises. This is to limit the effect of a very long/difficult text where a user might reach the limit of 50 words.
Zeeguu no longer allows words composed of 3 words or more to be used in exercises. These long words become very difficult in certain exercises, or too obvious in others (Match or Multiple Choice).
The Star and Trash can have been removed throughout the app, to improve visual clarity.
The Star feature has now been replaced by a user_preference field which overrides, either positively or negatively the fit_for_study status.
The trash (deletion of the bookmark) is now part of the edit screen, consolidating all the edit options within a single screen.
The user can also use the edit screen to add a word to their exercises. This is done via a checkmark, and they can toggle it to either add/remove.
Added API endpoints that allow to override the backends fit_for_study when we want to limit the schedule to simply 10 words per article.
Added API endpoints to control the user_preference
Introduced a new InfoBox with an Icon to make it visually attractive and rounded the edges of all the info boxes to match the edges used in icons.
General refactorings

Screencaps:

Review Word Screen

Desktop	Mobile

Review Word Screen (Editing)

Desktop	Mobile

Review Word Screen - InfoBox after user Edits

Review Word Screen - InfoBox if no words for exercises

New Edit Word Screen

Desktop	Mobile

+ Select words for the user to study based on their frequency counts in the learning language. This will help avoid situations where the user translates a lot of words in a single article and these would take up the entire pipeline. + Allow more user control by allowing them to edit words.

+ As words get deleted they need to notify their parent that the element shouldn't be rendered, otherwise there is a small space leftover. + Added a modal with an explanation to how words are selected.

+ Include Word in Exercises is now an editable field + Slight change to the delete button.

Considerations to prioritize words: 1. The user is reading an article and leaves without clicking on the review words -> We need to prioritize them when the component is unmounted. 2. The user goes to the review screen -> Do not perform it when the component is unmounted and only do it in the review screen. (Avoid the delay between API calls).

- Added explanation that the App remembers user altered words to prioritize studying.

+ Less emphasis on the delete button

+ Added constant for Max exercises per article.

Whenever a user selects a word to study, use the star functionality to remember that the user wants to study that word. This is done both in the Add/Minus and the Edit Form operations

Styling changes for Checkbox

Since the user may added bookmarks, update the number based on the wordsForExercises.

Added a title to word history

Remove console logging.

- Added a userPreference endpoint which will update the status with the user preferences. - Moved the prioritize bookmarks to the API, as it is updating the status of the bookmarks in the backend

- Added enum to read the inputs from user preferences

- Fixing the toggle switching if the InfoBox changes during edits.

netlify · 2024-05-30T13:59:25Z

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
🔨 Latest commit	`ec3dd5a`
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/66632c141de9db000847ed37
😎 Deploy Preview	https://deploy-preview-392--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

tfnribeiro · 2024-05-31T10:58:10Z

One thing I thought about, which is worth considering: If the user edits words during review, should we reschedule words when they come back?

Example (This is from the DEV environment, so no translations):

Initial Screen:

I remove 5 words:

I reload the page:

We can see that the words that weren't selected and not altered by the user are re-added for the user to study. Is this a behaviour we want? Or if the user has edited any of the words, we "freeze" that state and don't change it unless the user edits them?

mircealungu · 2024-05-31T11:05:55Z

One thing I thought about, which is worth considering: If the user edits words during review, should we reschedule words when they come back?

Example (This is from the DEV environment, so no translations):

Initial Screen:

I remove 5 words:

I reload the page:

We can see that the words that weren't selected and not altered by the user are re-added for the user to study. Is this a behaviour we want? Or if the user has edited any of the words, we "freeze" that state and don't change it unless the user edits them?

This is much more complicated than I've ever imagined :)

solutions

we expect them to not reload the page; if they reload it's their problem
we track their preference at the end of editing phase with some state representing "user-approved pre-pipeline bookmarks for article"?!
we track their indiference wrt. some words, i.e. add another state to each bookmark that says: "ignored in the past"...

I am tempted to let 1 happen. Let's see how people use this feature first before investing more in it.

tfnribeiro · 2024-05-31T11:21:09Z

@mircealungu But it's not that hard to implement the behavior of nothing changing. Here's how I did it:

This ensures if there is any bookmarks with user preference, then it's safe to assume the user has altered the original list - and that should cover most cases. This seeks to avoid the fact that I reduced the list to... say 2 words, and then I come back and have 10 again?

mircealungu

some discussion starters for you Tiago!

mircealungu · 2024-05-31T10:58:39Z

src/api/userWords.js

@@ -1,4 +1,6 @@
 import { Zeeguu_API } from "./classDef";
+import { MAX_BOOKMARKS_PER_ARTICLE } from "../exercises/ExerciseConstants";


max_bookmarks_to_study_from_article ?

mircealungu · 2024-05-31T11:17:29Z

src/components/ColumnWidth.sc.js

+const ContentOnRowModal = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;


the only difference here is a narrower margin. Could we take that as a parameter? I've never done that for styled components, but see no reason why this would not be possible.

Alternatively, if we want a narrower margin, this needs not be only in the modal, so maybe rename to something like CoRNarrowMargin?

Actually, this is not needed anymore as it was part of styling for the Modal solution.

We can pass a parameter, but I think it would have to be overriden over style, not sure you can pass a value into a constant. Maybe you can make a function that return a styled.div?

mircealungu · 2024-06-06T13:15:46Z

src/exercises/ExerciseConstants.js

@@ -1,2 +1,4 @@
 export const MAX_EXERCISE_TO_DO_NOTIFICATION = 99;
 export const MAX_EXERCISE_IN_LEARNING_BOOKMARKS = 50;
+export const MAX_BOOKMARKS_PER_ARTICLE = 10;


MAX_BOOKMARKS_TO_STUDY_PER_ARTICLE ?

src/words/EditButton.js

mircealungu · 2024-06-06T15:10:27Z

src/words/WordsToReview.js

+    let newWordsExcludedExercises = [];
+    let newWordExpressions = [];
+    // Keep track how many words Zeeguu selected
+    let newTotalWordsSelectedByZeeguu = 0;


newTotalWordsSelectedByZeeguu... Can the Zeeguu selected word list change?

This was the discussion we had, after we make different preferences the number can decrease or increase.

mircealungu · 2024-06-06T15:15:47Z

src/words/WordsToReviewModal.js

@@ -0,0 +1,195 @@
+import Word from "./Word";


maybe take this one out.

mircealungu · 2024-06-07T07:25:28Z

src/words/WordsToReview.js

+    useState(false);
+
+  useEffect(() => {
+    let newWordsForExercises = [];


I still think I would prefer if the local temporary variables would be named with _ in front of them instead of new. I'd be happy to join the search party (search-and-replace party) for all of them around the codebase :)

I think if you believe it will make more sense in the long run we can do that, we should do it - but maybe let's take this as it is and then do a replace that's just renaming?

mircealungu · 2024-06-07T07:26:28Z

src/words/WordsToReview.js

+    );
+
+  const isNoWordsSelected = wordsForExercises.length === 0;
+  const isZeeguuSelectWords =


i know it's a predicate, but sounds bad in English. can we rename to hasZeeguuSelectedWords maybe?

mircealungu · 2024-06-07T07:26:35Z

src/words/WordsToReview.js

+    totalWordsTranslated > MAX_BOOKMARKS_PER_ARTICLE &&
+    totalWordsEditedByUser === 0 &&
+    wordsForExercises.length > 0;
+  const isUserEditedWords =


tfnribeiro added 29 commits May 16, 2024 09:17

Notify Word Deletes + Modal Implementation

666808c

+ As words get deleted they need to notify their parent that the element shouldn't be rendered, otherwise there is a small space leftover. + Added a modal with an explanation to how words are selected.

Re-design Edit Form

a422f81

+ Include Word in Exercises is now an editable field + Slight change to the delete button.

Update ExplainBookmarkSelectionModal.js

fbe7d2e

- Added explanation that the App remembers user altered words to prioritize studying.

Rounded Edges on top message

8adc68e

Update FeedbackButtons.sc.js

80cc051

+ Less emphasis on the delete button

Update ExerciseConstants.js

7f049dc

+ Added constant for Max exercises per article.

Star to Remember

d67a0c5

Whenever a user selects a word to study, use the star functionality to remember that the user wants to study that word. This is done both in the Add/Minus and the Edit Form operations

Update WordEdit.sc.js

e0d2a6d

Styling changes for Checkbox

Update WordsToReview.js

20dffdb

Since the user may added bookmarks, update the number based on the wordsForExercises.

Update WordHistory.js

d6a074b

Added a title to word history

Update WordHistory.js

b8123ad

Remove console logging.

Merge branch 'master' into word-review-redesign

8682bff

Fixed typo in variable name

aabf687

Updated name of components to be more meaningful

fedae57

Updated the method names on Update

573c20d

Update API Endpoints

0381525

- Added a userPreference endpoint which will update the status with the user preferences. - Moved the prioritize bookmarks to the API, as it is updating the status of the bookmarks in the backend

Updated info messages

a663250

Delete PrioritizeBookmarksToStudy.js

e973a66

Updated calls to api and InfoBoxes

fedf065

Create userBookmarkPreferences.js

1f26415

- Added enum to read the inputs from user preferences

Aligned the behaviour of star with user preference

f32eb27

Refactoring

ab0989a

- Fixing the toggle switching if the InfoBox changes during edits.

Handle star logic in backend

e9f5ef1

Refactoring to save API calls

12853e7

Remove hardcoded value

7b78d46

Solo Review Refactoring

d2b5944

Fixes + Conditional Rendering

7ef58f8

tfnribeiro mentioned this pull request May 30, 2024

Updates to support user word preferences zeeguu/api#156

Merged

tfnribeiro and others added 2 commits May 31, 2024 08:13

Remove unnecessary logging

ed05b5d

updated api endpoint name

403e928

tfnribeiro added 2 commits May 31, 2024 13:27

We do not sync the star behaviour to user_preference

4ba62a8

Merge branch 'master' into word-review-redesign

6f050e8

tfnribeiro linked an issue Jun 3, 2024 that may be closed by this pull request

More aggressively filter out words that get scheduled for practice #369

Closed

tfnribeiro added 4 commits June 6, 2024 16:02

Update userWords.js

a71751a

Merge branch 'master' into word-review-redesign

b2008b1

Remove unnecessary call

b99e68e

Setter needs to be called as that sets the bookmarks for the component

c9276fd

mircealungu self-requested a review June 7, 2024 07:26

mircealungu requested changes Jun 7, 2024

View reviewed changes

tfnribeiro and others added 6 commits June 7, 2024 10:08

Changed based on review

37bfd95

Removed unnecessary constant

c1a2d09

Updated constant to user_activity_data

ec3c158

syntax coloring

9c04278

few renames

1d43fa9

simplified grayed-out condition

ec3dd5a

mircealungu approved these changes Jun 10, 2024

View reviewed changes

mircealungu merged commit aa8d9b9 into master Jun 10, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Words Review Redesign #392

Words Review Redesign #392

tfnribeiro commented May 30, 2024 •

edited

Loading

netlify bot commented May 30, 2024 •

edited

Loading

tfnribeiro commented May 31, 2024 •

edited

Loading

mircealungu commented May 31, 2024

Initial Screen:

I remove 5 words:

I reload the page:

tfnribeiro commented May 31, 2024

mircealungu left a comment

mircealungu May 31, 2024

tfnribeiro Jun 7, 2024

mircealungu May 31, 2024

tfnribeiro Jun 7, 2024

mircealungu Jun 6, 2024

mircealungu Jun 6, 2024

tfnribeiro Jun 7, 2024 •

edited

Loading

mircealungu Jun 6, 2024

mircealungu Jun 7, 2024

tfnribeiro Jun 7, 2024

mircealungu Jun 7, 2024

mircealungu Jun 7, 2024

		@@ -1,4 +1,6 @@
		import { Zeeguu_API } from "./classDef";
		import { MAX_BOOKMARKS_PER_ARTICLE } from "../exercises/ExerciseConstants";

Words Review Redesign #392

Words Review Redesign #392

Conversation

tfnribeiro commented May 30, 2024 • edited Loading

Main features:

Screencaps:

Review Word Screen

Review Word Screen (Editing)

Review Word Screen - InfoBox after user Edits

Review Word Screen - InfoBox if no words for exercises

New Edit Word Screen

netlify bot commented May 30, 2024 • edited Loading

✅ Deploy Preview for voluble-nougat-015dd1 ready!

tfnribeiro commented May 31, 2024 • edited Loading

Initial Screen:

I remove 5 words:

I reload the page:

mircealungu commented May 31, 2024

Initial Screen:

I remove 5 words:

I reload the page:

tfnribeiro commented May 31, 2024

mircealungu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tfnribeiro Jun 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tfnribeiro commented May 30, 2024 •

edited

Loading

netlify bot commented May 30, 2024 •

edited

Loading

tfnribeiro commented May 31, 2024 •

edited

Loading

tfnribeiro Jun 7, 2024 •

edited

Loading