import { useEffect, useRef, useCallback } from 'react';
import { useBus, useComposite } from 'react-busser';

export const useDropdownCore = (
  items = [],
  key,
  dropDownEventName = "combobox:change",
  toggleClassName = "show-list"
) => {
  const itemsCopy = items.slice(0);
  const  [bus] = useBus({
    fires: [dropDownEventName],
    subscribes: []
  }, key);
  const dropdownRef = useRef(new Map()).current;
  const [composite, handleUpdatesFactory] = useComposite(
    "__dropdown:menu:change",
    (prevComposite, nextComposite) => {
      return {
        ...prevComposite,
        ...nextComposite
      }
    },
    {
      selectedIndex: -1,
      selectedItem: null
    },
    key
  );

  useEffect(() => {
    /* @HINT: Trigger single/stream braodcast in the cascade chain */
    bus.emit(dropDownEventName, { composite, key });
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
  }, [bus, composite.selectedIndex, dropDownEventName, key]);

  const onSelectedItemChange = handleUpdatesFactory("__dropdown:menu:change");

  const handleKeys = useCallback(() => undefined, []);

  const toggleOpenState = useCallback(() => {
    const dropdownListNode = dropdownRef.get(key);

    if (dropdownListNode) {
      dropdownListNode.classList.toggle(toggleClassName);
    }
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
  }, [key])

  const setSelectedItem = useCallback((index) => {
    const dropdownListNode = dropdownRef.get(key);

    if (dropdownListNode) {
      dropdownListNode.classList.remove(toggleClassName);
    }

    onSelectedItemChange({
      selectedIndex: index,
      selectedItem: itemsCopy[index]
    });
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
  }, [key, itemsCopy.map(item => (item.id || item.value || item.text)).join('|')]);

  return {
    composite,
    handleKeys,
    dropdownRef,
    toggleOpenState,
    setSelectedItem
  };
};

import React, { useEffect } from "react";
import pick from "lodash.pick";

import { useDropdownCore } from "./hooks";

const hasChildren = (children, count) => {
  const childCount = React.Children.count(children);
  return childCount === count;
};

const Trigger = ({
  as: Component = "input",
  children,
  className,
  style,
  ...props
}) => {
  const getLabelText = (selectedItem, defaultText, children) => {
    const noChild = hasChildren(children, 0);

    if (!noChild) {
      if (selectedItem) {
        return selectedItem?.text || "<unknown>";
      }
      return children || defaultText;
    }

    return selectedItem
      ? selectedItem?.text || "<unknown>"
      : defaultText || "Select an item...";
  };

  return (
    <>
    <Component
      tabIndex={0}
      key={props.placeholder}
      onClick={() => props.onTriggerClick()}
      className={className}
      role={props.type === "button" ? "button" : "combobox"}
      aria-expanded={props.type !== "button" ? "false" : undefined}
      style={style}
      id={props.placeholder}
      {...props}
    >
      {props.type === "button" ? getLabelText(
        props.composite.selectedItem,
        props.placeholder,
        children
      ) : null}
    </Component>
    {props.type === "text" ? <span aria-hidden="true" data-trigger="multiselect"></span> : null}
    </>
  );
};

const ListItem = ({
  as: Component = "li",
  children,
  className,
  style,
  ...props
}) => {
  return (
    <Component className={className} style={style} role="listitem" {...props}>
      {children}
    </Component>
  );
};

const List = ({
  as: Component = "ul",
  children,
  className,
  style,
  render,
  items,
  ...props
}) => {
  const noChild = hasChildren(children, 0);
  return (items.length > 0 ? (
    <Component
      className={className}
      style={style}
      role="listbox"
      ref={props.innerRef}
      items={Component === "ul" || Component == "ol" ? undefined : items}
      composite={Component === "ul" || Component == "ol" ? undefined : props.composite}
      onClick={Component === "ul" || Component == "ol" ? undefined : ('onListItemClick' in props) && props.onListItemClick || undefined}
    >
      {noChild
        ? items.map((item, index) => (
            <ListItem
              key={String((item.id || item.text) + "_" + index)}
              selected={index === props.composite.selectedIndex}
              onClick={() => ('onListItemClick' in props) ? props.onListItemClick(index) : undefined}
            >
              {
                typeof render === "function"
                ? render(item, index === props.composite.selectedIndex)
                : item.text
              }
            </ListItem>
          ))
        : children({
          items,
          composite: props.composite,
          onClick: ('onListItemClick' in props) && props.onListItemClick || undefined
        })
      }
    </Component>
    ) : null
  );
};

const Dropdown = ({
  items = [],
  placeholder = "",
  onChange = () => undefined,
  tabIndex,
  name,
  id,
  className,
  children
}) => {
  const isSubChild = (child, tag) =>
    React.isValidElement(child) && String(child?.type).includes(tag);

  const renderChildren = (children, extraChildProps) => {
    const oneChild = hasChildren(children, 1);
    const noChild = hasChildren(children, 0);

    if (noChild || oneChild) {
      console.error("[Error]: <Dropdown /> requires no less than 2 valid children; <Dropdown.Trigger /> and <Dropdown.List />");
      return null;
    }

    const childrenList = React.Children.toArray(children);

    if (typeof children === "object") {
      if (children !== null && Array.isArray(childrenList)) {
        return childrenList.map((child) => {
          if (!("props" in child)) {
            return null;
          }

          switch (true) {
            case isSubChild(child, "Trigger"):
              return React.cloneElement(
                child,
                pick(extraChildProps, [
                  "onTriggerClick",
                  "placeholder",
                  "composite"
                ])
              );

            case isSubChild(child, "List"):
              return React.cloneElement(
                child,
                Object.assign(
                  {},
                  pick(extraChildProps, [
                  "items",
                  "onListItemClick",
                  "composite"
                ]), {
                  innerRef: (node) => {
                    return !node
                      ? extraChildProps.dropdownRef.delete(id)
                      : extraChildProps.dropdownRef.set(id, node);
                  }
                })
              );

            default:
              return React.isValidElement(child) ? child : null;
          }
        });
      }
    }

    return null;
  };

  const {
    composite,
    toggleOpenState,
    dropdownRef,
    handleKeys,
    setSelectedItem
  } = useDropdownCore(items, id, "$__dropdown:change:braodcast");

  useEffect(() => {
    if (composite.selectedIndex !== -1) {
      onChange(composite.selectedItem);
    }
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
  }, [composite.selectedIndex]);

  return (
    <div name={name} id={id} tabIndex={tabIndex} onKeyDown={handleKeys} className={className} role="group">
      {renderChildren(children, {
        items,
        placeholder,
        onTriggerClick: toggleOpenState,
        onListItemClick: setSelectedItem,
        composite,
        dropdownRef
      })}
    </div>
  );
};

Dropdown.Trigger = Trigger;
Dropdown.List = List;
Dropdown.ListItem = ListItem;

const DropdownEvent = {
  DROPDOWN_CHANGE_BROADCAST: "$__dropdown:change:braodcast"
};

export { Dropdown, DropdownEvent };

import  React, { useState, useEffect } from 'react';
import { Dropdown, event } from './components/Dropdown';
import './styles.css';

import { useBus } from 'react-busser';

export function DropdownBoard () {
  const getOrdinalSuffix = (num = 0, asWord = false) => {
    let ordinal = "th";

    if (num % 10 === 1 && num % 100 !== 11) {
      ordinal = "st";
    }
    else if (num % 10 === 2 && num % 100 !== 12) {
      ordinal = asWord ? "ond" : "nd";
    }
    else if (num % 10 === 3 && num % 100 !== 13) {
      ordinal = "rd";
    }

    return !num && num !== 0 ? '' : ordinal;
  };

  const getNumbering = (num = 0, asWord = false) => {
    const tens = [
      "zero",
      "fir",
      "sec",
      "thi",
      "four",
      "fif",
      "six",
      "seven",
      "eig",
      "nin",
      "ten",
      "eleven",
      "twelv",
      "thirteen",
      "fourteen",
      "fifteen",
      "sixteen",
      "seventeen",
      "eighteen",
      "nineteen"
    ];
    const hundreds = [
      "",
      "",
      "twentee",
      "thirtee",
      "fortee",
      "fifthee",
      "sixtee",
      "seventee",
      "eigh",
      "nine"
    ];

    if ((num.toString()).length > 9) {
      return "overflow";
    }
      
    const numString = ("000000000" + num).substr(
      -9
    ).match(
      /^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/
    );
      
    if (!numString) {
      return ""; 
    }

    const [ , first, second, third, fourth, fifth ] = numString;
      
    let numberingString = "";

    numberingString += (Number(first) !== 0) ? (tens[Number(first)] || hundreds[Number(first[0])] + " " + tens[Number(first[1])]) + "crore " : "";
    numberingString += (Number(second) !== 0) ? (tens[Number(second)] || hundreds[Number(second[0])] + " " + tens[Number(second[1])]) + "lakh " : "";
    numberingString += (Number(third) !== 0) ? (tens[Number(third)] || hundreds[Number(third[0])] + " " + tens[Number(third[1])]) + "thousand " : "";
    numberingString += (Number(fourth) !== 0) ? (tens[Number(fourth)] || hundreds[Number(fourth[0])] + " " + tens[Number(fourth[1])]) + "hundred " : "";
    numberingString += (Number(fifth) !== 0) ? ((numberingString !== "") ? "and " : "") + (tens[Number(fifth)] || hundreds[Number(fifth[0])] + " " + tens[Number(fifth[1])]) + getOrdinalSuffix(num, asWord) : "";
    
    return numberingString;
  };
  const [dropDownDetails, setDropDownDetails] = useState(() => ({
    key: "__dropdownId_32049",
    composite: { seletedIndex: -1, selectedItem: null }
  }));
  const [ bus ] = useBus({
    fires: [],
    subscribes: [event.DROPDOWN_CHANGE_BROADCAST]
  });

  useEffect(() => {
    const callBack = ({ key, composite }) => {
      setDropDownDetails((prevDropDownDetails) => {
        switch (true) {
          case key === dropDownDetails.key:
            return {
              ...prevDropDownDetails,
              composite
            };
          default:
            return prevDropDownDetails;
        }
      });
    };
  
    bus.on(event.DROPDOWN_CHANGE_BROADCAST, callBack);

    return () => {
      bus.off(callBack);
    }
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
  }, [dropDownDetails.key, bus]);

  return (
    <div>
      Dropdown Component with key =
      {dropDownDetails.key} 
      was changed to 
      {dropDownDetails.composite.selectedIndex === -1
        ? "an unknown"
        : `the ${getNumbering(dropDownDetails.composite.selectedIndex + 1, true)}`}
      value
    </div>
  )
}

export function Dropdowns() {
  return (
    <div className="AppDropdown">
      <Dropdown
        className="dropdown"
        onChange={() => {
          console.log("hello");
        }}
        id={"__dropdownId_95014"}
        items={[{ text: "Apple" }, { text: "Orange" }]}
        placeholder="Select a fruit >"
      >
        <Dropdown.Trigger className="dropdown-trigger" />
        <Dropdown.List
          className="dropdown-list"
          render={(itemNode, selected) => {
            return (
              <span style={selected ? { color: "red" } : undefined}>
                {itemNode.text}
              </span>
            );
          }}
        />
      </Dropdown>

      <Dropdown
        className="dropdown"
        onChange={(selectedItem) => {
          console.log("hello", selectedItem);
        }}
        id={"__dropdownId_32049"}
        items={[{ text: "Apple" }, { text: "Orange" }, { text: "Grape" }, { text: "Mango" }]}
        placeholder="HelloWorld"
      >
        <Dropdown.Trigger className="dropdown-trigger-ns">
          {"Select any sweet fruit:"}
        </Dropdown.Trigger>
        <Dropdown.List
          className="dropdown-list"
          as={({ items, composite, onClick, ...props }) => {
            return (
              composite.isOpen && (
                <ol {...props}>
                  {items.map((item, index) => {
                    return (
                      <li
                        key={String(index)}
                        data-selected={index === composite.selectedIndex}
                        onClick={() => (onClick ? onClick(index) : undefined)}
                      >
                        {item.text}
                      </li>
                    );
                  })}
                </ol>
              )
            );
          }}
        />
        </Dropdown>
    </div>
  );
}

import React, { useCallback } from "react";
import { useSharedState } from "react-busser";

/* @USAGE: */

const TodosComponent = () => {
  const [sharedState, setSharedState] = useSharedState();
  
  const handleClick = () => {
    setSharedState({
      slice: "list",
      value: [1,2,3]
    });
  };
  
  return <div onClick={handleClick}>{String(sharedState.list)} CLICK ME!</div>
}

export default TodosComponent;

import { useEffect, useCallback } from "react";
import { useBus, useList, useBrowserStorage, useSharedState } from "react-busser";

const EVENTS = {
  UNSET_CART: "unset:cart",
  ADD_TO_CART: "add:shopping:cart:item",
  REMOVE_FROM_CART: "remove:shopping:cart:item",
  EMPTY_CART: "empty:shopping:cart",
  INCREASE_CART_ITEM_QUANTITY_COUNT: "increment_quantity:shopping:cart:item",
  DECREASE_CART_ITEM_QUANTITY_COUNT: "decrement_quantity:shopping:cart:item",
  SET_CART_UPDATES: "set:shopping:cart:updates",
  RESET_CART_UPDATES: "reset:shopping:cart:updates",
  TRIGGER_EMPTY_CART: "shadow;empty:cart",
  TRIGGER_INCREASE_CART_ITEM_QUANTITY_COUNT: "shadow;increment:cart:item:quantity"
};


export const useCart = (
  initial,
  name,
  {
    maximumCartSize,
    itemPropForIdentity,
    itemPropForPrice,
    itemPropForQuantity
  },
  bus
) => {
  const { getFromStorage, setToStorage } = useBrowserStorage({ storageType: "local" });
  const cartReducer = (prevList, { productItem, quantityValue }, event) => {
    let nextList = prevList.slice(0);
    const index = prevList.findIndex(
      (listItem) =>
        productItem && listItem[itemPropForIdentity] === productItem[itemPropForIdentity]
    );
    /* @HINT: Clone the product item so we can create a cart item out of it */
    const cartItem =
      ("structuredClone" in window)
        ? window.structuredClone(productItem)
        : JSON.parse(JSON.stringify(productItem));

    const quantity = cartItem[itemPropForQuantity];
    const price = cartItem[itemPropForPrice];
    const calculateUniqueItemsCount = prevList.length;

    switch (event) {
      case EVENTS.ADD_TO_CART:
        if (calculateUniqueItemsCount > maximumCartSize) {
          throw new Error("useCart[Error]: maximum cart size exceeded!");
        }

        if (!quantity || typeof quantity !== "number") {
          cartItem[itemPropForQuantity] = quantityValue || 1;
        }

        nextList = nextList.concat([cartItem]);
        break;
      case EVENTS.REMOVE_FROM_CART:
        nextList.splice(index, 1);
        break;
      case EVENTS.INCREASE_CART_ITEM_QUANTITY_COUNT:
        if (typeof cartItem[itemPropForQuantity] !== "number") {
          thorw new Error("useCart[Error]: cart item has no quanity to increment");
        }

        ++cartItem[itemPropForQuantity];
        nextList.splice(index, 1, cartItem);
        break;
      case EVENTS.DECREASE_CART_ITEM_QUANTITY_COUNT:
        if (typeof cartItem[itemPropForQuantity] !== "number") {
          thorw new Error("useCart[Error]: cart item has no quanity to decrement");
        }

        --cartItem[itemPropForQuantity];
        nextList.splice(index, 1, cartItem);
        break;
      case EVENTS.UNSET_CART:
        /* @HINT: reset the cart state back to its initial state */
        nextList = initial;
        break;
      default:
        /* @HINT: this default case deals with EVENTS.EMPTY_CART event*/
        nextList = [];
        break;
    }

    return nextList;
  };

  const [cartList, ...rest] = useList(
    [
      EVENTS.UNSET_CART,
      EVENTS.ADD_TO_CART,
      EVENTS.REMOVE_FROM_CART,
      EVENTS.INCREASE_CART_ITEM_QUANTITY_COUNT,
      EVENTS.DECREASE_CART_ITEM_QUANTITY_COUNT,
      EVENTS.EMPTY_CART
    ],
    cartReducer,
    getFromStorage(name, initial),
    name
  );

  useEffect(() => {
    let eventName = EVENTS.SET_CART_UPDATES;

    if (cartList.length === 0) {
      eventName = EVENTS.RESET_CART_UPDATES;
    }

    const wasSaved = setToStorage(name, cartList.slice(0));

    if (wasSaved) {
      /* @HINT: Trigger single/stream braodcast in the cascade chain */
      bus.emit(eventName, cartList.slice(0));
    }
  }, [bus, (cartList.map((cart) => cart[itemPropForIdentity]).join('|'))]);

  return [cartList, ...rest];
};





/* At this point, it's time to create a hook that houses our business logic for managing a shopping cart */

export const useCartManager = (initial = [], name) => {
  const [ cartConfig ] = useSharedState("cartConfig");
  const { itemPropForIdentity } = cartConfig;

  /* @EXAMPLE:

  cartConfig = {
    maximumCartSize = 20,
    itemPropForIdentity = "id",
    itemPropForPrice = "price",
    itemPropForQuantity = "qty"
  }

  */

   /* @HINT: Setup event bus for triggering broadcasts for the `useCart()` hook */
  const [ bus ] = useBus(
    {
      fires: [EVENTS.SET_CART_UPDATES, EVENTS.RESET_CART_UPDATES],
      subscribes: [EVENTS.TRIGGER_EMPTY_CART, EVENTS.TRIGGER_INCREASE_CART_ITEM_QUANTITY_COUNT]
    },
    name
  );
  const [cartList, cartListUpdateFactory] = useCart(
    initial,
    name,
    cartConfig,
    bus
  );

  const argumentsTransformFactory = (quantityValue) => (product) => ({
    productItem: product,
    quantityValue
  });

  const addItemToCart = cartListUpdateFactory(
    EVENTS.ADD_TO_CART,
    argumentsTransformFactory(1)
  );
  const addItemToCartDoubleQuantity = cartListUpdateFactory(
    EVENTS.ADD_TO_CART,
    argumentsTransformFactory(2)
  );
  const removeItemFromCart = cartListUpdateFactory(
    EVENTS.REMOVE_FROM_CART,
    argumentsTransformFactory()
  );
  const emptyCart = cartListUpdateFactory(EVENTS.EMPTY_CART);
  const incrementCartItemQuantity = cartListUpdateFactory(
    EVENTS.INCREASE_CART_ITEM_QUANTITY_COUNT,
    argumentsTransformFactory()
  );
  const decrementCartItemQuantity = cartListUpdateFactory(
    EVENTS.DECREASE_CART_ITEM_QUANTITY_COUNT,
    argumentsTransformFactory()
  );


  const cartLength = cartList.length;

  const isAddedToCartAlready = useCallback((product) => (Boolean(cartList.find((listItem) => {
    return listItem[itemPropForIdentity] === product[itemPropForIdentity]
  }))), [itemPropForIdentity, cartLength]);

  const clickCtaHandler = (product) => {
    return !isAddedToCartAlready(product)
      ? addItemToCart(product)
      : removeItemFromCart(product)
  }

  useEffect(() => {

    const emptyCartShadowHandler = () => emptyCart();
    const incrementCartQuantityShadowHandler = (product) => incrementCartItemQuantity(product);

    /* @NOTE: There are times where we want an action to be able to be triggered from multiple
        CTAs/button clicks/interactions on the UI instead of just one CTA/button click; In those 
        times we make use of #ShadowEvents: events that triggers another event on the cascade 
        of event(s) broadcasted
    */

    /* @HINT: Shadow events */

    bus.on(EVENTS.TRIGGER_EMPTY_CART, emptyCartShadowHandler);
    bus.on(EVENTS.TRIGGER_INCREASE_CART_ITEM_QUANTITY_COUNT, incrementCartQuantityShadowHandler);

    return () => {
      bus.off(emptyCartShadowHandler);
      bus.off(incrementCartQuantityShadowHandler);
    }
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
  }, []);

  return {
    emptyCart,
    addItemToCartDoubleQuantity,
    incrementCartItemQuantity,
    decrementCartItemQuantity,
    clickCtaHandler,
    isAddedToCartAlready,
  };
}

import { useEffect } from "react";
import { useComposite } from "react-busser";

const EVENTS = {
  UNSET_CART: "unset:cart",
  ADD_TO_CART: "add:shopping:cart:item",
  REMOVE_FROM_CART: "remove:shopping:cart:item",
  EMPTY_CART: "empty:shopping:cart",
  INCREASE_CART_ITEM_QUANTITY_COUNT: "increment_quantity:shopping:cart:item",
  DECREASE_CART_ITEM_QUANTITY_COUNT: "decrement_quantity:shopping:cart:item",
  SET_CART_UPDATES: "set:shopping:cart:updates",
  RESET_CART_UPDATES: "reset:shopping:cart:updates",
  TRIGGER_EMPTY_CART: "shadow;empty:cart",
  TRIGGER_INCREASE_CART_ITEM_QUANTITY_COUNT: "shadow;increment:cart:item:quantity"
};

export const useCartUpdates = (
  initial = {
    augumentedCartList: [],
    totalAmountInCartList: 0,
    totalQuantityInCartList: 0,
    totalCountInCartList: 0
  },
  name,
  { itemPropForPrice, itemPropForQuantity }
) => {
  const compositeReducer = (prevComposite, cartList, event) => {
    let nextComposite = { ...prevComposite };

    const calculateItemTotals = cartList.map((listItem) => ({
      ...listItem,
      itemTotal: listItem[itemPropForPrice] * listItem[itemPropForQuantity]
    }));

    const calculatedTotal = cartList.reduce(
      (total, listItem) =>
        total + listItem[itemPropForQuantity] * listItem[itemPropForPrice],
      0
    );

    const calculatedTotalItems = cartList.reduce(
      (sum, listItem) => sum + listItem[itemPropForQuantity],
      0
    );

    const calculateUniqueItemsCount = cartList.length;

    switch (event) {
      case EVENTS.SET_CART_UPDATES:
        nextComposite = {
          ...nextComposite,
          augumentedCartList: calculateItemTotals,
          totalAmountInCartList: calculatedTotal,
          totalQuantityInCartList: calculatedTotalItems,
          totalCountInCartList: calculateUniqueItemsCount
        };
        break;
      default:
        /* @HINT: this default case deals with EVENTS.RESET_CART_UPDATES event*/
        nextComposite = initial;
        break;
    }

    return nextComposite;
  };

  return useComposite(
    [EVENTS.SET_CART_UPDATES, EVENTS.RESET_CART_UPDATES],
    compositeReducer,
    initial,
    name
  );
};

import React from "react";
import { useCartManager } from "libs/hooks/cart";

import "./ProductList.css";

const EVENT_TAGS = {
  component: {
    PRODUCTLIST: "ProductList.component",
    PRODUCT: "Product.component",
    SHOPCARTCOUNTER: "ShopCartCounter.component",
    SHOPCARTCHECKOUT: "ShopCartCheckout.component",
  }
};

const ProductList = ({
  /* @NOTE: all list of products */
  products = [],
  /* @NOTE: logged-in users' shopping cart from last session */
  cart = []
}) => {

  /* @HINT: One-liner to manage a shopping cart 😊 */
  const { clickCtaHandler, isAddedToCartAlready } = useCartManager(
    cart,
    EVENT_TAGS.component.PRODUCTLIST
  );

  const getButtonActionTextForCartUpdates = (product) => {
    return isAddedToCartAlready(product) ? "Remove From Cart" : "Add To Cart"
  }

  return (
    <>
      {products.length === 0 ? (
        <p className={"products_empty_msg"}>No products found!</p>
      ) : (
         <ul className={"product_list"}>
            {products.map((product, index) => {
                return (
                  <li key={String(index)}>
                    <h4>{product.name}</h4>
                    <figure className={"product_display"}>
                      <img alt={product.image.description} src={product.image.source} />
                      <span>{product.price}</span>
                    </figure>
                      <div className={"product_call_to_action"}>
                        <button onClick={() => clickCtaHandler(product)}>
                          {getButtonActionTextForCartUpdates(product)}
                        </button>
                      </div>
                  </li>
                );
            })}
         </ul>
      )}
   </>
 );
}

const { useBus } = require('react-busser')

import React, { useState } from 'react'
import { useUIDataFetcher, useFetchBinder, usePromised, useUpon } from 'react-busser'

function LoginForm ({ title }) {

   const eventName = "request:start";

   const EVENT_TAGS = {
    component: {
      LOGINFORM: "LoginForm.component"
    }
  };

   const [ state, setState ] = useState({
     isSubmitting: false,
     formSubmitPayload: {
       email: '',
       password: ''
     }
   });

   const { connectToFetcher } = useUIDataFetcher({
      url: 'https://localhost:6700/api/login',
      customizePayload: (response) => {
         return (response.body || response).data
      }
   });
   const { fetchData, fetchError, boundFetcher } = useFetchBinder(connectToFetcher);

   const [ makeFormSubmitTrigger ] = usePromised(eventName, ({ payload }) => {
    return boundFetcher({
      method: 'POST',
      data: payload,
      metadata: { verb: 'post' }
    })
   }, EVENT_TAGS.component.LOGINFORM)

   const onInputChange = useUpon((event) => {
      setState({
        ...state,
        formSubmitPayload:{
          ...state.formSubmitPayload,
          [e.target.name]: event.target.value 
        }
      })
   });

   const submitFormWithPayload = makeFormSubmitTrigger(eventName, (state) => {
     return {
       payload: state.formSubmitPayload
     }
   })

   const handleFormSubmit = (e) => {
      e.preventDefault();
      submitFormWithPayload(state).then(() => {
        alert("All done!");
      })
   };

   return (
      <div>
         <h3>{title}</h3>
         <p>{state.isSubmitting ? 'Logging In…' : 'Login' }</p>
         <form onSubmit={handleFormSubmit}>
            <input name={"email"} type={"email"} value={state.formSubmitPayload.email} onChange={onInputChange} autoFocus />
            <input name={"password"} type={"password"} value={state.formSubmitPayload.password} onChange={onInputChange} />
            <button type={"submit"} disabled={state.isSubmitting}>Login</button>
         </form>
     </div>
  )
} 

export default LoginForm

import React, { useState, useEffect } from 'react';
import { useComposite } from 'react-busser';

function ToastPopup({ position, timeout }) {

   const EVENT_TAGS = {
     component: {
       TOASTPOPUP: "ToastPopup.component"
     }
   };

   const [ toastPopup, makeToastPopupCloseTrigger ] = useComposite(
      ['request:ended', 'toast:delete'],
      (prevComposite, { error, metatdata }, eventName) => {
         const listCopy = prevComposite.list.slice(0);
         let showCopy = prevComposite.show;

         switch (eventName) {
            case "request:ended":
               const struct = {
                  iconLink: null,
                  color: '',
                  message: '',
                  title: ''
               }

               struct.title = metadata.requestType
               struct.message = error !== null ? 'Request Failed' : 'Request Succeded'
               struct.color = error !== null ? 'red' :  'green'

               listCopy.unshift(struct);
               showCopy = true;
            break;
            case "toast:delete":
               delete listCopy[0];
               showCopy = false
            break;
         }

         return { list: listCopy, show: showCopy };
      },
      { list:[], show: false },
      EVENT_TAGS.component.TOASTPOPUP
   );


   const handleToastClose = makeToastPopupCloseTrigger('toast:delete', (event) => {
     if (event !== null) {
       event.stopPropagation();
     }

     return {
       error: null,
       metadata: {}
     };
   });

   useEffect(() => {
     const timerID = setTimeout(() => {
       handleToastClose(null)
     }, parseInt(timeout))

     return () => clearTimeout(timerId)

   /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);

   return (
      {!toastPopup.show 
        ? null 
        : <section className={`notification-container ${position}`}
           toastPopup.list.map(({ iconLink, title, message, color }) => (<div className={`notification toast ${color}`}>
             <button onClick={handleToastClose}>
               <strong>x</strong>
             </button>
             <div className="notification-icon-image">
               <img src={iconLink} alt="notification-icon" />
             </div>
             <div>
               <p className="notification-title">{title}</p>
               <p className="notification-message">{message}</p>
             </div>
           </div>
           )
         </section>   
   })
}

export default ToastPopup;