dispay message in searchcard

2025-05-21 16:31:09 +03:00
parent c4e1e16e79
commit c6c405f232
15 changed files with 712 additions and 148 deletions
--- a/frontend/app/(urls)/account/create-as-deliveler/page.tsx
+++ b/frontend/app/(urls)/account/create-as-deliveler/page.tsx
@@ -3,8 +3,8 @@ import React from 'react'
 const DelivelerPage = () => {
  return (
    <div className="space-y-3">
-      <div className="rounded-2xl shadow overflow-hidden">
-        <div className="p-6 bg-white sm:p-8">
+      <div className="overflow-hidden rounded-2xl shadow">
+        <div className="bg-white p-6 sm:p-8">
          <div className="space-y-4">
            <h1 className="text-2xl">Перевезти посылку</h1>
          </div>
--- a/frontend/app/(urls)/account/create-as-sender/page.tsx
+++ b/frontend/app/(urls)/account/create-as-sender/page.tsx
@@ -3,8 +3,8 @@ import React from 'react'
 const SenderPage = () => {
  return (
    <div className="space-y-3">
-      <div className="rounded-2xl shadow overflow-hidden">
-        <div className="p-6 bg-white sm:p-8">
+      <div className="overflow-hidden rounded-2xl shadow">
+        <div className="bg-white p-6 sm:p-8">
          <div className="space-y-4">
            <h1 className="text-2xl">Отправить посылку</h1>
          </div>
--- a/frontend/app/(urls)/account/layout.tsx
+++ b/frontend/app/(urls)/account/layout.tsx
@@ -11,11 +11,7 @@ import { MdOutlinePayments } from 'react-icons/md'
 import { CgNotes } from 'react-icons/cg'
 import useUserStore from '@/app/store/userStore'

-export default function AccountLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function AccountLayout({ children }: { children: React.ReactNode }) {
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()
  const { isAuthenticated, user } = useUserStore()
@@ -55,14 +51,14 @@ export default function AccountLayout({

  return (
    <div className="min-h-full">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="flex flex-col md:flex-row gap-6">
-          <div className="w-full md:w-64 flex-shrink-0">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="flex flex-col gap-6 md:flex-row">
+          <div className="w-full flex-shrink-0 md:w-64">
            <div className="sticky top-8">
              <AccountSidebar user={user} navigation={userNavigation} />
            </div>
          </div>
-          <main className="flex-1 min-w-0">{children}</main>
+          <main className="min-w-0 flex-1">{children}</main>
        </div>
      </div>
    </div>
--- a/frontend/app/(urls)/account/page.tsx
+++ b/frontend/app/(urls)/account/page.tsx
@@ -31,7 +31,7 @@ const AccountPage = () => {
      city: user?.city || '',
    },
    validationRules,
-    async (values) => {
+    async values => {
      try {
        const response = await fetch('/api/account/main', {
          method: 'PATCH',
@@ -52,10 +52,7 @@ const AccountPage = () => {
      } catch (error) {
        showToast({
          type: 'error',
-          message:
-            error instanceof Error
-              ? error.message
-              : 'Ой, что то пошло не так..',
+          message: error instanceof Error ? error.message : 'Ой, что то пошло не так..',
        })
      }
    }
@@ -67,12 +64,12 @@ const AccountPage = () => {

  return (
    <div className="space-y-3">
-      <div className="rounded-2xl shadow overflow-hidden">
-        <div className="p-6 bg-white sm:p-8">
+      <div className="overflow-hidden rounded-2xl shadow">
+        <div className="bg-white p-6 sm:p-8">
          <div className="space-y-4">
            <h1 className="text-2xl">Личные данные</h1>
            <form className="space-y-4" onSubmit={handleSubmit}>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                <TextInput
                  name="firstName"
                  value={values.firstName}
@@ -122,7 +119,7 @@ const AccountPage = () => {

              <Button
                text="Сохранить изменения"
-                className="text-sm font-semibold py-4 px-6 bg-orange text-white flex items-center rounded-2xl whitespace-nowrap"
+                className="bg-orange flex items-center rounded-2xl px-6 py-4 text-sm font-semibold whitespace-nowrap text-white"
                type="submit"
              />
            </form>
--- a/frontend/app/(urls)/account/routes/page.tsx
+++ b/frontend/app/(urls)/account/routes/page.tsx
@@ -6,6 +6,8 @@ interface Route {
  id: string
  from_city_name: string
  to_city_name: string
+  from_country_name: string
+  to_country_name: string
  formatted_departure: string
  formatted_arrival: string
  formatted_cargo_type: string
@@ -46,9 +48,7 @@ export default async function UserRoutes() {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="text-red-500">
-          {error instanceof Error
-            ? error.message
-            : 'Не удалось загрузить маршруты'}
+          {error instanceof Error ? error.message : 'Не удалось загрузить маршруты'}
        </div>
      </div>
    )
@@ -56,8 +56,8 @@ export default async function UserRoutes() {

  return (
    <div className="space-y-3">
-      <div className="rounded-2xl shadow overflow-hidden">
-        <div className="p-6 bg-white sm:p-8">
+      <div className="overflow-hidden rounded-2xl shadow">
+        <div className="bg-white p-6 sm:p-8">
          <div className="space-y-4">
            <h1 className="text-2xl">Мои маршруты</h1>
          </div>
@@ -65,55 +65,48 @@ export default async function UserRoutes() {
            <div className="flex flex-col items-center justify-center py-12 text-gray-500">
              <p className="text-lg">У вас пока нет завершенных маршрутов</p>
              <p className="text-sm">
-                Создавайте или принимайте заявки на перевозку, чтобы они
-                отобразились тут
+                Создавайте или принимайте заявки на перевозку, чтобы они отобразились тут
              </p>
            </div>
          )}
          {routes.length > 0 && (
            <div className="mt-4 space-y-4">
-              {routes.map((route) => (
+              {routes.map(route => (
                <div
                  key={route.id}
-                  className="border rounded-2xl p-6 space-y-4 hover:shadow-md transition-shadow bg-white"
+                  className="space-y-4 rounded-2xl border bg-white p-6 transition-shadow hover:shadow-md"
                >
-                  <div className="flex justify-between items-center">
-                    <div className="text-sm text-gray-500">
-                      ID маршрута: #{route.id}
-                    </div>
+                  <div className="flex items-center justify-between">
+                    <div className="text-sm text-gray-500">ID маршрута: #{route.id}</div>
                    <div
-                      className={`px-3 py-1 rounded-full text-sm ${
+                      className={`rounded-full px-3 py-1 text-sm ${
                        route.owner_type === 'customer'
                          ? 'bg-blue-100 text-blue-800'
                          : 'bg-green-100 text-green-800'
                      }`}
                    >
-                      {route.owner_type === 'customer'
-                        ? 'Заказчик'
-                        : 'Перевозчик'}
+                      {route.owner_type === 'customer' ? 'Заказчик' : 'Перевозчик'}
                    </div>
                  </div>

                  <div className="flex flex-col space-y-1">
                    <div className="flex items-center space-x-3">
-                      <div className="w-4 h-4 rounded-full bg-blue-500 flex-shrink-0" />
+                      <div className="h-4 w-4 flex-shrink-0 rounded-full bg-blue-500" />
                      <div>
                        <div className="font-medium">
-                          {route.from_city_name}
-                        </div>
-                        <div className="text-sm text-gray-600">
-                          {route.formatted_departure}
+                          {route.from_city_name} / {route.from_country_name}
                        </div>
+                        <div className="text-sm text-gray-600">{route.formatted_departure}</div>
                      </div>
                    </div>
-                    <div className="ml-[7px] w-[2px] h-6 bg-gray-300" />
+                    <div className="ml-[7px] h-6 w-[2px] bg-gray-300" />
                    <div className="flex items-center space-x-3">
-                      <div className="w-4 h-4 rounded-full bg-green-500 flex-shrink-0" />
+                      <div className="h-4 w-4 flex-shrink-0 rounded-full bg-green-500" />
                      <div>
-                        <div className="font-medium">{route.to_city_name}</div>
-                        <div className="text-sm text-gray-600">
-                          {route.formatted_arrival}
+                        <div className="font-medium">
+                          {route.to_city_name} / {route.to_country_name}
                        </div>
+                        <div className="text-sm text-gray-600">{route.formatted_arrival}</div>
                      </div>
                    </div>
                  </div>
@@ -121,23 +114,18 @@ export default async function UserRoutes() {
                  <div className="flex flex-wrap gap-4 pt-2">
                    <div className="flex items-center space-x-2">
                      <div className="text-gray-500">Тип груза:</div>
-                      <div className="font-medium">
-                        {route.formatted_cargo_type}
-                      </div>
+                      <div className="font-medium">{route.formatted_cargo_type}</div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <div className="text-gray-500">Способ перевозки:</div>
-                      <div className="font-medium">
-                        {route.formatted_transport}
-                      </div>
+                      <div className="font-medium">{route.formatted_transport}</div>
                    </div>
                  </div>

                  {route.comment && (
-                    <div className="pt-2 border-t border-gray-300">
+                    <div className="border-t border-gray-300 pt-2">
                      <div className="text-sm text-gray-500">
-                        <span className="text-gray-500">Комментарий:</span>{' '}
-                        {route.comment}
+                        <span className="text-gray-500">Комментарий:</span> {route.comment}
                      </div>
                    </div>
                  )}
--- a/frontend/app/api/account/main/route.ts
+++ b/frontend/app/api/account/main/route.ts
@@ -15,24 +15,21 @@ export async function PATCH(req: NextRequest) {
    const data = await req.json()
    const { firstName, lastName, email, phone_number, country, city } = data

-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/account/change_main_data/`,
-      {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${session.accessToken}`,
-        },
-        body: JSON.stringify({
-          firstName,
-          lastName,
-          email,
-          phone_number,
-          country,
-          city,
-        }),
-      }
-    )
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/account/change_main_data/`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+      body: JSON.stringify({
+        firstName,
+        lastName,
+        email,
+        phone_number,
+        country,
+        city,
+      }),
+    })

    if (!response.ok) {
      const error = await response.json()
--- a/frontend/app/api/account/routes/route.ts
+++ b/frontend/app/api/account/routes/route.ts
@@ -12,16 +12,13 @@ export async function GET(req: NextRequest) {
      })
    }

-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/account/routes/`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${session.accessToken}`,
-        },
-      }
-    )
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/account/routes/`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+    })

    if (!response.ok) {
      const error = await response.json()
--- a/frontend/app/hooks/useForm.ts
+++ b/frontend/app/hooks/useForm.ts
@@ -25,21 +25,19 @@ export function useForm<T extends Record<string, FormValue>>(
  const [isVisible, setIsVisible] = useState(false)

  const handleChange = (
-    e:
-      | ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
-      | CustomChangeEvent
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | CustomChangeEvent
  ) => {
    const { id, value, type } = e.target
    const isCheckbox = type === 'checkbox' && 'checked' in e.target

-    setValues((prev) => ({
+    setValues(prev => ({
      ...prev,
      [id]: isCheckbox ? (e.target as HTMLInputElement).checked : value,
    }))

    // скидываем ошибки
    if (errors[id]) {
-      setErrors((prev) => {
+      setErrors(prev => {
        const newErrors = { ...prev }
        delete newErrors[id]
        return newErrors
@@ -48,14 +46,14 @@ export function useForm<T extends Record<string, FormValue>>(
  }

  const resetField = (fieldName: keyof T, value: FormValue = '') => {
-    setValues((prev) => ({
+    setValues(prev => ({
      ...prev,
      [fieldName]: value,
    }))

    // очищаем ошибки для этого поля, если они есть
    if (errors[fieldName as string]) {
-      setErrors((prev) => {
+      setErrors(prev => {
        const newErrors = { ...prev }
        delete newErrors[fieldName as string]
        return newErrors
@@ -77,37 +75,28 @@ export function useForm<T extends Record<string, FormValue>>(

    const newErrors: ValidationErrors = {}

-    Object.keys(validationRules).forEach((key) => {
+    Object.keys(validationRules).forEach(key => {
      const value = values[key]
      const rules = validationRules[key as keyof T]

      if (rules?.required && !value) {
        newErrors[key] = 'Это поле обязательно'
-        toast.error(
-          `Поле "${fieldNames[key] || key}" обязательно для заполнения`,
-          {
-            duration: 2000,
-            position: 'top-right',
-            style: {
-              background: '#FEE2E2',
-              color: '#991B1B',
-              padding: '16px',
-              borderRadius: '8px',
-            },
-          }
-        )
+        toast.error(`Поле "${fieldNames[key] || key}" обязательно для заполнения`, {
+          duration: 2000,
+          position: 'top-right',
+          style: {
+            background: '#FEE2E2',
+            color: '#991B1B',
+            padding: '16px',
+            borderRadius: '8px',
+          },
+        })
      }

-      if (
-        rules?.minLength &&
-        typeof value === 'string' &&
-        value.length < rules.minLength
-      ) {
+      if (rules?.minLength && typeof value === 'string' && value.length < rules.minLength) {
        newErrors[key] = `Минимальная длина ${rules.minLength} символов`
        toast.error(
-          `Минимальная длина поля "${fieldNames[key] || key}" - ${
-            rules.minLength
-          } символов`,
+          `Минимальная длина поля "${fieldNames[key] || key}" - ${rules.minLength} символов`,
          {
            duration: 2000,
            position: 'top-right',
@@ -121,11 +110,7 @@ export function useForm<T extends Record<string, FormValue>>(
        )
      }

-      if (
-        rules?.pattern &&
-        typeof value === 'string' &&
-        !rules.pattern.test(value)
-      ) {
+      if (rules?.pattern && typeof value === 'string' && !rules.pattern.test(value)) {
        newErrors[key] = 'Неверный формат'
        toast.error(`Поле "${fieldNames[key] || key}" заполнено некорректно`, {
          duration: 2000,
--- a/frontend/app/providers/AuthProvider.tsx
+++ b/frontend/app/providers/AuthProvider.tsx
@@ -29,9 +29,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
        if (!response.ok) {
          const errorText = await response.text()
          console.error('Error response:', errorText)
-          throw new Error(
-            `Error fetching user data: ${response.status} ${errorText}`
-          )
+          throw new Error(`Error fetching user data: ${response.status} ${errorText}`)
        }

        const userData = await response.json()
--- a/frontend/app/store/userStore.ts
+++ b/frontend/app/store/userStore.ts
@@ -18,15 +18,15 @@ interface UserStore extends UserState {

 const useUserStore = create<UserStore>()(
  persist(
-    (set) => ({
+    set => ({
      // начальное состояние
      isAuthenticated: false,
      user: null,
      favorites: [],

      // синхронные действия
-      setUser: (user) => set({ user }),
-      setAuthenticated: (isAuthenticated) => set({ isAuthenticated }),
+      setUser: user => set({ user }),
+      setAuthenticated: isAuthenticated => set({ isAuthenticated }),
      logout: () =>
        set({
          isAuthenticated: false,