`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 ?
++            {displayName}
--              person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')
--              : person.display_name}
            </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 || [];
+ }