sst / guide

Repo for guide.sst.dev
https://guide.sst.dev
MIT License
3.68k stars 445 forks source link

dealing with guest checkouts #200

Open asimdis0286 opened 6 years ago

asimdis0286 commented 6 years ago

hi, this notes app is great but it only serves signed in users....i am trying to build a shopping cart app using it and while I was able to do almost everything smoothly for signed in users, I am strugling with react data management for guest users. for a signed in user i can add items to the cart using his credentials. But, for a guest user who wants to add items to his shopping cart what do I do? i tried having a list of selected items as a key value pair in the overall state of the app but ran into a lot of issues with setstate in react. It seems a lot of people have faced similar issues but no one has a clear solution. Most people suggest using redux to manage the state data but I dont want to switch after already coding up pretty much everything for signed in users. Do you have any ideas? or Can you add to your app an option where a user can create notes and see his notes(similar to guest adding stuff to a cart) even if he is not logged in as long as he maintains his browser session or cookie. Any help will be really appreciated as I am quickly aproaching my deadline....

asimdis0286 commented 6 years ago

Let me try to show what the problem is. I think it is some issue with React-Router. Assume that the rest of the code is exactly like yours. My code(only relevant portions):

//App.js. ( I am passing a call back function(AddTempItem) to a child component which is one of the Applied Routes in Routes.js. This function comes back and concats more items to the selectedItems in the state.)

constructor(props) {
    super(props);

    this.state = {
      isAuthenticated: false,
      isAuthenticating: true,
      selectedItems: []
    };
  }

addTempItem = (newItem, event) => {
    const items = this.state.selectedItems.concat([newItem]);
    this.setState({ selectedItems: items });
  };

render() {
  const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated,
      addTempItem: this.addTempItem,
      selectedItems: this.state.selectedItems
    };
return (
 <Routes childProps={childProps} /> ///the child component is one of the Applied routes in this file
)}

//////// In the child component

handleSelectAdd = event => {
    this.props.addTempItem({
      productId: this.state.product.productId,
      quantity: this.state.quantity
    });
     };

render() {
    return (
      <Button onClick={this.handleSelectAdd} >Add to Cart</Button>
)}

I see that when I hit the button the new Item goes up to the App state. But, as soon as I hit any link in our navBar I lose my state.

Am I doing something wrong or is this a known issue with withRouter, Route or something else.

jayair commented 6 years ago

@asimdis0286 I think there is a bug currently where clicking on the Navbar does a complete refresh. This clears the state. There is a fix for this here - https://github.com/AnomalyInnovations/serverless-stack-com/issues/35#issuecomment-362173799. We'll be updating the tutorial with this soon.

That said, I think you'd probably need to save the shopping cart info in the browsers local storage. This is because a user might refresh the page and that'll wipe out your state.

asimdis0286 commented 6 years ago

@jayair Thanks for the reply. I will try to figure out a way to access the browsers local storage. Also, I will try the solution in issue #35.