@sample-stack/counter-module-browser/lib/apollo-server-n-client/components/CounterView.js

Sample core for higher packages to depend on

import {jsxs,jsx}from'@emotion/react/jsx-runtime';import {Helmet}from'react-helmet';/**
 * @description Plain`CounterView` component without any data dependency.
 */
const CounterView = ({
  loading,
  counter,
  addCounter,
  counterState,
  addCounterState,
  onReduxIncrement,
  reduxCount,
  getCounterLoading,
  addCounterWs,
  getCounter,
  syncCachedCounter,
  cachedData
}) => {
  const renderMetaData = () => jsxs(Helmet, {
    children: [jsx("title", {
      children: "Counter"
    }), jsx("meta", {
      name: "description",
      content: "Counter example page"
    })]
  });
  if (loading) {
    return jsxs("div", {
      children: [renderMetaData(), jsx("div", {
        className: "text-center",
        children: "Loading Page..."
      })]
    });
  } else {
    return jsxs("div", {
      children: [renderMetaData(), jsxs("section", {
        children: [jsx("p", {
          children: `Current counter, is ${counter?.amount} and cached data. This is being stored
            server-side in the database and using Apollo subscription for real-time updates.`
        }), jsx("button", {
          id: "graphql-button",
          color: "primary",
          onClick: addCounter(1),
          children: "Click to increase counter"
        }), jsx("button", {
          id: "graphql-button",
          color: "primary",
          onClick: () => addCounterWs({
            variables: {
              amount: 1
            }
          }),
          children: "Click to increase counter via websocket"
        })]
      }), jsx("section", {
        children: jsxs("p", {
          children: ["Get Counter Cache", getCounterLoading ? "Loading Counter Data..." : cachedData ? jsxs("span", {
            style: {
              fontStyle: 'bold'
            },
            children: [" ", cachedData?.counterCache?.amount]
          }) : null, jsx("br", {}), jsx("button", {
            id: "get-cached-counter",
            onClick: () => getCounter(),
            children: "Click to get cached counter"
          }), jsx("button", {
            id: "sync-cached-counter",
            onClick: () => syncCachedCounter(),
            children: "Synch Counter with Cache"
          })]
        })
      }), jsxs("section", {
        children: [jsx("p", {
          children: `Current reduxCount, is ${reduxCount}. This is being stored client-side with Redux.`
        }), jsx("button", {
          id: "redux-button",
          color: "primary",
          onClick: onReduxIncrement(1),
          children: "Click to increase reduxCount"
        })]
      }), jsxs("section", {
        children: [jsx("p", {
          children: `Current apolloLinkStateCount, is ${counterState}. This is being stored client-side with Apollo Link State.`
        }), jsx("button", {
          id: "apollo-link-button",
          color: "primary",
          onClick: addCounterState(1),
          children: "Click to increase apolloLinkState"
        })]
      })]
    });
  }
};export{CounterView as default};//# sourceMappingURL=CounterView.js.map