.env

@@ -1,2 +0,0 @@
-VITE_API_URL=http://localhost:8080
-VITE_SALT_KEY=legalGO

.env.example

@@ -1,2 +0,0 @@
-VITE_API_URL=YOUR_API_URL
-VITE_SALT_KEY=YOUR_SALT_KEY

app/apis/news/login.ts

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

app/components/ui/banner.tsx

@@ -4,7 +4,7 @@ import { APP } from '~/configs/meta'
 
 export const Banner = () => {
   return (
-    <div className="min-h-[65px] lg:mx-10">
+    <div className="min-h-[65px] sm:mx-10">
       <div className="relative">
         <Link
           to="/#"
@@ -13,9 +13,12 @@ export const Banner = () => {
           <img
             src={'/images/banner.png'}
             alt={APP.title}
-            className="h-[70px] w-[100%] content-center sm:h-full"
+            className="h-[70px] w-[100%] sm:h-full"
           />
         </Link>
+        <p className="absolute top-2 mx-10">
+          Lorem ipsum dolor sit, amet consectetur
+        </p>
       </div>
     </div>
   )

app/components/ui/newsletter.tsx

@@ -1,43 +1,24 @@
-import { twMerge } from 'tailwind-merge'
-
 import { Button } from '~/components/ui/button'
 
-type NewsletterProperties = {
+export const Newsletter = () => {
-  className?: string
-  title?: string
-  description?: string
-  textButton?: string
-  onClick?: () => void
-}
-export const Newsletter = (property: NewsletterProperties) => {
-  const { className, title, description } = property
-
   return (
-    <div className="relative">
+    <div className="flex h-[300px] w-full flex-col md:flex-row">
-      <div
+      <div className="flex w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:px-30 md:w-[50%]">
-        className={`absolute flex h-[400px] w-screen flex-col sm:h-[300px] md:flex-row ${twMerge('', className)}`}
+        <h2 className="text-2xl font-bold sm:text-4xl">Join Our Newsletter</h2>
-      >
-        <div className="flex h-1/2 w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:h-full sm:w-[50%] sm:px-30">
-          <h2 className="text-2xl font-bold sm:text-4xl">
-            {title ? `${title}` : 'Join Our Newsletter'}
-          </h2>
         <p className="text:md sm:text-lg">
-            {description
+          Tidak ingin ketinggalan Berita Hukum terhangat? Ingin mendapat
-              ? `${description}`
+          informasi kajian dan networking terbaru? Ikuti Newsletter kami dan
-              : `Tidak ingin ketinggalan Berita Hukum terhangat? 
+          Stay up to Speed!
-              Ingin mendapat informasi kajian dan networking terbaru?  
-              Ikuti Newsletter kami dan Stay up to Speed!`}
         </p>
       </div>
+
       <div
+        className="flex flex-col justify-center bg-cover bg-center px-20 py-5 sm:w-full md:w-[50%]"
         style={{
-            backgroundImage: "url('/images/bg-newsletter.png')",
+          backgroundImage: "url('https://placehold.co/400x300.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
         }}
-          className="flex h-1/2 w-full flex-col items-center justify-center text-center sm:h-full sm:w-[50%]"
       >
-          <form className="grid w-[50%] gap-5">
+        <form className="grid gap-5">
           <input
             type="email"
             placeholder="Daftarkan Email Disini"
@@ -53,6 +34,5 @@ export const Newsletter = (property: NewsletterProperties) => {
         </form>
       </div>
     </div>
-    </div>
   )
 }

app/layouts/news/form-login.tsx

@@ -1,19 +1,18 @@
+// import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
-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 type { NewsContextProperties } from '~/contexts/news'
 
-export const loginSchema = z.object({
+const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
   password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
 })
 
-export type TLoginSchema = z.infer<typeof loginSchema>
+type TLoginSchema = z.infer<typeof loginSchema>
 
 type TProperties = {
   setIsRegisterOpen: NewsContextProperties['setIsRegisterOpen']
@@ -29,33 +28,26 @@ export const FormLogin = (properties: TProperties) => {
     setIsForgetOpen,
     setIsInitSubscribeOpen,
   } = properties
-  const fetcher = useFetcher()
 
-  const formMethods = useRemixForm<TLoginSchema>({
+  const formMethods = useForm<TLoginSchema>({
-    mode: 'onSubmit',
-    fetcher,
     resolver: zodResolver(loginSchema),
   })
 
   const { handleSubmit } = formMethods
 
-  useEffect(() => {
+  const onSubmit = handleSubmit((data) => {
-    if (fetcher.data?.success) {
+    console.log('data', data) // eslint-disable-line no-console
     setIsInitSubscribeOpen(true)
     setIsLoginOpen(false)
-    }
+  })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
 
   return (
     <div className="flex items-center justify-center">
       <div className="w-full max-w-md">
-        <RemixFormProvider {...formMethods}>
+        <FormProvider {...formMethods}>
-          <fetcher.Form
+          <form
-            method="post"
+            onSubmit={onSubmit}
-            onSubmit={handleSubmit}
             className="space-y-4"
-            action="/actions/news/login"
           >
             <Input
               id="email"
@@ -94,8 +86,8 @@ export const FormLogin = (properties: TProperties) => {
             >
               Masuk
             </Button>
-          </fetcher.Form>
+          </form>
-        </RemixFormProvider>
+        </FormProvider>
 
         {/* Link Daftar */}
         <div className="mt-4 text-center text-sm">

app/layouts/news/header-top.tsx

@@ -1,14 +1,11 @@
-import { Link, useRouteLoaderData } from 'react-router'
+import { Link } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout.news'
 
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout.news')
-
   return (
     <>
       <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
@@ -34,8 +31,15 @@ export const HeaderTop = () => {
             className="hidden sm:block"
             onClick={() => setIsLoginOpen(true)}
           >
-            {loaderData?.userToken ? 'Logout' : 'Masuk'}
+            Akun
           </Button>
+          <div className="w-[50px] sm:w-[60px]">
+            <img
+              alt="language"
+              src="/flags/id.svg"
+              className="shadow-sm"
+            />
+          </div>
         </div>
       </div>
     </>

app/libs/cookie.server.ts

@@ -1,19 +1,13 @@
 import { createCookie } from 'react-router'
 
-import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
+import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/storages'
 
-export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
+export const userTokenCookie = createCookie(USER_COOKIES.token, {
-  httpOnly: false,
-  sameSite: 'lax',
   secure: process.env.NODE_ENV === 'production',
-  secrets: [process.env.VITE_SALT_KEY || 'default-secret'],
   path: '/news',
 })
 
-export const adminTokenCookieConfig = createCookie(ADMIN_COOKIES.token, {
+export const adminTokenCookie = createCookie(ADMIN_COOKIES.token, {
-  httpOnly: false,
-  sameSite: 'lax',
   secure: process.env.NODE_ENV === 'production',
-  secrets: [process.env.VITE_SALT_KEY || 'default-secret'],
   path: '/admin',
 })

app/libs/cookies.ts

@@ -1,16 +0,0 @@
-import { adminTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
-
-export const handleCookie = async (request: Request) => {
-  const headers = request.headers
-  const userToken = (await userTokenCookieConfig.parse(
-    headers.get('Cookie'),
-  )) as string
-  const adminToken = (await adminTokenCookieConfig.parse(
-    headers.get('Cookie'),
-  )) as string
-
-  return {
-    userToken,
-    adminToken,
-  }
-}

app/libs/http-client.ts

@@ -1,10 +1,7 @@
 import xior, { merge } from 'xior'
 
 const baseURL = import.meta.env.VITE_API_URL
-
+const HttpClient = (token?: string) => {
-type THttpClient = { token?: string }
-const HttpClient = (parameters?: THttpClient) => {
-  const { token } = parameters || {}
   const instance = xior.create({
     baseURL,
   })

app/libs/logout-header.server.ts

@@ -1,20 +1,10 @@
-import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
+import { USER_COOKIES } from '~/configs/storages'
 
 export const setUserLogoutHeaders = () => {
   const responseHeaders = new Headers()
   responseHeaders.append(
     'Set-Cookie',
-    `${USER_COOKIES.token}=; Path=/news; HttpOnly; SameSite=Strict; Max-Age=0`,
+    `${USER_COOKIES.token}=; Path=/news; Max-Age=0`,
-  )
-
-  return responseHeaders
-}
-
-export const setAdminLogoutHeaders = () => {
-  const responseHeaders = new Headers()
-  responseHeaders.append(
-    'Set-Cookie',
-    `${ADMIN_COOKIES.token}=; Path=/admin; HttpOnly; SameSite=Strict; Max-Age=0`,
   )
 
   return responseHeaders

app/pages/dashboard-contents/index.tsx

@@ -1,8 +1,6 @@
-import { Field, Input, Label, Select } from '@headlessui/react'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 
-import { SearchIcon } from '~/components/icons/search'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 
 import { CONTENTS } from './data'
@@ -36,34 +34,6 @@ export const ContentsPage = () => {
   return (
     <div className="relative">
       <TitleDashboard title="Konten" />
-      <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
-        <div className="w-[400px]">
-          <Field>
-            <Label className="mb-2 block text-sm font-medium">Cari User</Label>
-            <div className="relative">
-              <Input
-                type="text"
-                placeholder="Cari Nama"
-                className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-              />
-              <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                <SearchIcon className="h-5 w-5" />
-              </div>
-            </div>
-          </Field>
-        </div>
-
-        <div className="w-[235px]">
-          <Field>
-            <Label className="mb-2 block text-sm font-medium">Status</Label>
-            <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
-              <option>Pilih Status</option>
-              <option>Aktif</option>
-              <option>Nonaktif</option>
-            </Select>
-          </Field>
-        </div>
-      </div>
       <div className="rounded-lg bg-white p-6 shadow-md">
         <h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
         <DataTable

app/pages/dashboard-subscriptions/index.tsx

@@ -44,7 +44,7 @@ export const SubscriptionsPage = () => {
     },
   ]
 
-  const switchView = () => {
+  const switchViee = () => {
     setSubscribtionOpen(!SubscribtionOpen)
   }
 
@@ -53,7 +53,7 @@ export const SubscriptionsPage = () => {
       <TitleDashboard title="Subscription" />
       <Button
         className="float-right mt-7 h-10 w-[160px] rounded-md"
-        onClick={switchView}
+        onClick={switchViee}
       >
         {SubscribtionOpen ? 'Subscriptions' : 'Save'}
       </Button>

app/pages/news/index.tsx

@@ -10,9 +10,7 @@ export const NewsPage = () => {
       <Card>
         <Carousel {...SPOTLIGHT} />
       </Card>
-      <div className="min-h-[400px] sm:min-h-[300px]">
+      <Newsletter />
-        <Newsletter className="mr-0 lg:-ml-14" />
-      </div>
       <Card>
         <Carousel {...BERITA} />
       </Card>

app/root.tsx

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
 import {
   isRouteErrorResponse,
@@ -57,8 +58,14 @@ export function Layout({ children }: { children: ReactNode }) {
   )
 }
 
+const queryClient = new QueryClient()
+
 export default function App() {
-  return <Outlet />
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Outlet />
+    </QueryClientProvider>
+  )
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

app/routes/_layout.news.tsx

@@ -2,17 +2,6 @@ import { Outlet } from 'react-router'
 
 import { NewsProvider } from '~/contexts/news'
 import { NewsDefaultLayout } from '~/layouts/news/default'
-import { handleCookie } from '~/libs/cookies'
-
-import type { Route } from './+types/_layout.news'
-
-export const loader = async ({ request }: Route.LoaderArgs) => {
-  const { userToken } = await handleCookie(request)
-
-  return {
-    userToken,
-  }
-}
 
 const NewsLayout = () => {
   return (

app/routes/actions.news.login.ts

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

app/utils/token.ts

@@ -1,21 +0,0 @@
-import { decodeJwt } from 'jose'
-
-import { userTokenCookieConfig } from '~/libs/cookie.server'
-
-type TTokenCookie = {
-  token: string
-}
-
-export const generateTokenCookie = (parameters: TTokenCookie) => {
-  const { token } = parameters
-
-  const decodedToken = decodeJwt(token)
-  const decodedTokenExp = decodedToken.exp
-  const expirationDate = decodedTokenExp
-    ? new Date(decodedTokenExp * 1000)
-    : undefined
-
-  return userTokenCookieConfig.serialize(token, {
-    expires: expirationDate,
-  })
-}

package.json

@@ -19,6 +19,7 @@
     "@react-router/fs-routes": "^7.1.3",
     "@react-router/node": "^7.1.3",
     "@react-router/serve": "^7.1.3",
+    "@tanstack/react-query": "^5.66.9",
     "chart.js": "^4.4.8",
     "class-variance-authority": "^0.7.1",
     "datatables.net-dt": "^2.2.2",
@@ -26,13 +27,11 @@
     "embla-carousel-react": "^8.5.2",
     "html-react-parser": "^5.2.2",
     "isbot": "^5.1.17",
-    "jose": "^6.0.8",
     "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-router": "^7.1.3",
-    "remix-hook-form": "^6.1.3",
     "tailwind-merge": "^3.0.1",
     "xior": "^0.6.3",
     "zod": "^3.24.2"

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.1.3
         version: 7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)
+      '@tanstack/react-query':
+        specifier: ^5.66.9
+        version: 5.66.9(react@19.0.0)
       chart.js:
         specifier: ^4.4.8
         version: 4.4.8
@@ -44,9 +47,6 @@ importers:
       isbot:
         specifier: ^5.1.17
         version: 5.1.22
-      jose:
-        specifier: ^6.0.8
-        version: 6.0.8
       react:
         specifier: ^19.0.0
         version: 19.0.0
@@ -62,9 +62,6 @@ importers:
       react-router:
         specifier: ^7.1.3
         version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      remix-hook-form:
-        specifier: ^6.1.3
-        version: 6.1.3(react-dom@19.0.0(react@19.0.0))(react-hook-form@7.54.2(react@19.0.0))(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
       tailwind-merge:
         specifier: ^3.0.1
         version: 3.0.1
@@ -1372,6 +1369,14 @@ packages:
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
+  '@tanstack/query-core@5.66.4':
+    resolution: {integrity: sha512-skM/gzNX4shPkqmdTCSoHtJAPMTtmIJNS0hE+xwTTUVYwezArCT34NMermABmBVUg5Ls5aiUXEDXfqwR1oVkcA==}
+
+  '@tanstack/react-query@5.66.9':
+    resolution: {integrity: sha512-NRI02PHJsP5y2gAuWKP+awamTIBFBSKMnO6UVzi03GTclmHHHInH5UzVgzi5tpu4+FmGfsdT7Umqegobtsp23A==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@tanstack/react-virtual@3.13.0':
     resolution: {integrity: sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==}
     peerDependencies:
@@ -2794,9 +2799,6 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
-  jose@6.0.8:
-    resolution: {integrity: sha512-EyUPtOKyTYq+iMOszO42eobQllaIjJnwkZ2U93aJzNyPibCy7CEvT9UQnaCVB51IAd49gbNdCew1c0LcLTCB2g==}
-
   jquery@3.7.1:
     resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
 
@@ -3638,14 +3640,6 @@ packages:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
-  remix-hook-form@6.1.3:
-    resolution: {integrity: sha512-lpEWqdehtF0ok0D8varghH64mm/GFgbilPCMtQz/J1RVu+J/BPgYZgb44yhIYGI09HfNDADSXBTIvX4WLwJmwQ==}
-    peerDependencies:
-      react: ^18.2.0 || ^19.0.0
-      react-dom: ^18.2.0 || ^19.0.0
-      react-hook-form: ^7.51.0
-      react-router: '>=7.0.0'
-
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -5530,6 +5524,13 @@ snapshots:
       - supports-color
       - typescript
 
+  '@tanstack/query-core@5.66.4': {}
+
+  '@tanstack/react-query@5.66.9(react@19.0.0)':
+    dependencies:
+      '@tanstack/query-core': 5.66.4
+      react: 19.0.0
+
   '@tanstack/react-virtual@3.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@tanstack/virtual-core': 3.13.0
@@ -7181,8 +7182,6 @@ snapshots:
 
   jiti@2.4.2: {}
 
-  jose@6.0.8: {}
-
   jquery@3.7.1: {}
 
   js-beautify@1.15.1:
@@ -7955,13 +7954,6 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
-  remix-hook-form@6.1.3(react-dom@19.0.0(react@19.0.0))(react-hook-form@7.54.2(react@19.0.0))(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0):
-    dependencies:
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-      react-hook-form: 7.54.2(react@19.0.0)
-      react-router: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}