refactor: page component now includes loader & action like in remix, …

…keep files in folders flat

src/modules/auth/pages/login.page.tsx

@@ -0,0 +1,90 @@
+import reactjs from '#assets/images/reactjs.svg';
+import { authApi, loginSchema } from '#auth/apis/auth.api';
+import { LoginForm } from '#auth/components/login-form';
+import { useUserStore } from '#auth/hooks/use-user-store.hook';
+import { homePath } from '#home/routes';
+import { useI18n } from '#shared/hooks/use-i18n/use-i18n.hook';
+import { checkAuthUser } from '#shared/utils/checker.util';
+import { Link } from 'react-aria-components';
+import { unstable_batchedUpdates } from 'react-dom';
+import type { ActionFunctionArgs, LoaderFunction } from 'react-router-dom';
+import { json, redirect } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+export async function action({ request }: ActionFunctionArgs) {
+  if (request.method === 'POST') {
+    const payload = Object.fromEntries(await request.formData());
+
+    // if `payload` is not correct, return error object
+    const parsed = loginSchema.safeParse(payload);
+    if (!parsed.success) return json(parsed.error, { status: 400 });
+
+    // will throw if `login` returns 500 error, therefore `errorElement` will be rendered
+    const loginResponse = await authApi.login(parsed.data);
+
+    if ('message' in loginResponse)
+      // on 400 error
+      return json(loginResponse);
+
+    // see https://docs.pmnd.rs/zustand/recipes/recipes#calling-actions-outside-a-react-event-handler
+    unstable_batchedUpdates(() => {
+      useUserStore.getState().setUser(loginResponse); // set user data to store
+    });
+
+    return redirect(homePath.root);
+  }
+
+  toast.warning('Not Implemented');
+  return new Response('Not Implemented', { status: 501 });
+}
+
+export const loader: LoaderFunction = () => {
+  const authed = checkAuthUser();
+
+  // redirect auth user to home
+  if (authed) {
+    toast.info('Already Logged In');
+    return redirect(homePath.root);
+  }
+
+  return null;
+};
+
+export function Element() {
+  const [t] = useI18n();
+
+  return (
+    <div id="LoginPage" className="min-h-screen w-full flex">
+      {/* form */}
+      <section className="min-h-screen w-full flex flex-col justify-center px-10 xl:px-20 md:w-1/2">
+        <h1 className="text-center text-3xl text-primary">{t('welcome')}</h1>
+
+        <LoginForm />
+
+        <p className="py-12 text-center">
+          {t('noAccount')}{' '}
+          <Link
+            aria-label={t('registerHere')}
+            className="link link-primary"
+            href="/does-not-exists"
+          >
+            {t('registerHere')}
+          </Link>
+        </p>
+      </section>
+
+      {/* image */}
+      <section className="hidden md:block w-1/2 shadow-2xl">
+        <span className="relative h-screen w-full md:flex md:items-center md:justify-center">
+          <img
+            src={reactjs}
+            alt="cool react logo with rainbow shadow"
+            loading="lazy"
+            className="h-full object-cover"
+            aria-label="cool react logo"
+          />
+        </span>
+      </section>
+    </div>
+  );
+}

src/modules/auth/pages/not-found/page.tsx → src/modules/auth/pages/not-found.page.tsx

@@ -6,7 +6,7 @@ import { useColorMode } from '#shared/hooks/use-color-mode.hook';
 import { useI18n } from '#shared/hooks/use-i18n/use-i18n.hook';
 import { Link } from 'react-aria-components';
 
-export function NotFoundPage() {
+export function Element() {
   const userStore = useUserStore();
   const [t] = useI18n();
   useColorMode({

src/modules/auth/routes.tsx

@@ -1,5 +1,3 @@
-import { loginAction } from '#auth/pages/login/action';
-import { loginLoader } from '#auth/pages/login/loader';
 import { RouteErrorBoundary } from '#shared/components/route-error-boundary';
 import type { RouteObject } from 'react-router-dom';
 
@@ -17,12 +15,12 @@ export const loginRoute = {
   id: authId.login,
   path: authPath.login,
   lazy: async () => {
-    const { LoginPage } = await import('./pages/login/page');
+    const login = await import('./pages/login.page');
 
     return {
-      action: loginAction,
-      loader: loginLoader,
-      element: <LoginPage />,
+      action: login.action,
+      loader: login.loader,
+      element: <login.Element />,
       errorElement: <RouteErrorBoundary />,
     };
   },
@@ -35,8 +33,8 @@ export const notFoundRoute = {
   id: 'notFound',
   path: '*',
   lazy: async () => {
-    const { NotFoundPage } = await import('./pages/not-found/page');
+    const notFound = await import('./pages/not-found.page');
 
-    return { element: <NotFoundPage /> };
+    return { element: <notFound.Element /> };
   },
 } as const satisfies RouteObject;

src/modules/home/components/home-clock-section.tsx → src/modules/home/components/home-clock.tsx

@@ -10,7 +10,7 @@ import { useNavigate } from 'react-router-dom';
 
 const currentDate = new Date();
 
-export function HomeClockSection() {
+export function HomeClock() {
   const [t] = useI18n();
   const navigate = useNavigate();
   const [parentRef] = useAutoAnimate();

src/modules/home/pages/home.page.tsx

@@ -0,0 +1,35 @@
+import { authPath } from '#auth/routes';
+import { HomeClock } from '#home/components/home-clock';
+import { useI18n } from '#shared/hooks/use-i18n/use-i18n.hook';
+import { checkAuthUser } from '#shared/utils/checker.util';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { redirect, type LoaderFunction } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+export const loader: LoaderFunction = () => {
+  const authed = checkAuthUser();
+
+  // redirect NOT authed user to login
+  if (!authed) {
+    toast.error('Unauthorized');
+    return redirect(authPath.login);
+  }
+
+  return null;
+};
+
+export function Element() {
+  const [t] = useI18n();
+  const [parentRef] = useAutoAnimate();
+
+  return (
+    <div
+      ref={parentRef}
+      className="container mx-auto flex flex-col items-center py-24 duration-300"
+    >
+      <h1 className="text-3xl sm:text-4xl">{t('title')}</h1>
+
+      <HomeClock />
+    </div>
+  );
+}

src/modules/home/routes.tsx

@@ -1,4 +1,3 @@
-import { homeLoader } from '#home/pages/loader';
 import { PageWrapper } from '#shared/components/page-wrapper';
 import { RouteErrorBoundary } from '#shared/components/route-error-boundary';
 import type { RouteObject } from 'react-router-dom';
@@ -17,11 +16,11 @@ const homeIndexRoute = {
   id: homeId.index,
   index: true,
   lazy: async () => {
-    const { HomePage } = await import('./pages/page');
+    const home = await import('./pages/home.page');
 
     return {
-      loader: homeLoader,
-      element: <HomePage />,
+      loader: home.loader,
+      element: <home.Element />,
       errorElement: <RouteErrorBoundary />,
     };
   },

src/modules/playground/pages/page.tsx → src/modules/playground/pages/playground.page.tsx

@@ -11,7 +11,7 @@ const tabClassName: ComponentPropsWithoutRef<typeof Tab>['className'] = ({
   isDisabled,
 }) => twJoin('tab', isSelected && 'tab-active', isDisabled && 'tab-disabled');
 
-export function PlaygroundPage() {
+export function Element() {
   const [, setTheme] = useColorMode({
     modes,
     attribute: 'data-theme',

src/modules/playground/routes.tsx

@@ -13,10 +13,10 @@ export const playgroundRoute = {
   id: playgroundId.root,
   path: playgroundPath.root,
   lazy: async () => {
-    const { PlaygroundPage } = await import('./pages/page');
+    const playground = await import('./pages/playground.page');
 
     return {
-      element: <PlaygroundPage />,
+      element: <playground.Element />,
       errorElement: <RouteErrorBoundary />,
     };
   },

src/modules/todo/components/todos-create/todos-create.tsx → src/modules/todo/components/todos-create.tsx

@@ -59,7 +59,6 @@ export function TodosCreate() {
       </DaisyModal>
 
       <form
-        id="todos-create"
         className="form-control mb-3 w-full duration-300 lg:flex-row"
         onSubmit={form.handleSubmit((values) => {
           const payload = {

src/modules/todo/components/todos-item/todos-item.tsx → src/modules/todo/components/todos-list-item.tsx

@@ -4,18 +4,20 @@ import type { TodoSchema } from '#todo/apis/todo.api';
 import { useTodoDelete } from '#todo/hooks/use-todo-delete.hook';
 import { useTodoUpdate } from '#todo/hooks/use-todo-update.hook';
 import { Button, Link } from 'react-aria-components';
+import { useHref } from 'react-router-dom';
 import { twJoin } from 'tailwind-merge';
 import { match } from 'ts-pattern';
 
-export function TodosItem({
-  todo,
-}: {
+interface Props {
   todo: TodoSchema;
-}) {
+}
+
+export function TodosListItem({ todo }: Props) {
   const [t] = useI18n();
   const { user } = useUserStore();
   const updateTodoMutation = useTodoUpdate();
   const deleteTodoMutation = useTodoDelete();
+  const href = useHref(todo.id.toString(), { relative: 'path' });
 
   return (
     <form
@@ -43,12 +45,12 @@ export function TodosItem({
       />
 
       <Link
+        href={href}
         aria-label={`link todo item with id: ${todo.id}`}
         className={twJoin(
           'ml-5 w-full text-left text-lg hover:font-bold',
           todo.completed && 'line-through',
         )}
-        href={todo.id.toString()}
       >
         {todo.todo}
       </Link>