README.md

@@ -15,15 +15,6 @@ To install pnpm, run:
 npm install -g pnpm@9.15.4
 ```
 
-### Setup Environtment
-
-You'll need to set the following environment variables to connect to your backend:
-
-```bash
-VITE_API_URL: The domain or IP address of your backend server (e.g., http://localhost:3000, http://127.0.0.1:8080, or the actual backend server URL).
-VITE_SALT_KEY: The salt key that used for hashing the secret variable.
-```
-
 ### Installation
 
 Install the dependencies:

app/components/popup/modal.tsx

@@ -42,7 +42,7 @@ export const PopupModal = ({
           <DialogTitle className="relative flex justify-center">
             <button
               onClick={onClose}
-              className="absolute top-0 left-0 items-center sm:hidden"
+              className="absolute top-0 left-0 items-center lg:hidden"
             >
               <LeftArrow
                 width={50}

app/components/popup/success-modal.tsx

@@ -54,7 +54,7 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
           <DialogTitle className="relative flex justify-center">
             <button
               onClick={onClose}
-              className="absolute top-0 left-0 items-center sm:hidden"
+              className="absolute top-0 left-0 items-center lg:hidden"
             >
               <LeftArrow
                 width={50}

app/components/ui/banner.tsx

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

app/components/ui/carousel.tsx

@@ -115,7 +115,7 @@ export const Carousel = (properties: TNews) => {
                 <div>
                   <h3
                     className={twMerge(
-                      'mt-2 w-full font-bold sm:mt-0',
+                      'mt-2 w-full font-bold lg:mt-0',
                       type === 'hero'
                         ? 'text-2xl sm:text-4xl'
                         : 'text-xl sm:text-2xl',

app/layouts/news/header-top.tsx

@@ -1,4 +1,4 @@
-import { Link, useFetcher, useRouteLoaderData } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
@@ -8,7 +8,6 @@ import type { loader } from '~/routes/_layout.news'
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_layout.news')
-  const fetcher = useFetcher()
 
   return (
     <>
@@ -30,28 +29,13 @@ export const HeaderTop = () => {
           <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
             About Us
           </Button>
-          {loaderData?.userToken ? (
-            <fetcher.Form
-              method="POST"
-              action="/actions/news/logout"
-            >
-              <Button
-                variant="newsSecondary"
-                className="hidden sm:block"
-                type="submit"
-              >
-                Logout
-              </Button>
-            </fetcher.Form>
-          ) : (
-            <Button
-              variant="newsSecondary"
-              className="hidden sm:block"
-              onClick={() => setIsLoginOpen(true)}
-            >
-              Masuk
-            </Button>
-          )}
+          <Button
+            variant="newsSecondary"
+            className="hidden sm:block"
+            onClick={() => setIsLoginOpen(true)}
+          >
+            {loaderData?.userToken ? 'Logout' : 'Masuk'}
+          </Button>
         </div>
       </div>
     </>

app/pages/news/index.tsx

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

app/root.tsx

@@ -6,7 +6,6 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-  type ShouldRevalidateFunctionArgs,
 } from 'react-router'
 
 import type { Route } from './+types/root'
@@ -37,17 +36,7 @@ export const meta = ({ location }: Route.MetaArgs) => {
   ]
 }
 
-export const shouldRevalidate = ({
-  actionResult,
-  defaultShouldRevalidate,
-}: ShouldRevalidateFunctionArgs) => {
-  if (actionResult?.success) {
-    return true
-  }
-  return defaultShouldRevalidate
-}
-
-export const Layout = ({ children }: { children: ReactNode }) => {
+export function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -68,7 +57,11 @@ export const Layout = ({ children }: { children: ReactNode }) => {
   )
 }
 
-export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+export default function App() {
+  return <Outlet />
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   let message = 'Oops!'
   let details = 'An unexpected error occurred.'
   let stack: string | undefined
@@ -96,9 +89,3 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
     </main>
   )
 }
-
-const App = () => {
-  return <Outlet />
-}
-
-export default App

app/routes/actions.news.login.ts

@@ -49,7 +49,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     if (error instanceof XiorError) {
       return data({
         success: false,
-        message: error?.response?.data?.error?.message || error.message,
+        message: error?.response?.data?.error?.message,
       })
     }
     return data({

app/routes/actions.news.logout.ts

@@ -1,22 +0,0 @@
-import { data } from 'react-router'
-
-import { setUserLogoutHeaders } from '~/libs/logout-header.server'
-
-export const action = async () => {
-  try {
-    const responseHeaders = setUserLogoutHeaders()
-
-    return data(
-      { success: true },
-      { headers: responseHeaders, status: 200, statusText: 'OK' },
-    )
-  } catch {
-    return data(
-      {
-        message: 'Something went wrong',
-        success: false,
-      },
-      { status: 500 },
-    )
-  }
-}