From 23a79657b9c576966d8dd1fec86cba8655aecd29 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Mon, 30 Oct 2023 17:54:40 +0700
Subject: [PATCH] Implement sort method

---
 hotel-management/src/components/OrderBy.tsx   | 72 +++++++++++++++++++
 hotel-management/src/components/Select.tsx    | 32 +++++++++
 hotel-management/src/components/SortBy.tsx    | 30 ++++++++
 .../src/components/Table/index.tsx            |  6 +-
 hotel-management/src/helpers/utils.ts         | 23 ++++++
 hotel-management/src/hooks/useFetch.ts        | 18 +++--
 hotel-management/src/pages/User/Table.tsx     | 38 +++++++++-
 hotel-management/src/pages/User/styled.ts     |  4 +-
 .../src/styles/abstracts/variables.css        |  1 +
 9 files changed, 212 insertions(+), 12 deletions(-)
 create mode 100644 hotel-management/src/components/OrderBy.tsx
 create mode 100644 hotel-management/src/components/Select.tsx
 create mode 100644 hotel-management/src/components/SortBy.tsx

diff --git a/hotel-management/src/components/OrderBy.tsx b/hotel-management/src/components/OrderBy.tsx
new file mode 100644
index 0000000..9d72a3c
--- /dev/null
+++ b/hotel-management/src/components/OrderBy.tsx
@@ -0,0 +1,72 @@
+import { useSearchParams } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+const StyledFilter = styled.div`
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 5px;
+  display: flex;
+  gap: 10px;
+`;
+
+interface IFilterBtn {
+  active: boolean;
+}
+
+const FilterButton = styled.button<IFilterBtn>`
+  border: none;
+
+  ${(props) =>
+    props.active &&
+    css`
+      background-color: var(--primary-color);
+      color: var(--light-text);
+    `}
+
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  font-size: var(--fs-sm-x);
+  padding: 5px 10px;
+  transition: all 0.3s;
+
+  &:hover:not(:disabled) {
+    background-color: var(--hover-dark-background-color);
+  }
+`;
+
+interface IFilterProps {
+  options: {
+    value: string;
+    label: string;
+  }[];
+}
+
+function OrderBy({ options }: IFilterProps) {
+  const field = 'orderBy';
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const currentFilter = searchParams.get(field) || options[0].value;
+
+  const handleClick = (value: string) => {
+    searchParams.set(field, value);
+
+    setSearchParams(searchParams);
+  };
+
+  return (
+    <StyledFilter>
+      {options.map((option) => (
+        <FilterButton
+          key={option.value}
+          onClick={() => handleClick(option.value)}
+          active={option.value === currentFilter}
+          disabled={option.value === currentFilter}
+        >
+          {option.label}
+        </FilterButton>
+      ))}
+    </StyledFilter>
+  );
+}
+
+export default OrderBy;
diff --git a/hotel-management/src/components/Select.tsx b/hotel-management/src/components/Select.tsx
new file mode 100644
index 0000000..83c7077
--- /dev/null
+++ b/hotel-management/src/components/Select.tsx
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+interface ISelect {
+  options: {
+    value: string;
+    label: string;
+  }[];
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+const StyledSelect = styled.select`
+  font-size: var(--fs-sm-x);
+  padding: 5px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+`;
+
+function Select({ options, value, onChange }: ISelect) {
+  return (
+    <StyledSelect value={value} onChange={onChange}>
+      {options.map((option) => (
+        <option value={option.value} key={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </StyledSelect>
+  );
+}
+
+export default Select;
diff --git a/hotel-management/src/components/SortBy.tsx b/hotel-management/src/components/SortBy.tsx
new file mode 100644
index 0000000..524366b
--- /dev/null
+++ b/hotel-management/src/components/SortBy.tsx
@@ -0,0 +1,30 @@
+import { useSearchParams } from 'react-router-dom';
+import Select from './Select';
+
+interface ISortByProps {
+  options: {
+    value: string;
+    label: string;
+  }[];
+}
+
+const SortBy = ({ options }: ISortByProps) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sortBy = searchParams.get('sortBy') || '';
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    searchParams.set('sortBy', event.target.value);
+    setSearchParams(searchParams);
+  };
+
+  // prettier-ignore
+  return (
+    <Select 
+      options={options} 
+      value={sortBy} 
+      onChange={handleChange} 
+    />
+  );
+};
+
+export default SortBy;
diff --git a/hotel-management/src/components/Table/index.tsx b/hotel-management/src/components/Table/index.tsx
index 62166d4..e086d9d 100644
--- a/hotel-management/src/components/Table/index.tsx
+++ b/hotel-management/src/components/Table/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useContext } from 'react';
+import { ReactNode, memo, useContext } from 'react';
 
 // Components
 import { StyledBody, StyledHeader, StyledRow, StyledTable } from './styled';
@@ -19,10 +19,10 @@ const Table = ({ columns, children }: ITable) => {
   );
 };
 
-const Header = ({ children }: ITable) => {
+const Header = memo(({ children }: ITable) => {
   const columns = useContext(TableContext);
   return <StyledHeader columns={columns}>{children}</StyledHeader>;
-};
+});
 
 const Body = <T,>({ data, render }: ITableBody<T>) => {
   return (
diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index eb5ff4f..58cf7d8 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -55,12 +55,35 @@ const getValueUser = (user: TUser | null = null, prop: string): string => {
   return '';
 };
 
+const searchQuery = (phone: string, sort: string, order: string) => {
+  const phoneParams = phone ? 'phone_like=' + phone : '';
+  const sortParams = sort ? '_sort=' + sort : '_sort=id';
+  const orderParams = order ? '_order=' + order : '_order=asc';
+  const finalParam = [phoneParams, sortParams, orderParams];
+  let query = '';
+  let isFirstParam = true;
+
+  finalParam.forEach((param) => {
+    if (param) {
+      if (isFirstParam) {
+        query = query.concat('', param);
+        isFirstParam = false;
+      } else {
+        query = query.concat('&', param);
+      }
+    }
+  });
+
+  return query;
+};
+
 export {
   isObject,
   isRequired,
   getPropValues,
   getValueUser,
   addValidator,
+  searchQuery,
   VALUE,
   ERROR,
   REQUIRED_FIELD_ERROR,
diff --git a/hotel-management/src/hooks/useFetch.ts b/hotel-management/src/hooks/useFetch.ts
index c400959..6a78685 100644
--- a/hotel-management/src/hooks/useFetch.ts
+++ b/hotel-management/src/hooks/useFetch.ts
@@ -2,8 +2,15 @@ import { useEffect, useState } from 'react';
 
 // Constants
 import { BASE_URL } from '../constants/path';
+import { searchQuery } from '../helpers/utils';
 
-export const useFetch = (path: string, phoneNum: string, reload?: boolean) => {
+export const useFetch = (
+  path: string,
+  phoneNum: string,
+  sortBy: string,
+  orderBy: string,
+  reload?: boolean,
+) => {
   const [data, setData] = useState(null);
   const [isPending, setIsPending] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -15,13 +22,10 @@ export const useFetch = (path: string, phoneNum: string, reload?: boolean) => {
     const fetchData = async () => {
       setIsPending(true);
 
-      // prettier-ignore
-      const query = phoneNum
-        ? `?phone_like=${phoneNum}`
-        : '';
+      const query = searchQuery(phoneNum, sortBy, orderBy);
 
       try {
-        const response = await fetch(BASE_URL + path + query);
+        const response = await fetch(BASE_URL + path + '?' + query);
         const json = await response.json();
 
         if (!response.ok)
@@ -39,6 +43,6 @@ export const useFetch = (path: string, phoneNum: string, reload?: boolean) => {
     };
 
     fetchData();
-  }, [path, reload, phoneNum]);
+  }, [path, reload, phoneNum, orderBy, sortBy]);
   return { data, isPending, errorMsg };
 };
diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx
index e9e60e8..17e514d 100644
--- a/hotel-management/src/pages/User/Table.tsx
+++ b/hotel-management/src/pages/User/Table.tsx
@@ -25,6 +25,9 @@ import Spinner from '../../commons/styles/Spinner';
 // Utils
 import { sendRequest } from '../../helpers/sendRequest';
 import Search from '../../components/Search';
+import SortBy from '../../components/SortBy';
+import OrderBy from '../../components/OrderBy';
+import { useSearchParams } from 'react-router-dom';
 
 interface IUserRow {
   user: TUser;
@@ -106,8 +109,22 @@ const UserTable = ({
   setUser,
 }: IUserTable) => {
   const [phoneSearch, setPhoneSearch] = useState('');
-  const { data, isPending, errorMsg } = useFetch('users', phoneSearch, reload);
+  const [searchParams] = useSearchParams();
   const [users, setUsers] = useState<TUser[]>([]);
+  const sortByValue = searchParams.get('sortBy')
+    ? searchParams.get('sortBy')!
+    : '';
+  const orderByValue = searchParams.get('orderBy')
+    ? searchParams.get('orderBy')!
+    : '';
+
+  const { data, isPending, errorMsg } = useFetch(
+    'users',
+    phoneSearch,
+    sortByValue,
+    orderByValue,
+    reload,
+  );
 
   useEffect(() => {
     if (data) {
@@ -125,6 +142,25 @@ const UserTable = ({
     <>
       <Direction>
         <StyledOperationTable>
+          <OrderBy
+            options={[
+              { value: 'asc', label: 'Ascending' },
+              { value: 'desc', label: 'Descending' },
+            ]}
+          />
+
+          <SortBy
+            options={[
+              { value: 'id', label: 'Sort by id' },
+              { value: 'name', label: 'Sort by name' },
+              {
+                value: 'identifiedCode',
+                label: 'Sort by identified code',
+              },
+              { value: 'phone', label: 'Sort by phone' },
+              { value: 'room', label: 'Sort by room' },
+            ]}
+          />
           <Search setPhoneSearch={setPhoneSearch} />
         </StyledOperationTable>
 
diff --git a/hotel-management/src/pages/User/styled.ts b/hotel-management/src/pages/User/styled.ts
index f8323fe..803f1ec 100644
--- a/hotel-management/src/pages/User/styled.ts
+++ b/hotel-management/src/pages/User/styled.ts
@@ -16,7 +16,9 @@ const Title = styled.h2`
 `;
 
 const StyledOperationTable = styled.div`
-  text-align: right;
+  display: flex;
+  gap: 30px;
+  justify-content: flex-end;
 `;
 
 export { StyledUser, Title, StyledOperationTable };
diff --git a/hotel-management/src/styles/abstracts/variables.css b/hotel-management/src/styles/abstracts/variables.css
index 6bf698c..c497130 100644
--- a/hotel-management/src/styles/abstracts/variables.css
+++ b/hotel-management/src/styles/abstracts/variables.css
@@ -8,6 +8,7 @@
   --disabled-btn-color: #7f82a6;
 
   --hover-background-color: #f3f4f6;
+  --hover-dark-background-color: #d0d0d0;
 
   --light-text: #fff;
   --dark-text: #787878;