[Components][Ingredients][Lists]

[atherdon]

OK, so we create and display at examples page our components or blocks, that we'll use.
For sure, some of them components works not a 100% correct, so feel free to change their logic.
At previous task was important to just create them, right now we'll make them work as we need it.

i want to have a separated examples page, related to different type of lists, that we'll have.
I'm ok to have each of this list as a separated component. But if you want to dig more - we can talk about making one list, and just pass into it a different sub-components.

We had 3 lists at examples before:

Goal for List with link - display link and cover onClick events for each list item
Goal for List with edit to have list item with title and link "Edit" and cover onClick event too
Goal for List with Delete to have list item with title and link "Delete".

later we'll combine this functionality, but not now. I want to have as much as each elements that can be easy developed.

Notes:
Inside the Item(abstract) title can be not just a simple text, like an Ingredient name. So we cannot just display it at tag as {prop.title}. we should have a method that will return it. so later we can extend it into something else.

---

Some of the created components are not necessary. But deleting them not necessary too :) We can re-program them, so they will work as we need it.

---

text with id - it's should be one component, like Label, but we should be able to put some wrapper into it. so it's displaying text, but receiving 2 props: text and id from the parent component.

--
Autocomplete - we should compare this component with autocomplete from antd.

---

1. List that contains just ingredient names(be aware that later we'll connect it with our fetch plugin)
2. List that has items with checkbox, title, id
3. List that has items with elements that can be drag-n-dropped or sorted. buzz me for details how
4. List that has items with checkbox, title, delete link
5. List that has items with checkbox, title, delete icon
6. List ... label, id, order prop, status prop
   again, it can be one list with different item layouts. but logic is similar - display items + have some methods to handle additional interactions
7. List with label, checkbox and status
8. List with 3 links after it - when you click on link it change status from 'all', 'active', 'purchased'

---

9. List with status with radio group with 3 elements, similar to option 8

When you click on checkbox -> text should be text-decoration: line-through;
and status also changed to purchased for this item

when we have a drag-n-drop -> order should be adjusted too.
btw, order managed at list methods.

When you click on Edit -> right now we'll just have console log of data, related to this item...

When you click on Delete -> we should delete an item from the list, but we should put some blank method, that we'll use later in order to send a query to our server(that method should receive props with different ids)
For sure, this query will go from methods, specified at list component and delete link onClick will share it with parents - sharing ids(for sure)

[atherdon]

@vadim9999 are you assigned to this task?
if yes - all of our lists from this point will be build by using List component from our separated module

[vadim9999]

@atherdon you gave me this task in facebook

[atherdon]

ok, assigning you then

[vadim9999]

@atherdon
List that has items with elements that can be drag-n-dropped or sorted. buzz me for details how
can you give me more details?

[atherdon]

sure.

[atherdon]

#114

[vadim9999]

List ... label, id, order prop, status prop
again, it can be one list with different item layouts. but logic is similar - display items + have some methods to handle additional interactions

@atherdon Can you give more details? I created component ListLayouts for this subtask. What should I add or delete? In PR GroceriStar/react-shopping-list-template#169

[atherdon]

hold on, merging for now - will take a look a bit later. by first view - looks ok

[vadim9999]

Should I create List with checkboxes? It's will be a component that sorted items? property status has 'all' 'active' 'purchased'? If I will pass status purchased It's render all item that property isChecked: true?

[atherdon]

i'm not sure... the reason why i'm slowing down tasks from this project - because i need to spend some time in order to review whole progress and compare it with notes from my papers. it'll take me a lot of time and i'm overwhelmed.

[atherdon]

if you think you're ok with all this list components, you can start composing all this code together.
but please keep it separated. this was one of the goals that i keep in head, when we create a different lists.

OR! we can move all of this components into separated package, so it'll later easy to use.
Please advise

[vadim9999]

I think it's ok with all components

[atherdon]

will we move it into a separated repo or do you want to keep it here?

[atherdon]

read this article: https://blog.bitsrc.io/tiny-components-what-can-go-wrong-d6aa42d71370
and if you think you're ready to move forward without me - i'll be just happy. but please compose, not just put everything in one file. but i still think that if we move it out - it'll make coding more easy, as we did with PDF