4
0
forked from crowetic/commerce

Adding UI Context

This commit is contained in:
Belen Curcio 2020-09-30 15:56:32 -03:00
parent 3dc2c16cea
commit 1af9a980df
6 changed files with 40 additions and 28 deletions

View File

@ -1,11 +1,11 @@
import React, { FunctionComponent } from "react"; import React, { FunctionComponent } from "react";
// import s from "./CartSidebarView.module.css"; // import s from "./CartSidebarView.module.css";
import { Button } from "@components/ui"; import { Button } from "@components/ui";
import { Trash } from "@components/icon"; import { Trash, Cross } from "@components/icon";
import { useUI } from "@components/ui/context";
interface Props {} const CartSidebarView: FunctionComponent = () => {
const { dispatch } = useUI();
const CartSidebarView: FunctionComponent<Props> = () => {
return ( return (
<> <>
<header className="px-4 py-6 sm:px-6 border-b border-gray-200"> <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@ -17,22 +17,11 @@ const CartSidebarView: FunctionComponent<Props> = () => {
</div> </div>
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
onClick={() => dispatch("CLOSE_SIDEBAR")}
aria-label="Close panel" aria-label="Close panel"
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150" className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
> >
<svg <Cross className="h-6 w-6" />
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button> </button>
</div> </div>
</div> </div>

View File

@ -13,7 +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(); const { displaySidebar } = useUI();
return ( return (
<Container className={rootClassName}> <Container className={rootClassName}>
<Featurebar <Featurebar
@ -22,11 +22,11 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
/> />
<Navbar /> <Navbar />
<main className="h-screen">{children}</main> <main className="h-screen">{children}</main>
{/* {displaySidebar && ( {displaySidebar && (
<Sidebar> <Sidebar>
<CartSidebarView /> <CartSidebarView />
</Sidebar> </Sidebar>
)} */} )}
</Container> </Container>
); );
}; };

View File

@ -4,6 +4,7 @@ import s from "./Navbar.module.css";
import { Logo, Container } from "@components/ui"; import { Logo, Container } from "@components/ui";
import { Avatar, Searchbar } from "@components/core"; import { Avatar, Searchbar } from "@components/core";
import { Heart, Bag } from "@components/icon"; import { Heart, Bag } from "@components/icon";
import { useUI } from "@components/ui/context";
interface Props { interface Props {
className?: string; className?: string;
children?: any; children?: any;
@ -11,6 +12,10 @@ interface Props {
const Navbar: FunctionComponent<Props> = ({ className }) => { const Navbar: FunctionComponent<Props> = ({ className }) => {
const rootClassName = cn(s.root, className); const rootClassName = cn(s.root, className);
const { dispatch } = useUI();
const handleCartClick = () => dispatch("OPEN_SIDEBAR");
return ( return (
<Container className={rootClassName}> <Container className={rootClassName}>
<Logo /> <Logo />
@ -23,7 +28,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
</nav> </nav>
</div> </div>
<nav className="flex flex-row items-center"> <nav className="flex flex-row items-center">
<Bag className="mr-6" /> <Bag className="mr-6" onClick={handleCartClick} />
<Heart className="mr-6" /> <Heart className="mr-6" />
<Avatar /> <Avatar />
</nav> </nav>

16
components/icon/Cross.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
const Cross = ({ ...props }) => {
return (
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
);
};
export default Cross;

View File

@ -1,3 +1,4 @@
export { default as Bag } from "./Bag"; export { default as Bag } from "./Bag";
export { default as Heart } from "./Heart"; export { default as Heart } from "./Heart";
export { default as Trash } from "./Trash"; export { default as Trash } from "./Trash";
export { default as Cross } from "./Cross";

View File

@ -1,15 +1,16 @@
import React, { Context, FunctionComponent } from "react"; import React, { Context, FunctionComponent } from "react";
export interface ContextType {
displaySidebar: boolean;
}
const initialState = { const initialState = {
displaySidebar: false, displaySidebar: false,
dispatch: null,
}; };
export interface UIState {
displaySidebar: boolean;
dispatch: (string) => void;
}
function uiReducer(state, action) { function uiReducer(state, action) {
switch (action.type) { switch (action) {
case "OPEN_SIDEBAR": { case "OPEN_SIDEBAR": {
return { return {
...state, ...state,
@ -19,13 +20,13 @@ function uiReducer(state, action) {
case "CLOSE_SIDEBAR": { case "CLOSE_SIDEBAR": {
return { return {
...state, ...state,
displaySidebar: true, displaySidebar: false,
}; };
} }
} }
} }
export const UIContext = React.createContext<ContextType>(initialState); export const UIContext = React.createContext<UIState>(initialState);
UIContext.displayName = "UIContext"; UIContext.displayName = "UIContext";
export const UIProvider: FunctionComponent = (props) => { export const UIProvider: FunctionComponent = (props) => {