From 6b959a2f2234def95e0a0dc3196fd842ba07df49 Mon Sep 17 00:00:00 2001 From: egagofur Date: Thu, 3 Apr 2025 19:39:53 +0700 Subject: [PATCH] feat: change from dummy button to navbar button --- .../app/_components/form/modal-form-login.tsx | 12 ++++---- apps/gacha/src/app/layout.tsx | 16 ++++++----- apps/gacha/src/app/page.tsx | 16 ++--------- libs/ui/src/organisms/navbar/navbar.tsx | 13 +++++---- libs/utils/src/hooks/index.ts | 1 + libs/utils/src/hooks/use-modal-login.tsx | 28 +++++++++++++++++++ 6 files changed, 55 insertions(+), 31 deletions(-) create mode 100644 libs/utils/src/hooks/use-modal-login.tsx diff --git a/apps/gacha/src/app/_components/form/modal-form-login.tsx b/apps/gacha/src/app/_components/form/modal-form-login.tsx index fdb4e65..3b2c6e8 100644 --- a/apps/gacha/src/app/_components/form/modal-form-login.tsx +++ b/apps/gacha/src/app/_components/form/modal-form-login.tsx @@ -1,19 +1,20 @@ import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Modal } from '@imphnen-frontend-service/ui/molecules'; import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'; -import { Link } from 'react-router-dom'; import { useLogin } from '../../_hooks/use-login'; interface IModalFormLogin { isOpen: boolean; onClose: () => void; onForgotPassword: () => void; + setIsOpenRegisterModal: (value: boolean) => void; } const ModalFormLogin = ({ isOpen, onClose, onForgotPassword, + setIsOpenRegisterModal, }: IModalFormLogin) => { const { form, onSubmit } = useLogin(); @@ -59,12 +60,13 @@ const ModalFormLogin = ({

Belum punya akun?

- setIsOpenRegisterModal(true)} > Daftar - +
diff --git a/apps/gacha/src/app/layout.tsx b/apps/gacha/src/app/layout.tsx index 7428943..2b27454 100644 --- a/apps/gacha/src/app/layout.tsx +++ b/apps/gacha/src/app/layout.tsx @@ -1,14 +1,16 @@ -import { FC, ReactElement } from 'react'; -import { Outlet } from 'react-router-dom'; import { Navbar } from '@imphnen-frontend-service/ui/organisms'; +import { Outlet } from 'react-router-dom'; +import { FC, ReactElement } from 'react'; +import { ModalLoginProvider } from '@imphnen-frontend-service/utils'; export const AppLayout: FC = (): ReactElement => { return ( -
- - -
+ +
+ + +
+ ); }; - export default AppLayout; diff --git a/apps/gacha/src/app/page.tsx b/apps/gacha/src/app/page.tsx index c693317..c9cf71d 100644 --- a/apps/gacha/src/app/page.tsx +++ b/apps/gacha/src/app/page.tsx @@ -5,10 +5,11 @@ import ModalFormForgotPassword from './_components/form/modal-form-forgot-passwo import ModalFormLogin from './_components/form/modal-form-login'; import ModalFormRegister from './_components/form/modal-form-register'; import { GachaItem } from './_components/item/gacha-item'; +import { useModalLogin } from '@imphnen-frontend-service/utils'; export const Components: FC = (): ReactElement => { + const { showModalLogin, setShowModalLogin } = useModalLogin(); const [showModalForgotPassword, setShowModalForgotPassword] = useState(false); - const [showModalLogin, setShowModalLogin] = useState(false); const [showModalRegister, setShowModalRegister] = useState(false); const scrollToRoulette = () => { @@ -176,18 +177,6 @@ export const Components: FC = (): ReactElement => { Spin Now - -
- - - -
@@ -195,6 +184,7 @@ export const Components: FC = (): ReactElement => { isOpen={showModalLogin} onClose={() => setShowModalLogin(false)} onForgotPassword={handleForgotPasswordClick} + setIsOpenRegisterModal={setShowModalRegister} key="login" /> diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx index e675d3c..00a0e24 100644 --- a/libs/ui/src/organisms/navbar/navbar.tsx +++ b/libs/ui/src/organisms/navbar/navbar.tsx @@ -2,11 +2,12 @@ import { MenuOutlined } from '@ant-design/icons'; import { FC, ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; import { Button } from '../../atoms/button'; -import { useSession } from '@imphnen-frontend-service/utils'; +import { useModalLogin, useSession } from '@imphnen-frontend-service/utils'; export const Navbar: FC = (): ReactElement => { const { session, signOut, isAuthenticated } = useSession(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const { setShowModalLogin } = useModalLogin(); return (
@@ -44,7 +45,7 @@ export const Navbar: FC = (): ReactElement => { {!isAuthenticated ? (
  • - +
    • ) : (
  • @@ -88,12 +89,12 @@ export const Navbar: FC = (): ReactElement => {
    • {!isAuthenticated ? (
  • - setShowModalLogin(true)} + className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold" > Login - +
    • ) : (
  • {session.user?.fullname}
    • diff --git a/libs/utils/src/hooks/index.ts b/libs/utils/src/hooks/index.ts index 2279469..6b7067f 100644 --- a/libs/utils/src/hooks/index.ts +++ b/libs/utils/src/hooks/index.ts @@ -1,2 +1,3 @@ export * from './use-query-state'; export * from './use-session'; +export * from './use-modal-login'; diff --git a/libs/utils/src/hooks/use-modal-login.tsx b/libs/utils/src/hooks/use-modal-login.tsx new file mode 100644 index 0000000..181ed57 --- /dev/null +++ b/libs/utils/src/hooks/use-modal-login.tsx @@ -0,0 +1,28 @@ +import { createContext, ReactNode, useContext, useState } from 'react'; + +interface ModalLoginContextType { + showModalLogin: boolean; + setShowModalLogin: (value: boolean) => void; +} + +const ModalLoginContext = createContext( + undefined +); + +export const ModalLoginProvider = ({ children }: { children: ReactNode }) => { + const [showModalLogin, setShowModalLogin] = useState(false); + + return ( + + {children} + + ); +}; + +export const useModalLogin = () => { + const context = useContext(ModalLoginContext); + if (!context) { + throw new Error('useModalLogin must be used within an ModalLoginProvider'); + } + return context; +};