fix: API Requests

Author: raminr77

src/pages/auth/login-page.tsx

@@ -1,8 +1,9 @@
-import { Link, useNavigate } from 'react-router';
+import { Link, Navigate, useNavigate } from 'react-router';
+import { useDispatch, useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
-import { useDispatch } from 'react-redux';
 import { clsx } from 'clsx';
 
+import { userSelectors } from '@/shared/store/features/user/user-selectors.ts';
 import { loginAction } from '@/shared/store/features/user/user-slices';
 import { LoginQuery } from '@/shared/services/user-api/types';
 import { useLoginMutation } from '@/shared/services/user-api';
@@ -13,6 +14,11 @@ export function LoginPage() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [loginRequest, { isLoading }] = useLoginMutation();
+  const { isAuthenticated } = useSelector(userSelectors.userInfo);
+
+  if (isAuthenticated) {
+    return <Navigate to={APP_ROUTES.main} replace />;
+  }
 
   const { register, handleSubmit } = useForm<LoginQuery>({
     defaultValues: {
@@ -72,7 +78,7 @@ export function LoginPage() {
           {isLoading ? 'Loading...' : 'Login'}
         </button>
 
-        <Link to={APP_ROUTES.landing}>Return Home</Link>
+        <Link to={APP_ROUTES.landing}>[ Return Home ]</Link>
       </form>
     </div>
   );

src/pages/landing-page.tsx

@@ -1,26 +1,42 @@
-import { Link, Navigate } from 'react-router';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router';
 
 import { userSelectors } from '@/shared/store/features/user/user-selectors';
+import { logoutAction } from '@/shared/store/features/user/user-slices';
 import { APP_ROUTES } from '@/shared/constants';
 
 export function LandingPage() {
+  const dispatch = useDispatch();
   const { isAuthenticated } = useSelector(userSelectors.userInfo);
 
-  if (isAuthenticated) {
-    return <Navigate to={APP_ROUTES.main} replace />;
-  }
+  const handleLogout = () => {
+    dispatch(logoutAction());
+  };
 
   return (
     <main className='flex flex-col items-center justify-center h-dvh gap-6'>
-      <h3>Landing Page</h3>
+      <h3 className='text-2xl'>Landing Page</h3>
+      {isAuthenticated && <p className='text-slate-400'>You Are Logged In Now</p>}
       <div className='flex items-center justify-center gap-4 flex-wrap'>
-        <Link className='border py-3 px-4 rounded' to={APP_ROUTES.login}>
-          Login Sample
-        </Link>
-        <Link className='border py-3 px-4 rounded' to={APP_ROUTES.main}>
-          Protected Route
+        {isAuthenticated ? (
+          <button className='border py-3 px-4 rounded' onClick={handleLogout}>
+            Logout
+          </button>
+        ) : (
+          <Link className='border py-3 px-4 rounded' to={APP_ROUTES.login}>
+            Login Page
+          </Link>
+        )}
+
+        <Link className='flex gap-2 border py-3 px-4 rounded' to={APP_ROUTES.main}>
+          Main Page
+          {isAuthenticated ? (
+            <span className='text-green-500'>( Allowed )</span>
+          ) : (
+            <span className='text-red-500'>( Protected )</span>
+          )}
         </Link>
+
         <Link className='border py-3 px-4 rounded' to={APP_ROUTES.notFound}>
           Not Found Page
         </Link>

src/pages/main/main-page.tsx

@@ -2,6 +2,8 @@ import { useDispatch } from 'react-redux';
 
 import { logoutAction } from '@/shared/store/features/user/user-slices';
 import { useGetMainQuery } from '@/shared/services/main-api';
+import { APP_ROUTES } from '@/shared/constants';
+import { Link } from 'react-router';
 
 export function MainPage() {
   const dispatch = useDispatch();
@@ -13,23 +15,26 @@ export function MainPage() {
 
   return (
     <main className='flex w-full flex-col items-center justify-center h-dvh gap-6'>
-      <h3>Main Page ( Protected )</h3>
+      <h3 className='flex gap-1'>
+        Main Page <span className='text-red-500'>( Protected )</span>
+      </h3>
       <button className='border py-3 px-4 rounded' onClick={handleLogout}>
         Logout
       </button>
+      <Link to={APP_ROUTES.landing}>[ Return Home ]</Link>
 
       {isFetching && <p>Loading...</p>}
       {data && (
-        <div className='flex flex-col gap-2'>
-          <div className='border-b py-2 px-4 flex items-center justify-between mb-4'>
+        <div className='w-full flex flex-col gap-2'>
+          <div className='w-full border-b py-2 px-4 flex items-center justify-between mb-4'>
             <span>Name</span>
             <span>Age</span>
           </div>
 
           {data.data.map((item) => (
             <div
               key={item.id}
-              className='border py-2 px-4 rounded flex items-center justify-between'
+              className='w-full border py-2 px-4 rounded flex items-center justify-between'
             >
               <span>{item.name}</span>
               <span>{item.age}</span>

src/pages/not-found-page.tsx

@@ -12,7 +12,7 @@ export function NotFoundPage() {
       )}
     >
       <h3>404 | Not Found Page</h3>
-      <Link to={APP_ROUTES.landing}>Return Home</Link>
+      <Link to={APP_ROUTES.landing}>[ Return Home ]</Link>
     </main>
   );
 }

src/shared/services/main-api/endpoints.ts

@@ -1,3 +1,3 @@
 export const ENDPOINT = {
-  main: 'react-sample'
+  main: 'react-sample/'
 } as const;

src/shared/services/user-api/endpoints.ts

@@ -1,3 +1,3 @@
 export const ENDPOINT = {
-  login: 'react-sample'
+  login: 'react-sample/'
 } as const;