From 31d6352ab8855754ef18c01763d3c1b5a68de857 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 22 Dec 2022 15:29:18 +0700 Subject: Appbar component and auth hook (useAuth) --- src/components/AppBar.js | 36 ++++++++++++++++ src/components/Header.js | 31 ++++++-------- src/helpers/auth.js | 22 +++++++++- src/pages/my/menu.js | 51 +++++++++++++++++++++++ src/pages/my/profile.js | 104 ++++++++++++++++++++++------------------------- src/pages/shop/cart.js | 40 +++--------------- src/styles/globals.css | 2 - 7 files changed, 176 insertions(+), 110 deletions(-) create mode 100644 src/components/AppBar.js create mode 100644 src/pages/my/menu.js (limited to 'src') 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 ( + <> + + { title } - Indoteknik + +
+ {/* --- Start Title */} + + {/* --- End Title */} + + {/* --- Start Icons */} +
+ + + + +
+ {/* --- End Icons */} +
+ + ); +}; + +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 }) {
- {auth ? ( -

Hi, {auth.name}

- ) : ( + { auth && ( + +

Hi, {auth.name}

+
+ +
+ + ) } + + { !auth && ( <> Masuk Daftar - )} + ) }
- {auth && ( - - Profil Saya -
- -
- - )} Semua Brand
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 ( + <> + + + +
+
+ +
+

{ auth.name }

+

{ auth.email }

+
+
+ + + +
+ +
+ { menus.map((menu, index) => ( + + { menu.name } + + )) } +
+ + + ); +} \ 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 ( - <> -
+ -
-

Profil Saya

- - - + + + { auth && ( + <> + + - - + + - - + + - - + + + + ) } -
- + ); } \ 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} /> - - Keranjang Belanja - Indoteknik - - -
- {/* --- Start Title */} - - -

Keranjang Saya

- - {/* --- End Title */} - {/* --- Start Icons */} -
- - - - -
- {/* --- End Icons */} -
+ + {/* jsx-start: Progress Bar */}
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 ; } -- cgit v1.2.3