395 lines
15 KiB
JavaScript
395 lines
15 KiB
JavaScript
import { useCallback, useEffect, useState } from "react";
|
||
import CloseIcon from "../components/icons/CloseIcon";
|
||
import RulesModal from "../components/RulesModal";
|
||
import { EMPTY_FORM, CATEGORY_KEYS } from "../config/feedConstants";
|
||
import { useTranslation } from 'react-i18next';
|
||
import { usePostMutation } from "../hooks/usePostMutation";
|
||
import { useImageUpload, ACCEPT, MAX_SIZE_MB } from "../hooks/useImageUpload";
|
||
import { validatePostForm } from "../utils/validatePostForm";
|
||
import { formatPhone } from "../utils/formatPhone";
|
||
import { useYandexMap } from "../hooks/useYandexMap";
|
||
import { isMobileDevice } from "../utils/isMobileDevice";
|
||
|
||
/**
|
||
* CreateUpdatePost — модальная форма создания и редактирования объявления.
|
||
*
|
||
* @param {function} onClose — закрыть модалку без сохранения
|
||
* @param {function} onSuccess — колбэк после успешного сохранения (перезагружает ленту)
|
||
* @param {object} [initialData] — если передан, форма работает в режиме редактирования
|
||
*/
|
||
export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
|
||
const isEdit = !!initialData;
|
||
const { t } = useTranslation();
|
||
|
||
const [form, setForm] = useState(
|
||
isEdit
|
||
? {
|
||
type: (initialData.type || "loss").toLowerCase(),
|
||
title: initialData.title || "",
|
||
description: initialData.description || "",
|
||
category: initialData.category || "",
|
||
date: initialData.date || "",
|
||
phone: initialData.phone || "",
|
||
address: initialData.city || "",
|
||
rulesAccepted: true,
|
||
reward: initialData.reward ?? false
|
||
}
|
||
: EMPTY_FORM
|
||
);
|
||
|
||
const [rulesModalOpen, setRulesModalOpen] = useState(false);
|
||
const [errors, setErrors] = useState({});
|
||
|
||
const {
|
||
images: uploadedImages,
|
||
imgError,
|
||
compressing,
|
||
fileInputRef,
|
||
handleFileChange,
|
||
removeImage,
|
||
getFilesForUpload,
|
||
getExistingUrlsToKeep,
|
||
} = useImageUpload(isEdit ? initialData.images : []);
|
||
|
||
const { save, loading: saving, error: apiError } = usePostMutation();
|
||
|
||
const [resultModal, setResultModal] = useState(null); // null | "success" | "blocked"
|
||
|
||
const initialCoords = isEdit && initialData.latitude && initialData.longitude
|
||
? { latitude: initialData.latitude, longitude: initialData.longitude }
|
||
: null;
|
||
|
||
const { mapRef, coords, address, addressRef } = useYandexMap(
|
||
true,
|
||
initialCoords,
|
||
isEdit ? (initialData.location || "") : ""
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (address) {
|
||
setForm(prev => ({ ...prev, address }));
|
||
// Адрес пришёл — очищаем и ошибку поля, и "карта грузится",
|
||
// иначе последняя может остаться висеть на экране навсегда.
|
||
setErrors(prev => ({ ...prev, address: "", map: "" }));
|
||
}
|
||
}, [address]);
|
||
|
||
const loading = saving || compressing;
|
||
|
||
/** Обновляет одно поле формы и сбрасывает его ошибку валидации. */
|
||
const set = useCallback((key, value) => {
|
||
setForm(prev => ({ ...prev, [key]: value }));
|
||
setErrors(prev => ({ ...prev, [key]: "" }));
|
||
}, []);
|
||
|
||
/** Собирает FormData и отправляет запрос на создание или обновление. */
|
||
const handleSubmit = async () => {
|
||
const validationErrors = validatePostForm(form);
|
||
if (Object.keys(validationErrors).length) {
|
||
setErrors(validationErrors);
|
||
return;
|
||
}
|
||
|
||
if (coords && !addressRef.current) {
|
||
setErrors(prev => ({ ...prev, map: t('post.mapLoading') }));
|
||
return;
|
||
}
|
||
|
||
const data = new FormData();
|
||
data.append("type", form.type.toUpperCase());
|
||
data.append("title", form.title.trim());
|
||
data.append("description", form.description.trim());
|
||
data.append("category", form.category);
|
||
data.append("phone", form.phone.trim());
|
||
data.append("reward", form.reward ? "true" : "false");
|
||
if (form.date) data.append("date", form.date);
|
||
|
||
const files = getFilesForUpload();
|
||
files.forEach(f => data.append("images", f));
|
||
|
||
if (isEdit) {
|
||
const existing = getExistingUrlsToKeep();
|
||
if (existing.length > 0) {
|
||
data.append("existingImages", JSON.stringify(existing));
|
||
}
|
||
}
|
||
|
||
if (coords) {
|
||
data.append("latitude", coords.latitude);
|
||
data.append("longitude", coords.longitude);
|
||
data.append("address", form.address.trim());
|
||
}
|
||
|
||
if (!coords && form.address.trim()) {
|
||
data.append("address", form.address.trim());
|
||
}
|
||
|
||
data.append("rulesAccepted", form.rulesAccepted ? "true" : "false");
|
||
|
||
const result = await save(isEdit ? initialData.id : null, data);
|
||
if (!result) return;
|
||
|
||
if (result.blocked) {
|
||
setResultModal("blocked");
|
||
return;
|
||
}
|
||
if (result.data) {
|
||
setResultModal("success");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
className="f-modal-bg"
|
||
onClick={e => e.target === e.currentTarget && !loading && onClose()}
|
||
>
|
||
<div className="f-modal">
|
||
|
||
<div className="f-modal-head">
|
||
<span className="f-modal-title">
|
||
{isEdit ? t('post.editTitle') : t('post.newTitle')}
|
||
</span>
|
||
<button className="f-close-btn" type="button" onClick={onClose}>
|
||
<CloseIcon />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Тип: Потеря / Находка */}
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.typeLabel')}</label>
|
||
<div className="f-type-toggle">
|
||
<button
|
||
type="button"
|
||
className={`f-type-opt${form.type === "loss" ? " loss" : ""}`}
|
||
onClick={() => set("type", "loss")}
|
||
>
|
||
{t('post.loss')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`f-type-opt${form.type === "found" ? " found" : ""}`}
|
||
onClick={() => set("type", "found")}
|
||
>
|
||
{t('post.found')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Название */}
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.titleLabel')}</label>
|
||
<input
|
||
className={`f-m-field${errors.title ? " err" : ""}`}
|
||
type="text"
|
||
placeholder={t('post.titlePlaceholder')}
|
||
value={form.title}
|
||
onChange={e => set("title", e.target.value)}
|
||
/>
|
||
{errors.title && <p className="f-err-msg">{errors.title}</p>}
|
||
</div>
|
||
|
||
{/* Описание */}
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.descriptionLabel')}</label>
|
||
<textarea
|
||
className={`f-m-field${errors.description ? " err" : ""}`}
|
||
rows={3}
|
||
placeholder={t('post.descriptionPlaceholder')}
|
||
value={form.description}
|
||
onChange={e => set("description", e.target.value)}
|
||
/>
|
||
{errors.description && <p className="f-err-msg">{errors.description}</p>}
|
||
</div>
|
||
|
||
{/* Фотографии */}
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.photosLabel')}</label>
|
||
|
||
{uploadedImages.length > 0 && (
|
||
<div className="f-img-grid">
|
||
{uploadedImages.map(img => (
|
||
<div key={img.id} className="f-img-grid-item">
|
||
<img src={img.preview} alt="" className="f-img-grid-preview" />
|
||
<button
|
||
className="f-img-remove"
|
||
onClick={() => removeImage(img.id)}
|
||
type="button"
|
||
aria-label={t('post.deletePhoto')}
|
||
>
|
||
<CloseIcon />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<label className="f-img-upload-label">
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept={ACCEPT}
|
||
multiple
|
||
capture={isMobileDevice() ? "environment" : undefined}
|
||
onChange={handleFileChange}
|
||
className="f-img-input"
|
||
disabled={compressing}
|
||
/>
|
||
{compressing ? (
|
||
<span>{t('post.processing')}</span>
|
||
) : (
|
||
<span>{uploadedImages.length > 0 ? t('post.addMore') : t('post.addPhoto')}</span>
|
||
)}
|
||
</label>
|
||
|
||
{imgError && <p className="f-err-msg">{imgError}</p>}
|
||
<p className="f-hint">{t('post.photoHint', { maxSize: MAX_SIZE_MB })}</p>
|
||
</div>
|
||
|
||
{/* Категория */}
|
||
<div className="f-m-row">
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.categoryLabel')}</label>
|
||
<select
|
||
className={`f-m-field${errors.category ? " err" : ""}`}
|
||
value={form.category}
|
||
onChange={e => set("category", e.target.value)}
|
||
>
|
||
<option value="">{t('categories.select')}</option>
|
||
{CATEGORY_KEYS.map(k => <option key={k} value={t(k)}>{t(k)}</option>)}
|
||
</select>
|
||
{errors.category && <p className="f-err-msg">{errors.category}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Карта */}
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.mapLabel')}</label>
|
||
<div className="f-map-frame">
|
||
<div ref={mapRef} className="f-map-inner" />
|
||
</div>
|
||
|
||
{!coords && <p className="f-hint">{t('post.mapHint')}</p>}
|
||
{errors.map && <p className="f-err-msg">{errors.map}</p>}
|
||
</div>
|
||
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.addressLabel')}</label>
|
||
<input
|
||
className={`f-m-field${errors.address ? " err" : ""}`}
|
||
type="text"
|
||
placeholder={t('post.addressPlaceholder')}
|
||
value={form.address}
|
||
onChange={e => set("address", e.target.value)}
|
||
/>
|
||
{errors.address && <p className="f-err-msg">{errors.address}</p>}
|
||
</div>
|
||
|
||
{/* Телефон */}
|
||
<div className="f-m-group">
|
||
<label className="f-m-label">{t('post.phoneLabel')}</label>
|
||
<input
|
||
className={`f-m-field${errors.phone ? " err" : ""}`}
|
||
type="tel"
|
||
placeholder={t('post.phonePlaceholder')}
|
||
value={form.phone}
|
||
onChange={e => set("phone", formatPhone(e.target.value))}
|
||
/>
|
||
{errors.phone && <p className="f-err-msg">{errors.phone}</p>}
|
||
</div>
|
||
|
||
{/* Вознаграждение */}
|
||
<div className="f-m-group">
|
||
<label className="f-reward-checkbox">
|
||
<input
|
||
type="checkbox"
|
||
checked={form.reward}
|
||
onChange={e => set("reward", e.target.checked)}
|
||
/>
|
||
|
||
<span className="f-reward-checkmark"/>
|
||
|
||
<span className="f-reward-text">
|
||
{t("post.rewardCheckbox")}
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Чекбокс согласия с правилами */}
|
||
<div className="f-m-group">
|
||
<label className="f-rules-checkbox">
|
||
<input
|
||
type="checkbox"
|
||
className="f-rules-input"
|
||
checked={form.rulesAccepted}
|
||
onChange={e => set("rulesAccepted", e.target.checked)}
|
||
/>
|
||
<span className="f-rules-checkmark" />
|
||
<span className="f-rules-text">
|
||
{t('post.rulesCheckboxPrefix')}{' '}
|
||
<span
|
||
className="f-rules-link"
|
||
onClick={e => {
|
||
e.preventDefault();
|
||
setRulesModalOpen(true);
|
||
}}
|
||
>
|
||
{t('post.rulesLinkText')}
|
||
</span>
|
||
</span>
|
||
</label>
|
||
{errors.rulesAccepted && <p className="f-err-msg">{errors.rulesAccepted}</p>}
|
||
</div>
|
||
|
||
{apiError && <p className="f-err-msg">{apiError}</p>}
|
||
|
||
<button className="f-m-submit" type="button" onClick={handleSubmit} disabled={loading}>
|
||
<div className="f-m-submit-row">
|
||
{loading && <div className="f-m-spinner" />}
|
||
{isEdit ? t('post.saveChanges') : t('post.publish')}
|
||
</div>
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{rulesModalOpen && (
|
||
<RulesModal onClose={() => setRulesModalOpen(false)} />
|
||
)}
|
||
|
||
{resultModal && (
|
||
<div
|
||
className="f-modal-bg"
|
||
onClick={e => {
|
||
if (e.target === e.currentTarget) {
|
||
if (resultModal === "success") onSuccess?.();
|
||
onClose();
|
||
}
|
||
}}
|
||
>
|
||
<div className="f-modal f-modal-result">
|
||
<div className={`f-result-icon ${resultModal === "blocked" ? "blocked" : "success"}`}>
|
||
{resultModal === "blocked" ? "✕" : "✓"}
|
||
</div>
|
||
<h3 className="f-result-title">
|
||
{resultModal === "blocked" ? t('post.blockedTitle') : t('post.successTitle')}
|
||
</h3>
|
||
<p className="f-result-text">
|
||
{resultModal === "blocked" ? t('post.blockedText') : t('post.successText')}
|
||
</p>
|
||
<button
|
||
className={`f-result-btn ${resultModal === "blocked" ? "err" : "ok"}`}
|
||
type="button"
|
||
onClick={() => {
|
||
if (resultModal === "success") onSuccess?.();
|
||
onClose();
|
||
}}
|
||
>
|
||
{t('post.resultClose')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
} |