293 lines
13 KiB
TypeScript
293 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { ArrowLeft, FileText, HelpCircle, AlertTriangle, CheckCircle, Loader2 } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
|
import { useWalletStore } from "@/lib/wallet-store"
|
|
import { useToast } from "@/components/ui/use-toast"
|
|
|
|
// Categories for selection
|
|
const categories = [
|
|
"Environmental Policy",
|
|
"Education",
|
|
"Healthcare",
|
|
"Infrastructure",
|
|
"Technology",
|
|
"Economy",
|
|
"Social Services",
|
|
"Other"
|
|
]
|
|
|
|
export default function ProposeIssuePage() {
|
|
const { walletConnected } = useWalletStore()
|
|
const { toast } = useToast()
|
|
|
|
const [formData, setFormData] = useState({
|
|
title: "",
|
|
description: "",
|
|
category: "",
|
|
details: "",
|
|
keywords: "",
|
|
publicProposal: true
|
|
})
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [isSubmitted, setIsSubmitted] = useState(false)
|
|
const [proposalId, setProposalId] = useState("")
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target
|
|
setFormData(prev => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
const handleSelectChange = (name: string) => (value: string) => {
|
|
setFormData(prev => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
const handleSwitchChange = (checked: boolean) => {
|
|
setFormData(prev => ({ ...prev, publicProposal: checked }))
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!walletConnected) {
|
|
toast({
|
|
title: "Wallet not connected",
|
|
description: "Please connect your wallet to propose a new issue.",
|
|
variant: "destructive"
|
|
})
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
|
|
try {
|
|
// This would submit to the blockchain in production
|
|
await new Promise(resolve => setTimeout(resolve, 2000)) // Simulate network delay
|
|
|
|
// Generate a random ID for the demo
|
|
const id = Math.random().toString(36).substring(2, 10)
|
|
setProposalId(id)
|
|
setIsSubmitted(true)
|
|
} catch (error) {
|
|
console.error("Error submitting proposal:", error)
|
|
toast({
|
|
title: "Submission failed",
|
|
description: "There was an error submitting your proposal. Please try again.",
|
|
variant: "destructive"
|
|
})
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
if (isSubmitted) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mx-auto max-w-3xl">
|
|
<div className="mb-8 flex flex-col items-center text-center">
|
|
<CheckCircle className="h-16 w-16 text-green-500 mb-4" />
|
|
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Issue Proposed Successfully!</h1>
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
|
Your issue proposal has been submitted and is now pending review.
|
|
</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Proposal ID: {proposalId}
|
|
</p>
|
|
|
|
<div className="mt-8 flex flex-col sm:flex-row gap-4">
|
|
<Button asChild variant="outline">
|
|
<Link href="/issues">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to Issues
|
|
</Link>
|
|
</Button>
|
|
<Button onClick={() => {
|
|
setIsSubmitted(false)
|
|
setFormData({
|
|
title: "",
|
|
description: "",
|
|
category: "",
|
|
details: "",
|
|
keywords: "",
|
|
publicProposal: true
|
|
})
|
|
}}>
|
|
Propose Another Issue
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mx-auto max-w-3xl">
|
|
<Button variant="ghost" size="sm" asChild className="mb-4">
|
|
<Link href="/issues">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to Issues
|
|
</Link>
|
|
</Button>
|
|
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Propose a New Issue</h1>
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
|
Suggest a topic for community discussion and potential policy recommendation.
|
|
</p>
|
|
</div>
|
|
|
|
{!walletConnected && (
|
|
<Alert variant="destructive" className="mb-6">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<AlertTitle>Wallet not connected</AlertTitle>
|
|
<AlertDescription>
|
|
You need to connect your wallet before proposing an issue.
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Issue Information</CardTitle>
|
|
<CardDescription>
|
|
Provide details about the issue you want to propose for discussion.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title">Issue Title</Label>
|
|
<Input
|
|
id="title"
|
|
name="title"
|
|
placeholder="Enter a clear, descriptive title"
|
|
value={formData.title}
|
|
onChange={handleInputChange}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Brief Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
name="description"
|
|
placeholder="Provide a short summary of the issue (1-2 sentences)"
|
|
value={formData.description}
|
|
onChange={handleInputChange}
|
|
required
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
This will appear in issue listings and search results.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="category">Category</Label>
|
|
<Select
|
|
value={formData.category}
|
|
onValueChange={handleSelectChange("category")}
|
|
required
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a category" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{categories.map((category) => (
|
|
<SelectItem key={category} value={category}>
|
|
{category}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="details">Detailed Description</Label>
|
|
<Textarea
|
|
id="details"
|
|
name="details"
|
|
placeholder="Provide comprehensive details about the issue, including background, significance, and potential impacts"
|
|
className="min-h-[200px]"
|
|
value={formData.details}
|
|
onChange={handleInputChange}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="keywords">Keywords (Optional)</Label>
|
|
<Input
|
|
id="keywords"
|
|
name="keywords"
|
|
placeholder="Enter keywords separated by commas (e.g., climate, renewable, energy)"
|
|
value={formData.keywords}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Switch
|
|
id="public-proposal"
|
|
checked={formData.publicProposal}
|
|
onCheckedChange={handleSwitchChange}
|
|
/>
|
|
<Label htmlFor="public-proposal">Make this proposal public immediately</Label>
|
|
<Button variant="ghost" size="icon" type="button" className="h-8 w-8">
|
|
<HelpCircle className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="border-t pt-6 flex flex-col sm:flex-row sm:justify-between gap-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
All proposals are subject to community moderation
|
|
</p>
|
|
<Button type="submit" disabled={isSubmitting || !walletConnected}>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Submitting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<FileText className="mr-2 h-4 w-4" />
|
|
Submit Proposal
|
|
</>
|
|
)}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</form>
|
|
|
|
<Card className="mt-8">
|
|
<CardHeader>
|
|
<CardTitle>Proposal Guidelines</CardTitle>
|
|
<CardDescription>Tips for submitting an effective issue proposal</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="list-disc space-y-2 pl-4 text-muted-foreground">
|
|
<li>Focus on issues that affect a significant portion of the community</li>
|
|
<li>Be clear and specific about the issue you're addressing</li>
|
|
<li>Provide objective information rather than personal opinions</li>
|
|
<li>Consider including data or research to support your proposal</li>
|
|
<li>Avoid duplicate issues - search first to see if your topic already exists</li>
|
|
<li>Maintain a constructive tone that encourages productive discussion</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|