Abstracted header into component, removed unneccessary comments and i…

…mports
chec · Mar 7, 2021 · 36cd904 · 36cd904
1 parent 4718008
commit 36cd904
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 235 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,9 +35,9 @@ import { LoadingProvider } from "./context/loading";
 import Loading from "./components/global/Loading";
 
 if (isPlatform("desktop")) {
- // setupConfig({
- //  mode: "ios",
- // });
+ setupConfig({
+ mode: "ios",
+ });
 }
 
 const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

diff --git a/src/components/global/Header.tsx b/src/components/global/Header.tsx
@@ -0,0 +1,63 @@
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonHeader,
+ IonTitle,
+ IonToolbar,
+} from "@ionic/react";
+import { useHistory } from "react-router";
+
+export const Header = ({
+ hasBackButton = false,
+ backButton = undefined,
+ hasCartButton = false,
+ hasTitleImage = true,
+ large = false,
+ toolbarClassName = "",
+}) => {
+ const history = useHistory();
+ return (
+ <IonHeader collapse={large ? "condense" : undefined}>
+ <IonToolbar className={toolbarClassName}>
+ {hasBackButton && (
+ <>
+ {backButton !== undefined ? (
+ <>{backButton}</>
+ ) : (
+ <IonButtons slot="start">
+ <IonBackButton defaultHref="/" />
+ </IonButtons>
+ )}
+ </>
+ )}
+ <IonTitle size={large ? "large" : "small"}>
+ {hasTitleImage && (
+ <img
+ src="assets/chopchop.svg"
+ height="28px"
+ width="144px"
+ alt="Chop Chop"
+ />
+ )}
+ </IonTitle>
+ {hasCartButton && (
+ <IonButtons slot="end">
+ <IonButton
+ onClick={(e) => {
+ history.push("/cart");
+ }}
+ >
+ <img
+ src="assets/cart.svg"
+ height="28px"
+ width="44px"
+ alt="Cart"
+ />
+ </IonButton>
+ </IonButtons>
+ )}
+ </IonToolbar>
+ </IonHeader>
+ );
+};
diff --git a/src/pages/cart/Cart.tsx b/src/pages/cart/Cart.tsx
@@ -1,23 +1,10 @@
-import {
- IonBackButton,
- IonButtons,
- IonContent,
- IonFooter,
- IonGrid,
- IonHeader,
- IonItem,
- IonLabel,
- IonList,
- IonPage,
- IonRow,
- IonTitle,
- IonToolbar,
-} from "@ionic/react";
+import { IonContent, IonFooter, IonList, IonPage } from "@ionic/react";
 import Commerce from "@chec/commerce.js";
 import { useEffect, useState } from "react";
 import { useHistory } from "react-router";
 import "./Cart.css";
 import { CartItem } from "../../components/cart/item";
+import { Header } from "../../components/global/Header";
 
 const Cart: React.FC = () => {
  const [cart, setCart] = useState(null);
@@ -60,21 +47,7 @@ const Cart: React.FC = () => {
 
  return (
  <IonPage>
- <IonHeader>
- <IonToolbar className="cart-header">
- <IonButtons slot="start">
- <IonBackButton />
- </IonButtons>
- <IonTitle>
- <img
- src="assets/chopchop.svg"
- height="28px"
- width="144px"
- alt="Chop Chop"
- />
- </IonTitle>
- </IonToolbar>
- </IonHeader>
+ <Header hasBackButton={true} toolbarClassName="cart-header" />
  <IonContent fullscreen className="cart">
  <IonList className="cart-items" lines="none">
  {cart &&
@@ -87,49 +60,6 @@ const Cart: React.FC = () => {
  incrementQuantity={() => increaseQuantity(item)}
  removeItem={() => removeItem(item)}
  />
- {/* <IonItem key={item.id}>
- {item.media && (
- <img
- src={item.media.source}
- className="item-image"
- alt=""
- />
- )}
- <IonLabel className="ion-align-self-end item-name">
- {item.name}
- </IonLabel>
- <div className="ion-align-self-end">
- <IonGrid slot="end">
- <IonRow className="item-price">
- {item.line_total.formatted_with_symbol}
- </IonRow>
- <IonRow className="item-quantity">
- <span className="label">Quantity: </span>
- <button
- onClick={(e) => decreaseQuantity(item)}
- className="action cart-button hover"
- >
- -
- </button>{" "}
- <span className="amount">{item.quantity} </span>
- <button
- onClick={(e) => increaseQuantity(item)}
- className="action cart-button hover"
- >
- +
- </button>
- </IonRow>
- <IonRow className="item-actions">
- <button
- onClick={(e) => removeItem(item)}
- className="cart-button"
- >
- Remove
- </button>
- </IonRow>
- </IonGrid>
- </div>
- </IonItem> */}
  <hr />
  </div>
  );

diff --git a/src/pages/cart/CartPayment.tsx b/src/pages/cart/CartPayment.tsx
@@ -1,15 +1,10 @@
 import {
- IonBackButton,
- IonButtons,
  IonCol,
  IonContent,
  IonFooter,
  IonGrid,
- IonHeader,
  IonPage,
  IonRow,
- IonTitle,
- IonToolbar,
 } from "@ionic/react";
 import {
  CardNumberElement,
@@ -25,6 +20,7 @@ import FormInput from "../../components/form/input";
 import FormCheckbox from "../../components/form/checkbox";
 import AddressFields from "../../components/cart/address";
 import { useLoader } from "../../context/loading";
+import { Header } from "../../components/global/Header";
 
 interface CartPaymentPageProps
  extends RouteComponentProps<{
@@ -241,21 +237,7 @@ const CartPayment: React.FC<CartPaymentPageProps> = ({
 
  return (
  <IonPage>
- <IonHeader>
- <IonToolbar className="cart-header">
- <IonButtons slot="start">
- <IonBackButton />
- </IonButtons>
- <IonTitle>
- <img
- src="assets/chopchop.svg"
- height="28px"
- width="144px"
- alt="Chop Chop"
- />
- </IonTitle>
- </IonToolbar>
- </IonHeader>
+ <Header hasBackButton={true} toolbarClassName="cart-header" />
  <IonContent fullscreen className="cart">
  <FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(onSubmit)}>

diff --git a/src/pages/cart/CartShipping.tsx b/src/pages/cart/CartShipping.tsx
@@ -1,15 +1,10 @@
 import {
- IonBackButton,
- IonButtons,
  IonCol,
  IonContent,
  IonFooter,
  IonGrid,
- IonHeader,
  IonPage,
  IonRow,
- IonTitle,
- IonToolbar,
 } from "@ionic/react";
 import Commerce from "@chec/commerce.js";
 import { useEffect, useRef, useState } from "react";
@@ -18,6 +13,7 @@ import "./Cart.css";
 import { useForm, FormProvider } from "react-hook-form";
 import FormRadio from "../../components/form/radio";
 import AddressFields from "../../components/cart/address";
+import { Header } from "../../components/global/Header";
 
 interface CartShippingPageProps
  extends RouteComponentProps<{
@@ -167,21 +163,7 @@ const CartShipping: React.FC<CartShippingPageProps> = ({ match }) => {
 
  return (
  <IonPage>
- <IonHeader>
- <IonToolbar className="cart-header">
- <IonButtons slot="start">
- <IonBackButton />
- </IonButtons>
- <IonTitle>
- <img
- src="assets/chopchop.svg"
- height="28px"
- width="144px"
- alt="Chop Chop"
- />
- </IonTitle>
- </IonToolbar>
- </IonHeader>
+ <Header hasBackButton={true} toolbarClassName="cart-header" />
  <IonContent fullscreen className="cart">
  <FormProvider {...methods}>
  <form ref={form} onSubmit={methods.handleSubmit(onSubmit)}>

diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -1,21 +1,11 @@
-import {
- IonButton,
- IonButtons,
- IonCol,
- IonContent,
- IonGrid,
- IonHeader,
- IonPage,
- IonRow,
- IonTitle,
- IonToolbar,
-} from "@ionic/react";
+import { IonCol, IonContent, IonGrid, IonPage, IonRow } from "@ionic/react";
 import "./Home.css";
 import Commerce from "@chec/commerce.js";
 import { useEffect, useState } from "react";
 import ProductCard from "../../components/product/product-card/ProductCard";
 import { Footer } from "../../components/global/Footer";
 import { RouteComponentProps } from "react-router";
+import { Header } from "../../components/global/Header";
 
 const Home: React.FC<RouteComponentProps> = ({ history }) => {
  const [products, setProducts] = useState([]);
@@ -29,38 +19,9 @@ const Home: React.FC<RouteComponentProps> = ({ history }) => {
 
  return (
  <IonPage>
- <IonHeader>
- <IonToolbar>
- <IonTitle>
- <img
- src="assets/chopchop.svg"
- height="28px"
- width="144px"
- alt="Chop Chop"
- />
- </IonTitle>
- <IonButtons slot="end">
- <IonButton
- onClick={(e) => {
- history.push("/cart");
- }}
- >
- <img
- src="assets/cart.svg"
- height="28px"
- width="44px"
- alt="Cart"
- />
- </IonButton>
- </IonButtons>
- </IonToolbar>
- </IonHeader>
+ <Header hasCartButton={true} />
  <IonContent fullscreen>
- <IonHeader collapse="condense">
- <IonToolbar>
- <IonTitle size="large"></IonTitle>
- </IonToolbar>
- </IonHeader>
+ <Header large={true} hasTitleImage={false} />
  <IonGrid className="home">
  <IonRow>
  <IonCol className="ion-hide-md-up">