ADD: Docker, Profile components +minor-fixies and something else

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18-alpine
+WORKDIR /app
+COPY yarn.lock ./
+RUN yarn
+COPY . .
+RUN yarn build
+ENV NODE_ENV=production
+CMD ["yarn", "start"]
+EXPOSE 3000

app/(auth)/login/page.tsx

@@ -1,80 +1,7 @@
-'use client'
+import Template from '@/components/Templates'
 
-import Atom from '@/components/atoms'
-import { useAuthForm } from '@/hooks/useAuthForm'
-import { useFormField } from '@/hooks/useFormField'
-import styles from '@/styles/(auth)/Auth.module.css'
-
-const Login = () => {
-  const emailField = useFormField('')
-  const passwordField = useFormField('')
-
-  const formValues = {
-    email: emailField.value,
-    password: passwordField.value,
-  }
-
-  const {
-    isFormValid,
-    isSubmitting,
-    submissionError,
-    handleSubmit,
-    emailError,
-    passwordError,
-  } = useAuthForm('login', formValues)
-
-  const handleFormSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    await handleSubmit(e)
-  }
-
-  return (
-    <div className={styles.container}>
-      <div>
-        <h1 className={styles.title}>Вход</h1>
-        <p className={styles.subtitle}>Войдите в свой аккаунт</p>
-      </div>
-      <form
-        className={styles.form}
-        onSubmit={handleFormSubmit}
-        autoComplete="on"
-      >
-        <Atom.InputField
-          id="email"
-          label="Email"
-          type="email"
-          placeholder="example@example.ru"
-          value={emailField.value}
-          error={emailError}
-          touched={emailField.touched}
-          onChange={emailField.handleChange}
-          onBlur={emailField.handleBlur}
-          autoComplete="email"
-        />
-        <Atom.InputField
-          id="password"
-          label="Пароль"
-          type="password"
-          value={passwordField.value}
-          error={passwordError}
-          touched={passwordField.touched}
-          onChange={passwordField.handleChange}
-          onBlur={passwordField.handleBlur}
-          autoComplete="current-password"
-        />
-        {submissionError && (
-          <div className={styles.error}>{submissionError}</div>
-        )}
-        <Atom.Button
-          variant="primary"
-          type="submit"
-          disabled={!isFormValid || isSubmitting}
-        >
-          Вход
-        </Atom.Button>
-      </form>
-    </div>
-  )
+const LoginPage = () => {
+  return <Template.Login></Template.Login>
 }
 
-export default Login
+export default LoginPage

app/(auth)/register/page.tsx

@@ -1,107 +1,7 @@
-'use client'
+import Template from '@/components/Templates'
 
-import Atom from '@/components/atoms/index'
-import { useAuthForm } from '@/hooks/useAuthForm'
-import { useFormField } from '@/hooks/useFormField'
-import styles from '@/styles/(auth)/Auth.module.css'
-
-const Register = () => {
-  const fullNameField = useFormField('')
-  const emailField = useFormField('')
-  const passwordField = useFormField('')
-  const confirmPasswordField = useFormField('')
-
-  const formValues = {
-    fullName: fullNameField.value,
-    email: emailField.value,
-    password: passwordField.value,
-    confirmPassword: confirmPasswordField.value,
-  }
-
-  const {
-    isFormValid,
-    isSubmitting,
-    submissionError,
-    handleSubmit,
-    emailError,
-    passwordError,
-    fullNameError,
-    confirmPasswordError,
-  } = useAuthForm('register', formValues)
-
-  const handleFormSubmit = (e: React.FormEvent) => {
-    handleSubmit(e)
-  }
-
-  return (
-    <div className={styles.container}>
-      <div>
-        <h1 className={styles.title}>Регистрация</h1>
-        <p className={styles.subtitle}>Создайте аккаунт</p>
-      </div>
-      <form
-        className={styles.form}
-        onSubmit={handleFormSubmit}
-        autoComplete="on"
-      >
-        <Atom.InputField
-          id="full-name"
-          label="Полное имя"
-          placeholder="Иван Иванов"
-          value={fullNameField.value}
-          error={fullNameError}
-          touched={fullNameField.touched}
-          onChange={fullNameField.handleChange}
-          onBlur={fullNameField.handleBlur}
-          autoComplete="name"
-        />
-        <Atom.InputField
-          id="email"
-          label="Email"
-          type="email"
-          placeholder="example@example.ru"
-          value={emailField.value}
-          error={emailError}
-          touched={emailField.touched}
-          onChange={emailField.handleChange}
-          onBlur={emailField.handleBlur}
-          autoComplete="email"
-        />
-        <Atom.InputField
-          id="password"
-          label="Пароль"
-          type="password"
-          value={passwordField.value}
-          error={passwordError}
-          touched={passwordField.touched}
-          onChange={passwordField.handleChange}
-          onBlur={passwordField.handleBlur}
-          autoComplete="new-password"
-        />
-        <Atom.InputField
-          id="confirm-password"
-          label="Подтвердите пароль"
-          type="password"
-          value={confirmPasswordField.value}
-          error={confirmPasswordError}
-          touched={confirmPasswordField.touched}
-          onChange={confirmPasswordField.handleChange}
-          onBlur={confirmPasswordField.handleBlur}
-          autoComplete="new-password"
-        />
-        {submissionError && (
-          <div className={styles.error}>{submissionError}</div>
-        )}
-        <Atom.Button
-          variant="primary"
-          type="submit"
-          disabled={!isFormValid || isSubmitting}
-        >
-          Регистрация
-        </Atom.Button>
-      </form>
-    </div>
-  )
+const RegisterPage = () => {
+  return <Template.Register></Template.Register>
 }
 
-export default Register
+export default RegisterPage

app/dashboard/page.tsx

@@ -1,5 +1,5 @@
-const Dashboard = () => {
+const DashboardPage = () => {
   return <h1>Главная страница</h1>
 }
 
-export default Dashboard
+export default DashboardPage

app/modules/page.tsx

@@ -1,48 +1,79 @@
+'use client'
+
 import Atom from '@/components/atoms'
 import { Bell } from 'lucide-react'
+import { useState } from 'react'
+
+const ModulesPage = () => {
+  const [inputValue, setInputValue] = useState<string>('')
+  const [touched, setTouched] = useState<boolean>(false)
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }
+
+  const handleInputBlur = () => {
+    setTouched(true)
+  }
 
-const Modules = () => {
   return (
     <div>
-      <h3>Размеры кнопок</h3>
-      <Atom.Button size="small" variant="primary" type="button">
-        Small Primary
-      </Atom.Button>
-      <Atom.Button size="medium" variant="primary" type="button">
-        Medium Primary
-      </Atom.Button>
-      <Atom.Button size="large" variant="primary" type="button">
-        Large Primary
-      </Atom.Button>
-
-      <h3>Варианты кнопок</h3>
-      <Atom.Button size="medium" variant="primary" type="button">
-        Primary
-      </Atom.Button>
-      <Atom.Button size="medium" variant="secondary" type="button">
-        Secondary
-      </Atom.Button>
-      <Atom.Button size="medium" variant="danger" type="button">
-        Danger
-      </Atom.Button>
-
-      <h3>Кнопки с иконками</h3>
-      <Atom.Button
-        iconOnly
-        variant="iconOnly"
-        aria-label="Notification"
-        title="Notification"
-        type="button"
-      >
-        <Bell />
-      </Atom.Button>
-
-      <h3>Заблокированная кнопка</h3>
-      <Atom.Button variant="primary" disabled type="button">
-        ТЕКСТ БЛЯТЬ
-      </Atom.Button>
+      <section>
+        <h3>Размеры кнопок</h3>
+        <Atom.Button size="small" variant="primary" type="button">
+          Small Primary
+        </Atom.Button>
+        <Atom.Button size="medium" variant="primary" type="button">
+          Medium Primary
+        </Atom.Button>
+        <Atom.Button size="large" variant="primary" type="button">
+          Large Primary
+        </Atom.Button>
+
+        <h3>Варианты кнопок</h3>
+        <Atom.Button size="medium" variant="primary" type="button">
+          Primary
+        </Atom.Button>
+        <Atom.Button size="medium" variant="secondary" type="button">
+          Secondary
+        </Atom.Button>
+        <Atom.Button size="medium" variant="danger" type="button">
+          Danger
+        </Atom.Button>
+
+        <h3>Кнопки с иконками</h3>
+        <Atom.Button
+          iconOnly
+          variant="iconOnly"
+          aria-label="Notification"
+          title="Notification"
+          type="button"
+        >
+          <Bell />
+        </Atom.Button>
+
+        <h3>Заблокированная кнопка</h3>
+        <Atom.Button variant="primary" disabled type="button">
+          Disabled Button
+        </Atom.Button>
+      </section>
+      <section>
+        <h2>Текстовые поля</h2>
+        <Atom.InputField
+          id="example"
+          label="Example Input"
+          placeholder="Enter some text"
+          value={inputValue}
+          onChange={(e) =>
+            handleInputChange(e as React.ChangeEvent<HTMLInputElement>)
+          }
+          onBlur={handleInputBlur}
+          error={touched && inputValue === '' ? 'This field is required' : null}
+          touched={touched}
+        />
+      </section>
     </div>
   )
 }
 
-export default Modules
+export default ModulesPage

app/page.tsx

@@ -1,5 +1,5 @@
 const Home = () => {
-  return <main>Page component</main>
+  return <h1>Page component</h1>
 }
 
 export default Home

app/profile/page.tsx

@@ -1,7 +1,14 @@
+'use server'
+
 import Profile from '@/components/Templates/Profile/Profile'
+import { getProfile } from '@/services/profileService'
+import { cookies } from 'next/headers'
+
+const ProfilePage = async () => {
+  const token = cookies().get('token')?.value || ''
+  const name = await getProfile(token)
 
-const App = () => {
-  return <Profile name="Ваня КК" />
+  return <Profile name={name} />
 }
 
-export default App
+export default ProfilePage

middleware.ts

@@ -39,5 +39,5 @@ export async function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/modules/:path*'],
+  matcher: ['/modules/:path*', '/profile/:path*'],
 }

next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  distDir: 'build',
+}
 
 export default nextConfig