diff --git a/.env b/.env new file mode 100644 index 000000000..a094f95df --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql +BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA \ No newline at end of file diff --git a/.env.example b/.env.example deleted file mode 100644 index 9dff2e5ea..000000000 --- a/.env.example +++ /dev/null @@ -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" \ No newline at end of file diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index f392a0890..b65d9498c 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -1,33 +1,34 @@ import React, { FunctionComponent } from "react"; -// import s from "./CartSidebarView.module.css"; +import { UserNav } from "@components/core"; import { Button } from "@components/ui"; import { Trash, Cross } from "@components/icon"; import { useUI } from "@components/ui/context"; const CartSidebarView: FunctionComponent = () => { - const { dispatch } = useUI(); + const { closeSidebar } = useUI(); return ( <>
-
-

- My Cart -

-
+
+ +
+

+ My Cart +

-
+
- + ); }; diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css new file mode 100644 index 000000000..3dd90ada2 --- /dev/null +++ b/components/core/UserNav/UserNav.module.css @@ -0,0 +1,10 @@ +.root { +} + +.list { + @apply flex flex-row items-center; +} + +.item { + @apply mr-6 cursor-pointer; +} diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx new file mode 100644 index 000000000..dd36cb5fe --- /dev/null +++ b/components/core/UserNav/UserNav.tsx @@ -0,0 +1,33 @@ +import cn from "classnames"; +import React, { FunctionComponent } from "react"; +import s from "./UserNav.module.css"; +import { Avatar } from "@components/core"; +import { Heart, Bag } from "@components/icon"; +import { useUI } from "@components/ui/context"; + +interface Props { + className?: string; +} + +const UserNav: FunctionComponent = ({ className }) => { + const rootClassName = cn(s.root, className); + const { openSidebar } = useUI(); + + return ( + + ); +}; + +export default UserNav; diff --git a/components/core/UserNav/index.ts b/components/core/UserNav/index.ts new file mode 100644 index 000000000..68149bc0c --- /dev/null +++ b/components/core/UserNav/index.ts @@ -0,0 +1 @@ +export { default } from "./UserNav"; diff --git a/components/core/index.ts b/components/core/index.ts index 3aab7b5ca..57d076f79 100644 --- a/components/core/index.ts +++ b/components/core/index.ts @@ -4,3 +4,4 @@ export { default as Footer } from "./Footer"; export { default as Layout } from "./Layout"; export { default as Navbar } from "./Navbar"; export { default as Searchbar } from "./Searchbar"; +export { default as UserNav } from "./UserNav"; diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index a74da8026..081198e3f 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -11,12 +11,12 @@ const Sidebar: FunctionComponent = ({ className, children }) => { const rootClassName = cn(s.root, className); return (
-
+
-
{children}
+ {children}
diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 9b1a1ede4..44dc1b587 100644 --- a/components/ui/context.tsx +++ b/components/ui/context.tsx @@ -1,13 +1,42 @@ -import React, { Context, FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; + +export interface UIState { + displaySidebar: boolean; + openSidebar: () => {}; + closeSidebar: () => {}; +} const initialState = { displaySidebar: false, - dispatch: null, + openSidebar: null, + closeSidebar: null, +}; + +export const UIContext = React.createContext(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 ; +}; + +export const useUI = () => { + const context = React.useContext(UIContext); + if (context === undefined) { + throw new Error(`useUI must be used within a UIProvider`); + } + return context; }; -export interface UIState { - displaySidebar: boolean; - dispatch: (string) => void; -} function uiReducer(state, action) { switch (action) { @@ -25,23 +54,3 @@ function uiReducer(state, action) { } } } - -export const UIContext = React.createContext(initialState); -UIContext.displayName = "UIContext"; - -export const UIProvider: FunctionComponent = (props) => { - const [state, dispatch] = React.useReducer(uiReducer, initialState); - const value = { - ...state, - dispatch, - }; - return ; -}; - -export const useUI = () => { - const context = React.useContext(UIContext); - if (context === undefined) { - throw new Error(`useUI must be used within a UIProvider`); - } - return context; -}; diff --git a/lib/commerce-api.ts b/lib/commerce-api.ts new file mode 100644 index 000000000..e2288f197 --- /dev/null +++ b/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, +});