plan to get rid of mauwerk cards that works slow and started to looks bad

[vadim9999]

Plan

1. In showcase in views/HomeView using component Grid. Replace it by List like in ListWrapper.
2. Create separated component with code in ListWrapper in method ItemCard. Make the same with ItemCardEmpty
3. Change Card that it will show just title.
4. Make Card clickable like this https://codesandbox.io/s/71kvk8848j. When you click on a card it will open a modal. Create component with Modal.
5. Connect fetch
6. In modal connect component InsideLayout

[atherdon]

@vadim9999 Can you add few options, related to connecting showcase with fake-api?

And I also think that we need to introduce our developer to https://github.com/GroceriStar/antd-showcase-components - it's a place where we keeping simple components, related to showcase projects.
this is a empty react project, where i'm testing components and fixing small errors: https://github.com/GroceriStar/antd-showcase-sandbox

[vadim9999]

selector.js in showcase has url of database fake-api

const URL = 'https://grocerylists-fake-api.herokuapp.com';

function getResponse(route) has attribute route that must be route after url.

async function getResponse(route) {
    let response;
  try {
    response =  await axios.get(URL + route);
    console.log("Respons");
    console.log(response);
  } catch (error) {
    console.error(error);
  }
  return response;
}

If you want to write new method you can use function getResponse(). For exaple

function getFullGrocery( name ) {
  return getResponse("/grocery/name/" + name)
}

after that in component where you want to get data you should do like this

constructor(props){
  super(props)
  this.state = {
    data: []
  }
}

async componentDidMount(){
  try {
    let response = await getFullGrocery(this.props.name);
    this.setState({
      data: response.data
    })
  } catch (e) {
      console.error("Can't connect to Database");
  }
}