From e9985693212fb83638d491b8cfce98f5fd893f89 Mon Sep 17 00:00:00 2001 From: Jinyuan Zhang Date: Mon, 29 Jul 2024 14:59:01 +0930 Subject: [PATCH] Refactor: Refactored setting and profile Refactored setting and profile: - Rewrite the two page.tsx from arc/app/(protected)/account/ files to fit the refactoring. - Added ProfilePage.tsx to module/account/profile/ as entrance file. - Added SettingPage.tsx to module/account/setting/ as entrance file. - Added "@/module/*": ["module/*"], to tsconfig.json to use the @ alias. - Moved ProfileBasicComponents.tsx file to module/account/profile/. - Moved ProfileMain.tsx file to module/account/profile/. - Modified the routeConfig.ts, from component: () => JSX.Element to component: React.ComponentType to fit the different component type. Resolve CP-86 --- src/app/(protected)/account/profile/page.tsx | 19 +-- src/app/(protected)/account/settings/page.tsx | 160 +----------------- .../profile}/ProfileBasicComponents.tsx | 0 .../account/profile}/ProfileMain.tsx | 0 src/module/account/profile/ProfilePage.tsx | 18 ++ src/module/account/setting/SettingPage.tsx | 160 ++++++++++++++++++ src/routes/routeConfig.ts | 3 +- tsconfig.json | 68 ++++++-- 8 files changed, 240 insertions(+), 188 deletions(-) rename src/{app/(protected)/account/profile/_components => module/account/profile}/ProfileBasicComponents.tsx (100%) rename src/{app/(protected)/account/profile/_components => module/account/profile}/ProfileMain.tsx (100%) create mode 100644 src/module/account/profile/ProfilePage.tsx create mode 100644 src/module/account/setting/SettingPage.tsx diff --git a/src/app/(protected)/account/profile/page.tsx b/src/app/(protected)/account/profile/page.tsx index ec1f323..bcf2e81 100644 --- a/src/app/(protected)/account/profile/page.tsx +++ b/src/app/(protected)/account/profile/page.tsx @@ -1,18 +1,5 @@ -'use client'; +import React from 'react'; +import ProfilePage from '@/module/account/profile/ProfilePage'; -import { Container, Row } from 'react-bootstrap'; -import { useTitle } from '@/hooks/useTitle'; -import ProfileMain from './_components/ProfileMain'; - -const Profile = () => { - useTitle('Profile - BeeQuant'); - - return ( - - - - - - ); -}; +const Profile: React.FC = () => ; export default Profile; diff --git a/src/app/(protected)/account/settings/page.tsx b/src/app/(protected)/account/settings/page.tsx index 8a0e9c1..5acfe10 100644 --- a/src/app/(protected)/account/settings/page.tsx +++ b/src/app/(protected)/account/settings/page.tsx @@ -1,160 +1,6 @@ -'use client'; +import React from 'react'; +import SettingPage from '@/module/account/setting/SettingPage'; -import { Col, Container, Row } from 'react-bootstrap'; -import PasswordField from '@/shared/components/form/Password'; -import { Card, CardBody, CardTitleWrap, CardTitle, CardSubhead } from '@/shared/components/Card'; -import { - FormButtonToolbar, - FormContainer, - FormGroup, - FormGroupField, - FormGroupLabel, -} from '@/shared/components/form/FormElements'; -import { Button } from '@/shared/components/Button'; -import FormField from '@/shared/components/form/FormHookField'; -import { Controller, useForm } from 'react-hook-form'; - -const Setting = () => { - const { - handleSubmit, - control, - formState: { errors }, - } = useForm(); - - const onSubmit = (data: any) => { - console.log('data:', data); - }; - - return ( - - - - - - - Settings - Update your profile - - - - Real Name - - - - - - Display Name - - - - - - Email - - - - - - Password - - ( - - )} - rules={{ required: 'This is required field' }} - defaultValue="initial password" - /> - - - - Mobile - - - - - - Reference - - - - - - {/* @ts-ignore - Ignoring because of complex union types incorrectly inferred */} - - - - - - - - - - ); -}; +const Setting: React.FC = () => ; export default Setting; diff --git a/src/app/(protected)/account/profile/_components/ProfileBasicComponents.tsx b/src/module/account/profile/ProfileBasicComponents.tsx similarity index 100% rename from src/app/(protected)/account/profile/_components/ProfileBasicComponents.tsx rename to src/module/account/profile/ProfileBasicComponents.tsx diff --git a/src/app/(protected)/account/profile/_components/ProfileMain.tsx b/src/module/account/profile/ProfileMain.tsx similarity index 100% rename from src/app/(protected)/account/profile/_components/ProfileMain.tsx rename to src/module/account/profile/ProfileMain.tsx diff --git a/src/module/account/profile/ProfilePage.tsx b/src/module/account/profile/ProfilePage.tsx new file mode 100644 index 0000000..3a8b590 --- /dev/null +++ b/src/module/account/profile/ProfilePage.tsx @@ -0,0 +1,18 @@ +'use client'; + +import { Container, Row } from 'react-bootstrap'; +import { useTitle } from '@/hooks/useTitle'; +import ProfileMain from './ProfileMain'; + +const Profile = () => { + useTitle('Profile - BeeQuant'); + + return ( + + + + + + ); +}; +export default Profile; diff --git a/src/module/account/setting/SettingPage.tsx b/src/module/account/setting/SettingPage.tsx new file mode 100644 index 0000000..19489d1 --- /dev/null +++ b/src/module/account/setting/SettingPage.tsx @@ -0,0 +1,160 @@ +'use client'; + +import { Col, Container, Row } from 'react-bootstrap'; +import PasswordField from '@/shared/components/form/Password'; +import { Card, CardBody, CardTitleWrap, CardTitle, CardSubhead } from '@/shared/components/Card'; +import { + FormButtonToolbar, + FormContainer, + FormGroup, + FormGroupField, + FormGroupLabel, +} from '@/shared/components/form/FormElements'; +import { Button } from '@/shared/components/Button'; +import FormField from '@/shared/components/form/FormHookField'; +import { Controller, useForm } from 'react-hook-form'; + +const SettingPage = () => { + const { + handleSubmit, + control, + formState: { errors }, + } = useForm(); + + const onSubmit = (data: any) => { + console.log('data:', data); + }; + + return ( + + + + + + + Settings + Update your profile + + + + Real Name + + + + + + Display Name + + + + + + Email + + + + + + Password + + ( + + )} + rules={{ required: 'This is required field' }} + defaultValue="initial password" + /> + + + + Mobile + + + + + + Reference + + + + + + {/* @ts-ignore - Ignoring because of complex union types incorrectly inferred */} + + + + + + + + + + ); +}; + +export default SettingPage; diff --git a/src/routes/routeConfig.ts b/src/routes/routeConfig.ts index 11968d1..b466ecc 100644 --- a/src/routes/routeConfig.ts +++ b/src/routes/routeConfig.ts @@ -1,3 +1,4 @@ +import React from 'react'; import Page404 from 'app/not-found'; import Dashboard from 'app/(protected)/dashboard/page'; import ExchangeManagement from 'app/(protected)/exchange/page'; @@ -18,7 +19,7 @@ interface IRoute { path: string; name: string; title: string; - component: () => JSX.Element; + component: React.ComponentType; } export const ROUTE_KEY = { diff --git a/tsconfig.json b/tsconfig.json index 2fab691..e31e69c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,22 +2,55 @@ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ], "module": "ESNext", - "types": ["vite/client", "jest", "react", "react-dom", "node"], + "types": [ + "vite/client", + "jest", + "react", + "react-dom", + "node" + ], "skipLibCheck": true, "baseUrl": "src", "paths": { - "@/styles/*": ["styles/*"], - "@/config/*": ["config/*"], - "@/shared/*": ["shared/*"], - "@/graphql/*": ["graphql/*"], - "@/utils/*": ["shared/utils/*"], - "@/hooks/*": ["hooks/*"], - "@/constants/*": ["shared/constants/*"], - "@/containers/*": ["containers/*"], - "@/routes/*": ["routes/*"], - "@/components/*": ["shared/components/*"] + "@/styles/*": [ + "styles/*" + ], + "@/config/*": [ + "config/*" + ], + "@/shared/*": [ + "shared/*" + ], + "@/graphql/*": [ + "graphql/*" + ], + "@/utils/*": [ + "shared/utils/*" + ], + "@/hooks/*": [ + "hooks/*" + ], + "@/constants/*": [ + "shared/constants/*" + ], + "@/containers/*": [ + "containers/*" + ], + "@/routes/*": [ + "routes/*" + ], + "@/components/*": [ + "shared/components/*" + ], + "@/module/*": [ + "module/*" + ] }, /* Bundler mode */ "moduleResolution": "bundler", @@ -43,6 +76,13 @@ } ] }, - "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts"], - "exclude": ["./node_modules"] + "include": [ + "./src", + "./dist/types/**/*.ts", + "./next-env.d.ts", + ".next/types/**/*.ts" + ], + "exclude": [ + "./node_modules" + ] }