550 lines
19 KiB
TypeScript
550 lines
19 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
|
import { useAuth } from "../contexts/AuthContext";
|
|
import { forumAPI, addressAPI } from "../services/api";
|
|
import { uploadFiles, getPublicImageUrl } from "../services/uploadService";
|
|
import TagInput from "../components/TagInput";
|
|
import ForumImageUpload from "../components/ForumImageUpload";
|
|
import { Address, ForumPost } from "../types";
|
|
|
|
const CreateForumPost: React.FC = () => {
|
|
const { id } = useParams<{ id: string }>();
|
|
const isEditMode = !!id;
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [loading, setLoading] = useState(isEditMode);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [userAddresses, setUserAddresses] = useState<Address[]>([]);
|
|
const [existingImageKeys, setExistingImageKeys] = useState<string[]>([]);
|
|
|
|
const [formData, setFormData] = useState({
|
|
title: "",
|
|
content: "",
|
|
category: "general_discussion" as
|
|
| "item_request"
|
|
| "technical_support"
|
|
| "community_resources"
|
|
| "general_discussion",
|
|
tags: [] as string[],
|
|
zipCode: user?.zipCode || "",
|
|
latitude: undefined as number | undefined,
|
|
longitude: undefined as number | undefined,
|
|
});
|
|
|
|
const [imageFiles, setImageFiles] = useState<File[]>([]);
|
|
const [imagePreviews, setImagePreviews] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetchUserAddresses();
|
|
if (isEditMode && id) {
|
|
fetchPost();
|
|
}
|
|
}, [id, isEditMode]);
|
|
|
|
const fetchPost = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await forumAPI.getPost(id!);
|
|
const post: ForumPost = response.data;
|
|
|
|
// Verify user is the author
|
|
if (post.authorId !== user?.id) {
|
|
setError("You are not authorized to edit this post");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Populate form with existing data
|
|
setFormData({
|
|
title: post.title,
|
|
content: post.content,
|
|
category: post.category as any,
|
|
tags: (post.tags || []).map((t) => t.tagName),
|
|
zipCode: post.zipCode || user?.zipCode || "",
|
|
latitude: post.latitude,
|
|
longitude: post.longitude,
|
|
});
|
|
|
|
// Set existing images
|
|
if (post.imageFilenames && post.imageFilenames.length > 0) {
|
|
setExistingImageKeys(post.imageFilenames);
|
|
setImagePreviews(
|
|
post.imageFilenames.map((key: string) => getPublicImageUrl(key))
|
|
);
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.error || "Failed to fetch post");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchUserAddresses = async () => {
|
|
try {
|
|
const response = await addressAPI.getAddresses();
|
|
setUserAddresses(response.data);
|
|
} catch (error) {
|
|
console.error("Error fetching addresses:", error);
|
|
}
|
|
};
|
|
|
|
const categories = [
|
|
{
|
|
value: "item_request",
|
|
label: "Item Request",
|
|
description: "Looking to rent a specific item",
|
|
},
|
|
{
|
|
value: "technical_support",
|
|
label: "Technical Support",
|
|
description: "Get help with using the platform",
|
|
},
|
|
{
|
|
value: "community_resources",
|
|
label: "Community Resources",
|
|
description: "Share tips, guides, and resources",
|
|
},
|
|
{
|
|
value: "general_discussion",
|
|
label: "General Discussion",
|
|
description: "Open-ended conversations",
|
|
},
|
|
];
|
|
|
|
const handleInputChange = (
|
|
e: React.ChangeEvent<
|
|
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
|
>
|
|
) => {
|
|
const { name, value } = e.target;
|
|
|
|
// If category is being changed to item_request and user has addresses, autopopulate location data
|
|
if (name === "category" && value === "item_request" && userAddresses.length > 0) {
|
|
// Try to find primary address first, otherwise use first address
|
|
const primaryAddress = userAddresses.find(addr => addr.isPrimary) || userAddresses[0];
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
zipCode: primaryAddress.zipCode,
|
|
latitude: primaryAddress.latitude,
|
|
longitude: primaryAddress.longitude
|
|
}));
|
|
} else {
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
}
|
|
};
|
|
|
|
const handleTagsChange = (tags: string[]) => {
|
|
setFormData((prev) => ({ ...prev, tags }));
|
|
};
|
|
|
|
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = Array.from(e.target.files || []);
|
|
const totalImages = existingImageKeys.length + imageFiles.length;
|
|
const remainingSlots = 5 - totalImages;
|
|
const filesToAdd = files.slice(0, remainingSlots);
|
|
|
|
setImageFiles((prev) => [...prev, ...filesToAdd]);
|
|
|
|
// Create preview URLs
|
|
filesToAdd.forEach((file) => {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setImagePreviews((prev) => [...prev, reader.result as string]);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
// Reset input
|
|
e.target.value = "";
|
|
};
|
|
|
|
const handleRemoveImage = (index: number) => {
|
|
if (index < existingImageKeys.length) {
|
|
// Removing an existing S3 image
|
|
setExistingImageKeys((prev) => prev.filter((_, i) => i !== index));
|
|
} else {
|
|
// Removing a new upload
|
|
const newFileIndex = index - existingImageKeys.length;
|
|
setImageFiles((prev) => prev.filter((_, i) => i !== newFileIndex));
|
|
}
|
|
setImagePreviews((prev) => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
// Validation - character minimums shown inline, just prevent submission
|
|
if (!formData.title.trim() || formData.title.length < 10) {
|
|
return;
|
|
}
|
|
|
|
if (!formData.content.trim() || formData.content.length < 20) {
|
|
return;
|
|
}
|
|
|
|
if (formData.category === "item_request" && !formData.zipCode.trim()) {
|
|
setError("Zip code is required for item requests");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsSubmitting(true);
|
|
|
|
// Upload images to S3 first (if any)
|
|
let imageFilenames: string[] = [];
|
|
if (imageFiles.length > 0) {
|
|
const uploadResults = await uploadFiles("forum", imageFiles);
|
|
imageFilenames = uploadResults.map((result) => result.key);
|
|
}
|
|
|
|
// Build the post data
|
|
const postData: {
|
|
title: string;
|
|
content: string;
|
|
category: string;
|
|
tags?: string[];
|
|
zipCode?: string;
|
|
latitude?: number;
|
|
longitude?: number;
|
|
imageFilenames?: string[];
|
|
} = {
|
|
title: formData.title,
|
|
content: formData.content,
|
|
category: formData.category,
|
|
};
|
|
|
|
// Add tags if present
|
|
if (formData.tags.length > 0) {
|
|
postData.tags = formData.tags;
|
|
}
|
|
|
|
// Add location data for item requests
|
|
if (formData.category === 'item_request' && formData.zipCode) {
|
|
postData.zipCode = formData.zipCode;
|
|
// If we have coordinates from a saved address, send them to avoid re-geocoding
|
|
if (formData.latitude !== undefined && formData.longitude !== undefined) {
|
|
postData.latitude = formData.latitude;
|
|
postData.longitude = formData.longitude;
|
|
}
|
|
}
|
|
|
|
// Combine existing and new S3 image keys
|
|
const allImageKeys = [...existingImageKeys, ...imageFilenames];
|
|
if (allImageKeys.length > 0) {
|
|
postData.imageFilenames = allImageKeys;
|
|
}
|
|
|
|
if (isEditMode) {
|
|
await forumAPI.updatePost(id!, postData);
|
|
navigate(`/forum/${id}`);
|
|
} else {
|
|
const response = await forumAPI.createPost(postData);
|
|
navigate(`/forum/${response.data.id}`);
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.error || err.message || `Failed to ${isEditMode ? 'update' : 'create'} post`);
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="container mt-4">
|
|
<div className="text-center py-5">
|
|
<div className="spinner-border" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<div className="container mt-4">
|
|
<div className="alert alert-warning" role="alert">
|
|
<i className="bi bi-exclamation-triangle me-2"></i>
|
|
You must be logged in to {isEditMode ? 'edit' : 'create'} a post.
|
|
</div>
|
|
<Link to="/forum" className="btn btn-secondary">
|
|
<i className="bi bi-arrow-left me-2"></i>
|
|
Back to Forum
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && error.includes("authorized")) {
|
|
return (
|
|
<div className="container mt-4">
|
|
<div className="alert alert-danger" role="alert">
|
|
<i className="bi bi-exclamation-triangle me-2"></i>
|
|
{error}
|
|
</div>
|
|
<Link to="/forum" className="btn btn-secondary">
|
|
<i className="bi bi-arrow-left me-2"></i>
|
|
Back to Forum
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="container mt-4">
|
|
<nav aria-label="breadcrumb" className="mb-3">
|
|
<ol className="breadcrumb">
|
|
<li className="breadcrumb-item">
|
|
<Link to="/forum">Forum</Link>
|
|
</li>
|
|
{isEditMode && (
|
|
<li className="breadcrumb-item">
|
|
<Link to={`/forum/${id}`}>Post</Link>
|
|
</li>
|
|
)}
|
|
<li className="breadcrumb-item active" aria-current="page">
|
|
{isEditMode ? 'Edit' : 'Create Post'}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div className="row">
|
|
<div className="col-lg-8 mx-auto">
|
|
{/* Guidelines Card - only show for new posts */}
|
|
{!isEditMode && (
|
|
<div className="card mb-3">
|
|
<div className="card-header">
|
|
<h6 className="mb-0">
|
|
<i className="bi bi-info-circle me-2"></i>
|
|
Community Guidelines
|
|
</h6>
|
|
</div>
|
|
<div className="card-body">
|
|
<ul className="mb-0">
|
|
<li>Be respectful and courteous to others</li>
|
|
<li>Stay on topic and relevant to the category</li>
|
|
<li>No spam, advertising, or self-promotion</li>
|
|
<li>Search before posting to avoid duplicates</li>
|
|
<li>Use clear, descriptive titles</li>
|
|
<li>Provide helpful and constructive feedback</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h3 className="mb-0">{isEditMode ? 'Edit Post' : 'Create New Post'}</h3>
|
|
</div>
|
|
<div className="card-body">
|
|
{error && (
|
|
<div className="alert alert-danger" role="alert">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
{/* Title */}
|
|
<div className="mb-3">
|
|
<label htmlFor="title" className="form-label">
|
|
Title <span className="text-danger">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className={`form-control ${formData.title.length > 0 && formData.title.length < 10 ? 'is-invalid' : ''}`}
|
|
id="title"
|
|
name="title"
|
|
value={formData.title}
|
|
onChange={handleInputChange}
|
|
placeholder="Enter a descriptive title..."
|
|
maxLength={200}
|
|
disabled={isSubmitting}
|
|
required
|
|
/>
|
|
{formData.title.length > 0 && formData.title.length < 10 ? (
|
|
<div className="invalid-feedback d-block">
|
|
{10 - formData.title.length} more characters needed (minimum 10)
|
|
</div>
|
|
) : (
|
|
<div className="form-text">
|
|
{formData.title.length}/200 characters (minimum 10)
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Category */}
|
|
<div className="mb-3">
|
|
<label htmlFor="category" className="form-label">
|
|
Category <span className="text-danger">*</span>
|
|
</label>
|
|
<select
|
|
className="form-select"
|
|
id="category"
|
|
name="category"
|
|
value={formData.category}
|
|
onChange={handleInputChange}
|
|
disabled={isSubmitting}
|
|
required
|
|
>
|
|
{categories.map((cat) => (
|
|
<option key={cat.value} value={cat.value}>
|
|
{cat.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="form-text">
|
|
Choose the category that best fits your post
|
|
</div>
|
|
</div>
|
|
|
|
{/* Location fields for item requests */}
|
|
{formData.category === "item_request" && (
|
|
<div className="mb-3">
|
|
<label htmlFor="zipCode" className="form-label">
|
|
Zip Code <span className="text-danger">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="zipCode"
|
|
name="zipCode"
|
|
value={formData.zipCode}
|
|
onChange={handleInputChange}
|
|
placeholder="Enter your zip code..."
|
|
maxLength={10}
|
|
disabled={isSubmitting}
|
|
required
|
|
/>
|
|
<div className="form-text">
|
|
Your zip code helps notify nearby users who might have
|
|
the item you're looking for
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
<div className="mb-3">
|
|
<label htmlFor="content" className="form-label">
|
|
Content <span className="text-danger">*</span>
|
|
</label>
|
|
<textarea
|
|
className={`form-control ${formData.content.length > 0 && formData.content.length < 20 ? 'is-invalid' : ''}`}
|
|
id="content"
|
|
name="content"
|
|
rows={10}
|
|
value={formData.content}
|
|
onChange={handleInputChange}
|
|
placeholder="Write your post content here..."
|
|
disabled={isSubmitting}
|
|
required
|
|
/>
|
|
{formData.content.length > 0 && formData.content.length < 20 ? (
|
|
<div className="invalid-feedback d-block">
|
|
{20 - formData.content.length} more characters needed (minimum 20)
|
|
</div>
|
|
) : (
|
|
<div className="form-text">
|
|
{formData.content.length} characters (minimum 20)
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
<div className="mb-3">
|
|
<label className="form-label">
|
|
Tags <span className="text-muted">(optional)</span>
|
|
</label>
|
|
<TagInput
|
|
selectedTags={formData.tags}
|
|
onChange={handleTagsChange}
|
|
placeholder="Add tags to help others find your post..."
|
|
/>
|
|
<div className="form-text">
|
|
Add up to 5 relevant tags. Press Enter after each tag.
|
|
</div>
|
|
</div>
|
|
|
|
{/* Images */}
|
|
<div className="mb-4">
|
|
<ForumImageUpload
|
|
imageFiles={imageFiles}
|
|
imagePreviews={imagePreviews}
|
|
onImageChange={handleImageChange}
|
|
onRemoveImage={handleRemoveImage}
|
|
/>
|
|
</div>
|
|
|
|
{/* Category-specific guidelines */}
|
|
{formData.category === "item_request" && (
|
|
<div className="alert alert-info mb-3">
|
|
<strong>Item Request Tips:</strong>
|
|
<ul className="mb-0 mt-2">
|
|
<li>Be specific about what you're looking for</li>
|
|
<li>Include your general location</li>
|
|
<li>Specify when you need the item</li>
|
|
<li>Mention your budget range if applicable</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{formData.category === "technical_support" && (
|
|
<div className="alert alert-info mb-3">
|
|
<strong>Technical Support Tips:</strong>
|
|
<ul className="mb-0 mt-2">
|
|
<li>Describe the issue you're experiencing</li>
|
|
<li>Include steps to reproduce the problem</li>
|
|
<li>Mention your device/browser if relevant</li>
|
|
<li>Include any error messages you see</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{/* Submit buttons */}
|
|
<div className="d-flex gap-2">
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary"
|
|
disabled={
|
|
isSubmitting ||
|
|
!formData.title.trim() ||
|
|
!formData.content.trim()
|
|
}
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<span
|
|
className="spinner-border spinner-border-sm me-2"
|
|
role="status"
|
|
aria-hidden="true"
|
|
></span>
|
|
{isEditMode ? 'Saving...' : 'Creating...'}
|
|
</>
|
|
) : (
|
|
<>
|
|
<i className={`bi ${isEditMode ? 'bi-check-lg' : 'bi-send'} me-2`}></i>
|
|
{isEditMode ? 'Save Changes' : 'Create Post'}
|
|
</>
|
|
)}
|
|
</button>
|
|
<Link
|
|
to={isEditMode ? `/forum/${id}` : '/forum'}
|
|
className={`btn btn-secondary ${
|
|
isSubmitting ? "disabled" : ""
|
|
}`}
|
|
>
|
|
Cancel
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreateForumPost;
|