From d44eb6ff11434b4f6dd7c405bb982dce697ad77e Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 27 Oct 2023 17:12:48 +0700 Subject: [PATCH 1/2] Load data from api to the page --- hotel-management/db.json | 76 +++++++++++++++++++ .../src/commons/styles/Spinner.ts | 24 ++++++ hotel-management/src/constants/path.ts | 1 + hotel-management/src/constants/sampleData.ts | 68 ----------------- hotel-management/src/hooks/useFetch.ts | 36 +++++++++ hotel-management/src/pages/User/Table.tsx | 20 ++++- 6 files changed, 153 insertions(+), 72 deletions(-) create mode 100644 hotel-management/db.json create mode 100644 hotel-management/src/commons/styles/Spinner.ts delete mode 100644 hotel-management/src/constants/sampleData.ts create mode 100644 hotel-management/src/hooks/useFetch.ts diff --git a/hotel-management/db.json b/hotel-management/db.json new file mode 100644 index 0000000..07a3a79 --- /dev/null +++ b/hotel-management/db.json @@ -0,0 +1,76 @@ +{ + "users": [ + { + "id": "123", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + }, + { + "id": "231", + "name": "Phan Huu Loi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Ho Chi Minh" + }, + { + "id": "312", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + }, + { + "id": "523", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + }, + { + "id": "534", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + }, + { + "id": "756", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + }, + { + "id": "23", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + }, + { + "id": "756", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + }, + { + "id": "756", + "name": "Nezumi", + "identifiedCode": "123", + "phone": "0937425123", + "roomId": 246, + "address": "Da Nang" + } + ] +} diff --git a/hotel-management/src/commons/styles/Spinner.ts b/hotel-management/src/commons/styles/Spinner.ts new file mode 100644 index 0000000..0dcb41d --- /dev/null +++ b/hotel-management/src/commons/styles/Spinner.ts @@ -0,0 +1,24 @@ +import styled, { keyframes } from 'styled-components'; + +const rotate = keyframes` + to { + transform: rotate(1turn) + } +`; + +const Spinner = styled.div` + margin: 100px auto; + + width: 80px; + aspect-ratio: 1; + border-radius: 50%; + background: + radial-gradient(farthest-side, var(--primary-color) 94%, #0000) top/10px + 10px no-repeat, + conic-gradient(#0000 30%, var(--primary-color)); + -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0); + mask: none; + animation: ${rotate} 1.5s infinite linear; +`; + +export default Spinner; diff --git a/hotel-management/src/constants/path.ts b/hotel-management/src/constants/path.ts index 98c28d3..e4900ab 100644 --- a/hotel-management/src/constants/path.ts +++ b/hotel-management/src/constants/path.ts @@ -2,3 +2,4 @@ export const DASHBOARD: string = '/dashboard'; export const USER: string = '/user'; export const ROOM: string = '/room'; export const OTHER_PATH: string = '*'; +export const BASE_URL: string = 'https://hotel-management-api.loiphan.com/'; diff --git a/hotel-management/src/constants/sampleData.ts b/hotel-management/src/constants/sampleData.ts deleted file mode 100644 index c851dec..0000000 --- a/hotel-management/src/constants/sampleData.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { TUser } from '../globals/types'; - -export const sampleData: TUser[] = [ - { - id: '123', - name: 'Nezumi', - identifiedCode: '123', - phone: '0937425123', - roomId: '246', - address: 'Da Nang', - }, - { - id: '456', - name: 'Nezumi', - identifiedCode: '123', - phone: '123', - roomId: '246', - address: 'Da Nang', - }, - { - id: '231', - name: 'Nezumi', - identifiedCode: '123', - phone: '123', - roomId: '246', - address: 'Da Nang', - }, - { - id: '241', - name: 'Nezumi', - identifiedCode: '123', - phone: '123', - roomId: '246', - address: 'Da Nang', - }, - { - id: '512', - name: 'Nezumi', - identifiedCode: '123', - phone: '123', - roomId: '246', - address: 'Da Nang', - }, - { - id: '524', - name: 'Nezumi', - identifiedCode: '123', - phone: '123', - roomId: '246', - address: 'Da Nang', - }, - { - id: '125', - name: 'Nezumi', - identifiedCode: '123', - phone: '123', - roomId: '246', - address: 'Da Nang', - }, - { - id: '111', - name: 'Nezumi', - identifiedCode: '123', - phone: '123', - roomId: '246', - address: 'Da Nang', - }, -]; diff --git a/hotel-management/src/hooks/useFetch.ts b/hotel-management/src/hooks/useFetch.ts new file mode 100644 index 0000000..cb21b4f --- /dev/null +++ b/hotel-management/src/hooks/useFetch.ts @@ -0,0 +1,36 @@ +import { useEffect, useState } from 'react'; + +// Constants +import { BASE_URL } from '../constants/path'; + +export const useFetch = (path: string) => { + const [data, setData] = useState(null); + const [isPending, setIsPending] = useState(false); + const [errorMsg, setErrorMsg] = useState(null); + + useEffect(() => { + const fetchData = async () => { + setIsPending(true); + + try { + const response = await fetch(BASE_URL + path); + const json = await response.json(); + + if (!response.ok) + throw new Error( + `Error code: ${response.status} \n Messages: ${response.statusText}`, + ); + + setIsPending(false); + setData(json); + setErrorMsg(null); + } catch (error) { + setErrorMsg(`Could not fetch data.\n ${error}`); + setIsPending(false); + } + }; + + fetchData(); + }, [path]); + return { data, isPending, errorMsg }; +}; diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx index 279c7f8..acaad42 100644 --- a/hotel-management/src/pages/User/Table.tsx +++ b/hotel-management/src/pages/User/Table.tsx @@ -11,7 +11,10 @@ import Message from '../../components/Message'; import { TUser } from '../../globals/types'; // Constants -import { sampleData } from '../../constants/sampleData'; +import { useFetch } from '../../hooks/useFetch'; + +// Styled +import Spinner from '../../commons/styles/Spinner'; type TUserModal = { user: TUser }; @@ -50,10 +53,19 @@ const UserRow = ({ user }: TUserModal) => { }; const UserTable = () => { - return sampleData.length ? ( + const { data, isPending, errorMsg } = useFetch('users'); + let users: TUser[] = []; + + if (data) users = data; + + if (isPending) return ; + + if (errorMsg) console.error(errorMsg); + + return users.length ? ( -

Sort / Filter / Search table

+

Sort / Search table

 @@ -66,7 +78,7 @@ const UserTable = () => {
Room
- data={sampleData} + data={users} render={(user: TUser) => } /> From 7e7b9b29d5abd29b1de03ce2f6c17e1271e8ae77 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Sun, 29 Oct 2023 09:58:05 +0700 Subject: [PATCH 2/2] Optimized code --- hotel-management/src/pages/User/Table.tsx | 66 +++++++++++++---------- 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx index acaad42..1d1ddb5 100644 --- a/hotel-management/src/pages/User/Table.tsx +++ b/hotel-management/src/pages/User/Table.tsx @@ -15,6 +15,7 @@ import { useFetch } from '../../hooks/useFetch'; // Styled import Spinner from '../../commons/styles/Spinner'; +import { useEffect, useState } from 'react'; type TUserModal = { user: TUser }; @@ -54,38 +55,47 @@ const UserRow = ({ user }: TUserModal) => { const UserTable = () => { const { data, isPending, errorMsg } = useFetch('users'); - let users: TUser[] = []; + const [users, setUsers] = useState([]); - if (data) users = data; + useEffect(() => { + if (data) { + setUsers(data); + } - if (isPending) return ; + if (errorMsg) { + console.error(errorMsg); + } + }, [data, errorMsg]); - if (errorMsg) console.error(errorMsg); + return ( + <> + {isPending && } + {users.length ? ( + + +

Sort / Search table

+ - return users.length ? ( - - -

Sort / Search table

- - - - - -
Id
-
Name
-
Identified Code
-
Phone
-
Room
- - - data={users} - render={(user: TUser) => } - /> -
- - - ) : ( - No data to show here! + + + +
Id
+
Name
+
Identified Code
+
Phone
+
Room
+ + + data={users} + render={(user: TUser) => } + /> +
+ + + ) : ( + No data to show here! + )} + ); };