[ISSUE 19] Pin and place important lists on top #70

kweeuhree · 2024-10-01T20:46:50Z

Description

This code proposes a custom hook that manages and sorts lists that were marked as important

Created useImportance hook to manage a list of items and their importance status.
Added functionality to toggle a list's importance and store the state in local storage.
I am using localStorage to locally store references to important lists - like this we don't have to make any additional calls to firebase.
Implemented sorting logic to display important lists at the top based on the date they were pinned.
I wanted to try and sort items the way that we originally wanted to implement urgency of items. I read a bit more about how sorting works in JavaScript and I think this time everything works correctly, and I am happy about this.
Added tooltips and aria-labels to the Pin icons.

Would love to change UI based on feedback

Still working on tests

Related Issue

closes #65

Acceptance Criteria

There is a UX option available for me to pin/unpin important lists at the top
The pinned lists are sorted in reverse add order.
This is isolated to a per user bases.
a11y checks have been done.
Update the test to ensure coverage of this new functionality.

Type of Changes

enhancement

Updates

Before

After

Testing Steps / QA Criteria

ran npm start and signed in
clicked on lists to ensure they get added in the order they were pinned

…rtant lists

- display pre-sorted by importance lists; - pass isImportant prop to each SingleList component

github-actions · 2024-10-01T20:48:04Z

Visit the preview URL for this PR (updated for commit cd8801c):

https://tcl-75-smart-shopping-list--pr70-nk-important-lists-o-0aqen666.web.app

_{(expires Tue, 08 Oct 2024 21:15:03 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1f1fd53c369e1fa31e15c310aa075b4e8f4f8dde}

kweeuhree · 2024-10-01T20:57:41Z

src/components/SingleList.jsx

+		setImportantList(path);
+	};
+
+	const pinStyle = isImportant ? 'visible' : !isHovered ? 'hidden' : 'visible';



pin is displayed based on whether it is:

important,

not hovered,

hovered

kweeuhree · 2024-10-01T20:59:31Z

src/components/SingleList.jsx

+					fontSize="large"
+					className={pinStyle}
+					onClick={handleImportantList}
+				/>


the icon is handling setting selected list as important

kweeuhree · 2024-10-01T21:02:47Z

src/utils/hooks.js

+	const [importantLists, setImportantLists] = useState(
+		() => JSON.parse(localStorage.getItem('importantLists')) || [],
+	);
+


use state to display real-time changes to local storage where we store an array of objects:

{ path: string, datePinned: Date }

Where :

path is the path to a list that was marked as important,

datePinned stores a date that the list was marked as important. datePinned is needed to be able to display the lists in the reverse add order

kweeuhree · 2024-10-01T21:08:00Z

src/utils/hooks.js

+			return 1;
+		}
+	};
+


I tried to use a ternary and it wasn't working at all!

jendevelops · 2024-10-13T20:32:18Z

I would consider the user experience here. Unless you have a perviously pinned list, or you hover over the lists a user would not know that you can pin a list.

One of the ways that we can visually indicate this ability is to have an "empty" or "outline only" version of the pin icon on every list item, and have the ones that are pinned filled in. The other option is to have the pin look more like a "button", and indicate pinned status through highlighting. I've added a couple different examples that might help you visualize what I'm talking about:

empty vs filled in heart favorite UI
selected vs unselected highlighted state - The image below is taken from the article linked. You can imagine instead of words, it would have the pin icon inside. You can also make the style of the highlighted vs unhighlighted look match the app more (have it be a rounded square "button", make it totally round, etc.)

Also, it's important to remember that visual representation is not the only thing that's important for our app. For any icons, we should also make sure to try to add alt tags and aria-labels to make our visual indicators accessible. I linked a good article that highlights the differences between the 2 and how to use them together to make visual items on a page more accessible.

kweeuhree · 2024-10-13T20:55:08Z

I would consider the user experience here. Unless you have a perviously pinned list, or you hover over the lists a user would not know that you can pin a list.

One of the ways that we can visually indicate this ability is to have an "empty" or "outline only" version of the pin icon on every list item, and have the ones that are pinned filled in. The other option is to have the pin look more like a "button", and indicate pinned status through highlighting.

Also, it's important to remember that visual representation is not the only thing that's important for our app. For any icons, we should also make sure to try to add alt tags and aria-labels to make our visual indicators accessible. I linked a good article that highlights the differences between the 2 and how to use them together to make visual items on a page more accessible.

    [
      
    
        ![2024-10-0116-33-07-ezgif com-video-to-gif-converter](https://private-user-images.githubusercontent.com/160637676/372642760-ff2811d8-edb9-43c7-9750-38c5ce319daa.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mjg4NTMwMTQsIm5iZiI6MTcyODg1MjcxNCwicGF0aCI6Ii8xNjA2Mzc2NzYvMzcyNjQyNzYwLWZmMjgxMWQ4LWVkYjktNDNjNy05NzUwLTM4YzVjZTMxOWRhYS5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAxM1QyMDUxNTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YThmNDJlMDI4OGRhYTczOGM1N2Y3ZTAzNGZjMmM4NmI5NTQ2M2EyNzExMjkxYTZkNjRmOTk3Yzk0ZDFhZjk0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.CIvgL6-zwERSx6WTdpaxu_69zlK77SzurB-uvOM4nF8)
      ](https://private-user-images.githubusercontent.com/160637676/372642760-ff2811d8-edb9-43c7-9750-38c5ce319daa.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mjg4NTMwMTQsIm5iZiI6MTcyODg1MjcxNCwicGF0aCI6Ii8xNjA2Mzc2NzYvMzcyNjQyNzYwLWZmMjgxMWQ4LWVkYjktNDNjNy05NzUwLTM4YzVjZTMxOWRhYS5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAxM1QyMDUxNTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YThmNDJlMDI4OGRhYTczOGM1N2Y3ZTAzNGZjMmM4NmI5NTQ2M2EyNzExMjkxYTZkNjRmOTk3Yzk0ZDFhZjk0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.CIvgL6-zwERSx6WTdpaxu_69zlK77SzurB-uvOM4nF8)
    
    
      
        
          
        
        
          
          
        
      
      [
        
          
        
      ](https://private-user-images.githubusercontent.com/160637676/372642760-ff2811d8-edb9-43c7-9750-38c5ce319daa.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mjg4NTMwMTQsIm5iZiI6MTcyODg1MjcxNCwicGF0aCI6Ii8xNjA2Mzc2NzYvMzcyNjQyNzYwLWZmMjgxMWQ4LWVkYjktNDNjNy05NzUwLTM4YzVjZTMxOWRhYS5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAxM1QyMDUxNTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YThmNDJlMDI4OGRhYTczOGM1N2Y3ZTAzNGZjMmM4NmI5NTQ2M2EyNzExMjkxYTZkNjRmOTk3Yzk0ZDFhZjk0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.CIvgL6-zwERSx6WTdpaxu_69zlK77SzurB-uvOM4nF8)

I agree, I will update this to be buttons for both delete and pin icons, and I will add aria-labels and alt tags! Thank you!

…I Tooltip and aria-labels. Outlined pin buttons are now visible at all times, and on click they become filled buttons

jendevelops · 2024-10-15T06:22:00Z

src/components/SingleList.jsx

+		marginBlockEnd: '0',
+	};
+
+	const tooltipTitle = isImportant ? 'Pinned' : 'Not pinned';


Instead of thinking of the tooltip as labeling this icon in this case, this icon actually is a button that has a function. Unlike the due soon, etc. labels, I think the tooltip should indicate to the user what would happen if it gets clicked. This is because they can already see if the item is pinned or unpinned visually. The concept of this icon button tooltip is similar to how you labels your aria label for each state.

Combined tooltipTitle and iconButtonAreaLabel into importantStatusLabel!

const importantStatusLabel = isImportant ? 'Unpin list' : 'Pin list';

…usLabel; simplify MUI icons imports

kweeuhree added 4 commits October 1, 2024 16:19

feat: implement custom useImportance hook that manages and sorts impo…

6876f36

…rtant lists

feat: implement useImportance hook:

71e23dc

- display pre-sorted by importance lists; - pass isImportant prop to each SingleList component

feat: introduce Material UI to the codebase

b5e249c

feat: toggle visibility of MUI icon; add color to the hover background

94bf2be

kweeuhree requested review from warrenchan13 and granolagabrielle October 1, 2024 20:46

kweeuhree self-assigned this Oct 1, 2024

kweeuhree requested review from ahsanatzapier, jendevelops and deeheber as code owners October 1, 2024 20:46

kweeuhree linked an issue Oct 1, 2024 that may be closed by this pull request

19. As a user, I want to be able to mark a list as important and to have important lists on top #65

Closed

5 tasks

kweeuhree commented Oct 1, 2024

View reviewed changes

src/utils/hooks.js

return 1;

}

};

Copy link

Collaborator Author

kweeuhree Oct 1, 2024

Choose a reason for hiding this comment

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

I tried to use a ternary and it wasn't working at all!

fix: update variable name to be more semantic

cd8801c

kweeuhree added the enhancement New feature or request label Oct 1, 2024

kweeuhree changed the title ~~[ISSUE 19] Pin and place important lists on top~~ [ISSUE 17] Pin and place important lists on top Oct 3, 2024

kweeuhree changed the title ~~[ISSUE 17] Pin and place important lists on top~~ [ISSUE 19] Pin and place important lists on top Oct 3, 2024

feat: removed the hover effect to improve user experience, added a MU…

ca77e27

…I Tooltip and aria-labels. Outlined pin buttons are now visible at all times, and on click they become filled buttons

jendevelops reviewed Oct 15, 2024

View reviewed changes

feat: combine tooltipTitle and iconButtonAreaLabel into importantStat…

74fd8a8

…usLabel; simplify MUI icons imports

kweeuhree requested a review from jendevelops October 15, 2024 17:50

kweeuhree merged commit 42869e3 into main Oct 16, 2024
2 checks passed

kweeuhree deleted the nk-important-lists-on-top branch October 16, 2024 12:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ISSUE 19] Pin and place important lists on top #70

[ISSUE 19] Pin and place important lists on top #70

kweeuhree commented Oct 1, 2024 •

edited

Loading

github-actions bot commented Oct 1, 2024 •

edited

Loading

kweeuhree Oct 1, 2024

kweeuhree Oct 1, 2024

kweeuhree Oct 1, 2024 •

edited

Loading

kweeuhree Oct 1, 2024

jendevelops commented Oct 13, 2024 •

edited

Loading

kweeuhree commented Oct 13, 2024

jendevelops Oct 15, 2024 •

edited

Loading

kweeuhree Oct 15, 2024 •

edited

Loading

[ISSUE 19] Pin and place important lists on top #70

[ISSUE 19] Pin and place important lists on top #70

Conversation

kweeuhree commented Oct 1, 2024 • edited Loading

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Oct 1, 2024 • edited Loading

kweeuhree Oct 1, 2024

Choose a reason for hiding this comment

kweeuhree Oct 1, 2024

Choose a reason for hiding this comment

kweeuhree Oct 1, 2024 • edited Loading

Choose a reason for hiding this comment

kweeuhree Oct 1, 2024

Choose a reason for hiding this comment

jendevelops commented Oct 13, 2024 • edited Loading

kweeuhree commented Oct 13, 2024

jendevelops Oct 15, 2024 • edited Loading

Choose a reason for hiding this comment

kweeuhree Oct 15, 2024 • edited Loading

Choose a reason for hiding this comment

kweeuhree commented Oct 1, 2024 •

edited

Loading

github-actions bot commented Oct 1, 2024 •

edited

Loading

kweeuhree Oct 1, 2024 •

edited

Loading

jendevelops commented Oct 13, 2024 •

edited

Loading

jendevelops Oct 15, 2024 •

edited

Loading

kweeuhree Oct 15, 2024 •

edited

Loading