From 7cf79cea9171005556edd3053e6324aebfa19eab Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 1 Oct 2020 09:26:22 -0300 Subject: [PATCH 1/3] UI Actions --- .env | 2 ++ .env.example | 7 ------ components/ui/context.tsx | 46 ++++++++++++++++++++++----------------- lib/commerce-api.ts | 9 ++++++++ 4 files changed, 37 insertions(+), 27 deletions(-) create mode 100644 .env delete mode 100644 .env.example create mode 100644 lib/commerce-api.ts diff --git a/.env b/.env new file mode 100644 index 000000000..0f8d44c86 --- /dev/null +++ b/.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 \ 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/ui/context.tsx b/components/ui/context.tsx index 9b1a1ede4..4074deb7a 100644 --- a/components/ui/context.tsx +++ b/components/ui/context.tsx @@ -9,6 +9,32 @@ export interface UIState { dispatch: (string) => void; } +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; +}; + function uiReducer(state, action) { switch (action) { case "OPEN_SIDEBAR": { @@ -25,23 +51,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, +}); From 0e4845176731fba06b20297b179b5789ddf6f5d2 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 1 Oct 2020 09:39:31 -0300 Subject: [PATCH 2/3] UI State added --- .env | 4 ++-- .../cart/CartSidebarView/CartSidebarView.tsx | 4 ++-- components/core/Navbar/Navbar.tsx | 6 ++---- components/ui/context.tsx | 17 ++++++++++------- 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/.env b/.env index 0f8d44c86..a094f95df 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ -NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql -NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA \ No newline at end of file +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/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index f392a0890..6a3a8ca10 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -5,7 +5,7 @@ import { Trash, Cross } from "@components/icon"; import { useUI } from "@components/ui/context"; const CartSidebarView: FunctionComponent = () => { - const { dispatch } = useUI(); + const { closeSidebar } = useUI(); return ( <>
@@ -17,7 +17,7 @@ const CartSidebarView: FunctionComponent = () => {
diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 4074deb7a..44dc1b587 100644 --- a/components/ui/context.tsx +++ b/components/ui/context.tsx @@ -1,15 +1,18 @@ -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 interface UIState { - displaySidebar: boolean; - dispatch: (string) => void; -} -export const UIContext = React.createContext(initialState); +export const UIContext = React.createContext(initialState); UIContext.displayName = "UIContext"; export const UIProvider: FunctionComponent = (props) => { From b447bbc3229141ef73617523536a929f4ef1460e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 1 Oct 2020 10:03:06 -0300 Subject: [PATCH 3/3] UI State changes --- .../cart/CartSidebarView/CartSidebarView.tsx | 15 +++++---- components/core/Layout/Layout.tsx | 10 +++--- components/core/Navbar/Navbar.tsx | 14 ++------ components/core/UserNav/UserNav.module.css | 10 ++++++ components/core/UserNav/UserNav.tsx | 33 +++++++++++++++++++ components/core/UserNav/index.ts | 1 + components/core/index.ts | 1 + components/ui/Sidebar/Sidebar.tsx | 4 +-- 8 files changed, 64 insertions(+), 24 deletions(-) create mode 100644 components/core/UserNav/UserNav.module.css create mode 100644 components/core/UserNav/UserNav.tsx create mode 100644 components/core/UserNav/index.ts diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 6a3a8ca10..b65d9498c 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -1,5 +1,5 @@ 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"; @@ -10,11 +10,6 @@ const CartSidebarView: FunctionComponent = () => { <>
-
-

- My Cart -

-
+
+ +
+

+ My Cart +

-
+
  • diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index aa22d3d52..fafc3b39a 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -15,19 +15,21 @@ const Layout: FunctionComponent = ({ className, children }) => { const rootClassName = cn(s.root, className); const { displaySidebar } = useUI(); return ( - +
    - -
    {children}
    + + +
    {children}
    +     {displaySidebar && ( )} - +
    ); }; diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index bee174068..4a8c2dd7b 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -2,18 +2,14 @@ import cn from "classnames"; import React, { FunctionComponent } from "react"; import s from "./Navbar.module.css"; import { Logo, Container } from "@components/ui"; -import { Avatar, Searchbar } from "@components/core"; -import { Heart, Bag } from "@components/icon"; -import { useUI } from "@components/ui/context"; +import { Searchbar } from "@components/core"; +import { UserNav } from "@components/core"; interface Props { className?: string; - children?: any; } const Navbar: FunctionComponent = ({ className }) => { const rootClassName = cn(s.root, className); - const { openSidebar } = useUI(); - return ( @@ -25,11 +21,7 @@ const Navbar: FunctionComponent = ({ className }) => { Accesories
- + ); }; 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}