Refactored issues caught by SQ

Sunagatov · Dec 26, 2023 · 0c19851 · 0c19851
1 parent e7dd093
commit 0c19851
Show file tree

Hide file tree

Showing 31 changed files with 94 additions and 96 deletions.
diff --git a/.env b/.env
diff --git a/.gitignore b/.gitignore
@@ -34,4 +34,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+
+.idea
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,5 +7,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode", // Tell VSCode to use Prettier as default file formatter
   "typescript.preferences.quoteStyle": "single",
   "javascript.preferences.quoteStyle": "single",
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }
diff --git a/src/app/@parallel/(.)auth/login/page.tsx b/src/app/@parallel/(.)auth/login/page.tsx
@@ -2,9 +2,7 @@ import AuthModalLogin from '@/app/auth/login/page'
 
 const AuthPage = () => {
   return (
-    <>
       <AuthModalLogin />
-    </>
   )
 }
 

diff --git a/src/app/_components/CircleAddBtn.tsx b/src/app/_components/CircleAddBtn.tsx
@@ -5,7 +5,7 @@ import circle_btn from '../../../public/plus.svg'
 
 export default function CircleAddBtn({ onClick }: { onClick: () => void }) {
   return (
-    <div onClick={onClick}>
+    <div onClick={onClick} onKeyDown={onClick}>
       <button
         className={
           'flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-inverted hover:bg-fullpage-tint'

diff --git a/src/app/_components/ProductCard.tsx b/src/app/_components/ProductCard.tsx
@@ -14,7 +14,7 @@ export default function ProductCard({
   name,
   price,
   description,
-}: CardProps) {
+}: Readonly<CardProps>) {
   const addToCart = useCombinedStore((state) => state.add)
 
   return (

diff --git a/src/app/auth/registration/page.tsx b/src/app/auth/registration/page.tsx
@@ -2,9 +2,7 @@ import AuthModalRegistr from '@/components/modals/AuthModalRegistration'
 
 const RegisterParallelRoute = () => {
   return (
-    <>
       <AuthModalRegistr />
-    </>
   )
 }
 

diff --git a/src/app/cart/_components/CartElement.tsx b/src/app/cart/_components/CartElement.tsx
@@ -19,7 +19,7 @@ export default function CartElement({
   add,
   remove,
   removeAll,
-}: CartElementProps) {
+}: Readonly<CartElementProps>) {
   const { name, price, description } = product.info
 
   const addProduct = () => {

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -112,10 +112,7 @@
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   margin-top: 5px;
-  color: #2D3748;
   display: flex;
-  width: 32px;
-  height: 32px;
   flex-direction: column;
   justify-content: center;
   align-items: center;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,7 +16,7 @@ interface RootLayoutProps {
   children: React.ReactNode
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
   return (
     <html lang="en">
       <body className={inter.className + ' flex min-h-screen flex-col'}>

diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
@@ -18,7 +18,7 @@ async function getProductById(id: string): Promise<IProduct> {
   return result
 }
 
-export default async function Page({ params }: ProductProps) {
+export default async function Page({ params }: Readonly<ProductProps>) {
   const product = await getProductById(params.id)
 
   return (

diff --git a/src/app/product/_components/AddToCart.tsx b/src/app/product/_components/AddToCart.tsx
@@ -10,7 +10,7 @@ type Props = {
   product: IProduct
 }
 
-export default function AddToCartButton({ product }: Props) {
+export default function AddToCartButton({ product }: Readonly<Props>) {
   const [add, remove] = useCombinedStore((state) => [state.add, state.remove])
   const items = useStoreData(useCombinedStore, (state) => state.items)
   const { name, price, description, active, quantity } = product

diff --git a/src/app/product/error.tsx b/src/app/product/error.tsx
@@ -3,13 +3,13 @@
 import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 
-export default function Error({
+export default function RenderError({
   error,
   reset,
-}: {
+}: Readonly<{
   error: Error
   reset: () => void
-}) {
+}>) {
   const router = useRouter()
 
   useEffect(() => {

diff --git a/src/app/product/layout.tsx b/src/app/product/layout.tsx
@@ -8,6 +8,6 @@ interface ProductLayoutProps {
   children: React.ReactNode
 }
 
-export default function ProductLayout({ children }: ProductLayoutProps) {
+export default function ProductLayout({ children }: Readonly<ProductLayoutProps>) {
   return <div>{children}</div>
 }
diff --git a/src/app/profile/_components/FilledProfile/FiledProfile.tsx b/src/app/profile/_components/FilledProfile/FiledProfile.tsx
@@ -97,7 +97,7 @@ const FiledProfile = () => {
           <FormProfile
             onSuccessEdit={handleSuccessEdit}
             updateUserData={setUserData}
-            initialUserData={userData || {}}
+            initialUserData={userData ?? {}}
           />
         )}
         <div className="mt-[51px]">

diff --git a/src/app/profile/_components/FormProfile/FormProfile.tsx b/src/app/profile/_components/FormProfile/FormProfile.tsx
@@ -1,10 +1,9 @@
 'use client'
 import 'react-calendar/dist/Calendar.css'
-import { editUserProfile } from '@/services/userService'
+import { editUserProfile, UserData } from '@/services/userService'
 import { useState } from 'react'
 import { useAuthStore } from '@/store/authStore'
 import { useForm, SubmitHandler } from 'react-hook-form'
-import { UserData } from '@/services/userService'
 import { FormProfileProps } from './index'
 import { isValid as isValidDate, format } from 'date-fns'
 import { validationSchema } from '@/validation/userFormSchema'
@@ -24,8 +23,8 @@ const FormProfile = ({
   onSuccessEdit,
   updateUserData,
   initialUserData,
-}: FormProfileProps) => {
-  const [isCalendarOpen, setCalendarOpen] = useState(false)
+}: Readonly<FormProfileProps>) => {
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
   const [date, setDate] = useState<Date | null>(new Date())
   const [loadingImg, setLoadingImg] = useState(false)
 
@@ -40,7 +39,7 @@ const FormProfile = ({
   })
 
   useEscapeKey(() => {
-    setCalendarOpen(false)
+    setIsCalendarOpen(false)
   })
 
   const { token } = useAuthStore()
@@ -79,13 +78,13 @@ const FormProfile = ({
 
   // function for opening and closing the calendar
   const handleCalendarToggle = () => {
-    setCalendarOpen(!isCalendarOpen)
+    setIsCalendarOpen(!isCalendarOpen)
   }
 
   // function for closing the calendar by clicking anywhere in the viewport
-  const clickBackdrop = (e: React.MouseEvent<HTMLDivElement>) => {
+  const clickBackdrop = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {
     if (e.currentTarget === e.target) {
-      setCalendarOpen(false)
+      setIsCalendarOpen(false)
     }
   }
 
@@ -150,15 +149,15 @@ const FormProfile = ({
             alt="calendar open icon"
             width={18}
             height={18}
-            className={`absolute right-10 top-[60%] cursor-pointer transition-transform ${
-              isCalendarOpen ? 'rotate-180' : ''
-            }`}
+            className={`absolute right-10 top-[60%] cursor-pointer transition-transform ${isCalendarOpen ? 'rotate-180' : ''
+              }`}
             onClick={handleCalendarToggle}
           />
           {isCalendarOpen && (
             <div
               className="fixed bottom-0 left-0 right-0 top-0 z-10"
               onClick={clickBackdrop}
+              onKeyDown={clickBackdrop}
             >
               <div className="z-20">
                 {isCalendarOpen && (
@@ -265,11 +264,10 @@ const FormProfile = ({
         <div className="mt-4">
           <Button
             type="submit"
-            className={`${
-              Object.keys(errors).length > 0
-                ? 'cursor-not-allowed bg-brand-solid opacity-20'
-                : 'bg-brand-solid hover:bg-indigo-700'
-            } mt-[24px] rounded-[47px] border border-transparent px-4 py-2 text-sm font-medium text-white focus:outline-none focus:outline-focus focus:ring-2 focus:ring-offset-2`}
+            className={`${Object.keys(errors).length > 0
+              ? 'cursor-not-allowed bg-brand-solid opacity-20'
+              : 'bg-brand-solid hover:bg-indigo-700'
+              } mt-[24px] rounded-[47px] border border-transparent px-4 py-2 text-sm font-medium text-white focus:outline-none focus:outline-focus focus:ring-2 focus:ring-offset-2`}
           >
             <span>Save Changes</span>
           </Button>

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -2,9 +2,7 @@ import FiledProfile from './_components/FilledProfile/FiledProfile'
 
 const ProfilePage = () => {
   return (
-    <>
       <FiledProfile />
-    </>
   )
 }
 

diff --git a/src/components/CartButton.tsx b/src/components/CartButton.tsx
@@ -9,7 +9,9 @@ import Link from 'next/link'
 export default function CartButton() {
   const count = useStoreData(useCombinedStore, (state) => state.count)
 
-  const handleClick = () => {}
+  const handleClick = () => {
+    // not implemented yet
+  }
 
   return (
     <Link href={'/cart'}>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -19,7 +19,7 @@ export default function Footer() {
             </a>
           </li>
           <li>
-            Email:
+            Email: 
             <span className={'ml-1 underline  sm:no-underline'}>
               <a
                 href="mailto:[email protected]"

diff --git a/src/components/modals/AuthModal.tsx b/src/components/modals/AuthModal.tsx
@@ -15,7 +15,7 @@ enum SwitchType {
   Registration = 'REGISTRATION',
 }
 
-export function AuthModal({ onCloseModal }: LoginModalProps) {
+export function AuthModal({ onCloseModal }: Readonly<LoginModalProps>) {
   const [switchForm, setSwitchForm] = useState<SwitchType>(SwitchType.Login)
   const pathname = usePathname()
 

diff --git a/src/components/modals/AuthModalRegistration.tsx b/src/components/modals/AuthModalRegistration.tsx
@@ -15,7 +15,7 @@ enum SwitchType {
   Registration = 'REGISTRATION',
 }
 
-function AuthModalRegistr({ onCloseModal }: AuthModalProps) {
+function AuthModalRegistr({ onCloseModal }: Readonly<AuthModalProps>) {
   const [switchForm, setSwitchForm] = useState<SwitchType>(
     SwitchType.Registration,
   )

diff --git a/src/components/modals/forms/LoginForm.tsx b/src/components/modals/forms/LoginForm.tsx
@@ -59,43 +59,41 @@ export default function LoginForm() {
   }
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
-        {errors?.root?.serverError.type === '500' && (
-          <div className="mt-4 text-negative">
-            {errors?.root?.serverError.message}
-          </div>
-        )}
-        {errors?.root?.serverError.type === '400' && (
-          <div className="mt-4 text-negative">
-            {errors?.root?.serverError.message}
-          </div>
-        )}
-        <FormInput
-          id="email"
-          register={register}
-          name="email"
-          type="text"
-          label="Enter your email address"
-          placeholder="Enter your email address"
-          error={errors.email}
-        />
-        <FormInput
-          id="password"
-          register={register}
-          type="password"
-          name="password"
-          label="Password"
-          placeholder="Password"
-          error={errors.password}
-        />
-        <Button
-          type="submit"
-          className="mt-6 w-full hover:bg-brand-solid-hover"
-        >
-          Login
-        </Button>
-      </form>
-    </>
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
+      {errors?.root?.serverError.type === '500' && (
+        <div className="mt-4 text-negative">
+          {errors?.root?.serverError.message}
+        </div>
+      )}
+      {errors?.root?.serverError.type === '400' && (
+        <div className="mt-4 text-negative">
+          {errors?.root?.serverError.message}
+        </div>
+      )}
+      <FormInput
+        id="email"
+        register={register}
+        name="email"
+        type="text"
+        label="Enter your email address"
+        placeholder="Enter your email address"
+        error={errors.email}
+      />
+      <FormInput
+        id="password"
+        register={register}
+        type="password"
+        name="password"
+        label="Password"
+        placeholder="Password"
+        error={errors.password}
+      />
+      <Button
+        type="submit"
+        className="mt-6 w-full hover:bg-brand-solid-hover"
+      >
+        Login
+      </Button>
+    </form>
   )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,9 +2,7 @@ import AuthModalLogin from '@/app/auth/login/page' @@
     const AuthPage = () => {
       return (
-        <>
           <AuthModalLogin />
-        </>
       )
     }
@@ Expand Down @@