From cf50fd517683af07a87b8b30af319a9163848d6f Mon Sep 17 00:00:00 2001 From: Anton Bochkovskyi <98012691+firehawk89@users.noreply.github.com> Date: Thu, 1 Feb 2024 14:24:23 +0200 Subject: [PATCH] Refactor Components (#103) PR: https://github.com/dev-KPI/messenger-frontend/pull/103 --- src/app/auth/page.tsx | 4 +- src/app/profile/page.tsx | 4 +- src/app/verification/page.tsx | 4 +- .../auth/{form-auth.tsx => auth-form.tsx} | 0 src/components/pages/profile/file-input.tsx | 26 ++++------ .../{form-profile.tsx => profile-form.tsx} | 0 .../{control-otp.tsx => otp-control.tsx} | 6 +-- src/components/ui/icons.tsx | 51 +++++++++---------- tsconfig.json | 10 ++-- 9 files changed, 47 insertions(+), 58 deletions(-) rename src/components/pages/auth/{form-auth.tsx => auth-form.tsx} (100%) rename src/components/pages/profile/{form-profile.tsx => profile-form.tsx} (100%) rename src/components/pages/verification/{control-otp.tsx => otp-control.tsx} (92%) diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 31c5da8..9b5bab0 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -1,4 +1,4 @@ -import FormAuth from '@/components/pages/auth/form-auth' +import AuthForm from '@/components/pages/auth/auth-form' import AuthContent from '@/components/pages/auth-content' import { Icons } from '@/components/ui/icons' import ImageCard from '@/components/ui/image-card' @@ -15,7 +15,7 @@ export default function Auth() {

Authentication

- + ) diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index e649bcb..519400c 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -1,6 +1,6 @@ import AuthContent from '@/components/pages/auth-content' import FileInput from '@/components/pages/profile/file-input' -import FormProfile from '@/components/pages/profile/form-profile' +import ProfileForm from '@/components/pages/profile/profile-form' import ImageCard from '@/components/ui/image-card' import { ThemeToggler } from '@/components/ui/theme-toggler' @@ -15,7 +15,7 @@ export default function Profile() {

Profile

- + ) diff --git a/src/app/verification/page.tsx b/src/app/verification/page.tsx index 2fe206b..595f501 100644 --- a/src/app/verification/page.tsx +++ b/src/app/verification/page.tsx @@ -1,5 +1,5 @@ import AuthContent from '@/components/pages/auth-content' -import ControlOtp from '@/components/pages/verification/control-otp' +import OtpControl from '@/components/pages/verification/otp-control' import { Icons } from '@/components/ui/icons' import ImageCard from '@/components/ui/image-card' import { ThemeToggler } from '@/components/ui/theme-toggler' @@ -15,7 +15,7 @@ export default function Verification() {

Check your Email

- + ) diff --git a/src/components/pages/auth/form-auth.tsx b/src/components/pages/auth/auth-form.tsx similarity index 100% rename from src/components/pages/auth/form-auth.tsx rename to src/components/pages/auth/auth-form.tsx diff --git a/src/components/pages/profile/file-input.tsx b/src/components/pages/profile/file-input.tsx index 0e177fd..afd404b 100644 --- a/src/components/pages/profile/file-input.tsx +++ b/src/components/pages/profile/file-input.tsx @@ -13,11 +13,8 @@ type FileInputProps = { const FileInput: FC = ({ className }) => { const fileInputRef = useRef(null) - - const [_, setImage] = useState() - + const [_, setImage] = useState() // TODO: utilize image for api requests const [preview, setPreview] = useState() - const [progress, setProgress] = useState(0) const clearSelectFile = () => { @@ -32,15 +29,16 @@ const FileInput: FC = ({ className }) => { setImage(file) const fileReader = new FileReader() - fileReader.readAsDataURL(file) fileReader.onloadstart = () => { setProgress(0) } + fileReader.onprogress = (progress) => { setProgress((progress.loaded / progress.total) * 100) } + fileReader.onload = () => { setPreview(fileReader.result as string) setTimeout(() => setProgress(0), PROGRESS_TIMEOUT_DELAY) @@ -60,27 +58,24 @@ const FileInput: FC = ({ className }) => { return (
{preview ? ( -
+ <>
avatar
-
+ ) : ( -
- -
+ )}
- +
-
= ({ className }) => { value={progress} />
- = ({ className }) => { +const OtpControl: FC = ({ className }) => { const [otp, setOtp] = useState('') const [otpIsInvalid, setOtpIsInvalid] = useState(false) @@ -66,4 +66,4 @@ const ControlOtp: FC = ({ className }) => { ) } -export default ControlOtp +export default OtpControl diff --git a/src/components/ui/icons.tsx b/src/components/ui/icons.tsx index a25f1bc..ffc376c 100644 --- a/src/components/ui/icons.tsx +++ b/src/components/ui/icons.tsx @@ -25,21 +25,24 @@ export const Icons = { ) }, - cross: (props: IconProps) => ( - - - - ), + cross: ({ size, ...props }: IconProps) => { + const dimension = getIconDimension(size) + return ( + + + + ) + }, golub: (props: IconProps) => ( ( - ), diff --git a/tsconfig.json b/tsconfig.json index 16af6a4..fc0ab7f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,13 +18,13 @@ "baseUrl": ".", "plugins": [ { - "name": "next" - } + "name": "next", + }, ], "paths": { - "@/*": ["src/*"] - } + "@/*": ["src/*"], + }, }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "exclude": ["node_modules"], }