summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRafi Zadanly <rafizadanly@gmail.com>2022-12-22 15:29:18 +0700
committerRafi Zadanly <rafizadanly@gmail.com>2022-12-22 15:29:18 +0700
commit31d6352ab8855754ef18c01763d3c1b5a68de857 (patch)
treee9b7e67a994574b5b1ccc7c8ef805a899f561d3d
parent7ca4c68e3c509004a84d05ebd6d66019c7e92b72 (diff)
Appbar component and auth hook (useAuth)
Diffstat
-rw-r--r--src/components/AppBar.js36
-rw-r--r--src/components/Header.js31
-rw-r--r--src/helpers/auth.js22
-rw-r--r--src/pages/my/menu.js51
-rw-r--r--src/pages/my/profile.js104
-rw-r--r--src/pages/shop/cart.js40
-rw-r--r--src/styles/globals.css2
7 files changed, 176 insertions, 110 deletions
diff --git a/src/components/AppBar.js b/src/components/AppBar.js
new file mode 100644
index 00000000..f22d630f
--- /dev/null
+++ b/src/components/AppBar.js
@@ -0,0 +1,36 @@
+import { HeartIcon, HomeIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Link from "./Link";
+
+const AppBar = ({ title }) => {
+ const router = useRouter();
+
+ return (
+ <>
+ <Head>
+ <title>{ title } - Indoteknik</title>
+ </Head>
+ <div className="flex justify-between p-4 border-b border-gray_r-6">
+ {/* --- Start Title */}
+ <button type="button" onClick={() => router.back()} className="flex gap-x-2 text-gray_r-12">
+ <ChevronLeftIcon className="w-6 stroke-2"/>
+ <h1>{ title }</h1>
+ </button>
+ {/* --- End Title */}
+
+ {/* --- Start Icons */}
+ <div className="flex gap-x-3">
+ <HeartIcon className="w-6 stroke-2"/>
+ <Link href="/">
+ <HomeIcon className="w-6 stroke-2 text-gray_r-12"/>
+ </Link>
+ </div>
+ {/* --- End Icons */}
+ </div>
+ </>
+ );
+};
+
+export default AppBar; \ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index a294c140..d41847ef 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -11,7 +11,7 @@ import {
} from "@heroicons/react/24/outline";
// Helpers
-import { getAuth } from "../helpers/auth";
+import { getAuth, useAuth } from "../helpers/auth";
// Components
import Link from "./Link";
// Images
@@ -24,11 +24,7 @@ export default function Header({ title }) {
const [suggestions, setSuggestions] = useState([]);
const searchQueryRef = useRef();
const [isMenuActive, setIsMenuActive] = useState(false);
- const [auth, setAuth] = useState();
-
- useEffect(() => {
- if (!auth) setAuth(getAuth());
- }, [auth]);
+ const [auth, setAuth] = useAuth();
useEffect(() => {
if (q) {
@@ -76,24 +72,23 @@ export default function Header({ title }) {
<div className={'menu-wrapper' + (isMenuActive ? ' active ' : '')}>
<div className="flex gap-x-2 items-center border-b border-gray_r-6 p-4">
- {auth ? (
- <h1>Hi, {auth.name}</h1>
- ) : (
+ { auth && (
+ <Link href="/my/menu" className="w-full flex text-gray_r-12">
+ <h1>Hi, {auth.name}</h1>
+ <div className="ml-auto">
+ <ChevronRightIcon className="w-5" />
+ </div>
+ </Link>
+ ) }
+
+ { !auth && (
<>
<Link href="/login" onClick={closeMenu} className="w-full py-2 btn-light text-gray_r-12">Masuk</Link>
<Link href="/register" onClick={closeMenu} className="w-full py-2 btn-yellow text-gray_r-12">Daftar</Link>
</>
- )}
+ ) }
</div>
<div className="flex flex-col">
- {auth && (
- <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/my/profile" onClick={closeMenu}>
- <span>Profil Saya</span>
- <div className="ml-auto">
- <ChevronRightIcon className="text-gray_r-12 w-5" />
- </div>
- </Link>
- )}
<Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
<span>Semua Brand</span>
<div className="ml-auto">
diff --git a/src/helpers/auth.js b/src/helpers/auth.js
index 4504564c..c09c7590 100644
--- a/src/helpers/auth.js
+++ b/src/helpers/auth.js
@@ -1,4 +1,5 @@
import { deleteCookie, getCookie, setCookie } from 'cookies-next';
+import { useEffect, useState } from 'react';
const getAuth = () => {
let auth = getCookie('auth');
@@ -18,8 +19,27 @@ const deleteAuth = () => {
return true;
}
+const useAuth = () => {
+ const [auth, setAuth] = useState({
+ id: '',
+ name: '',
+ email: '',
+ phone: '',
+ mobile: '',
+ token: ''
+ });
+
+ useEffect(() => {
+ const handleIsAuthenticated = () => setAuth(getAuth());
+ handleIsAuthenticated();
+ }, []);
+
+ return [auth, setAuth];
+}
+
export {
getAuth,
setAuth,
- deleteAuth
+ deleteAuth,
+ useAuth
}; \ No newline at end of file
diff --git a/src/pages/my/menu.js b/src/pages/my/menu.js
new file mode 100644
index 00000000..7454d8d1
--- /dev/null
+++ b/src/pages/my/menu.js
@@ -0,0 +1,51 @@
+
+import AppBar from "../../components/AppBar";
+import Layout from "../../components/Layout";
+import Link from "../../components/Link";
+import { useAuth } from "../../helpers/auth";
+import {
+ ChevronRightIcon,
+ Cog6ToothIcon,
+ DocumentTextIcon,
+ UserCircleIcon, UserIcon
+} from "@heroicons/react/24/outline";
+
+const menus = [
+ { name: 'Riwayat Pesanan', url: '/my/profile' },
+ { name: 'Faktur Penjualan', url: '/my/profile' },
+ { name: 'Faktur Pajak', url: '/my/profile' },
+ { name: 'Surat Jalan', url: '/my/profile' }
+];
+
+export default function MyMenu() {
+ const [auth, setAuth] = useAuth();
+
+ return (
+ <>
+ <Layout>
+ <AppBar title="Menu Utama" />
+
+ <div className="p-4 flex gap-x-2 items-start bg-yellow_r-3 text-yellow_r-12">
+ <div className="flex-1 flex gap-x-2 items-start">
+ <UserCircleIcon className="w-6" />
+ <div>
+ <h2>{ auth.name }</h2>
+ <p className="text-yellow_r-12/80">{ auth.email }</p>
+ </div>
+ </div>
+ <Link href="/my/profile">
+ <Cog6ToothIcon className="w-6 text-yellow_r-12"/>
+ </Link>
+ </div>
+
+ <div className="px-4 flex flex-col">
+ { menus.map((menu, index) => (
+ <Link href={menu.url} className="text-gray_r-12 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
+ { menu.name } <ChevronRightIcon className="w-5 ml-auto"/>
+ </Link>
+ )) }
+ </div>
+ </Layout>
+ </>
+ );
+} \ No newline at end of file
diff --git a/src/pages/my/profile.js b/src/pages/my/profile.js
index a0aeb938..44ccfebd 100644
--- a/src/pages/my/profile.js
+++ b/src/pages/my/profile.js
@@ -1,24 +1,17 @@
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
+import AppBar from "../../components/AppBar";
import Header from "../../components/Header";
import Layout from "../../components/Layout";
+import WithAuth from "../../components/WithAuth";
import apiOdoo from "../../helpers/apiOdoo";
import {
- getAuth,
+ useAuth,
setAuth as setAuthCookie
} from "../../helpers/auth";
export default function MyProfile() {
- const [auth, setAuth] = useState({
- name: '',
- email: '',
- phone: '',
- mobile: ''
- });
-
- useEffect(() => {
- setAuth(getAuth());
- }, []);
+ const [auth, setAuth] = useAuth();
const update = async (e) => {
e.preventDefault();
@@ -39,57 +32,58 @@ export default function MyProfile() {
}
return (
- <>
- <Header title="Profil Saya - Indoteknik" />
+ <WithAuth>
<Layout>
- <form onSubmit={update} className="w-full p-4">
- <h1 className="mb-6">Profil Saya</h1>
-
- <label className="form-label mt-4 mb-2">Email</label>
- <input
- type="text"
- className="form-input bg-gray_r-2"
- placeholder="johndoe@gmail.com"
- name="email"
- value={auth.email}
- onChange={handleInput}
- disabled={true}
- />
+ <AppBar title="Akun Saya" />
+ <form onSubmit={update} className="w-full px-4">
+ { auth && (
+ <>
+ <label className="form-label mt-4 mb-2">Email</label>
+ <input
+ type="text"
+ className="form-input bg-gray_r-2"
+ placeholder="johndoe@gmail.com"
+ name="email"
+ value={auth.email}
+ onChange={handleInput}
+ disabled={true}
+ />
- <label className="form-label mt-4 mb-2">Nama Lengkap</label>
- <input
- type="text"
- className="form-input bg-gray_r-2"
- placeholder="John Doe"
- name="name"
- value={auth.name}
- onChange={handleInput}
- />
+ <label className="form-label mt-4 mb-2">Nama Lengkap</label>
+ <input
+ type="text"
+ className="form-input bg-gray_r-2"
+ placeholder="John Doe"
+ name="name"
+ value={auth.name}
+ onChange={handleInput}
+ />
- <label className="form-label mt-4 mb-2">No Telepon</label>
- <input
- type="tel"
- className="form-input bg-gray_r-2"
- placeholder="08xxxxxxxx"
- name="phone"
- value={auth.phone}
- onChange={handleInput}
- />
+ <label className="form-label mt-4 mb-2">No Telepon</label>
+ <input
+ type="tel"
+ className="form-input bg-gray_r-2"
+ placeholder="08xxxxxxxx"
+ name="phone"
+ value={auth.phone}
+ onChange={handleInput}
+ />
- <label className="form-label mt-4 mb-2">No Handphone</label>
- <input
- type="tel"
- className="form-input bg-gray_r-2"
- placeholder="08xxxxxxxx"
- name="mobile"
- value={auth.mobile}
- onChange={handleInput}
- />
+ <label className="form-label mt-4 mb-2">No Handphone</label>
+ <input
+ type="tel"
+ className="form-input bg-gray_r-2"
+ placeholder="08xxxxxxxx"
+ name="mobile"
+ value={auth.mobile}
+ onChange={handleInput}
+ />
+ </>
+ ) }
<button type="submit" className="btn-yellow float-right mt-4">Simpan</button>
-
</form>
</Layout>
- </>
+ </WithAuth>
);
} \ No newline at end of file
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 4c954960..f099a19e 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -1,17 +1,11 @@
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
-import Head from "next/head";
import {
TrashIcon,
PlusIcon,
MinusIcon,
- ChevronLeftIcon,
} from "@heroicons/react/24/solid";
-import {
- ExclamationTriangleIcon,
- HeartIcon,
- HomeIcon
-} from "@heroicons/react/24/outline";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// Helpers
import {
@@ -30,14 +24,10 @@ import Layout from "../../components/Layout";
import Link from "../../components/Link";
import Alert from "../../components/Alert";
import Spinner from "../../components/Spinner";
+import { useRouter } from "next/router";
+import AppBar from "../../components/AppBar";
-export async function getServerSideProps(context) {
- let previousRoute = context.req.headers.referer || '/';
- if (previousRoute.endsWith('/shop/cart')) previousRoute = '/';
- return { props: { previousRoute } };
-}
-
-export default function Cart({ previousRoute }) {
+export default function Cart() {
const [isLoadingProducts, setIsLoadingProducts] = useState(true);
const [products, setProducts] = useState([]);
const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
@@ -163,27 +153,9 @@ export default function Cart({ previousRoute }) {
onClose={hideDeleteConfirmation}
onSubmit={deleteItem}
/>
- <Head>
- <title>Keranjang Belanja - Indoteknik</title>
- </Head>
- <Layout>
- <div className="flex justify-between p-4">
- {/* --- Start Title */}
- <Link href={previousRoute} className="flex gap-x-2 text-gray_r-12">
- <ChevronLeftIcon className="w-6 stroke-2"/>
- <h1>Keranjang Saya</h1>
- </Link>
- {/* --- End Title */}
- {/* --- Start Icons */}
- <div className="flex gap-x-3">
- <HeartIcon className="w-6 stroke-2"/>
- <Link href="/">
- <HomeIcon className="w-6 stroke-2 text-gray_r-12"/>
- </Link>
- </div>
- {/* --- End Icons */}
- </div>
+ <Layout>
+ <AppBar title="Keranjang Saya" />
{/* jsx-start: Progress Bar */}
<div className="bg-gray_r-3 flex gap-x-2 p-4 rounded-md mb-3">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 813b78d0..aafcd33e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -275,8 +275,6 @@ html, body {
top-0
border-b
border-gray_r-7
- shadow-lg
- shadow-gray_r-2
z-50
;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:37:39 +0000