feat: update News context to use consistent setter naming and refactor FormLogin to utilize context

app/contexts/news.tsx

@@ -15,7 +15,7 @@ export type NewsContextProperties = {
   isRegisterOpen: boolean
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
   isForgetOpen: boolean
-  setForgetOpen: Dispatch<SetStateAction<boolean>>
+  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
   isSuccessOpen: ModalProperties['isOpen']
   setIsSuccessOpen: Dispatch<
     SetStateAction<ModalProperties['isOpen'] | undefined>
@@ -29,7 +29,7 @@ const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
 export const NewsProvider = ({ children }: PropsWithChildren) => {
   const [isLoginOpen, setIsLoginOpen] = useState(false)
   const [isRegisterOpen, setIsRegisterOpen] = useState(false)
-  const [isForgetOpen, setForgetOpen] = useState(false)
+  const [isForgetOpen, setIsForgetOpen] = useState(false)
   const [isSuccessOpen, setIsSuccessOpen] =
     useState<ModalProperties['isOpen']>()
   const [isInitSubscribeOpen, setIsInitSubscribeOpen] = useState(false)
@@ -42,7 +42,7 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
         isRegisterOpen,
         setIsRegisterOpen,
         isForgetOpen,
-        setForgetOpen,
+        setIsForgetOpen,
         isSuccessOpen,
         setIsSuccessOpen,
         isInitSubscribeOpen,

app/layouts/news/default.tsx

@@ -22,7 +22,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
     isRegisterOpen,
     setIsRegisterOpen,
     isForgetOpen,
-    setForgetOpen,
+    setIsForgetOpen,
     isSuccessOpen,
     setIsSuccessOpen,
     isInitSubscribeOpen,
@@ -49,12 +49,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         onClose={() => setIsLoginOpen(false)}
         description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
       >
-        <FormLogin
+        <FormLogin />
-          setIsRegisterOpen={setIsRegisterOpen}
-          setIsLoginOpen={setIsLoginOpen}
-          setIsForgetOpen={setForgetOpen}
-          setIsInitSubscribeOpen={setIsInitSubscribeOpen}
-        />
       </PopupModal>
 
       <PopupModal
@@ -67,7 +62,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
 
       <PopupModal
         isOpen={isForgetOpen}
-        onClose={() => setForgetOpen(false)}
+        onClose={() => setIsForgetOpen(false)}
         description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
       >
         <FormForgotPassword />

app/layouts/news/form-login.tsx

@@ -6,7 +6,7 @@ import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
-import type { NewsContextProperties } from '~/contexts/news'
+import { useNewsContext } from '~/contexts/news'
 
 export const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
@@ -15,20 +15,13 @@ export const loginSchema = z.object({
 
 export type TLoginSchema = z.infer<typeof loginSchema>
 
-type TProperties = {
+export const FormLogin = () => {
-  setIsRegisterOpen: NewsContextProperties['setIsRegisterOpen']
-  setIsLoginOpen: NewsContextProperties['setIsLoginOpen']
-  setIsForgetOpen: NewsContextProperties['setForgetOpen']
-  setIsInitSubscribeOpen: NewsContextProperties['setIsInitSubscribeOpen']
-}
-
-export const FormLogin = (properties: TProperties) => {
   const {
     setIsRegisterOpen,
     setIsLoginOpen,
     setIsForgetOpen,
     setIsInitSubscribeOpen,
-  } = properties
+  } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)

app/layouts/news/form-register.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react'
 
 import { Button } from '~/components/ui/button'
+import { useNewsContext } from '~/contexts/news'
 
 export const FormRegister = () => {
+  const { setIsLoginOpen, setIsRegisterOpen } = useNewsContext()
   const [showPassword, setShowPassword] = useState(false)
+
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-md">
@@ -104,6 +107,22 @@ export const FormRegister = () => {
             Daftar
           </Button>
         </form>
+
+        {/* Link Login */}
+        <div className="mt-4 text-center text-sm">
+          Sudah punya akun?{' '}
+          <Button
+            onClick={() => {
+              setIsLoginOpen(true)
+              setIsRegisterOpen(false)
+            }}
+            className="font-semibold text-[#2E2F7C]"
+            variant="link"
+            size="fit"
+          >
+            Masuk Disini
+          </Button>
+        </div>
       </div>
     </div>
   )