80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
type status = 'pending' | 'accepted' | 'rejected';
|
|
|
|
export default function UpdateStatusPage() {
|
|
const [relationshipId, setRelationshipId] = useState("");
|
|
const [status, setStatus] = useState("");
|
|
const [result, setResult] = useState<string | null>(null);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setResult(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/relationships/updateStatus', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'x-api-key': process.env.NEXT_PUBLIC_API_KEY ?? '',
|
|
},
|
|
body: JSON.stringify({
|
|
relationshipId,
|
|
status
|
|
})
|
|
});
|
|
const data = await response.json() as {message: string}
|
|
setResult(JSON.stringify(data, null, 2));
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
setResult('An error occurred');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="flex min-h-screen flex-col items-center justify-center
|
|
bg-gradient-to-b from-pink-500 to-orange-400 text-white cursor-pointer">
|
|
<div className="p-4">
|
|
<h1 className="text-2xl mb-4">Update Relationship Status</h1>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="relationshipId" className="block">Relationship ID:</label>
|
|
<input
|
|
type="text"
|
|
id="relationshipId"
|
|
value={relationshipId}
|
|
onChange={(e) => setRelationshipId(e.target.value)}
|
|
className="border p-2 w-full bg-black"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="status" className="block">Status:</label>
|
|
<select
|
|
id="status"
|
|
value={status}
|
|
onChange={(e) => setStatus(e.target.value as status)}
|
|
className="border p-2 w-full bg-black"
|
|
required
|
|
>
|
|
<option value="pending">Pending</option>
|
|
<option value="accepted">Accepted</option>
|
|
<option value="rejected">Rejected</option>
|
|
</select>
|
|
</div>
|
|
<button type='submit' className='bg-blue-500 p-2 rounded'>
|
|
Update Request
|
|
</button>
|
|
</form>
|
|
{result && (
|
|
<div className='mt-4 p-2 rounded bg-black'>
|
|
<pre>{result}</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|