UI Actions

.env

@@ -0,0 +1,2 @@
+NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql
+NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA

.env.example

@@ -1,7 +0,0 @@
-BIGCOMMERCE_STOREFRONT_API_URL=https://your-site.mybigcommerce.com/graphql
-BIGCOMMERCE_STOREFRONT_API_TOKEN=
-BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/xxxxxxxxxxx
-BIGCOMMERCE_STORE_API_CLIENT_ID=
-BIGCOMMERCE_STORE_API_SECRET=
-BIGCOMMERCE_STORE_API_TOKEN=
-BIGCOMMERCE_TOKEN_SECRET="this-is-a-secret-value-with-at-least-32-characters"

components/ui/context.tsx

@@ -9,6 +9,32 @@ export interface UIState {
   dispatch: (string) => void;
 }
 
+export const UIContext = React.createContext<UIState>(initialState);
+UIContext.displayName = "UIContext";
+
+export const UIProvider: FunctionComponent = (props) => {
+  const [state, dispatch] = React.useReducer(uiReducer, initialState);
+
+  const openSidebar = () => dispatch("OPEN_SIDEBAR");
+  const closeSidebar = () => dispatch("CLOSE_SIDEBAR");
+
+  const value = {
+    ...state,
+    openSidebar,
+    closeSidebar,
+  };
+
+  return <UIContext.Provider value={value} {...props} />;
+};
+
+export const useUI = () => {
+  const context = React.useContext(UIContext);
+  if (context === undefined) {
+    throw new Error(`useUI must be used within a UIProvider`);
+  }
+  return context;
+};
+
 function uiReducer(state, action) {
   switch (action) {
     case "OPEN_SIDEBAR": {
@@ -25,23 +51,3 @@ function uiReducer(state, action) {
     }
   }
 }
-
-export const UIContext = React.createContext<UIState>(initialState);
-UIContext.displayName = "UIContext";
-
-export const UIProvider: FunctionComponent = (props) => {
-  const [state, dispatch] = React.useReducer(uiReducer, initialState);
-  const value = {
-    ...state,
-    dispatch,
-  };
-  return <UIContext.Provider value={value} {...props} />;
-};
-
-export const useUI = () => {
-  const context = React.useContext(UIContext);
-  if (context === undefined) {
-    throw new Error(`useUI must be used within a UIProvider`);
-  }
-  return context;
-};

lib/commerce-api.ts

@@ -0,0 +1,9 @@
+import BigcommerceAPI from "./bigcommerce/api";
+
+const API_URL = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL!;
+const API_TOKEN = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN!;
+
+export const commerce = new BigcommerceAPI({
+  commerceUrl: API_URL,
+  apiToken: API_TOKEN,
+});