feat: update todo loading functionality with internationalization support

Author: thinhphoenix

src/global.css

@@ -5,5 +5,5 @@
 }
 
 .todo {
-  @apply bg-teal-100 p-2 rounded-md border border-teal-300 mt-4;
+  @apply bg-blue-100 p-2 rounded-md border border-blue-300 mt-4 text-blue-800;
 }

src/locales/common/en-US.ts

@@ -1,5 +1,5 @@
 export default {
   currency: 'USD',
-  submitBtn: 'Submit',
-  cancelBtn: 'Cancel',
+  loadTodos: 'Load Todos',
+  loadTodosSuccess: 'Todos loaded successfully!',
 };

src/locales/common/vi-VN.ts

@@ -1,5 +1,5 @@
 export default {
   currency: 'VND',
-  submitBtn: 'Xác nhận',
-  cancelBtn: 'Hủy',
+  loadTodos: 'Tải danh sách công việc',
+  loadTodosSuccess: 'Tải danh sách công việc thành công!',
 };

src/routes/index.tsx

@@ -1,7 +1,8 @@
+import i18n from '@/helpers/i18n';
 import { useListTodos } from '@/services/hooks/todo/use-list-todos';
 import type { TodoDto } from '@/types/dto/todo.dto';
 import { createFileRoute } from '@tanstack/react-router';
-import { Button, Row } from 'antd';
+import { Button, Col, Row } from 'antd';
 import { useState } from 'react';
 
 export const Route = createFileRoute('/')({
@@ -17,10 +18,17 @@ function RouteComponent() {
   };
 
   return (
-    <Row className="p-4">
-      <Button onClick={handleClick} variant="solid" color="primary">
-        {isLoading ? 'Loading...' : 'Load Todos'}
-      </Button>
+    <Col className="p-4">
+      <Row>
+        <Button
+          onClick={handleClick}
+          variant="solid"
+          color="primary"
+          loading={isLoading}
+        >
+          {i18n.t('common:loadTodos')}
+        </Button>
+      </Row>
       {data && (
         <Row className="todo">
           {error && <p>{error.message}</p>}
@@ -29,6 +37,6 @@ function RouteComponent() {
           })}
         </Row>
       )}
-    </Row>
+    </Col>
   );
 }

src/services/hooks/todo/use-list-todos.ts

@@ -1,4 +1,5 @@
 import api from '@/helpers/axios-instance';
+import i18n from '@/helpers/i18n';
 import { endpoints } from '@/services/endpoints';
 import { useToast } from '@/services/hooks/common/use-toast';
 import type { TodoDto } from '@/types/dto/todo.dto';
@@ -16,7 +17,7 @@ export const useListTodos = (enabled: boolean) => {
 
   useEffect(() => {
     if (isSuccess) {
-      toast.success('Todos loaded successfully');
+      toast.success(i18n.t('common:loadTodosSuccess'));
     }
   }, [isSuccess, toast]);