legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into feature/slicing

Browse Source
This commit is contained in:
fredy.siswanto 2025-03-01 11:43:14 +07:00
commit 422f3fcba5
12 changed files with 272 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/apis/news/get-user.ts Normal file
View File

@ -0,0 +1,23 @@
import { z } from 'zod'
import { HttpServer, type THttpServer } from '~/libs/http-server'
const playerSchema = z.object({
data: z.object({
id: z.string(),
email: z.string(),
subscribe_plan_code: z.string(),
subscribe_plan_name: z.string(),
subscribe_status: z.string(),
}),
})
export const getUser = async (parameters: THttpServer) => {
try {
const { data } = await HttpServer(parameters).get(`/api/user/profile`)
return playerSchema.parse(data)
} catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
return Promise.reject(error)
}
}

4
app/apis/news/login.ts
View File

@ -1,7 +1,7 @@
import { z } from 'zod'
import { type TLoginSchema } from '~/layouts/news/form-login'
import HttpClient from '~/libs/http-client'
import { HttpServer } from '~/libs/http-server'
const loginResponseSchema = z.object({
data: z.object({
@ -11,7 +11,7 @@ const loginResponseSchema = z.object({
export const newsLoginRequest = async (payload: TLoginSchema) => {
try {
const { data } = await HttpClient().post('/api/user/login', payload)
const { data } = await HttpServer().post('/api/user/login', payload)
return loginResponseSchema.parse(data)
} catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject

20
app/apis/news/register.ts Normal file
View File

@ -0,0 +1,20 @@
import { z } from 'zod'
import type { TRegisterSchema } from '~/layouts/news/form-register'
import { HttpServer } from '~/libs/http-server'
const loginResponseSchema = z.object({
data: z.object({
token: z.string(),
}),
})
export const newsRegisterRequest = async (payload: TRegisterSchema) => {
try {
const { data } = await HttpServer().post('/api/user/register', payload)
return loginResponseSchema.parse(data)
} catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
return Promise.reject(error)
}
}

20
app/components/ui/input.tsx
View File

@ -1,3 +1,4 @@
import { Field, Label, Input as UIInput } from '@headlessui/react'
import { useState, type ComponentProps, type ReactNode } from 'react'
import {
get,
@ -33,6 +34,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
rules,
type = 'text',
placeholder,
disabled,
...rest
} = properties
const [inputType, setInputType] = useState(type)
@ -45,15 +47,15 @@ export const Input = <TFormValues extends Record<string, unknown>>(
const error: FieldError = get(errors, name)
return (
<div className="relative">
<label
htmlFor={id}
className="mb-1 block text-gray-700"
>
<Field
className="relative"
disabled={disabled}
id={id}
>
<Label className="mb-1 block text-gray-700">
{label} {error && <span className="text-red-500">{error.message}</span>}
</label>
<input
id={id}
</Label>
<UIInput
type={inputType}
className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
placeholder={inputType === 'password' ? '******' : placeholder}
@ -78,6 +80,6 @@ export const Input = <TFormValues extends Record<string, unknown>>(
/>
</Button>
)}
</div>
</Field>
)
}

6
app/contexts/news.tsx
View File

@ -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,

11
app/layouts/news/default.tsx
View File

@ -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
setIsRegisterOpen={setIsRegisterOpen}
setIsLoginOpen={setIsLoginOpen}
setIsForgetOpen={setForgetOpen}
setIsInitSubscribeOpen={setIsInitSubscribeOpen}
/>
<FormLogin />
</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 />

34
app/layouts/news/form-login.tsx
View File

@ -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 = {
setIsRegisterOpen: NewsContextProperties['setIsRegisterOpen']
setIsLoginOpen: NewsContextProperties['setIsLoginOpen']
setIsForgetOpen: NewsContextProperties['setForgetOpen']
setIsInitSubscribeOpen: NewsContextProperties['setIsInitSubscribeOpen']
}
export const FormLogin = (properties: TProperties) => {
export const FormLogin = () => {
const {
setIsRegisterOpen,
setIsLoginOpen,
setIsForgetOpen,
setIsInitSubscribeOpen,
} = properties
} = useNewsContext()
const fetcher = useFetcher()
const [error, setError] = useState<string>()
const [disabled, setDisabled] = useState(false)
@ -42,20 +35,19 @@ export const FormLogin = (properties: TProperties) => {
const { handleSubmit } = formMethods
useEffect(() => {
if (fetcher.state !== 'idle' || fetcher.data?.success) {
setDisabled(true)
if (!fetcher.data?.success) {
setError(fetcher.data?.message)
setDisabled(false)
return
}
setDisabled(false)
}, [fetcher])
useEffect(() => {
if (fetcher.data?.success) {
setDisabled(true)
setError(undefined)
setIsLoginOpen(false)
if (fetcher.data?.user.subscribe_status === 'inactive') {
setIsInitSubscribeOpen(true)
setIsLoginOpen(false)
return
}
setError(fetcher.data?.message)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher])
@ -71,7 +63,7 @@ export const FormLogin = (properties: TProperties) => {
>
<Input
id="email"
label="Email / No Telepon"
label="Email"
placeholder="Contoh: legal@legalgo.id"
name="email"
/>
@ -88,7 +80,6 @@ export const FormLogin = (properties: TProperties) => {
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
{/* Lupa Kata Sandi */}
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">Lupa Kata Sandi?</span>
<Button
@ -104,7 +95,6 @@ export const FormLogin = (properties: TProperties) => {
</Button>
</div>
{/* Tombol Masuk */}
<Button
disabled={disabled}
type="submit"

197
app/layouts/news/form-register.tsx
View File

@ -1,109 +1,136 @@
import { useState } from 'react'
import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useState } from 'react'
import { useFetcher } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'
import { Button } from '~/components/ui/button'
import { Input } from '~/components/ui/input'
import { useNewsContext } from '~/contexts/news'
export const registerSchema = z
.object({
email: z.string().email('Email tidak valid'),
password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
phone: z.string().min(10, 'No telepon tidak valid'),
})
.refine((field) => field.password === field.rePassword, {
message: 'Kata sandi tidak sama',
path: ['rePassword'],
})
export type TRegisterSchema = z.infer<typeof registerSchema>
export const FormRegister = () => {
const [showPassword, setShowPassword] = useState(false)
const { setIsLoginOpen, setIsRegisterOpen } = useNewsContext()
const [error, setError] = useState<string>()
const [disabled, setDisabled] = useState(false)
const fetcher = useFetcher()
const formMethods = useRemixForm<TRegisterSchema>({
mode: 'onSubmit',
fetcher,
resolver: zodResolver(registerSchema),
})
const { handleSubmit } = formMethods
useEffect(() => {
if (!fetcher.data?.success) {
setError(fetcher.data?.message)
setDisabled(false)
return
}
setDisabled(true)
setError(undefined)
setIsRegisterOpen(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher])
return (
<div className="flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<form>
{/* Input Email / No Telepon */}
<div className="mb-4">
<label
htmlFor="email"
className="mb-1 block text-gray-700"
>
Email/No. Telepon
</label>
<input
type="text"
<RemixFormProvider {...formMethods}>
<fetcher.Form
method="post"
onSubmit={handleSubmit}
className="space-y-4"
action="/actions/register"
>
<Input
id="email"
label="Email"
placeholder="Contoh: legal@legalgo.id"
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
required
name="email"
/>
</div>
{/* Input Password */}
<div className="relative mb-4">
<label
htmlFor="password"
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
>
Kata Sandi
</label>
<input
type={showPassword ? 'text' : 'password'}
<Input
id="password"
label="Kata Sandi"
placeholder="Masukkan Kata Sandi"
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
required
name="password"
type="password"
/>
<button
type="button"
className="absolute top-9 right-3 text-gray-500"
onClick={() => setShowPassword(!showPassword)}
>
{/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
</button>
</div>
{/* Reinput Password */}
<div className="relative mb-4">
<label
htmlFor="password"
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
>
Ulangi Kata Sandi
</label>
<input
type={showPassword ? 'text' : 'password'}
<Input
id="re-password"
label="Ulangi Kata Sandi"
placeholder="Masukkan Kata Sandi"
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
required
name="rePassword"
type="password"
/>
<button
type="button"
className="absolute top-9 right-3 text-gray-500"
onClick={() => setShowPassword(!showPassword)}
>
{/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
</button>
</div>
{/* No Telepon */}
<div className="mb-4">
<label
htmlFor="no-telpon"
className="mb-1 block text-gray-700"
>
No. Telepon
</label>
<input
type="text"
placeholder="Contoh: legal@legalgo.id"
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
required
<Input
id="phone"
label="No. Telepon"
placeholder="Masukkan No. Telepon"
name="phone"
/>
</div>
{/* Subscribe*/}
<div className="mb-4">
<label
htmlFor="subscription"
className="mb-1 block text-gray-700"
{/* Subscribe*/}
{/* <div className="mb-4">
<label
htmlFor="subscription"
className="mb-1 block text-gray-700"
>
Subscription
</label>
<select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
<option selected>Subscription</option>
</select>
</div> */}
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<Button
disabled={disabled}
type="submit"
className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
>
Subscription
</label>
<select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
<option selected>Subscription</option>
</select>
</div>
Daftar
</Button>
</fetcher.Form>
</RemixFormProvider>
{/* Tombol Masuk */}
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Daftar
{/* 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>
</form>
</div>
</div>
</div>
)

11
app/libs/http-client.ts → app/libs/http-server.ts
View File

@ -2,9 +2,10 @@ import xior, { merge } from 'xior'
const baseURL = import.meta.env.VITE_API_URL
type THttpClient = { token?: string }
const HttpClient = (parameters?: THttpClient) => {
const { token } = parameters || {}
export type THttpServer = { accessToken?: string }
export const HttpServer = (parameters?: THttpServer) => {
const { accessToken } = parameters || {}
const instance = xior.create({
baseURL,
})
@ -14,7 +15,7 @@ const HttpClient = (parameters?: THttpClient) => {
return merge(config, {
headers: {
...(token && { Authorization: `Bearer ${token}` }),
...(accessToken && { Authorization: `Bearer ${accessToken}` }),
},
})
})
@ -30,5 +31,3 @@ const HttpClient = (parameters?: THttpClient) => {
return instance
}
export default HttpClient

5
app/routes/actions.login.ts
View File

@ -3,6 +3,7 @@ import { data } from 'react-router'
import { getValidatedFormData } from 'remix-hook-form'
import { XiorError } from 'xior'
import { getUser } from '~/apis/news/get-user'
import { newsLoginRequest } from '~/apis/news/login'
import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
import { generateTokenCookie } from '~/utils/token'
@ -27,6 +28,9 @@ export const action = async ({ request }: Route.ActionArgs) => {
const { data: loginData } = await newsLoginRequest(payload)
const { token } = loginData
const { data: userData } = await getUser({
accessToken: token,
})
const tokenCookie = generateTokenCookie({
token,
})
@ -37,6 +41,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
return data(
{
success: true,
user: userData,
},
{
headers,

75
app/routes/actions.register.ts Normal file
View File

@ -0,0 +1,75 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { data } from 'react-router'
import { getValidatedFormData } from 'remix-hook-form'
import { XiorError } from 'xior'
import { getUser } from '~/apis/news/get-user'
import { newsRegisterRequest } from '~/apis/news/register'
import {
registerSchema,
type TRegisterSchema,
} from '~/layouts/news/form-register'
import { generateTokenCookie } from '~/utils/token'
import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => {
try {
const {
errors,
data: payload,
receivedValues: defaultValues,
} = await getValidatedFormData<TRegisterSchema>(
request,
zodResolver(registerSchema),
false,
)
if (errors) {
return data({ success: false, errors, defaultValues }, { status: 400 })
}
const { data: registerData } = await newsRegisterRequest(payload)
const { token } = registerData
const { data: userData } = await getUser({
accessToken: token,
})
const tokenCookie = generateTokenCookie({
token,
})
const headers = new Headers()
headers.append('Set-Cookie', await tokenCookie)
return data(
{
success: true,
user: userData,
},
{
headers,
status: 200,
statusText: 'OK',
},
)
} catch (error) {
if (error instanceof XiorError) {
return data(
{
success: false,
message: error?.response?.data?.error?.message || error.message,
},
{
status: error?.response?.status || 500,
},
)
}
return data(
{
success: false,
message: 'Internal server error',
},
{ status: 500 },
)
}
}

2
commitlint.config.js
View File

@ -4,7 +4,7 @@ import isIgnored from '@commitlint/is-ignored'
const Configuration = {
extends: ['@commitlint/config-conventional'],
formatter: '@commitlint/format',
ignores: [(commit) => isIgnored(commit)],
ignores: [(commit) => isIgnored(commit) || commit.startsWith('Merge')],
plugins: [
{
rules: {},