forked from crowetic/commerce
Adding context
This commit is contained in:
parent
1de43d9074
commit
b770f4b746
@ -4,6 +4,8 @@ import s from "./Layout.module.css";
|
|||||||
import { Navbar, Featurebar } from "@components/core";
|
import { Navbar, Featurebar } from "@components/core";
|
||||||
import { Container, Sidebar } from "@components/ui";
|
import { Container, Sidebar } from "@components/ui";
|
||||||
import { CartSidebarView } from "@components/cart";
|
import { CartSidebarView } from "@components/cart";
|
||||||
|
import { useUI } from "@components/ui/context";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string;
|
className?: string;
|
||||||
children?: any;
|
children?: any;
|
||||||
@ -11,6 +13,7 @@ interface Props {
|
|||||||
|
|
||||||
const Layout: FunctionComponent<Props> = ({ className, children }) => {
|
const Layout: FunctionComponent<Props> = ({ className, children }) => {
|
||||||
const rootClassName = cn(s.root, className);
|
const rootClassName = cn(s.root, className);
|
||||||
|
// const { displaySidebar } = useUI();
|
||||||
return (
|
return (
|
||||||
<Container className={rootClassName}>
|
<Container className={rootClassName}>
|
||||||
<Featurebar
|
<Featurebar
|
||||||
@ -19,9 +22,11 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
|
|||||||
/>
|
/>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<main className="h-screen">{children}</main>
|
<main className="h-screen">{children}</main>
|
||||||
{/* <Sidebar>
|
{/* {displaySidebar && (
|
||||||
<CartSidebarView />
|
<Sidebar>
|
||||||
</Sidebar> */}
|
<CartSidebarView />
|
||||||
|
</Sidebar>
|
||||||
|
)} */}
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
46
components/ui/context.tsx
Normal file
46
components/ui/context.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import React, { Context, FunctionComponent } from "react";
|
||||||
|
|
||||||
|
export interface ContextType {
|
||||||
|
displaySidebar: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
displaySidebar: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
function uiReducer(state, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case "OPEN_SIDEBAR": {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displaySidebar: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case "CLOSE_SIDEBAR": {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displaySidebar: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UIContext = React.createContext<ContextType>(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;
|
||||||
|
};
|
@ -1,9 +1,13 @@
|
|||||||
import "@assets/global.css";
|
import "@assets/global.css";
|
||||||
|
import React from "react";
|
||||||
|
import { UIProvider } from "@components/ui/context";
|
||||||
|
|
||||||
export default function MyApp({ Component, pageProps }) {
|
export default function MyApp({ Component, pageProps }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Component {...pageProps} />
|
<UIProvider>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</UIProvider>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user