essential forum code
This commit is contained in:
jackiettran
310
frontend/src/pages/CreateForumPost.tsx
Normal file
310
frontend/src/pages/CreateForumPost.tsx
Normal file
@@ -0,0 +1,310 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
import { forumAPI } from "../services/api";
|
||||
import TagInput from "../components/TagInput";
|
||||
|
||||
const CreateForumPost: React.FC = () => {
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
title: "",
|
||||
content: "",
|
||||
category: "general_discussion" as
|
||||
| "item_request"
|
||||
| "technical_support"
|
||||
| "community_resources"
|
||||
| "general_discussion",
|
||||
tags: [] as string[],
|
||||
});
|
||||
|
||||
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;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleTagsChange = (tags: string[]) => {
|
||||
setFormData((prev) => ({ ...prev, tags }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
// Validation
|
||||
if (!formData.title.trim()) {
|
||||
setError("Title is required");
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.title.length < 10) {
|
||||
setError("Title must be at least 10 characters long");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.content.trim()) {
|
||||
setError("Content is required");
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.content.length < 20) {
|
||||
setError("Content must be at least 20 characters long");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
const response = await forumAPI.createPost(formData);
|
||||
navigate(`/forum/${response.data.id}`);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.error || "Failed to create post");
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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 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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
<li className="breadcrumb-item active" aria-current="page">
|
||||
Create Post
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-8 mx-auto">
|
||||
{/* Guidelines Card */}
|
||||
<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">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"
|
||||
id="title"
|
||||
name="title"
|
||||
value={formData.title}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter a descriptive title..."
|
||||
maxLength={200}
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
/>
|
||||
<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>
|
||||
|
||||
{/* Content */}
|
||||
<div className="mb-3">
|
||||
<label htmlFor="content" className="form-label">
|
||||
Content <span className="text-danger">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="content"
|
||||
name="content"
|
||||
rows={10}
|
||||
value={formData.content}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Write your post content here..."
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
/>
|
||||
<div className="form-text">
|
||||
{formData.content.length} characters (minimum 20)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="mb-4">
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="bi bi-send me-2"></i>
|
||||
Create Post
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<Link
|
||||
to="/forum"
|
||||
className={`btn btn-secondary ${
|
||||
isSubmitting ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForumPost;
|
||||
Reference in New Issue
Block a user