yinonov

onLoad$ =  return this.auth.user$.pipe(
  take(1), // we only do this once as we only want to handle the initial load
  ...
);

yinonov

onLoad$ =  return this.auth.user$.pipe(
  take(1), // we only do this once as we only want to handle the initial load
  ...
);

yinonov

onLoad$ = this.auth.user$.pipe(
  take(1), // we only do this once as we only want to handle the initial load
  switchMap(user => !!user ? mergedCartStates$ : cartStateFromStorage$),
  // set the cart form with the retrieved state's value
  tap(setCartValue) // set the cart's form with emitted value
);

yinonov

cartChange$ = this.cartForm.valueChanges.pipe(
  skipUntil(this.onLoad$.pipe(last())), // wait until onLoad$ is done
  withLatestFrom(this.auth.user$),
  switchMap(([cart, user]) => !!user ? 
    saveCartToDb$(cart) : // switch to saving to database observable
    saveCartToStorage$(cart)) // switch to saving to storage observable
);

yinonov

userChange$ = this.auth.user$.pipe(
  skip(1), // skip the initial emit to let the onLoad$ do its verification first
);

cartReset$ = this.userChange$.pipe(
  filter((user: User) => !user),
  tap(() => this.setCartValue({ cartItems: [] })),
);

yinonov

const subscription = merge(
  this.cartChange$,
  this.cartReset$
).subscribe();

yinonov

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

yinonov

<div style="position: relative;">
  <vwc-textfield
    id="textfield"
    outlined
    list="menu"
    label="Choose browser"
  ></vwc-textfield>
  <vwc-menu id="menu">
    <vwc-list-item>Edge</vwc-list-item>
    <vwc-list-item>Firefox</vwc-list-item>

yinonov

@use 'sass:selector';
@use 'sass:list';
@use 'sass:map';


////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
$all-appearances: (
	filled: 'filled',
	outlined: 'outlined',