[WIP] Making history page look more like the designs #690

zond · 2021-11-25T14:31:10Z

No description provided.

zond · 2021-11-25T14:45:50Z

I have spent a lot of time trying to understand how the product lists currently work.

It seems the ProductList class is only a data container, and not a widget, and there is currently no (simple) widget that shows it's content.

The ProductListPage that seems to be the preferred way to display a ProductList is a complete full screen page, and does a lot of stuff. Exactly how it displays the product list, and what stuff it does, is controlled by parameters in the data container ProductList.

This means that the places where the app shows product lists aren't widgets composed of product-list widgets using surrounding containers and constructor parameters to control the rendering and behavior, but everything is opaquely controlled by the data container class ProductList.

Adding a new kind of product list into this structure, with a new look and behavior, would make both ProductList and ProductListPage more complex and potentially add changes and/or bugs into existing uses of it.

WDYT about this analys? Have I misunderstood something?

To avoid this I have created a new widget called SimpleProductList that will be only a simple list of products. I'm not sure about the name, maybe ProductListWidget would be better?

I intend it's detailed look and behavior to be controlled by constructor parameters as is the custom in Flutter, and provide it a ProductList that will only be used to provide the actual data to display - not how it is displayed or how it behaves.

It can then be used anywhere you want to display a page containing product lists in the more common Flutter way of composing widgets with constructor parameters instead of baking the display logic into the data container.

Currently it only displays ProductListItemSimple as content, but as those contain SmoothProductCardFound widgets that don't conform to the UX designs that will have to change.

WDYT about this architectural idea. Does it make sense?

monsieurtanuki · 2021-11-25T15:47:09Z

@zond I did write ProductList and ProductListPage, and I can probably be helpful :)

ProductList is supposed to be only a data container
there is currently no specific widget to display a ProductList, just a full page called ProductListPage
you say you need a Widget - I suggest that you start from the ReorderableListView.builder code inside ProductListPage, that you could indeed call ProductListWidget
currently, UX behaviors are computed from the ProductList (and btw not by the ProductList, therefore not "opaquely controlled by the data container class")
- there's a reason behind that - you don't display automatic history lists the same way as reorderable user-defined shopping lists
- if you need more flexibility than having those behaviors computed automatically, nothing prevents you from adding those parameters (e.g. bool dismissible, bool reorderable) to you ProductListWidget constructor
- but you should be careful that depending on the list type, the available "extra" data won't be the same - e.g. timestamps for history and quantity for shopping list

Don't hesitate to ask more questions. Btw I don't mind my code being thrown away (but for good reasons only), so don't be shy ;)

monsieurtanuki

Oh I though this was an issue, not a PR.
The code looks clean. I did not run it.
What I can say is that in #349 I specifically added the timestamps. I don't know if they are still supposed to be there.

zond · 2021-11-25T16:26:24Z

@zond I did write ProductList and ProductListPage, and I can probably be helpful :)

Excellent, thanks!

ProductList is supposed to be only a data container

Still, the ProductListPage controls a lot of rendering based on functions and data provided by ProductList?

there is currently no specific widget to display a ProductList, just a full page called ProductListPage

Check.

you say you need a Widget - I suggest that you start from the ReorderableListView.builder code inside ProductListPage, that you could indeed call ProductListWidget

Sounds good, I'll look at that!

currently, UX behaviors are computed from the ProductList (and btw not by the ProductList, therefore not "opaquely controlled by the data container class")

there's a reason behind that - you don't display automatic history lists the same way as reorderable user-defined shopping lists

if you need more flexibility than having those behaviors computed automatically, nothing prevents you from adding those parameters (e.g. bool dismissible, bool reorderable) to you ProductListWidget constructor

That makes sense - but wouldn't that collide with how the ProductList contains the same kind of (I don't know if it contains the actual same) rendering/behavioral hints?

but you should be careful that depending on the list type, the available "extra" data won't be the same - e.g. timestamps for history and quantity for shopping list

Check!

Don't hesitate to ask more questions. Btw I don't mind my code being thrown away (but for good reasons only), so don't be shy ;)

That's a sound approach - but I also find it a very sound approach to not throw code away but instead try to gently add new features or improvements into the current architecture :D

I had no idea the response to my questions would be this quick, and your answers will surely help me add stuff in as gentle a way as possible 👍

monsieurtanuki · 2021-11-25T18:30:23Z

@zond Your first step may be to extract the ReorderableListView.builder code I mentioned earlier into a new ProductListWidget class, and use that class in ProductListPage.
I suspect that what bothers you is more the "Page-rather-than-a-Widget" issue than the "automatic display meta-data" issue.
Good luck!

zond · 2021-11-26T14:31:40Z

@zond Your first step may be to extract the ReorderableListView.builder code I mentioned earlier into a new ProductListWidget class, and use that class in ProductListPage. I suspect that what bothers you is more the "Page-rather-than-a-Widget" issue than the "automatic display meta-data" issue. Good luck!

Alright, I refactored it a bit as per your recommendation.

Do you think it's OK to redesign the ProductListWidget to look like the 'history' page in Figma - i.e. do you think it's OK if all product lists in the app start looking like that?

monsieurtanuki

Hi @zond!
Not 100% convinced: please have a look at my comments.

I don't know what the product list looks like in Figma.
I don't know either how the concept of product list is supposed to evolve.
If the concepts of user defined lists, shopping lists and pantries are discarded, and if we only have history lists, I guess you can get rid of some code because you'll always have the following parameters: reorderable = false, timestamps = true, dismissible = true.

My main question is: what do you really need if you want to "make history page look more like the designs", as the title of this PR suggests?

monsieurtanuki · 2021-11-26T15:56:50Z

packages/smooth_app/lib/pages/scan/continuous_scan_page.dart

@@ -4,7 +4,7 @@ import 'package:provider/provider.dart';
 import 'package:qr_code_scanner/qr_code_scanner.dart';
 import 'package:smooth_app/data_models/continuous_scan_model.dart';
 import 'package:smooth_app/pages/personalized_ranking_page.dart';
-import 'package:smooth_app/pages/smooth_bottom_navigation_bar.dart';
+import 'package:smooth_app/pages/smooth_bottom_navigation_bar.dart' as navbar;


What's the point? I assume that SmoothBottomNavigationBar has an explicit name, that the name is long enough, and that it's used in a context where there's no ambiguity.
I won't reject the PR just for that, though. I guess it's about personal coding preferences.

It was because for some reason the compiler complained that SmoothBottomNavigationBar was defined in two files - I had no clue what caused it by this fixed it.

Now I can't repro that problem, so I removed the fix :)

monsieurtanuki · 2021-11-26T16:02:08Z

packages/smooth_app/lib/pages/product/common/product_list_widget.dart

+    );
+  }
+
+  static String _getDaysAgoLabel(final int daysAgo) {


While you're refactoring, you'd be better off creating a new file dedicated to "some time ago" labels. Maybe some_time_ago_helper.dart, with String getDaysAgoLabel(final int daysAgo, final AppLocalizations appLocalizations). With actual translations, at least in TODOs.

monsieurtanuki · 2021-11-26T16:09:31Z

packages/smooth_app/lib/pages/history_page.dart

+    final AppLocalizations appLocalizations = AppLocalizations.of(context)!;
+    return Column(
+      children: <Widget>[
+        AppBar(
+          backgroundColor: Colors.white,
+          foregroundColor: Colors.black,
+          title: Text(appLocalizations.history),
+        ),
+        Expanded(child: ProductListWidget(productList)),
+      ],
+    );


The idea was still to use ProductListPage, that would mainly use the new class ProductListWidget where most of the page's code would have been moved.

The way the project evolved, ProductListPage is now only used by the history page. If you don't use it in the history page anymore, everything you do in ProductListPage is basically maintaining dead code.

And I'm not convinced that using a Column with an AppBar then a body (and without a navigation bar) is such a good idea compared to a standard Scaffold.

My suggestion: let history page use ProductListPage, that uses the new class ProductListWidget.

I'd be happy to remove ProductListPage if it's unused, but see

I don't remember why I did it using Column containing AppBar... I changed it to a Scaffold now.

Nesting 'pages' seems strange - if we want to use ProductListPage only or the history page, then we could just rename it to HistoryPage.

Also, see the image above - ProductList is still used for the custom product lists (which I don't know if they are going away or not).

zond · 2021-11-29T08:01:15Z

Hi @zond! Not 100% convinced: please have a look at my comments.

I don't know what the product list looks like in Figma. I don't know either how the concept of product list is supposed to evolve. If the concepts of user defined lists, shopping lists and pantries are discarded, and if we only have history lists, I guess you can get rid of some code because you'll always have the following parameters: reorderable = false, timestamps = true, dismissible = true.

I don't know if they are going away or not (I'm just trying to pick up some tasks from @jasmeet0817), but even if they are not, I assume we will want the same styling and look on all lists of products.

Mainly I'm talking about visual differences, how the different icons are laid out etc

My main question is: what do you really need if you want to "make history page look more like the designs", as the title of this PR suggests?

This is the history page from the Figma design:

…aking the current ProductListPage even more complex.

monsieurtanuki

Hi @zond!
Assuming that the Figma screenshots are correct - e.g. no timestamp displayed - and as you consider in HistoryPage that you use the default version of ProductListWidget (no reorderable; no dismissible, no timestamps), I would highly simplify the code and remove everything about reordeable, dismissible and timestamps (e.g. _Meta).
Basically that would mean a simple ListView. Much easier to read. Keeping "dismissible" would make sense, though (and setting it to true for history), and is not in contradiction with the screenshots.

That being said:

I recently implemented Add a "Clear all" button in the Product history page. #682 - please add this to your PR
I implemented Revamp of the recently seen products screen #349 6 months ago - that was probably before the UX/UI refresh but @teolemon can you confirm that we should not display the history timestamps anymore?

jasmeet0817 · 2021-12-07T11:58:39Z

Hi @zond! Not 100% convinced: please have a look at my comments.
I don't know what the product list looks like in Figma. I don't know either how the concept of product list is supposed to evolve. If the concepts of user defined lists, shopping lists and pantries are discarded, and if we only have history lists, I guess you can get rid of some code because you'll always have the following parameters: reorderable = false, timestamps = true, dismissible = true.

I don't know if they are going away or not (I'm just trying to pick up some tasks from @jasmeet0817), but even if they are not, I assume we will want the same styling and look on all lists of products.

Hi, sorry for late reply. They are going away indeed, we only need the product list in two places:

History page
Compare page (note we may need to display two the list in two different sections).

Mainly I'm talking about visual differences, how the different icons are laid out etc

My main question is: what do you really need if you want to "make history page look more like the designs", as the title of this PR suggests?

This is the history page from the Figma design:

zond · 2021-12-08T11:09:42Z

After discussion with @jasmeet0817 we decided that the simplest thing to do is to scrap this PR and make a new one that only changes the look of the row in the product list, since that is the most important difference between the UX designs and what's here currently.

monsieurtanuki · 2021-12-08T11:18:46Z

@zond @jasmeet0817 That makes sense, especially now that I've started to refactor the database AND trim all the pantry stuff en passant. The code looks much clearer.

zond changed the title ~~Making history page look more like the designs~~ [WIP] Making history page look more like the designs Nov 25, 2021

monsieurtanuki reviewed Nov 25, 2021

View reviewed changes

zond force-pushed the history_page branch from 2a076a7 to 2e24a0a Compare November 26, 2021 14:29

monsieurtanuki reviewed Nov 26, 2021

View reviewed changes

zond force-pushed the history_page branch 3 times, most recently from 63da93d to 74a4ff9 Compare November 29, 2021 08:30

Made the history page use a new widget "SimpleProductList" to avoid m…

3543796

…aking the current ProductListPage even more complex.

zond force-pushed the history_page branch from 74a4ff9 to 3543796 Compare November 29, 2021 08:32

monsieurtanuki reviewed Nov 29, 2021

View reviewed changes

monsieurtanuki mentioned this pull request Dec 7, 2021

How profound is the DB implementation #470

Closed

zond closed this Dec 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Making history page look more like the designs #690

[WIP] Making history page look more like the designs #690

zond commented Nov 25, 2021

zond commented Nov 25, 2021 •

edited

Loading

monsieurtanuki commented Nov 25, 2021

monsieurtanuki left a comment

zond commented Nov 25, 2021

monsieurtanuki commented Nov 25, 2021

zond commented Nov 26, 2021

monsieurtanuki left a comment

monsieurtanuki Nov 26, 2021

zond Nov 29, 2021

monsieurtanuki Nov 26, 2021

zond Nov 29, 2021

monsieurtanuki Nov 26, 2021

zond Nov 29, 2021

zond commented Nov 29, 2021

monsieurtanuki left a comment

jasmeet0817 commented Dec 7, 2021

zond commented Dec 8, 2021

monsieurtanuki commented Dec 8, 2021

[WIP] Making history page look more like the designs #690

[WIP] Making history page look more like the designs #690

Conversation

zond commented Nov 25, 2021

zond commented Nov 25, 2021 • edited Loading

monsieurtanuki commented Nov 25, 2021

monsieurtanuki left a comment

Choose a reason for hiding this comment

zond commented Nov 25, 2021

monsieurtanuki commented Nov 25, 2021

zond commented Nov 26, 2021

monsieurtanuki left a comment

Choose a reason for hiding this comment

monsieurtanuki Nov 26, 2021

Choose a reason for hiding this comment

zond Nov 29, 2021

Choose a reason for hiding this comment

monsieurtanuki Nov 26, 2021

Choose a reason for hiding this comment

zond Nov 29, 2021

Choose a reason for hiding this comment

monsieurtanuki Nov 26, 2021

Choose a reason for hiding this comment

zond Nov 29, 2021

Choose a reason for hiding this comment

zond commented Nov 29, 2021

monsieurtanuki left a comment

Choose a reason for hiding this comment

jasmeet0817 commented Dec 7, 2021

zond commented Dec 8, 2021

monsieurtanuki commented Dec 8, 2021

zond commented Nov 25, 2021 •

edited

Loading