[Feature, Refactor]Order shopping list items by time frame + Code Organization #41

jendevelops · 2020-04-15T00:35:14Z

Description

Abstract out shoppingListInput as it's own separate component called ShoppingListItem for better clarity and modularity
Change ShoppingList html elements from unordered list to a table, so users can better utilize all the information stored in firebase in an easy to read format
Abstracted the normalizeString function from AddItemForm into /lib/normalizeString.js as a helper function that is available app-wide
Create helper function filterShoppingListByTimeframe that prefilters the shopping list (utilizes normalizeString previously added to /lib/) taken from firebase before setting to local shoppingListItems state

Related Issue

Closes issue #13

Acceptance Criteria

Items in the list are shown visually grouped in the following order: Soon, Kind of soon, Not soon, Inactive (Still needs to consider inactive shopping list items)
Within each grouping, items should be sorted by the estimated number of days until next purchase
Items with the same number of estimated days until next purchase should be sorted alphabetically
Items in the different states should be visually distinct
Items in the different states should be described distinctly when read by a screen reader

Type of Changes

	Type
	🐛 Bug fix
✓	✨ New feature
✓	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

…ing local state

Create helper function in lib called normalizeString,removing it from AddItemForm. Now function is available app wide. Then, it was utilized in alphabeticalSort function to filter shoppinglist items by name.

laurenmbeatty · 2020-04-15T01:10:13Z

src/pages/ShoppingList.js

+        //does not consider a case where timeFrame is none of these
+
+        return seven.concat(fourteen).concat(thirty);
+    };


V. cool!!!! I think you could also do return [...seven, ...fourteen, ...thirty]. Just an alternative, though.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

created aria-label for accessibility screenreaders that will read a string with the item's name and timeframe.

Updated the local shopping item list to remove the inactive items before filtering them by timeframe. Added css for each timeframe in the UI of shopping list.

laurenmbeatty · 2020-04-18T00:18:19Z

src/components/ShoppingListItem.js

+            return "None";
+    }
+}
+// const getStringValue = (numberValue) => {


Maybe can rid of this? Leave it if you think you will need it, but otherwise you can remove.

laurenmbeatty · 2020-04-18T00:18:32Z

src/components/AddItemForm.js

@@ -3,6 +3,7 @@ import { Redirect } from 'react-router-dom';
 import fb from '../lib/firebase';
 import '../css/AddItemForm.css';
 import moment from 'moment';
+import normalizeString from '../lib/normalizeString';



Yes!!!!! Love it.

laurenmbeatty · 2020-04-18T00:19:39Z

src/components/ShoppingListItem.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import * as timeframeConstants from '../lib/timeframeConstants';
+


Are you using timeFrameConstants anymore?

We plan on utilizing the constants throughout the app once fully implemented.

Sounds good. If you're not using it in this file right now, though, you can remove line 2.

laurenmbeatty · 2020-04-18T00:20:07Z

src/components/ShoppingListItem.js

+
+
+const ShoppingListItem = ({item,handleCheck}) => {
+    const ariaString = `${item.itemName} to be bought in ${timeFrameString(item.timeFrame)}`;


Nice. Love that you separated this out into its own file.

laurenmbeatty · 2020-04-18T00:22:37Z

src/components/ShoppingListItem.js

+import * as timeframeConstants from '../lib/timeframeConstants';
+
+const timeFrameString = number =>
+{


This is not a blocker at all, but maybe these 2 functions could be combined into one since they both do essentially the same thing? The case could return an object that has both the css class and the label in it? idk.

Yes, I was thinking the same thing. I was thinking of dropping the values in 2 dictionaries with the numbers as the keys, and having a 2nd argument to determine what you want returned.

laurenmbeatty · 2020-04-18T00:24:13Z

Great commit messages!!!!!!!

AshlingH · 2020-04-18T01:02:09Z

src/lib/timeframeConstants.js

+const KIND_OF_SOON = {stringValue: "between 7 and 30 days", integerValue: 14}
+const NOT_SOON = {stringValue: "more than 30 days", integerValue: 30}
+const INACTIVE = {stringValue: "inactive", integerValue: 0}
+


Brings a full circle feel to an earlier issue for Diane and I, thank you!

Awesome. Great idea.

AshlingH · 2020-04-18T01:02:52Z

src/css/ShoppingList.css

+}
+.inactive {
+    background-color: grey;
+}


From a user perspective, this is soooo helpful well done!

AshlingH

Really good jobs guys, looking forward to hearing about your process on Sunday. As the app develops issues and items from earlier in the cohort are coming together for me. Nice approach!

jonbascos

Excellent work you two. Love the new filterShoppingListByTimeframe function. Looks pretty clean. Can't wait to hear about it from you on Sunday.

laurenmbeatty · 2020-04-18T02:02:23Z

src/components/ShoppingListItem.js

+        <tr className={generateClass(item.timeFrame)}>
+            <td>
+                <input
+                aria-label= {ariaString}


laurenmbeatty · 2020-04-18T02:03:23Z

src/pages/ShoppingList.js

+        const fourteen = shoppingListArray.filter(item => item.timeFrame === 14).sort(alphabeticalSort);
+        const thirty = shoppingListArray.filter(item => item.timeFrame === 30).sort(alphabeticalSort);
+        const inactive = shoppingListArray.filter(item => item.timeFrame === 0).sort(alphabeticalSort);
+


Love these one-liners. Very nice.

laurenmbeatty · 2020-04-18T02:05:42Z

Screen reader info is perfect. nice work.

laurenmbeatty · 2020-04-18T02:09:26Z

laurenmbeatty

This looks amazing. 💖

…t-shopping-list into jvb-dk-sort-by-timeframe

jendevelops and others added 7 commits April 14, 2020 16:02

Initialize ShoppingListItem component

46db9ab

Move shoppingListItemInput into its own component ShoppingListItem

53de481

Change shopping list item display format from ul to table

5b8c2f9

Add timeFrameString for timeframe text in table

2980bee

Add filter logic helper function, and filter shoppingList before sett…

1702812

…ing local state

added sorting logic for alphabetical itemNames based on timeframe

9d9de46

Abstract normalizeString and Sort itemName alphabetically

643dc17

Create helper function in lib called normalizeString,removing it from AddItemForm. Now function is available app wide. Then, it was utilized in alphabeticalSort function to filter shoppinglist items by name.

jendevelops changed the title ~~Jvb dk sort by timeframe~~ [Feature, Refactor]Order shopping list items by time frame + Code Organization Apr 15, 2020

laurenmbeatty reviewed Apr 15, 2020

View reviewed changes

dkimlim added 2 commits April 15, 2020 19:20

Add aria-label to checkbox input in ShoppingListItems component

f03d2d8

created aria-label for accessibility screenreaders that will read a string with the item's name and timeframe.

Enabled INACTIVE state if last purchase was 2 x the estimated time

62e5127

Updated the local shopping item list to remove the inactive items before filtering them by timeframe. Added css for each timeframe in the UI of shopping list.

jendevelops marked this pull request as ready for review April 18, 2020 00:12

jendevelops requested review from jonbascos and AshlingH April 18, 2020 00:12

jendevelops linked an issue Apr 18, 2020 that may be closed by this pull request

12. As a user, I want to view a list of my shopping list items in order of how soon I am likely to need to buy each of them again #13

Closed

laurenmbeatty reviewed Apr 18, 2020

View reviewed changes

AshlingH reviewed Apr 18, 2020

View reviewed changes

src/css/ShoppingList.css

}

.inactive {

background-color: grey;

}

Copy link

Contributor

AshlingH Apr 18, 2020

Choose a reason for hiding this comment

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

From a user perspective, this is soooo helpful well done!

AshlingH approved these changes Apr 18, 2020

View reviewed changes

jonbascos reviewed Apr 18, 2020

View reviewed changes

laurenmbeatty reviewed Apr 18, 2020

View reviewed changes

laurenmbeatty approved these changes Apr 18, 2020

View reviewed changes

Merge branch 'master' of https://github.com/the-collab-lab/tcl-5-smar…

21ead4b

…t-shopping-list into jvb-dk-sort-by-timeframe

dkimlim merged commit efaaec5 into master Apr 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature, Refactor]Order shopping list items by time frame + Code Organization #41

[Feature, Refactor]Order shopping list items by time frame + Code Organization #41

jendevelops commented Apr 15, 2020 •

edited

Loading

laurenmbeatty Apr 15, 2020

laurenmbeatty Apr 18, 2020 •

edited

Loading

laurenmbeatty Apr 18, 2020

laurenmbeatty Apr 18, 2020

jendevelops Apr 18, 2020

laurenmbeatty Apr 18, 2020

laurenmbeatty Apr 18, 2020

laurenmbeatty Apr 18, 2020

jendevelops Apr 19, 2020

laurenmbeatty commented Apr 18, 2020

AshlingH Apr 18, 2020

laurenmbeatty Apr 18, 2020

AshlingH Apr 18, 2020

AshlingH left a comment

jonbascos left a comment

laurenmbeatty Apr 18, 2020

laurenmbeatty Apr 18, 2020

laurenmbeatty commented Apr 18, 2020

laurenmbeatty commented Apr 18, 2020

laurenmbeatty left a comment

		@@ -0,0 +1,68 @@
		import React from 'react';
		import * as timeframeConstants from '../lib/timeframeConstants';



		const ShoppingListItem = ({item,handleCheck}) => {
		const ariaString = `${item.itemName} to be bought in ${timeFrameString(item.timeFrame)}`;

[Feature, Refactor]Order shopping list items by time frame + Code Organization #41

[Feature, Refactor]Order shopping list items by time frame + Code Organization #41

Conversation

jendevelops commented Apr 15, 2020 • edited Loading

Description

Related Issue

Acceptance Criteria

Type of Changes

Choose a reason for hiding this comment

laurenmbeatty Apr 18, 2020 • 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

Choose a reason for hiding this comment

laurenmbeatty commented Apr 18, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AshlingH left a comment

Choose a reason for hiding this comment

jonbascos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

laurenmbeatty commented Apr 18, 2020

laurenmbeatty commented Apr 18, 2020

laurenmbeatty left a comment

Choose a reason for hiding this comment

jendevelops commented Apr 15, 2020 •

edited

Loading

laurenmbeatty Apr 18, 2020 •

edited

Loading