Add filter to homepage #37

gaoxk · 2021-06-24T03:35:23Z

Notion ticket link

add filter

Implementation description

added approved_languages to user context
added filter component
hooked up state + user context in Homepage with Filter

note:

renamed story folder to homepage
the home page will break for users with no approved languages set

Steps to test

Insert a user with approved languages '{"HINDI":3, "FRENCH":2, "BENGALI":4}'. make a second user, but log in as the first user.
insert some NGO friendly stories

INSERT INTO stories (title, description, youtube_link, level, translated_languages) VALUES ('Goodnight, Tinku!', 'Tinku, a little pup at Mangu\'s farm is not sleepy at all. He decides to step out into the night and meets many interesting animals.', 'https://www.youtube.com/watch?v=evHY-2oSokY', 2, '{"HINDI", "FRENCH"}');
INSERT INTO stories (title, description, youtube_link, level, translated_languages) VALUES ('The Flying Elephant', 'Find out how a flying elephant changes the life of a poor farmer.', 'https://www.youtube.com/watch?v=hh_4Axs3ZVQ', 4, '{"BENGALI"}');
INSERT INTO stories (title, description, youtube_link, level, translated_languages) VALUES ('The Lion and the Fox', 'The smart lion thinks he can use the fox to bring him food every day. But the fox is smarter.', 'https://www.youtube.com/watch?v=pFDXCXVvtRo', 3, '{"BENGALI"}');
INSERT INTO stories (title, description, youtube_link, level, translated_languages) VALUES ('A Book for Puchku', 'Puchku has run out of books to read. Then she discovers more books in the top shelf of the library bookcase. But Puchku is small, and the bookcase tall. How will she ever get to her beloved books?', 'https://www.youtube.com/watch?v=PKxMjO4HPvE', 3, '{}');

Insert the translations

INSERT INTO story_translations (story_id, language, stage, translator_id) VALUES (1, 'HINDI', 'TRANSLATE', 1);
INSERT INTO story_translations (story_id, language, stage, translator_id) VALUES (1, 'FRENCH', 'TRANSLATE', 1);
INSERT INTO story_translations (story_id, language, stage, translator_id) VALUES (1, 'BENGALI', 'TRANSLATE', 2);
INSERT INTO story_translations (story_id, language, stage, translator_id) VALUES (2, 'BENGALI', 'TRANSLATE', 1);
INSERT INTO story_translations (story_id, language, stage, translator_id) VALUES (3, 'BENGALI', 'TRANSLATE', 1);
INSERT INTO story_translations (story_id, language, stage, translator_id) VALUES (3, 'HINDI', 'TRANSLATE', 2);

TODO: grey out filter on viewing my work

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
For backend changes, I have run the appropriate linters: docker exec -it <backend-container-id> /bin/bash -c "black . && isort --profile black ."

jennchenn

the filter seems to be working properly! just a couple of questions about some things

jennchenn · 2021-06-26T16:23:12Z

frontend/src/components/homepage/Filter.css

+    flex-direction: column;
+    height: 500px;
+    justify-content: space-between;
+    min-width: 350px;


did we want the css properties to be alphabetized?

jennchenn · 2021-06-26T16:25:58Z

frontend/src/components/homepage/StoryCard.tsx

+    if (displayMyStories) {
+      return storyTranslationId ? "review book" : "translate book";
+    }
+    return "view translation";


if the user presses a button with view translation should that also try to assign them as either a reviewer/translator?

Hmm. I think some of our existing logic is flawed here.
If the user is browsing stories/translations, the call-to-action-button (primary button) should assign them as translator/reviewer.
If the user is looking at story translations they are already translators/reviewers of, the call-to-action-button (primary button) should open the translation platform.

logic is now changed to reflect this.

when we toggle for role "For translation", should only the "translate book" button show up? or can the "review book" button show up as well?
right now when i'm toggled to For Translation i see only the review book button, but when i toggle to For Review i see nothing (could also be my test data so i'll keep testing but wanted to clarify)

jennchenn · 2021-06-26T16:36:40Z

frontend/src/components/homepage/Filter.tsx

+          onToggle={setRole}
+        />
+      </div>
+      <div id="filter-level">


my level slider doesn't seem to align properly with the levels--is this an issue with my laptop?

also quick q i think i'm having some trouble navigating the figma hahah is there an updated wireframe where the levels are a slider instead of pill buttons?

Made a change, hows it look now?

slider doesnt have a figma design right now - Russel and I discussed using sliders over buttons on slack. Currently the slider's styling is default html/css.

still doesn't seem to match up properly for me

i'm not sure if my laptop's aspect ratio is just weird though?

jennchenn · 2021-06-26T16:37:38Z

frontend/src/components/homepage/StoryCard.tsx

@@ -134,16 +144,16 @@ const StoryCard = ({
          <p className="story-card-title">{title}</p>
          <div className="story-card-tags">
            {/* TODO: make tags that reflect actual state */}
-            <Tag displayText={`level ${level}`} />
-            <Tag displayText="language needed" />
+            <Tag displayText={`Level ${level}`} />


did design have any preference for capitalization?

Good question. Will double-check with them.

e-wai

Some visual questions

The width is awkward on my laptop, so it probably looks awkward for others as well
Can we change "Filter Stories" so it looks more like a title? The categories are caps and the title is lowercase, with very similar sizes. I almost expect there to be another filter setting underneath Filter stories
Role toggle button looks weird. Probably some CSS fun to sort out

One more thought - what components within the HomePage directory are re-usable? Looking at the parts there, I don't think the primary/secondary buttons are necessarily homepage-specific. Along with the toggle button, they might deserve their own components folder

e-wai · 2021-06-25T23:25:15Z

frontend/src/components/homepage/Filter.tsx

+    <div className="filter">
+      <h1>Filter Stories</h1>
+      <div>
+        <h4>TRANSLATION LANGUAGE</h4>


Could we establish some standards around what font sizes/styles correspond to h1 and h4?

👍 absolutely. ticket made. https://www.notion.so/uwblueprintexecs/a658c933d18c48d4b43fd99bda2bd3b4?v=4a47edc475b34bb99b25ff1fae2a5507&p=1beecab7249049eb83db5477279d2afb

e-wai · 2021-06-25T23:30:18Z

frontend/src/components/homepage/Filter.tsx

+  role,
+  setRole,
+}: FilterProps) => {
+  // language state in Homepage can't default to user context value


Why can't homepage handle the default logic?

🤔 i think i was hallucinating or something. Works now, logic moved to homepage

e-wai · 2021-06-26T17:24:44Z

frontend/src/components/homepage/Filter.tsx

+}: FilterProps) => {
+  // language state in Homepage can't default to user context value
+  // set the default language from user approvedLanguages here
+  if (!Object.keys(approvedLanguages).includes(language)) {


Does !(language in approvedLanguages) not work?

(code is outdated now) but yee that works too!

e-wai · 2021-06-26T17:31:04Z

frontend/src/components/homepage/StoryCard.tsx

@@ -58,6 +59,7 @@ const StoryCard = ({
  youtubeLink,
  level,
  language,
+  displayMyStories,


nitpick: is there another name that we could use? displayMyStories feels like a homepage-level logic concept, that seems distinct from what the storyCard component should know

maybe isAssignedToUser, storyInProgress?

What do you think of isMyStory?

Yep, don't mind that at all

e-wai · 2021-06-26T17:31:49Z

frontend/src/components/pages/HomePage.tsx

    level: number,
    userId: number,
  ): QueryInformation => {
    let result = {};

-    if (role === Role.Translator && !displayMyStories) {
+    if (isTranslator && !displayMyStories) {


ooh nice this is so much prettier, thank you!!

gaoxk · 2021-06-26T20:26:54Z

@e-wai reverted toggle button css changes, lmk how it looks.

Regarding reusability - yeah, a ton of homepage files are reusable. In a separate PR I want to split off a lot of stuff into a utils/ folder. This will also be necessary for design-system-y-stuff (eg consistent Titles and Subtitles)

Regarding Filter title: I'll keep it as it is for now as its inline with figma designs, but this is good feedback for design that we can discuss at Sundays meeting.

jennchenn · 2021-06-27T01:04:30Z

frontend/src/components/homepage/Filter.tsx

+      </div>
+      <div>
+        <h4>ROLE</h4>
+        <ToggleButton


not sure if this is relevant to the comment Emma made about the css for the Role button but when i view the site on my laptop instead of monitor i see this (could also just be my laptop being weird sorry):

LOL mine's also not having it, but in a different way

e-wai · 2021-06-27T02:09:47Z

Also comment for general interest - the escape character for apostrophe was double single quote for me ('') not the slash (\')

INSERT INTO stories (title, description, youtube_link, level, translated_languages) VALUES ('Goodnight, Tinku!', 'Tinku, a little pup at Mangu''s farm is not sleepy at all. He decides to step out into the night and meets many interesting animals.', 'https://www.youtube.com/watch?v=evHY-2oSokY', 2, '{"HINDI", "FRENCH"}');

e-wai · 2021-06-27T02:12:51Z

Maybe it's worth putting homepage CSS troubleshooting into its own ticket? With stories, my right top corner looks like attached image. Have to scroll sideways to see it though

gaoxk · 2021-06-27T23:06:16Z

Toggle & header/story card css alignment issues should be good now.

e-wai

Toggle button all nice and pretty now! @gaoxk created an issue for CSS troubleshooting homepage 🚀

Everything else looks good to me 🎉

role + displayMyStory + button text combo was incorrect. button text logic was backwards.

jennchenn

looks good!

Add filter to homepage

88f79a5

gaoxk force-pushed the homepage/filter branch from 6554856 to 88f79a5 Compare June 25, 2021 02:05

gaoxk requested review from e-wai, lynn-kim and ArmanyaDalmia June 25, 2021 04:08

jennchenn reviewed Jun 26, 2021

View reviewed changes

e-wai reviewed Jun 26, 2021

View reviewed changes

fixup! Add filter to homepage

d138d32

jennchenn reviewed Jun 27, 2021

View reviewed changes

affix min width on toggle button & story display

881805b

e-wai approved these changes Jun 27, 2021

View reviewed changes

fix: correct button text logic

a0ee997

role + displayMyStory + button text combo was incorrect. button text logic was backwards.

jennchenn approved these changes Jun 28, 2021

View reviewed changes

gaoxk merged commit 930e1f9 into main Jun 28, 2021

gaoxk mentioned this pull request Aug 1, 2021

Implemented Undo/Redo Functionality #55

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add filter to homepage #37

Add filter to homepage #37

gaoxk commented Jun 24, 2021 •

edited

Loading

jennchenn left a comment

jennchenn Jun 26, 2021

jennchenn Jun 26, 2021

gaoxk Jun 26, 2021

jennchenn Jun 27, 2021

jennchenn Jun 26, 2021

gaoxk Jun 26, 2021

jennchenn Jun 27, 2021

jennchenn Jun 26, 2021

gaoxk Jun 26, 2021

e-wai left a comment •

edited

Loading

e-wai Jun 25, 2021

gaoxk Jun 26, 2021

e-wai Jun 25, 2021

gaoxk Jun 26, 2021 •

edited

Loading

e-wai Jun 26, 2021

gaoxk Jun 26, 2021

e-wai Jun 26, 2021

gaoxk Jun 26, 2021

e-wai Jun 27, 2021

e-wai Jun 26, 2021

gaoxk commented Jun 26, 2021

jennchenn Jun 27, 2021

e-wai Jun 27, 2021

e-wai commented Jun 27, 2021 •

edited

Loading

e-wai commented Jun 27, 2021

gaoxk commented Jun 27, 2021

e-wai left a comment

jennchenn left a comment

Add filter to homepage #37

Add filter to homepage #37

Conversation

gaoxk commented Jun 24, 2021 • edited Loading

Notion ticket link

Implementation description

Steps to test

Checklist

jennchenn 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

e-wai left a comment • 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

gaoxk Jun 26, 2021 • 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

Choose a reason for hiding this comment

gaoxk commented Jun 26, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

e-wai commented Jun 27, 2021 • edited Loading

e-wai commented Jun 27, 2021

gaoxk commented Jun 27, 2021

e-wai left a comment

Choose a reason for hiding this comment

jennchenn left a comment

Choose a reason for hiding this comment

gaoxk commented Jun 24, 2021 •

edited

Loading

e-wai left a comment •

edited

Loading

gaoxk Jun 26, 2021 •

edited

Loading

e-wai commented Jun 27, 2021 •

edited

Loading