chore: setup project for production
This commit is contained in:
afnaann
204
app/accounts/profile/addresses/[id]/page.jsx
Normal file
204
app/accounts/profile/addresses/[id]/page.jsx
Normal file
@@ -0,0 +1,204 @@
|
||||
'use client'
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import authAxios from '@/utils/axios';
|
||||
|
||||
const EditAddress = () => {
|
||||
const { id } = useParams();
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [formData, setFormData] = useState({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
company: '',
|
||||
address: '',
|
||||
apartment: '',
|
||||
city: '',
|
||||
country: '',
|
||||
zipcode: '',
|
||||
phone: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAddress = async () => {
|
||||
try {
|
||||
const response = await authAxios.get(`/account/addresses/${id}/`);
|
||||
setFormData(response.data);
|
||||
} catch (err) {
|
||||
setError('Failed to fetch address details');
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
if (id) {
|
||||
fetchAddress();
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await authAxios.put(`/account/addresses/${id}/`, formData);
|
||||
router.push('/accounts/profile/addresses');
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Failed to update address');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6">Edit Address</h2>
|
||||
{error && <div className="mb-4 text-red-500">{error}</div>}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">First name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
value={formData.first_name}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">Last name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
value={formData.last_name}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">Company</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="apartment" className="block text-sm font-medium text-gray-700 mb-1">Apartment, suite, etc.</label>
|
||||
<input
|
||||
type="text"
|
||||
id="apartment"
|
||||
name="apartment"
|
||||
value={formData.apartment}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="city" className="block text-sm font-medium text-gray-700 mb-1">City</label>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
name="city"
|
||||
value={formData.city}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="country" className="block text-sm font-medium text-gray-700 mb-1">Country/Region</label>
|
||||
<select
|
||||
id="country"
|
||||
name="country"
|
||||
value={formData.country}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
>
|
||||
<option value="">Select a country</option>
|
||||
<option value="IN">India</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="zipcode" className="block text-sm font-medium text-gray-700 mb-1">Postal/Zip Code</label>
|
||||
<input
|
||||
type="text"
|
||||
id="zipcode"
|
||||
name="zipcode"
|
||||
value={formData.zipcode}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
|
||||
<div className="flex">
|
||||
<select className="p-2 border border-gray-300 rounded-l" style={{width: '80px'}}>
|
||||
<option value="IN">🇮🇳 +91</option>
|
||||
</select>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="flex-grow p-2 border border-gray-300 rounded-r"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push('/accounts/profile/addresses')}
|
||||
className="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="px-4 py-2 bg-[#96724f] text-white rounded hover:bg-[#AC8C6B] disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Updating...' : 'Update Address'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditAddress;
|
||||
Reference in New Issue
Block a user