`06ebec9`

submission feature stable

Authored by

espadonne 9 months ago

SHA: 06ebec98a254b25478fe0c7122cd527ca52db1e7
Parents: 21f6f88
Tree: 7101f16

4 changed files

Status	File	+	-
M	`app/memorial/person/[id]/page.tsx`	34	7
A	`components/ContributionDisplay.tsx`	97	0
A	`components/ContributionForm.tsx`	297	0
M	`lib/api.ts`	125	5

app/memorial/person/[id]/page.tsxmodified

  import { useState, useEffect } from 'react';
  import Link from 'next/link';
  import { useParams } from 'next/navigation';
 -import { getPersonDetail, PersonDetail } from '@/lib/api';
 +import { getPersonDetail, PersonDetailWithContributions } from '@/lib/api';
  import Header from '@/components/Header';
 +import ContributionForm from '@/components/ContributionForm';
 +import ContributionDisplay from '@/components/ContributionDisplay';
  export default function PersonPage() {
    const params = useParams();
    const personId = parseInt(params.id as string);
 -  const [person, setPerson] = useState<PersonDetail | null>(null);
 +  const [person, setPerson] = useState<PersonDetailWithContributions | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [pdfError, setPdfError] = useState(false);
          setLoadingPdf(true);
          try {
            const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
 -          // FIXED: Just set the URL directly - don't try to fetch and parse as JSON
            setPdfUrl(`${apiUrl}/memorial/persons/${person.id}/pdf/`);
          } catch (err) {
            console.error('Failed to set PDF URL:', err);
      fetchPdfUrl();
    }, [person, pdfUrl]);
 +  const handleContributionSuccess = async () => {
 +    // Reload person data to get updated contributions
 +    try {
 +      const personData = await getPersonDetail(personId);
 +      setPerson(personData);
 +    } catch (err) {
 +      console.error('Failed to reload person data:', err);
 +    }
 +  };
++
    if (loading) {
      return (
        <div className="min-h-screen bg-vmi-cream flex items-center justify-center">
      );
+   }
 +  const displayName = person.full_display_name ?
 +    person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')
 +    : person.display_name;
++
    return (
      <div className="min-h-screen bg-vmi-cream">
        <Header
          {/* Person Header */}
          <div className="bg-vmi-light-gold border-2 border-vmi-gold rounded-lg p-8 mb-12 shadow-xl">
            <h1 className="text-4xl font-black text-vmi-red mb-2">
 -            {person.full_display_name ?
 -              person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')
 -              : person.display_name}
 +            {displayName}
            </h1>
            {/* Rank and Unit subtitle */}
          )}
          {/* PDF Viewer */}
 -        <div className="bg-white border-2 border-gray-300 rounded-lg p-8 shadow-xl">
 +        <div className="bg-white border-2 border-gray-300 rounded-lg p-8 shadow-xl mb-12">
            <h2 className="text-3xl font-bold mb-6 text-center text-vmi-red">
              Memorial Document
            </h2>
              </div>
            )}
          </div>
++
 +        {/* Community Contributions Section */}
 +        <ContributionForm
 +          personId={person.id}
 +          personName={displayName}
 +          onSuccess={handleContributionSuccess}
 +        />
++
 +        {/* Display Approved Contributions */}
 +        {person.contributions && person.contributions.length > 0 && (
 +          <div className="bg-white border-2 border-gray-300 rounded-lg p-8 shadow-xl mt-8">
 +            <ContributionDisplay contributions={person.contributions} />
 +          </div>
 +        )}
        </main>
      </div>
    );

components/ContributionDisplay.tsxadded

 +// components/ContributionDisplay.tsx
++
 +// alias Image to shut the linter up
 +import NextImage from 'next/image';
 +import { Contribution } from '@/lib/api';
++
++
 +interface ContributionDisplayProps {
 +  contributions: Contribution[];
 +}
++
 +export default function ContributionDisplay({ contributions }: ContributionDisplayProps) {
 +  if (contributions.length === 0) {
 +    return null;
 +  }
++
 +  const formatDate = (dateString: string) => {
 +    const date = new Date(dateString);
 +    return date.toLocaleDateString('en-US', {
 +      year: 'numeric',
 +      month: 'long',
 +      day: 'numeric'
 +    });
 +  };
++
 +  return (
 +    <div className="space-y-6">
 +      <h3 className="text-xl font-bold text-vmi-red mb-4">
 +        Community Contributions ({contributions.length})
 +      </h3>
++
 +      <div className="space-y-4">
 +        {contributions.map((contribution) => (
 +          <div
 +            key={contribution.id}
 +            className="bg-gray-50 border border-gray-200 rounded-lg p-6"
 +          >
 +            {/* Header */}
 +            <div className="flex justify-between items-start mb-4">
 +              <div>
 +                <p className="text-sm text-gray-600">
 +                  Contributed by <span className="font-semibold">{contribution.contributor_display}</span>
 +                </p>
 +                <p className="text-xs text-gray-500">
 +                  {formatDate(contribution.submitted_at)}
 +                </p>
 +              </div>
 +              <span className={`
 +                px-3 py-1 rounded-full text-xs font-semibold
 +                ${contribution.content_type === 'text' ? 'bg-blue-100 text-blue-700' : ''}
 +                ${contribution.content_type === 'image' ? 'bg-green-100 text-green-700' : ''}
 +                ${contribution.content_type === 'both' ? 'bg-purple-100 text-purple-700' : ''}
 +              `}>
 +                {contribution.content_type === 'text' && 'Text'}
 +                {contribution.content_type === 'image' && 'Image'}
 +                {contribution.content_type === 'both' && 'Text & Image'}
 +              </span>
 +            </div>
++
 +            {/* Content */}
 +            <div className="space-y-4">
 +              {/* Text Content */}
 +              {contribution.content_text && (
 +                <div className="prose prose-gray max-w-none">
 +                  <p className="text-gray-800 whitespace-pre-wrap">
 +                    {contribution.content_text}
 +                  </p>
 +                </div>
 +              )}
 +              {/* Image Content */}
 +              {contribution.content_image && (
 +                <div className="mt-4">
 +                  <div
 +                    className="cursor-pointer hover:opacity-95 transition-opacity"
 +                    onClick={() => window.open(contribution.content_image, '_blank')}
 +                  >
 +                    <NextImage
 +                      src={contribution.content_image}
 +                      alt="Community contribution"
 +                      width={800}
 +                      height={600}
 +                      className="max-w-full h-auto rounded-lg border-2 border-gray-300"
 +                      style={{ objectFit: 'contain' }}
 +                    />
 +                  </div>
 +                  <p className="text-xs text-gray-500 mt-2">
 +                    Click image to view full size
 +                  </p>
 +                </div>
 +              )}
 +            </div>
 +          </div>
 +        ))}
 +      </div>
 +    </div>
 +  );
 +}

components/ContributionForm.tsxadded

 +// components/ContributionForm.tsx
 +import { useState } from 'react';
 +// alias Image to shut up the linter
 +import NextImage from 'next/image';
 +import { submitContribution, ContributionSubmit } from '@/lib/api';
++
 +interface ContributionFormProps {
 +  personId: number;
 +  personName: string;
 +  onSuccess?: () => void;
 +}
++
 +export default function ContributionForm({ personId, personName, onSuccess }: ContributionFormProps) {
 +  const [isOpen, setIsOpen] = useState(false);
 +  const [formData, setFormData] = useState<ContributionSubmit>({
 +    contributor_email: '',
 +    content_type: 'text',
 +    content_text: '',
 +  });
 +  const [imageFile, setImageFile] = useState<File | null>(null);
 +  const [imagePreview, setImagePreview] = useState<string | null>(null);
 +  const [submitting, setSubmitting] = useState(false);
 +  const [error, setError] = useState<string | null>(null);
 +  const [success, setSuccess] = useState(false);
++
 +  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 +    const file = e.target.files?.[0];
 +    if (file) {
 +      // Validate file type
 +      const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
 +      if (!validTypes.includes(file.type)) {
 +        setError('Please select a valid image file (JPEG, PNG, GIF, or WebP)');
 +        return;
 +      }
++
 +      // Validate file size (10MB max)
 +      if (file.size > 10 * 1024 * 1024) {
 +        setError('Image size must be less than 10MB');
 +        return;
 +      }
++
 +      setImageFile(file);
 +      setError(null);
++
 +      // Create preview
 +      const reader = new FileReader();
 +      reader.onloadend = () => {
 +        setImagePreview(reader.result as string);
 +      };
 +      reader.readAsDataURL(file);
 +    }
 +  };
++
 +  const handleSubmit = async (e: React.FormEvent) => {
 +    e.preventDefault();
 +    setError(null);
++
 +    // Validate required fields
 +    if (!formData.contributor_email) {
 +      setError('Please provide your email address');
 +      return;
 +    }
++
 +    if (formData.content_type === 'text' && !formData.content_text) {
 +      setError('Please provide text content');
 +      return;
 +    }
++
 +    if (formData.content_type === 'image' && !imageFile) {
 +      setError('Please select an image');
 +      return;
 +    }
++
 +    if (formData.content_type === 'both' && (!formData.content_text || !imageFile)) {
 +      setError('Please provide both text and image');
 +      return;
 +    }
++
 +    setSubmitting(true);
++
 +    try {
 +      const submitData: ContributionSubmit = {
 +        ...formData,
 +        content_image: imageFile || undefined,
 +      };
++
 +      await submitContribution(personId, submitData);
++
 +      // Success!
 +      setSuccess(true);
 +      setFormData({
 +        contributor_email: '',
 +        content_type: 'text',
 +        content_text: '',
 +      });
 +      setImageFile(null);
 +      setImagePreview(null);
++
 +      // Call parent callback if provided
 +      if (onSuccess) {
 +        onSuccess();
 +      }
++
 +      // Hide success message after 5 seconds
 +      setTimeout(() => {
 +        setSuccess(false);
 +        setIsOpen(false);
 +      }, 5000);
++
 +    } catch (err) {
 +      setError(err instanceof Error ? err.message : 'Failed to submit contribution');
 +    } finally {
 +      setSubmitting(false);
 +    }
 +  };
++
 +  return (
 +    <div className="bg-white border-2 border-gray-300 rounded-lg p-8 shadow-xl">
 +      <h2 className="text-2xl font-bold mb-4 text-vmi-red">Community Contributions</h2>
++
 +      {/* Toggle Button */}
 +      {!isOpen && (
 +        <>
 +          <p className="text-gray-600 mb-4 italic">
 +            No community contributions for {personName} yet.
 +          </p>
 +          <button
 +            onClick={() => setIsOpen(true)}
 +            className="bg-vmi-red text-white px-6 py-2 rounded hover:bg-vmi-dark-red transition-colors font-semibold"
 +          >
 +            Add Information or Image
 +          </button>
 +        </>
 +      )}
++
 +      {/* Contribution Form */}
 +      {isOpen && (
 +        <form onSubmit={handleSubmit} className="space-y-6 mt-6">
 +          {/* Success Message */}
 +          {success && (
 +            <div className="bg-green-100 border-2 border-green-500 text-green-700 px-4 py-3 rounded">
 +              <p className="font-semibold">Thank you for your contribution!</p>
 +              <p className="text-sm">Your submission will be reviewed before being published.</p>
 +            </div>
 +          )}
++
 +          {/* Error Message */}
 +          {error && (
 +            <div className="bg-red-100 border-2 border-red-500 text-red-700 px-4 py-3 rounded">
 +              <p>{error}</p>
 +            </div>
 +          )}
++
 +          {/* Email Field */}
 +          <div>
 +            <label htmlFor="email" className="block text-sm font-bold text-gray-700 mb-2">
 +              Your Email Address *
 +            </label>
 +            <input
 +              type="email"
 +              id="email"
 +              value={formData.contributor_email}
 +              onChange={(e) => setFormData({ ...formData, contributor_email: e.target.value })}
 +              className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-vmi-gold"
 +              placeholder="your.email@example.com"
 +              required
 +            />
 +            <p className="text-xs text-gray-500 mt-1">
 +              Your email will be partially hidden when displayed publicly
 +            </p>
 +          </div>
++
 +          {/* Content Type Selection */}
 +          <div>
 +            <label className="block text-sm font-bold text-gray-700 mb-2">
 +              Contribution Type *
 +            </label>
 +            <div className="space-y-2">
 +              <label className="flex items-center cursor-pointer">
 +                <input
 +                  type="radio"
 +                  value="text"
 +                  checked={formData.content_type === 'text'}
 +                  onChange={(e) => setFormData({ ...formData, content_type: e.target.value as 'text' | 'image' | 'both' })}
 +                  className="mr-2 text-vmi-red focus:ring-vmi-gold"
 +                />
 +                <span>Text Information</span>
 +              </label>
 +              <label className="flex items-center cursor-pointer">
 +                <input
 +                  type="radio"
 +                  value="image"
 +                  checked={formData.content_type === 'image'}
 +                  onChange={(e) => setFormData({ ...formData, content_type: e.target.value as 'text' | 'image' | 'both' })}
 +                  className="mr-2 text-vmi-red focus:ring-vmi-gold"
 +                />
 +                <span>Image/Photo</span>
 +              </label>
 +              <label className="flex items-center cursor-pointer">
 +                <input
 +                  type="radio"
 +                  value="both"
 +                  checked={formData.content_type === 'both'}
 +                  onChange={(e) => setFormData({ ...formData, content_type: e.target.value as 'text' | 'image' | 'both' })}
 +                  className="mr-2 text-vmi-red focus:ring-vmi-gold"
 +                />
 +                <span>Both Text and Image</span>
 +              </label>
 +            </div>
 +          </div>
++
 +          {/* Text Content */}
 +          {(formData.content_type === 'text' || formData.content_type === 'both') && (
 +            <div>
 +              <label htmlFor="text" className="block text-sm font-bold text-gray-700 mb-2">
 +                Additional Information *
 +              </label>
 +              <textarea
 +                id="text"
 +                value={formData.content_text}
 +                onChange={(e) => setFormData({ ...formData, content_text: e.target.value })}
 +                rows={6}
 +                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-vmi-gold"
 +                placeholder="Share any additional information about this person's service, life, or sacrifice..."
 +                required={formData.content_type !== 'image'}
 +              />
 +              <p className="text-xs text-gray-500 mt-1">
 +                Please be respectful and accurate. All submissions are reviewed before publication.
 +              </p>
 +            </div>
 +          )}
++
 +          {/* Image Upload */}
 +          {(formData.content_type === 'image' || formData.content_type === 'both') && (
 +            <div>
 +              <label htmlFor="image" className="block text-sm font-bold text-gray-700 mb-2">
 +                Upload Image *
 +              </label>
 +              <input
 +                type="file"
 +                id="image"
 +                accept="image/jpeg,image/png,image/gif,image/webp"
 +                onChange={handleImageChange}
 +                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-vmi-gold"
 +                required={formData.content_type !== 'text'}
 +              />
 +              <p className="text-xs text-gray-500 mt-1">
 +                Max 10MB. Accepted formats: JPEG, PNG, GIF, WebP
 +              </p>
++
 +              {/* Image Preview */}
 +              {imagePreview && (
 +                <div className="mt-4">
 +                  <p className="text-sm font-bold text-gray-700 mb-2">Preview:</p>
 +                  <NextImage
 +                    src={imagePreview}
 +                    alt="Preview"
 +                    width={400}
 +                    height={300}
 +                    className="max-w-full h-auto max-h-64 border-2 border-gray-300 rounded"
 +                    style={{ objectFit: 'contain' }}
 +                  />
 +                </div>
 +              )}
 +            </div>
 +          )}
++
 +          {/* Form Actions */}
 +          <div className="flex gap-4">
 +            <button
 +              type="submit"
 +              disabled={submitting}
 +              className={`px-6 py-2 rounded font-semibold transition-colors ${
 +                submitting
 +                  ? 'bg-gray-400 text-gray-200 cursor-not-allowed'
 +                  : 'bg-vmi-red text-white hover:bg-vmi-dark-red'
 +              }`}
 +            >
 +              {submitting ? 'Submitting...' : 'Submit Contribution'}
 +            </button>
 +            <button
 +              type="button"
 +              onClick={() => {
 +                setIsOpen(false);
 +                setError(null);
 +                setSuccess(false);
 +              }}
 +              className="px-6 py-2 bg-gray-300 text-gray-700 rounded font-semibold hover:bg-gray-400 transition-colors"
 +            >
 +              Cancel
 +            </button>
 +          </div>
 +        </form>
 +      )}
 +    </div>
 +  );
 +}

lib/api.tsmodified

  // API configuration for the VMI Memorial frontend
  const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
 -// const API_BASE_URL = 'https://web-production-6002.up.railway.app/api';
 +// CSRF token management
 +let csrfToken: string | null = null;
++
 +// Helper function to get CSRF token from cookies
 +function getCookie(name: string): string | null {
 +  if (typeof document === 'undefined') return null;
++
 +  const value = `; ${document.cookie}`;
 +  const parts = value.split(`; ${name}=`);
 +  if (parts.length === 2) {
 +    return parts.pop()?.split(';').shift() || null;
 +  }
 +  return null;
 +}
++
 +// Get CSRF token from API or cookie
 +async function getCSRFToken(): Promise<string | null> {
 +  if (csrfToken) return csrfToken;
++
 +  // First try to get from cookie
 +  const cookieToken = getCookie('csrftoken');
 +  if (cookieToken) {
 +    csrfToken = cookieToken;
 +    return csrfToken;
 +  }
++
 +  // If no cookie, get from API
 +  try {
 +    const response = await fetch(`${API_BASE_URL}/csrf/`, {
 +      credentials: 'include',
 +    });
 +    if (response.ok) {
 +      const data = await response.json();
 +      csrfToken = data.csrfToken;
 +      return csrfToken;
 +    }
 +  } catch (error) {
 +    console.error('Failed to get CSRF token:', error);
 +  }
++
 +  return null;
 +}
++
 +export interface Contribution {
 +  id: number;
 +  content_type: 'text' | 'image' | 'both';
 +  content_text?: string;
 +  content_image?: string;
 +  submitted_at: string;
 +  contributor_display: string;
 +}
++
 +export interface ContributionSubmit {
 +  contributor_email: string;
 +  content_type: 'text' | 'image' | 'both';
 +  content_text?: string;
 +  content_image?: File;
 +}
  export interface Conflict {
    id: number;
    death_description?: string;
+ }
 -// CHANGED: Added death_date_display?: string
  export interface PersonDetail extends Person {
    first_name: string;
    middle_name: string;
    last_name: string;
    suffix: string;
    date_of_death: string | null;
 -  death_date_display?: string;  // <-- ADDED THIS LINE
 +  death_date_display?: string;
    death_description: string;
    conflict: number;
    conflict_name: string;
    pdf_url: string | null;
+ }
 -// CHANGED: Added death_date_display?: string
 +export interface PersonDetailWithContributions extends PersonDetail {
 +  contributions?: Contribution[];
 +}
++
  export interface PersonSearchResult {
    id: number;
    display_name: string;
    rank: string;
    unit: string;
    date_of_death: string | null;
 -  death_date_display?: string;  // <-- ADDED THIS LINE
 +  death_date_display?: string;
    conflict_name: string;
    conflict_id: number;
+ }
      throw new Error('Failed to fetch search filters');
+   }
    return response.json();
 +}
++
 +// Submit contribution with CSRF protection
 +export async function submitContribution(
 +  personId: number,
 +  data: ContributionSubmit
 +): Promise<Contribution> {
 +  const formData = new FormData();
 +  formData.append('contributor_email', data.contributor_email);
 +  formData.append('content_type', data.content_type);
++
 +  if (data.content_text) {
 +    formData.append('content_text', data.content_text);
 +  }
++
 +  if (data.content_image) {
 +    formData.append('content_image', data.content_image);
 +  }
++
 +  // Get CSRF token
 +  const token = await getCSRFToken();
++
 +  const headers: HeadersInit = {};
 +  if (token) {
 +    headers['X-CSRFToken'] = token;
 +  }
++
 +  const response = await fetch(
 +    `${API_BASE_URL}/memorial/persons/${personId}/contributions/`,
 +    {
 +      method: 'POST',
 +      body: formData,
 +      headers,
 +      credentials: 'include', // Important for CSRF cookies
 +    }
 +  );
++
 +  if (!response.ok) {
 +    try {
 +      const error = await response.json();
 +      throw new Error(error.error || error.detail || 'Failed to submit contribution');
 +    } catch {
 +      throw new Error(`Failed to submit contribution: ${response.statusText}`);
 +    }
 +  }
++
 +  return response.json();
 +}
++
 +// Get approved contributions for a person
 +export async function getPersonContributions(personId: number): Promise<Contribution[]> {
 +  const response = await fetch(
 +    `${API_BASE_URL}/memorial/persons/${personId}/contributions/`
 +  );
++
 +  if (!response.ok) {
 +    throw new Error('Failed to fetch contributions');
 +  }
++
 +  const data = await response.json();
 +  return data.results || [];
+ }