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

Compare commits

base: legalgonews:e76b89277c7ef9b11c37147f9bff68ac171459c8
Branches Tags
legalgonews:master
legalgonews:dev
..
compare: legalgonews:9ef33d72d3df435a928e4957c5869ff67948ff3e
Branches Tags
legalgonews:dev
legalgonews:master

No commits in common. "e76b89277c7ef9b11c37147f9bff68ac171459c8" and "9ef33d72d3df435a928e4957c5869ff67948ff3e" have entirely different histories.
e76b89277c ... 9ef33d72d3

13 changed files with 26 additions and 415 deletions
Show Stats Expand all files Collapse all files

23
app/apis/common/get-subscriptions.ts
View File

@ -1,23 +0,0 @@
import { z } from 'zod'
import { HttpServer, type THttpServer } from '~/libs/http-server'
const subscriptionSchema = z.object({
data: z.array(
z.object({
id: z.string(),
code: z.string(),
name: z.string(),
}),
),
})
export const getSubscriptions = async (parameters?: THttpServer) => {
try {
const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
return subscriptionSchema.parse(data)
} catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
return Promise.reject(error)
}
}

10
app/apis/news/register.ts
View File

@ -11,15 +11,7 @@ const loginResponseSchema = z.object({
export const newsRegisterRequest = async (payload: TRegisterSchema) => { export const newsRegisterRequest = async (payload: TRegisterSchema) => {
try { try {
const { subscription, ...restPayload } = payload const { data } = await HttpServer().post('/api/user/register', payload)
const transformedPayload = {
...restPayload,
subscribe_plan_id: subscription,
}
const { data } = await HttpServer().post(
'/api/user/register',
transformedPayload,
)
return loginResponseSchema.parse(data) return loginResponseSchema.parse(data)
} catch (error) { } catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject

4
app/app.css
View File

@ -41,7 +41,7 @@ table.dataTable tbody > tr > td {
min-width: 0; min-width: 0;
} */ } */
/* .embla__slide { .embla__slide {
margin-right: 10px; margin-right: 10px;
flex: 0 0 auto; flex: 0 0 auto;
min-width: 0; min-width: 0;
@ -51,4 +51,4 @@ table.dataTable tbody > tr > td {
.embla__slide { .embla__slide {
margin-right: 30px; margin-right: 30px;
} }
} */ }

2
app/components/ui/banner.tsx
View File

@ -4,7 +4,7 @@ import { APP } from '~/configs/meta'
export const Banner = () => { export const Banner = () => {
return ( return (
<div className="min-h-[65px]"> <div className="min-h-[65px] sm:mx-10">
<div className="relative"> <div className="relative">
<Link <Link
to="/#" to="/#"

3
app/components/ui/button.tsx
View File

@ -1,4 +1,3 @@
import { Button as HeadlessButton } from '@headlessui/react'
import { cva, type VariantProps } from 'class-variance-authority' import { cva, type VariantProps } from 'class-variance-authority'
import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react' import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
@ -53,7 +52,7 @@ export const Button = <C extends ElementType = 'button'>({
className, className,
...properties ...properties
}: ButtonProperties<C>) => { }: ButtonProperties<C>) => {
const Component = as || HeadlessButton const Component = as || 'button'
const classes = twMerge(buttonVariants({ variant, size, className })) const classes = twMerge(buttonVariants({ variant, size, className }))
return ( return (

168
app/components/ui/carousel-section.tsx
View File

@ -1,7 +1,6 @@
import useEmblaCarousel from 'embla-carousel-react' import useEmblaCarousel from 'embla-carousel-react'
import { useCallback } from 'react' import { useCallback } from 'react'
import { Link } from 'react-router' import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next' import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous' import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
@ -55,7 +54,7 @@ export const CarouselSection = (properties: TNews) => {
className="embla overflow-hidden" className="embla overflow-hidden"
ref={emblaReference} ref={emblaReference}
> >
{/* <div className="embla__container col-span-3 flex max-h-[586px]"> <div className="embla__container col-span-3 flex max-h-[586px]">
{items.map( {items.map(
({ featured, title, content, tags, slug, isPremium }, index) => ( ({ featured, title, content, tags, slug, isPremium }, index) => (
<div <div
@ -112,173 +111,8 @@ export const CarouselSection = (properties: TNews) => {
</div> </div>
), ),
)} )}
</div> */}
<div className="embla__container grid sm:auto-cols-[31%] sm:grid-flow-col sm:gap-x-8">
{items.map(
({ featured, title, content, tags, slug, isPremium }, index) => (
<div
key={index}
className={twMerge('embla__slide grid sm:gap-x-8')}
>
<img
className={twMerge(
'aspect-[5/4] w-full rounded-md object-cover',
)}
src={featured}
alt={title}
/>
<div className={twMerge('flex flex-col justify-between gap-4')}>
<div
className={twMerge(
'my-3 flex gap-2 uppercase max-sm:text-sm',
)}
>
{tags?.map((item) => (
<span
key={index}
className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
>
{item}
</span>
))}
{isPremium && (
<span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
Premium Content
</span>
)}
</div>
<div>
<h3
className={twMerge(
'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
)}
>
{title}
</h3>
<p className="text-md mt-5 text-[#777777] sm:text-xl">
{content}
</p>
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
className="mb-5"
>
View More
</Button>
</div>
</div>
),
)}
</div> </div>
</div> </div>
</div> </div>
// <div className="">
// <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
// <div className="grid">
// <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
// {title}
// </h2>
// <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
// {description}
// </p>
// </div>
// </div>
// <div className={twMerge('grid sm:grid-cols-3 sm:gap-x-8')}>
// {items.map(
// ({ featured, title, content, tags, slug, isPremium }, index) => (
// <div
// key={index}
// className={twMerge('grid sm:gap-x-8')}
// >
// <img
// className={twMerge(
// 'aspect-[5/4] w-full rounded-md object-cover',
// )}
// src={featured}
// alt={title}
// />
// <div className={twMerge('flex flex-col justify-between gap-4')}>
// <div
// className={twMerge(
// 'my-3 flex gap-2 uppercase max-sm:text-sm',
// )}
// >
// {tags?.map((item) => (
// <span
// key={index}
// className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
// >
// {item}
// </span>
// ))}
// {isPremium && (
// <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
// Premium Content
// </span>
// )}
// </div>
// <div>
// <h3
// className={twMerge(
// 'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
// )}
// >
// {title}
// </h3>
// <p className="text-md mt-5 text-[#777777] sm:text-xl">
// {content}
// </p>
// </div>
// <Button
// size="block"
// {...(isPremium
// ? {
// onClick: () => {
// setIsSuccessOpen('warning')
// },
// to: '',
// }
// : { as: Link, to: `/detail/${slug}` })}
// className="mb-5"
// >
// View More
// </Button>
// </div>
// </div>
// ),
// )}
// </div>
// <div className="my-5 mt-5 flex flex-row-reverse">
// <div className="flex gap-2.5">
// <CarouselPreviousIcon
// color="#DCDCDC"
// className="cursor-pointer"
// width={45}
// height={45}
// onClick={previousSlide}
// />
// <CarouselNextIcon
// color="#2E2F7C"
// className="cursor-pointer"
// width={45}
// height={45}
// onClick={nextSlide}
// />
// </div>
// </div>
// </div>
) )
} }

123
app/components/ui/category-section.tsx
View File

@ -1,123 +0,0 @@
import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
export const CategorySection = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
const { title, description, items } = properties
const nextSlide = () => {
// patch data next page
}
const previousSlide = () => {
// patch previous page
}
return (
<div className="">
<div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
<div className="grid">
<h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{title}
</h2>
<p className="text-xl font-light text-[#777777] italic sm:text-2xl">
{description}
</p>
</div>
</div>
<div className="grid sm:grid-cols-3 sm:gap-x-8">
{items.map(
({ featured, title, content, tags, slug, isPremium }, index) => (
<div
key={index}
className={twMerge('grid sm:gap-x-8')}
>
<img
className={twMerge(
'aspect-[5/4] w-full rounded-md object-cover',
)}
src={featured}
alt={title}
/>
<div className={twMerge('flex flex-col justify-between gap-4')}>
<div
className={twMerge(
'my-3 flex gap-2 uppercase max-sm:text-sm',
)}
>
{tags?.map((item) => (
<span
key={index}
className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
>
{item}
</span>
))}
{isPremium && (
<span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
Premium Content
</span>
)}
</div>
<div>
<h3
className={twMerge(
'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
)}
>
{title}
</h3>
<p className="text-md mt-5 text-[#777777] sm:text-xl">
{content}
</p>
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
className="mb-5"
>
View More
</Button>
</div>
</div>
),
)}
</div>
<div className="my-5 mt-5 flex flex-row-reverse">
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
width={45}
height={45}
onClick={previousSlide}
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
width={45}
height={45}
onClick={nextSlide}
/>
</div>
</div>
</div>
)
}

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

@ -1,4 +1,4 @@
import { Field, Label, Input as HeadlessInput } from '@headlessui/react' import { Field, Label, Input as UIInput } from '@headlessui/react'
import { useState, type ComponentProps, type ReactNode } from 'react' import { useState, type ComponentProps, type ReactNode } from 'react'
import { import {
get, get,
@ -55,7 +55,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
<Label className="mb-1 block text-gray-700"> <Label className="mb-1 block text-gray-700">
{label} {error && <span className="text-red-500">{error.message}</span>} {label} {error && <span className="text-red-500">{error.message}</span>}
</Label> </Label>
<HeadlessInput <UIInput
type={inputType} type={inputType}
className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2" className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
placeholder={inputType === 'password' ? '******' : placeholder} placeholder={inputType === 'password' ? '******' : placeholder}

67
app/components/ui/select.tsx
View File

@ -1,67 +0,0 @@
import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
import { type ComponentProps, type ReactNode } from 'react'
import {
get,
type FieldError,
type FieldValues,
type Path,
type RegisterOptions,
} from 'react-hook-form'
import { useRemixFormContext } from 'remix-hook-form'
type TInputProperties<T extends FieldValues> = Omit<
ComponentProps<'select'>,
'size'
> & {
id: string
label?: ReactNode
name: Path<T>
rules?: RegisterOptions
placeholder?: string
options?: {
code: string
name: string
id: string
}[]
}
export const Select = <TFormValues extends Record<string, unknown>>(
properties: TInputProperties<TFormValues>,
) => {
const { id, label, name, rules, disabled, placeholder, options, ...rest } =
properties
const {
register,
formState: { errors },
} = useRemixFormContext()
const error: FieldError = get(errors, name)
return (
<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>
<HeadlessSelect
className="focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
{...register(name, rules)}
{...rest}
>
<option value="">{placeholder}</option>
{options?.map(({ id, name }) => (
<option
key={id}
value={id}
>
{name}
</option>
))}
</HeadlessSelect>
</Field>
)
}

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

@ -1,14 +1,12 @@
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useFetcher, useRouteLoaderData } from 'react-router' import { useFetcher } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form' import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod' import { z } from 'zod'
import { Button } from '~/components/ui/button' import { Button } from '~/components/ui/button'
import { Input } from '~/components/ui/input' import { Input } from '~/components/ui/input'
import { Select } from '~/components/ui/select'
import { useNewsContext } from '~/contexts/news' import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_layout'
export const registerSchema = z export const registerSchema = z
.object({ .object({
@ -16,7 +14,6 @@ export const registerSchema = z
password: z.string().min(6, 'Kata sandi minimal 6 karakter'), password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
rePassword: 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'), phone: z.string().min(10, 'No telepon tidak valid'),
subscription: z.string().min(1, 'Pilih salah satu subscription'),
}) })
.refine((field) => field.password === field.rePassword, { .refine((field) => field.password === field.rePassword, {
message: 'Kata sandi tidak sama', message: 'Kata sandi tidak sama',
@ -30,7 +27,6 @@ export const FormRegister = () => {
const [error, setError] = useState<string>() const [error, setError] = useState<string>()
const [disabled, setDisabled] = useState(false) const [disabled, setDisabled] = useState(false)
const fetcher = useFetcher() const fetcher = useFetcher()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const formMethods = useRemixForm<TRegisterSchema>({ const formMethods = useRemixForm<TRegisterSchema>({
mode: 'onSubmit', mode: 'onSubmit',
@ -93,13 +89,18 @@ export const FormRegister = () => {
name="phone" name="phone"
/> />
<Select {/* Subscribe*/}
id="subscription" {/* <div className="mb-4">
name="subscription" <label
label="Subscription" htmlFor="subscription"
placeholder="Pilih Subscription" className="mb-1 block text-gray-700"
options={loaderData?.subscriptionsData} >
/> Subscription
</label>
<select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
<option selected>Subscription</option>
</select>
</div> */}
{error && ( {error && (
<div className="text-sm text-red-500 capitalize">{error}</div> <div className="text-sm text-red-500 capitalize">{error}</div>

6
app/pages/news-categories/index.tsx
View File

@ -1,13 +1,13 @@
import { Card } from '~/components/ui/card' import { Card } from '~/components/ui/card'
import { CategorySection } from '~/components/ui/category-section' import { Carousel } from '~/components/ui/carousel'
import { BERITA } from './data' import { BERITA } from './data'
export const NewsCategoriesPage = () => { export const NewsCategoriesPage = () => {
return ( return (
<div className="relative"> <div className="relative mx-5 sm:mx-10">
<Card> <Card>
<CategorySection {...BERITA} /> <Carousel {...BERITA} />
</Card> </Card>
</div> </div>
) )

3
app/pages/news/index.tsx
View File

@ -2,7 +2,8 @@ import { Card } from '~/components/ui/card'
import { CarouselHero } from '~/components/ui/carousel-hero' import { CarouselHero } from '~/components/ui/carousel-hero'
import { CarouselSection } from '~/components/ui/carousel-section' import { CarouselSection } from '~/components/ui/carousel-section'
import { Newsletter } from '~/components/ui/newsletter' import { Newsletter } from '~/components/ui/newsletter'
import { BERITA, SPOTLIGHT } from '~/data/contents'
import { SPOTLIGHT, BERITA } from './data'
export const NewsPage = () => { export const NewsPage = () => {
return ( return (

3
app/routes/_layout.tsx
View File

@ -1,6 +1,5 @@
import { Outlet } from 'react-router' import { Outlet } from 'react-router'
import { getSubscriptions } from '~/apis/common/get-subscriptions'
import { NewsProvider } from '~/contexts/news' import { NewsProvider } from '~/contexts/news'
import { NewsDefaultLayout } from '~/layouts/news/default' import { NewsDefaultLayout } from '~/layouts/news/default'
import { handleCookie } from '~/libs/cookies' import { handleCookie } from '~/libs/cookies'
@ -9,11 +8,9 @@ import type { Route } from './+types/_layout'
export const loader = async ({ request }: Route.LoaderArgs) => { export const loader = async ({ request }: Route.LoaderArgs) => {
const { userToken } = await handleCookie(request) const { userToken } = await handleCookie(request)
const { data: subscriptionsData } = await getSubscriptions()
return { return {
userToken, userToken,
subscriptionsData,
} }
} }