diff --git a/index.html b/index.html index e4b78ea..9c622c2 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ - Vite + React + TS + Shopee Clone | Nham Ngo +
diff --git a/package.json b/package.json index b585a58..dbd0b7a 100644 --- a/package.json +++ b/package.json @@ -21,11 +21,14 @@ "@tailwindcss/line-clamp": "^0.4.4", "@tanstack/react-query": "^5.59.0", "@tanstack/react-query-devtools": "^5.59.0", + "@types/html-to-text": "^9.0.4", + "@types/react-helmet": "^6.1.11", "@types/react-image-magnify": "^2.7.4", "axios": "^1.7.7", "classnames": "^2.5.1", "dompurify": "^3.2.0", "framer-motion": "^11.11.9", + "html-to-text": "^9.0.5", "i18next": "^24.1.0", "immer": "^10.1.1", "jwt-decode": "^4.0.0", @@ -33,6 +36,7 @@ "lucide-react": "^0.460.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-helmet-async": "^2.0.5", "react-hook-form": "^7.53.0", "react-i18next": "^15.2.0", "react-image-magnify": "^2.7.4", diff --git a/src/main.tsx b/src/main.tsx index 177da62..44ef43c 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,6 +7,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { AppProvider } from './contexts/app.context' import ErrorBoundary from './components/ErrorBoundary' import 'src/i18n/i18n' +import { HelmetProvider } from 'react-helmet-async' const queryClient = new QueryClient({ defaultOptions: { queries: { @@ -17,13 +18,17 @@ const queryClient = new QueryClient({ }) createRoot(document.getElementById('root')!).render( - - - - - - - - + + + + + + + + + + + + ) diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index 29036b0..66025fb 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -11,6 +11,7 @@ import { useContext, useState } from 'react' import { AppContext } from 'src/contexts/app.context' import Button from 'src/components/Button' import InputPassword from 'src/components/InputPassword' +import { Helmet } from 'react-helmet-async' type FormData = Pick const loginSchema = schema.pick(['userName', 'password']) export default function Login() { @@ -56,6 +57,10 @@ export default function Login() { }) return (
+ + Đăng nhập tài khoản - Mua sắm Online | Nhâm Ngọ + +
diff --git a/src/pages/ProductDetail/ProductDetail.tsx b/src/pages/ProductDetail/ProductDetail.tsx index 2a8cd7a..879f882 100644 --- a/src/pages/ProductDetail/ProductDetail.tsx +++ b/src/pages/ProductDetail/ProductDetail.tsx @@ -14,8 +14,10 @@ import cartApi from 'src/apis/cart.api' import Toast from 'src/components/Toast' import path from 'src/constants/path' import { useTranslation } from 'react-i18next' - +import { Helmet } from 'react-helmet-async' +import { convert } from 'html-to-text' export default function ProductDetail() { + const { t } = useTranslation('product') const queryClient = useQueryClient() const [buyCount, setBuyCount] = useState(1) @@ -96,6 +98,10 @@ export default function ProductDetail() { if (!product) return
Loading...
return ( <> + + {product.name} | Shopee Clone + + {showToast && }
diff --git a/src/pages/ProductList/ProductList.tsx b/src/pages/ProductList/ProductList.tsx index e87ed09..d1dc47f 100644 --- a/src/pages/ProductList/ProductList.tsx +++ b/src/pages/ProductList/ProductList.tsx @@ -7,6 +7,7 @@ import Pagination from 'src/components/Pagination' import { ProductListConfig } from 'src/types/product.type' import categoryAPi from 'src/apis/category.api' import useQueryConfig from 'src/hooks/useQueryConfig' +import { Helmet } from 'react-helmet-async' export default function ProductList() { const queryConfig = useQueryConfig() @@ -19,7 +20,7 @@ export default function ProductList() { staleTime: 3 * 60 * 1000 //3 phút }) const { data: categoriesData } = useQuery({ - + queryKey: ['categoies'], queryFn: () => { return categoryAPi.getCategories() @@ -30,6 +31,10 @@ export default function ProductList() { console.log('productsData', productsData) return (
+ + Trang chủ | Shopee Clone + +
{productsData && (
diff --git a/src/pages/Register/Register.tsx b/src/pages/Register/Register.tsx index b318b96..835d83e 100644 --- a/src/pages/Register/Register.tsx +++ b/src/pages/Register/Register.tsx @@ -12,6 +12,7 @@ import { AppContext } from 'src/contexts/app.context' import Button from 'src/components/Button' import path from 'src/constants/path' import InputPassword from 'src/components/InputPassword' +import { Helmet } from 'react-helmet-async' type FormData = Pick const registerSchema = schema.pick(['email', 'confirmPassword', 'fullName', 'password', 'userName']) export default function Register() { @@ -38,7 +39,7 @@ export default function Register() { onError: (error) => { if (isAxiosUnprocessableEntityError>(error)) { const formError = error.response?.data.response - console.log('formError',formError) + console.log('formError', formError) if (formError) { Object.keys(formError).forEach((key) => { if (key in formError) { @@ -56,6 +57,10 @@ export default function Register() { }) return (
+ + Đăng ký tài khoản - Mua sắm Online | Nhâm Ngọ + +
diff --git a/yarn.lock b/yarn.lock index 60f6cab..486d2c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -687,6 +687,14 @@ resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8" integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g== +"@selderee/plugin-htmlparser2@^0.11.0": + version "0.11.0" + resolved "https://registry.yarnpkg.com/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz#d5b5e29a7ba6d3958a1972c7be16f4b2c188c517" + integrity sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ== + dependencies: + domhandler "^5.0.3" + selderee "^0.11.0" + "@tailwindcss/line-clamp@^0.4.4": version "0.4.4" resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423" @@ -754,6 +762,11 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50" integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw== +"@types/html-to-text@^9.0.4": + version "9.0.4" + resolved "https://registry.yarnpkg.com/@types/html-to-text/-/html-to-text-9.0.4.tgz#4a83dd8ae8bfa91457d0b1ffc26f4d0537eff58c" + integrity sha512-pUY3cKH/Nm2yYrEmDlPR1mR7yszjGx4DrwPjQ702C4/D5CwHuZTgZdIdwPkRbcuhs7BAh2L5rg3CL5cbRiGTCQ== + "@types/json-schema@^7.0.15": version "7.0.15" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841" @@ -788,6 +801,13 @@ dependencies: "@types/react" "*" +"@types/react-helmet@^6.1.11": + version "6.1.11" + resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.11.tgz#8cafcafff38f75361f451563ba7b406b0c5d3907" + integrity sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g== + dependencies: + "@types/react" "*" + "@types/react-image-magnify@^2.7.4": version "2.7.4" resolved "https://registry.yarnpkg.com/@types/react-image-magnify/-/react-image-magnify-2.7.4.tgz#8b85dfe1b2955797b31c39799c2d152e13918e33" @@ -1336,6 +1356,11 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +deepmerge@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" + integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== + define-data-property@^1.0.1, define-data-property@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e" @@ -1416,11 +1441,41 @@ doctrine@^2.1.0: dependencies: esutils "^2.0.2" +dom-serializer@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" + integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg== + dependencies: + domelementtype "^2.3.0" + domhandler "^5.0.2" + entities "^4.2.0" + +domelementtype@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" + integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== + +domhandler@^5.0.2, domhandler@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" + integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== + dependencies: + domelementtype "^2.3.0" + dompurify@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.0.tgz#53c414317c51503183696fcdef6dd3f916c607ed" integrity sha512-AMdOzK44oFWqHEi0wpOqix/fUNY707OmoeFDnbi3Q5I8uOpy21ufUA5cDJPr0bosxrflOVD/H2DMSvuGKJGfmQ== +domutils@^3.0.1: + version "3.1.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e" + integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA== + dependencies: + dom-serializer "^2.0.0" + domelementtype "^2.3.0" + domhandler "^5.0.3" + eastasianwidth@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb" @@ -1448,6 +1503,11 @@ encoding@^0.1.11: dependencies: iconv-lite "^0.6.2" +entities@^4.2.0, entities@^4.4.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48" + integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== + es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3: version "1.23.4" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.4.tgz#f006871f484d6a78229d2343557f2597f8333ed4" @@ -2101,6 +2161,27 @@ html-parse-stringify@^3.0.1: dependencies: void-elements "3.1.0" +html-to-text@^9.0.5: + version "9.0.5" + resolved "https://registry.yarnpkg.com/html-to-text/-/html-to-text-9.0.5.tgz#6149a0f618ae7a0db8085dca9bbf96d32bb8368d" + integrity sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg== + dependencies: + "@selderee/plugin-htmlparser2" "^0.11.0" + deepmerge "^4.3.1" + dom-serializer "^2.0.0" + htmlparser2 "^8.0.2" + selderee "^0.11.0" + +htmlparser2@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21" + integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA== + dependencies: + domelementtype "^2.3.0" + domhandler "^5.0.3" + domutils "^3.0.1" + entities "^4.4.0" + i18next@^24.1.0: version "24.1.0" resolved "https://registry.yarnpkg.com/i18next/-/i18next-24.1.0.tgz#d28cda44977c9620ef8ba75845c604f45e52c351" @@ -2147,6 +2228,13 @@ internal-slot@^1.0.7: hasown "^2.0.0" side-channel "^1.0.4" +invariant@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== + dependencies: + loose-envify "^1.0.0" + is-array-buffer@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98" @@ -2486,6 +2574,11 @@ language-tags@^1.0.9: dependencies: language-subtag-registry "^0.3.20" +leac@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/leac/-/leac-0.6.0.tgz#dcf136e382e666bd2475f44a1096061b70dc0912" + integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg== + levn@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade" @@ -2774,6 +2867,14 @@ parent-module@^1.0.0: dependencies: callsites "^3.0.0" +parseley@^0.12.0: + version "0.12.1" + resolved "https://registry.yarnpkg.com/parseley/-/parseley-0.12.1.tgz#4afd561d50215ebe259e3e7a853e62f600683aef" + integrity sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw== + dependencies: + leac "^0.6.0" + peberminta "^0.9.0" + path-exists@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3" @@ -2797,6 +2898,11 @@ path-scurry@^1.11.1: lru-cache "^10.2.0" minipass "^5.0.0 || ^6.0.2 || ^7.0.0" +peberminta@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/peberminta/-/peberminta-0.9.0.tgz#8ec9bc0eb84b7d368126e71ce9033501dca2a352" + integrity sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ== + picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" @@ -2959,6 +3065,20 @@ react-dom@^18.3.1: loose-envify "^1.1.0" scheduler "^0.23.2" +react-fast-compare@^3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" + integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== + +react-helmet-async@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec" + integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg== + dependencies: + invariant "^2.2.4" + react-fast-compare "^3.2.2" + shallowequal "^1.1.0" + react-hook-form@^7.53.0: version "7.53.2" resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.2.tgz#6fa37ae27330af81089baadd7f322cc987b8e2ac" @@ -3192,6 +3312,13 @@ scheduler@^0.23.2: dependencies: loose-envify "^1.1.0" +selderee@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/selderee/-/selderee-0.11.0.tgz#6af0c7983e073ad3e35787ffe20cefd9daf0ec8a" + integrity sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA== + dependencies: + parseley "^0.12.0" + semver@^6.3.1: version "6.3.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" @@ -3229,6 +3356,11 @@ setimmediate@^1.0.5: resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA== +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"