UI improvement

frontend/src/components/CardsTable.tsx

@@ -197,7 +197,7 @@ export const CardsTable = ({
                   )}
                 </Td>
                 <Td>
-                  <Button as="a" href="/cards/detail" variant="outline">
+                  <Button as="a" href={`/cards/detail/${d.id}`} variant="outline">
                     View
                   </Button>
                 </Td>

frontend/src/main.tsx

@@ -56,11 +56,11 @@ const router = createBrowserRouter([
     element: <CardsPage />,
   },
   {
-    path: '/cards/detail',
+    path: '/cards/detail/:id',
     element: <CardDetailPage />,
   },
   {
-    path: '/cards/settings',
+    path: '/cards/:id/settings',
     element: <CardSettingsPage />,
   },
 ]);

frontend/src/pages/Login.tsx

@@ -3,7 +3,10 @@ import {
   Box,
   Button,
   Container,
-  Flex,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
   FormControl,
   FormLabel,
   Heading,
@@ -53,6 +56,7 @@ export const LoginPage = () => {
   const [city, setCity] = useState<string>('Berlin');
   const [countryCode, setCountryCode] = useState<string>('DE');
   const [poBox, setPoBox] = useState<string>('10212');
+  const [errors, setErrors] = useState<string[]>([]);
 
   useEffect(() => {
     if (accessToken !== '') {
@@ -119,19 +123,32 @@ export const LoginPage = () => {
   };
 
   const signUp = async (data: any) => {
-    const res = await api.post('/user', JSON.stringify(data));
-    console.log(res);
-    const user = await res.data;
-    console.log(user);
-    console.log(res.status);
-    console.log(res);
+    try {
+      const res = await api.post('/user', JSON.stringify(data));
+      if (res?.response.data.statusCode === 400) {
+          setErrors(res?.response.data.message)
+      } else if(res?.response.data.statusCode === 201){
+      const user = await res?.data;
+      console.log(user);
+      console.log(res?.status);
+    } else {
+      setErrors(["The error is from our end... We're trying to resolve it as soon as possible"])
+    }
+    } catch(e) {
+      console.log(e);
+    }
   };
 
+  console.log(typeof(errors));
+
+
+
   return (
     <>
       <Menu />
       <Box
         bgGradient={{ base: 'white', sm: 'linear(to-r, blue.600, blue.400)' }}
+        minH='100vh'
         py={{ base: '12', md: '24' }}
       >
         <Container
@@ -201,6 +218,26 @@ export const LoginPage = () => {
                       </Text>
                     </Stack>
                   </Stack>
+                  {
+                    errors.length > 0 && 
+                    <Alert status='error'>
+                    <AlertIcon />
+                    {/* <AlertTitle>Error!</AlertTitle> */}
+                    <AlertDescription>
+                    {Array.isArray(errors) ? (
+                      // Render multiple messages
+                      <ul>
+                        {errors.map((msg, index) => (
+                          <Text key={index}>{msg}</Text>
+                        ))}
+                      </ul>
+                    ) : (
+                      // Render a single message
+                      <p>{errors}</p>
+                    )}
+                    </AlertDescription>
+                  </Alert>
+                  }
                   <form
                     onSubmit={(e) => {
                       e.preventDefault();

frontend/src/pages/auth/CardDetail.tsx

@@ -1,27 +1,57 @@
-import { Box, Button } from '@chakra-ui/react';
-import { useContext } from 'react';
+import { Box, Button, Spinner, Text } from '@chakra-ui/react';
+import { useContext, useEffect, useState } from 'react';
 import AuthRootPage from './AuthRoot';
 import { TransactionsTable } from '../../components/TransactionsTable';
 import { AppContext } from '../../context';
+import { useParams } from 'react-router-dom';
+import api from '../../utils/axios.interceptor';
+import { LoadingView } from '../../components/LoadingView';
+
+interface ICardDetail {
+  brand: string,
+  cardId: string,
+  cardholderId: string,
+  currency: string,
+  expMonth: string,
+  expYear: string,
+  last4: string,
+  status: string,
+  type: string,
+  id: string
+}
 
 const CardDetailPage = () => {
   const { accessToken } = useContext(AppContext);
+  const route = useParams()
+  const [CardDetail, setCardDetail] = useState<ICardDetail>()
+
+  useEffect( () => {
+    load()
+  }, [])
+
+  const load = async () => {
+    const res = await api.get(`/card/get/${route.id}`);
+    setCardDetail(res.data)
+  }
 
   return (
     <AuthRootPage
       title="Card and Transactions Details"
       back={true}
       button={
-        <Button as="a" href="/cards/settings" colorScheme={'blue'}>
+        <Button as="a" href={`/cards/${route.id}/settings`} colorScheme={'blue'}>
           Edit Card
         </Button>
       }
     >
-      <Box className="container">
+      {
+        CardDetail ?
+        <>
+        <Box className="container">
         <Box className="card">
           <Box className="visa_logo">
             <img
-              src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/visa.png"
+              src={`https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/${CardDetail.brand === 'Visas' ?'visa' : 'mastercard'}.png`}
               alt=""
             />
           </Box>
@@ -30,15 +60,22 @@ const CardDetailPage = () => {
               src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png"
               alt=""
             />
-            <p>1234 **** **** 0987</p>
+            <p>**** **** **** {CardDetail.last4}</p>
           </Box>
           <Box className="visa_crinfo">
-            <p>08/26</p>
-            <p>Daniel Lite</p>
+            <p>{CardDetail.expMonth}/{CardDetail.expYear}</p>
+            {/* <p>Daniel Lite</p> */}
           </Box>
         </Box>
       </Box>
       <TransactionsTable accessToken={accessToken} />
+      </>
+      : 
+      <Box textAlign="center" py={5}>
+        <Spinner />
+        <Text>Loading card data...</Text>
+      </Box>
+      }
     </AuthRootPage>
   );
 };

frontend/src/pages/auth/CardSettings.tsx

@@ -18,18 +18,21 @@ import PaymentCard from '../../components/PaymentCard';
 import { AppContext } from '../../context';
 import api from '../../utils/axios.interceptor';
 import { handleResponse } from '../../utils/response-helper';
+import { useParams } from 'react-router-dom';
 
 const CardSettingsPage = () => {
   const toast = useToast();
-  const cardId = '65672eec595c1dc89f5271b5';
   const { accessToken } = useContext(AppContext);
   const [card, setCard] = useState<any>();
   const [singleTxLimit, setSingleTxLimit] = useState<number>(1000);
   const [monthlyLimit, setMonthlyLimit] = useState<number>(5000);
 
+  const route = useParams()
+
+
   useEffect(() => {
     const load = async () => {
-      const res = await api.get(`http://localhost:3000/card/get/${cardId}`);
+      const res = await api.get(`/card/get/${route.id}`);
       const card = await res.data;
       setCard(card);
       console.log('card', card);
@@ -41,18 +44,12 @@ const CardSettingsPage = () => {
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
 
-    const res = await fetch(`http://localhost:3000/card/limits`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${accessToken}`,
-      },
-      body: JSON.stringify({
-        cardId,
+    const res = await api.put(`/card/limits`, JSON.stringify({
+        cardId: card.cardId,
         monthlyLimit,
         singleTxLimit,
       }),
-    });
+    );
 
     await handleResponse(
       res,

frontend/src/utils/axios.interceptor.ts

@@ -4,7 +4,7 @@ import { redirect } from 'react-router-dom';
 const api = axios.create({
   baseURL: 'http://localhost:3000', // our API base URL
 });
-
+console.log()
 api.interceptors.request.use(
   (config) => {
     const token = localStorage.getItem('accessToken');
@@ -25,11 +25,11 @@ api.interceptors.response.use(
   },
 
   function (error) {
-    console.log('Error', error);
-    if (error.response.status === 401) {
+    if (error.response.status === 401 && window.location.pathname !== '/login') {
       window.location.replace('/login');
       return Promise.reject(error);
-    }
+    } 
+    return error;
   },
 );