шлется на реальный сервер (#2)

Co-authored-by: Mariya Trishina <trishina.mariya@tnsu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/hr-appeals/pulls/2

src/features/feedback/model.test.ts

@@ -1,10 +1,10 @@
-import { COMPANY_OPTIONS, getAppealFieldsConfig } from './model';
+import { getAppealFieldsConfig } from './model';
 
 // Форма (AppealSection) и валидация (validateFeedback) читают одно и то же
 // правило из getAppealFieldsConfig — если оно разойдётся, форма и валидация
 // начнут спорить друг с другом. Эти тесты фиксируют контракт правила.
 describe('getAppealFieldsConfig', () => {
-  it('жалоба: описание обязательно, предложение показано, но необязательно', () => {
+  it('обращение: описание обязательно, предложение показано, но необязательно', () => {
     const fields = getAppealFieldsConfig('complaint');
     expect(fields.situation).toEqual({ visible: true, required: true });
     expect(fields.suggestion).toEqual({ visible: true, required: false });
@@ -32,18 +32,3 @@ describe('getAppealFieldsConfig', () => {
     });
   });
 });
-
-// Справочник компаний используется бэкендом по Id (см. комментарий в model.ts) —
-// дубликат Id незаметно перепутал бы два разных юрлица.
-describe('COMPANY_OPTIONS', () => {
-  it('не содержит повторяющихся Id', () => {
-    const ids = COMPANY_OPTIONS.map((option) => option.value);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-
-  it('у каждой компании есть непустое название', () => {
-    COMPANY_OPTIONS.forEach((option) => {
-      expect(option.label.trim().length).toBeGreaterThan(0);
-    });
-  });
-});

src/features/feedback/model.ts

@@ -18,32 +18,11 @@ export interface IFeedbackData {
   suggestion: string;
 }
 
-/**
- * Компании группы. В value — реальный Id из справочника, а не slug: именно его
- * ждёт бэкенд, когда появится отправка. Порядок как в источнике (по алфавиту).
- */
-export const COMPANY_OPTIONS: ISelectOption[] = [
-  { value: '8028abac-ac23-8fd8-11ef-cb57631a9ab0', label: 'ТОО AFL Engineering' },
-  { value: '9de064a4-44c8-88ef-11ec-831c058b1141', label: 'ТОО CL MANAGEMENT' },
-  { value: '9de064a4-44c8-88ef-11ec-8287fb7737a2', label: 'ТОО KazPromService' },
-  { value: 'ec3c78a7-29ef-4725-11ed-a6d8fcd0911d', label: 'ТОО QAZGEOMAX' },
-  { value: '15009595-005d-00fa-11ef-11309f5e395d', label: 'ТОО Selin Invest' },
-  { value: '03f4deac-f543-e8cf-11f1-84eb25329fc3', label: 'ТОО Selin Studio' },
-  { value: '9de064a4-44c8-88ef-11ec-8284930fad96', label: 'ТОО TANSU Construction' },
-  { value: '9de064a4-44c8-88ef-11ec-8285925d83d2', label: 'ТОО АСТЕЛ-К' },
-  { value: '15009595-005d-00fa-11ef-0b8bb5ec1a88', label: 'ТОО ГеоТрек' },
-  { value: '15009595-005d-00fa-11ef-0b8714483372', label: 'ТОО Монтажник-Т' },
-  { value: '8028beac-ac23-8fd8-11f0-5351706e5996', label: 'ТОО ОСН Беркут' },
-  { value: '8028b0ac-ac23-8fd8-11ef-dcdb24b82e02', label: 'ТОО СТ Global' },
-  { value: '15009595-005d-00fa-11ef-1131801d9f3e', label: 'ТОО ТехЛаб' },
-  { value: '03f4deac-f543-e8cf-11f1-84f51483f59e', label: 'Частная компания Seline Holding Ltd' }
-];
-
 // Порядок как в исходной форме: «Предложение» первым — совпадает с дефолтным
 // значением ниже (EMPTY_FEEDBACK.kind), так что выбор пользователя.
 export const KIND_OPTIONS: ISelectOption[] = [
   { value: 'suggestion', label: 'Предложение' },
-  { value: 'complaint', label: 'Жалоба' },
+  { value: 'complaint', label: 'Обращение' },
   { value: 'other', label: 'Другое' }
 ];
 
@@ -61,7 +40,7 @@ export interface IAppealFieldsConfig {
 
 /**
  * Состав полей зависит от вида обращения:
- *   жалоба      — обязательно описание, а предложение — на желание автора;
+ *   обращение   — обязательно описание, а предложение — на желание автора;
  *   предложение — только само предложение, «ситуации» ещё нет;
  *   другое      — свободное описание, без предложения.
  * Одно правило на форму и на валидацию, чтобы они не разошлись.

src/features/feedback/sections/AuthorSection.tsx

@@ -1,24 +1,33 @@
 import { FormGrid, Select, TextInput, Toggle } from '@tnsu/ui-kit';
 import { Field } from '../../../components/Field/Field';
-import { COMPANY_OPTIONS } from '../model';
 import { TEXTS } from '../texts';
+import { useCompanies } from '../useCompanies';
 import type { ISectionProps } from './ISectionProps';
 
 /** Кто обращается: компания, анонимность, ФИО и должность. */
-export const AuthorSection: React.FC<ISectionProps> = ({ data, errors, set }) => (
+export const AuthorSection: React.FC<ISectionProps> = ({ data, errors, set }) => {
+  const companies = useCompanies();
+
+  return (
   <FormGrid>
+    {/* Ошибку справочника показываем в слоте ошибки поля: без списка компанию
+        не выбрать, а обязательное поле молча пустым оставлять нельзя. */}
     <Field
       label={TEXTS.labels.company}
       htmlFor="company"
       required
-      error={errors.company}
+      error={companies.error ? TEXTS.errors.companiesFailed : errors.company}
     >
       <Select
         id="company"
         value={data.company}
         onChange={(v) => set('company', v)}
-        options={COMPANY_OPTIONS}
-        placeholder={TEXTS.placeholders.company}
+        options={companies.options}
+        placeholder={
+          companies.isLoading
+            ? TEXTS.placeholders.companyLoading
+            : TEXTS.placeholders.company
+        }
       />
     </Field>
 
@@ -59,4 +68,5 @@ export const AuthorSection: React.FC<ISectionProps> = ({ data, errors, set }) =>
       </>
     ) : null}
   </FormGrid>
-);
+  );
+};

src/features/feedback/texts.ts

@@ -28,7 +28,8 @@ export const TEXTS = {
 
   placeholders: {
     company: 'Выберите компанию',
-    fullName: 'Иванов Иван Иванович',
+    companyLoading: 'Загружаем список компаний…',
+    fullName: 'Нурлан Нурланович Нурланов',
     position: 'Например: инженер-проектировщик',
     kindOther: 'Свой вариант',
     situation: 'Опишите, что произошло: когда, где, кто участвовал',
@@ -46,7 +47,9 @@ export const TEXTS = {
     required: 'Заполните поле',
     selectRequired: 'Выберите значение',
     tooShort: 'Слишком короткий ответ — опишите подробнее',
-    hasErrors: 'Проверьте выделенные поля — что-то заполнено не полностью.'
+    hasErrors: 'Проверьте выделенные поля — что-то заполнено не полностью.',
+    submitFailed: 'Не удалось отправить обращение. Попробуйте ещё раз позже.',
+    companiesFailed: 'Не удалось загрузить список компаний. Обновите страницу.'
   },
 
   thanks: {

src/features/feedback/useCompanies.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import type { ISelectOption } from '@tnsu/ui-kit';
+
+interface ICompanyDto {
+  Id: string;
+  Name: string;
+}
+
+export interface ICompaniesState {
+  options: ISelectOption[];
+  isLoading: boolean;
+  /** Непустая строка — справочник не загрузился, выбрать компанию нельзя. */
+  error: string;
+}
+
+/**
+ * Справочник компаний приходит из api.tnsu.kz через наш сервис (/api/companies),
+ * а не лежит в коде: список юрлиц группы меняется без нашего участия, а копия в
+ * репозитории неизбежно разошлась бы с источником.
+ */
+export function useCompanies(): ICompaniesState {
+  const [options, setOptions] = useState<ISelectOption[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    // Форма живёт до перезагрузки страницы, но размонтирование в dev-режиме
+    // (StrictMode, hot reload) случается — не даём setState после него.
+    let cancelled = false;
+
+    fetch('/api/companies')
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Сервер вернул ${response.status}`);
+        }
+        return (await response.json()) as ICompanyDto[];
+      })
+      .then((companies) => {
+        if (cancelled) return;
+        setOptions(companies.map(({ Id, Name }) => ({ value: Id, label: Name })));
+        setIsLoading(false);
+      })
+      .catch((cause) => {
+        if (cancelled) return;
+        // eslint-disable-next-line no-console
+        console.error('Не удалось загрузить справочник компаний:', cause);
+        setError(String(cause));
+        setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { options, isLoading, error };
+}

src/features/feedback/useFeedbackForm.ts

@@ -18,8 +18,8 @@ export interface IFeedbackForm {
 
 /**
  * Состояние формы обращения: данные, валидация, отправка.
- * Бэкенда пока нет — submit только имитирует отправку (см. TODO ниже),
- * поэтому вся логика синхронная и живёт здесь, без сервисного слоя.
+ * Отправка идёт через nginx (/api/... -> hr-appeals-auth) — сервис сам
+ * меняет её на app-only токен и создаёт элемент в списке SharePoint.
  */
 export function useFeedbackForm(): IFeedbackForm {
   const [data, setData] = useState<IFeedbackData>(EMPTY_FEEDBACK);
@@ -53,11 +53,24 @@ export function useFeedbackForm(): IFeedbackForm {
     setFormError('');
     setStatus('submitting');
 
-    // TODO: заменить на реальную отправку, когда определимся с бэкендом.
-    // Сейчас это заглушка по договорённости: делаем только UI.
-    // eslint-disable-next-line no-console
-    console.info('Обращение (заглушка отправки):', data);
-    setStatus('done');
+    fetch('/api/feedback', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          const body = await response.json().catch(() => null);
+          throw new Error(body?.error ?? `Сервер вернул ${response.status}`);
+        }
+        setStatus('done');
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error('Не удалось отправить обращение:', error);
+        setFormError(TEXTS.errors.submitFailed);
+        setStatus('idle');
+      });
   }, [data]);
 
   const reset = useCallback((): void => {

src/features/feedback/validateFeedback.test.ts

@@ -6,7 +6,7 @@ const VALID_COMPANY = '9de064a4-44c8-88ef-11ec-8285925d83d2';
 const LONG_TEXT = 'Развёрнутое описание, которого достаточно для проверки правила';
 const SHORT_TEXT = 'коротко';
 
-/** Полностью заполненное «жалоба»-обращение — стартовая точка для тестов. */
+/** Полностью заполненное обращение — стартовая точка для тестов. */
 function buildValidComplaint(overrides: Partial<IFeedbackData> = {}): IFeedbackData {
   return {
     ...EMPTY_FEEDBACK,
@@ -61,17 +61,17 @@ describe('validateFeedback: вид обращения "Другое"', () => {
 // Состав обязательных полей зависит от вида обращения (см. getAppealFieldsConfig
 // в model.ts) — эти тесты фиксируют контракт, чтобы форма и валидация не разошлись.
 describe('validateFeedback: обязательность полей по видам обращения', () => {
-  it('жалоба: описание ситуации обязательно', () => {
+  it('обращение: описание ситуации обязательно', () => {
     const errors = validateFeedback(buildValidComplaint({ situation: '' }));
     expect(errors.situation).toBeDefined();
   });
 
-  it('жалоба: предложение по улучшению НЕ обязательно', () => {
+  it('обращение: предложение по улучшению НЕ обязательно', () => {
     const errors = validateFeedback(buildValidComplaint({ suggestion: '' }));
     expect(errors.suggestion).toBeUndefined();
   });
 
-  it('жалоба: если предложение всё же указано, но слишком коротко — ошибка', () => {
+  it('обращение: если предложение всё же указано, но слишком коротко — ошибка', () => {
     const errors = validateFeedback(buildValidComplaint({ suggestion: SHORT_TEXT }));
     expect(errors.suggestion).toBeDefined();
   });