StMotorSpark

function useMergeState(initialState) {
  const [state, setState] = useState(initialState);
  // use useRef to improve functionality when calling the setState asynchronously
  const stateRef = useRef(state);

  function setRefState(newState) {
      stateRef.current = newState;
      return setState(newState);
  }

StMotorSpark

function useDataHook() {
  const [dataState, setDataState] = useState({
    serverData: {},
    selections: {}
  });
  
  return dataState;
}

function useDisplayHook() {

StMotorSpark

function useBasicHook() {
  const [dataState, setDataState] = useState({
    serverData: {},
    selections: {}
  });
  const [viewState, setViewState] = useState({
    menuExpanded: false,
    submitFormData: {}
  })
  

StMotorSpark

function useBasicHook() {
  const [dataState, setDataState] = useState({
    serverData: {},
    selections: {}
  });
  const [viewState, setViewState] = useState({
    menuExpanded: false,
    submitFormData: {}
  })
  

StMotorSpark

function useAnimationState(children){
  const [animatedItems, setItems] = useState(null);
  const itemRef = useRef(animatedItems)
  const setAnimatedItems = (newState)=>{
    itemRef.current = newState;
    return setItems(newState);
  }
  const priorItem = useRef();
  
  function animationEnd(){

StMotorSpark

function MainDisplay(props){
  const [cardPos, setCardPos] = useState(0);
  
  var currentCard = <CardDisplay title={props.cards[cardPos].title} text={props.cards[cardPos].text} key={cardPos}/>;
  
  var nextButton = <button onClick={(event)=>{
          var nextPos = cardPos + 1;
          if(nextPos >= props.cards.length){
            nextPos = 0;
          }

StMotorSpark

function useAnimationState(children){
  const [animatedItems, setItems] = useState(null);
  const itemRef = useRef(animatedItems)
  var refUpdateProxy = {
    apply: (target, thisArg, argumentsList) =>{
      itemRef.current = argumentsList[0];
      return Reflect.apply(target, thisArg, argumentsList);
    }
  }
  const setAnimatedItems = new Proxy(setItems, refUpdateProxy)

StMotorSpark

@keyframes animateFadeIn {
  0%   {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {

StMotorSpark

function useAnimationState(children){
  const [animatedItems, setItems] = useState(null);
  
  function animationEnd(){
    // update the animatedItems to remove the first item
    setAnimatedItems(itemRef.current.slice(1));
  }
  
  useEffect(()=>{
    if(animatedItems == null){

StMotorSpark

@keyframes animateSlideOut {
  0%   {
    margin-left: 0px;
  }
  100% {
    margin-left: -325px;
  }
}

.slideOut {