groceristar / showcase Goto Github PK

https://github.com/GroceriStar/showcase/blob/master/src/components/GroceryListLayout/GroceryListLayout.js

right now we have this structure

ul
  - li
  -- ul
    - li

later we'll have divs with rules for css.

http://localhost:3000/groceries

• GroceriesView.js - main file that generate that issue

• https://github.com/GroceriStar/showcase/tree/master/src/components/DepartmentInfo
• https://github.com/GroceriStar/showcase/tree/master/src/components/DepartmentList
• https://github.com/GroceriStar/showcase/tree/master/src/components/DownloadLink
• https://github.com/GroceriStar/showcase/tree/master/src/components/GeneratePDF
• https://github.com/GroceriStar/showcase/tree/master/src/components/Ingredients
• https://github.com/GroceriStar/showcase/tree/master/src/components/RenderGroceryById
• https://github.com/GroceriStar/showcase/blob/master/src/components/layouts/GroceryList/AntdLayout.js

just try to open a http://localhost:3000/grocery/all and you'll see what i mean.
all is not a working id, and things go broken

when i print method getId
i think it runs at least 3 times.

i assume it self explanatory.
but: close button
header color changes
last button running away

Real data.
https://github.com/GroceriStar/groceristar-fetch/blob/master/data/Ingredients/how-i-spent-40-at-trader-joes-and-ate-healthy-for-a-week.json

I assume it's a good time or sign that we need to think about having one source of all data and then just pass it into small components.
We should start from fetch plugin.

components, basic views, routes etc.
everything should be reviewed.
and we need to have a plan.
our code should be ready to grab it and move to a new clean project without unnecessary things, without bugs, crashes, etc.
so planning is a crucial part here.

More details upon request.

At this project we have some cards, that AntD library can create.
After chat with Vadim we realized that mauwerk works slow, and it's better to replace it.
So we'll create a separated page, that will be similar to HomeView, but instead of Grid from mauwerk - we'll have component, with cards.

it's a big task, but i want to start it. Soon we plan to make visible some of our projects, and this task is part of this plan.
Let's start with small things:
separated component, connected to router, that can display few cards in loop.

Dependabot couldn't parse the package.json found at /package.json.

You can mention @dependabot in the comments below to contact the Dependabot team.

https://github.com/ghosh/uiGradients

diegomura/react-pdf#354 (comment)

we cannot do it right now, because we stuck with it between projects.
Maybe moving it away to some separated repo as cards-wrapper will help us

and it should be done only after cleaning up the pdf stuff

Right now they all looks similar. But maybe, using this different gradients color is not a good idea, but how it can be replaced?

https://ant.design/components/spin/

This issue was opened to handle tasks related to all the TODO comments in the project

• App.js, https://github.com/Avuidrauxs/showcase/blob/master/src/App.js#L4-L12
• InsideLayout.js, https://github.com/Avuidrauxs/showcase/blob/master/src/InsideLayout.js#L17
• DepartmentInfo.js, https://github.com/Avuidrauxs/showcase/blob/master/src/DepartmentInfo.js#L12
• DownloadPDFLink.js, https://github.com/Avuidrauxs/showcase/blob/master/src/DownloadPDFLink.js#L16
• RenderLists.js, https://github.com/Avuidrauxs/showcase/blob/master/src/RenderLists.js#L7
• AntdLayout.js, https://github.com/Avuidrauxs/showcase/blob/master/src/AntdLayout.js#L12
• CleanLayout.js, https://github.com/Avuidrauxs/showcase/blob/master/src/CleanLayout.js#L28
• ChangeGroceryNameView.js, https://github.com/Avuidrauxs/showcase/blob/master/src/ChangeGroceryNameView.js#L5
• GroceriesView.js, https://github.com/Avuidrauxs/showcase/blob/master/src/GroceriesView.js#L11
• HomeView.js, https://github.com/Avuidrauxs/showcase/blob/master/src/HomeView.js#L27
• ManageGroceryView.js, https://github.com/Avuidrauxs/showcase/blob/master/src/ManageGroceryView.js#L5

Move away css from components(i saw at least 3 components that should be clean up)

Update selectors, it's from calendar sutff. and should work at the same level.

RenderGrocery & RenderGroceryId - looks like similar components

--
Update warnings

Dependabot can't resolve your JavaScript dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Error while updating /package-lock.json:
Cannot read property 'match' of undefined

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

You can mention @dependabot in the comments below to contact the Dependabot team.

so we have our current version and i'm ok with that.
but i want to have a second pdf generator that will draw a borders for each of deparment with ingredients.

basically i want something similar to this: http://templatelab.com/wp-content/uploads/2018/03/grocery-list-template-25.jpg
https://cdn.vertex42.com/ExcelTemplates/Images/grocery-checklist.png

you don't need to delete the previous version. i want to have 2 buttons for generate pdf, that will have 2 different pdf files in the end

should be finished, clean up and have some conditions, so we can view it on production level

both of thing components works well by my opinion. we should use them

• move our logic of generation of pdf into https://github.com/diegomura/react-pdf/tree/master/examples
  it'll also require a separation of our stuff

details upon request

• Tile styles look really bad.

• prepare pages/layout for flexbox - justify-content

• RenderGroceryById - rename, fix css, looks like it loads very slow.

• Move DepartmentInfo into new repository and connect it from there.(details upon request)

• We can grab and use some logic from MealCalendar project(details upon request)

https://desmart.com/blog/react-is-slow-oh-wait-tips-on-how-to-optimize-react-apps-performance-1
https://hackernoon.com/improving-first-time-load-of-a-production-react-app-part-1-of-2-e7494a7c7ab0
https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6
https://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html

In this opened tile you can't read all information. Close button doesn't work. You can just scroll up or scroll down but it's close tile.

it works, but i don't like how it looks.
tell me if you have ideas.

https://github.com/GroceriStar/showcase/blob/master/src/components/Cell/Cell.js#L30-L34

style={{ backgroundImage: css, cursor: !maximized ? 'pointer' : 'auto' }}

read about how to make a better styles by using classnames package and update this property

• flexbox layout for displaying data of GL in-old-fashion-way
  check different repos https://www.google.com.ua/search?q=react+flexbox+components&oq=reaqct+flexbox+components&aqs=chrome.1.69i57j0l2.11108j0j1&sourceid=chrome&ie=UTF-8

#28

• add styles to tile
  #59

• try to add sharing buttons
  i like this tool, but we should test if it suits well for us
  https://github.com/SaraVieira/react-social-sharing

• [pdf][add flexboxes layouts]
  Will share details upon request

• Enzyme Jest tests
  add basic shallow for components - that we're created.

GroceriStar/calendar#44
#54

Start to work on it only after looking video, related to shallow testing

https://github.com/GroceriStar/react-shopping-list-template/blob/master/package.json
https://github.com/ChickenKyiv/recipe-app-react-native/blob/master/package.json
https://github.com/ChickenKyiv/recipe-search-react/blob/master/package.json
https://github.com/GroceriStar/react-native-shoppin-list/blob/master/package.json

@vadim9999 you can find this issue when you'll run a npm run test or yarn test.

it's a basic issue, when you have a list of items. At React you should have an key property - that will indicate a different between list items.
The easiest way is to put key=xxx to all of this items, but each item should have a different ID.
I think we discussed a similar problem at our fetch plugin and decided to have a method, that will add a fake-ids to our arrays.
It can be done by shortid package: https://www.npmjs.com/package/shortid

some details can be checked here: https://stackoverflow.com/a/34578819

https://github.com/reactjs/react-modal

https://ant.design/components/layout/

it'll make our code cleaner.

This is should be 3 components. One related to list of departments,
second is department info(id, department name, list of ingredients), third is list of ingredients

http://pdfkit.org/

not working here, but works at react-shoplist-template. you can grab it here, play with it and later move away to grocery-component repo, then publish an updated version of that plugin, then replace this functionality here and at shoplist-template. also can create an issue with link to this issue at groceristar-app because we also have a groceryView....

https://travis-ci.org/GroceriStar/showcase/jobs/434846370#L625

take some time and look project code.
pick some task and commit changes here.

https://travis-ci.org/GroceriStar/showcase/jobs/467813342
#116
#54
#100

don't know why. I debug it and i fix it a bit, but on react app it crashed.
GroceriStar/groceristar-fetch#141

https://github.com/GroceriStar/showcase/blob/master/src/App.js#L12
https://github.com/GroceriStar/showcase/blob/master/src/App.js#L22-L23

#133

• RenderContent. Separate(move away styles) from render method.
  https://github.com/GroceriStar/showcase/blob/master/src/components/Cell/RenderContent.js#L28-L31
  this is how it can be: https://github.com/GroceriStar/showcase/blob/master/src/components/Cell/Cell.js#L13-L16

• we need to move getLink method to the router file. Right now we using an old version. Remove old versions(important), connect new version, test is it generate link properly
  Check how we did with a similar problem: https://github.com/GroceriStar/showcase/blob/master/src/Router.js#L20-L22
  https://github.com/GroceriStar/showcase/blob/master/src/components/Cell/RecipeHeader.js#L28

• RecipeHeader - move styles

• RecipeLayout. Replace getLink method. move this into a separated component: https://github.com/GroceriStar/showcase/blob/master/src/components/Cell/RecipeLayout.js#L114-L161

sync your fork with our latest changes.

Showcase
app.js have class main

header
Grid → data

Cell
have class cell
add on click event
cell should have 2 fade components inside

DepInfo
li with h2 with data

ingredients
https://github.com/GroceriStar/showcase/blob/master/src/components/DepartmentInfo/DepartmentInfo.js