diff --git a/src/app/profile-setting/page.js b/src/app/profile-setting/page.js index 8a147d7..f3180ab 100644 --- a/src/app/profile-setting/page.js +++ b/src/app/profile-setting/page.js @@ -6,6 +6,7 @@ import { useAccount } from 'wagmi'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import Link from 'next/link'; +import { v4 as uuidv4 } from 'uuid'; function ProfileSettingsPage() { const { address } = useAccount(); @@ -19,6 +20,9 @@ function ProfileSettingsPage() { const [coverImage, setCoverImage] = useState(''); const [profileImage, setProfileImage] = useState(''); const [email, setEmail] = useState(''); + const [profileid, setId] = useState(''); + const [selectedSocialLink, setSelectedSocialLink] = useState(''); + const [link, setLink] = useState(''); const [isEditing, setIsEditing] = useState(false); const [isCoverHovered, setIsCoverHovered] = useState(false); @@ -33,20 +37,57 @@ function ProfileSettingsPage() { const [currentSection, setCurrentSection] = useState('profile'); const [validationError, setValidationError] = useState(''); + const [addresses, setAddresses] = useState([{ id: '', full_name: '', street_address: '', street_address_2: '', city: '', pincode: '', country: '' }]); + const countries = ['USA', 'Canada', 'UK', 'Australia']; + + const handleAddAddress = () => { + // Use functional update to ensure the latest state is used + setAddresses(prevAddresses => [ + ...prevAddresses, + { id: uuidv4(), full_name: '', street_address: '', street_address_2: '', city: '', pincode: '', country: '' } + ]); + }; + + const handleAddressChange = (index, field, value) => { + // Use functional update to ensure the latest state is used + setAddresses(prevAddresses => { + const newAddresses = [...prevAddresses]; + newAddresses[index][field] = value; + return newAddresses; // Return the updated addresses + }); + }; + const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'; - const deleteAccount = async () => { - // if (!window.confirm('Are you sure you want to delete your account?')) { - // return; - // } + const deleteAddress = async (id) => { + try { + const response = await fetch(`${baseUri}/profiles/addresses/${id}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (response.ok) { + toast.success('Address deleted successfully!'); + window.location.reload(); + } else { + const errorData = await response.json(); + toast.error(`Failed to delete address: ${errorData.error}`); + } + } catch (error) { + console.error('Error:', error); + toast.error('An error occurred while deleting the address.'); + } + }; + const deleteAccount = async () => { try { const response = await fetch(`${baseUri}/profiles/walletandemail/${address}/${email}`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', }, - // body: JSON.stringify({ walletAddress, email }), }); if (response.ok) { @@ -63,7 +104,6 @@ function ProfileSettingsPage() { }; const handleDelete = () => { - setShowForm(true) }; @@ -91,7 +131,9 @@ function ProfileSettingsPage() { x: x, instagram: instagram, cover_image: coverImage, - profile_image: profileImage + profile_image: profileImage, + selected_social_link: selectedSocialLink, + link: link }; try { @@ -103,6 +145,41 @@ function ProfileSettingsPage() { body: JSON.stringify(profileData) }); + await Promise.all(addresses.map(async (addressesall, index) => { + if (addressesall.id && addressesall.id === addressesall.id) { + try { + const addressData = await fetch(`${baseUri}/profiles/addresses/${profileid}`, { + method: "PUT", + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(addresses) + }); + + if (addressData.ok) { + console.log("Address Updated Successfully"); + } + } catch (error) { + console.error('Error fetching address data', error); + } + } else { + try { + const responseAddress = await fetch(`${baseUri}/profiles/addresses/${profileid}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(addresses) + }); + if (responseAddress.ok) { + console.log("Address Added Successfully"); + } + } catch (error) { + console.error('Failed to save profile settings.'); + } + } + })); + if (response.ok) { console.log('Profile settings saved successfully!'); setIsEditing(false); @@ -180,6 +257,7 @@ function ProfileSettingsPage() { if (response.ok) { const data = await response.json(); + setId(data.id); setDisplayName(data.name); setUserName(data.username); setCoverImage(data.cover_image); @@ -188,6 +266,8 @@ function ProfileSettingsPage() { setWebsite(data.website); setx(data.x); setInstagram(data.instagram); + setSelectedSocialLink(data.selected_social_link); + setLink(data.link); setEmail(data.email); } else { console.log('No user found'); @@ -200,6 +280,30 @@ function ProfileSettingsPage() { getUserData(); }, [address]); + useEffect(() => { + if (profileid) { + const getAddressData = async () => { + try { + const addressData = await fetch(`${baseUri}/profiles/addresses/${profileid}`, { + method: "GET", + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (addressData.ok) { + const addressdata = await addressData.json(); + setAddresses(addressdata); + } + } catch (error) { + console.error('Error fetching address data', error); + } + }; + + getAddressData(); + } + }, [profileid]) + return ( <>
@@ -436,6 +540,159 @@ function ProfileSettingsPage() { }} style={{ padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB', width: '50%', marginBottom: '20px' }} /> + + + { + setLink(e.target.value); + setIsEditing(true); + }} + style={{ padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB', width: '50%', marginBottom: '20px' }} + /> + + +

My Delivery Addresses

+ {addresses.length > 0 ? ( + addresses.map((address, index) => ( +
+

Address {index + 1}

+ + { + handleAddressChange(index, 'full_name', e.target.value); + setIsEditing(true); + }} + style={{ display: 'block', marginBottom: '10px', padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB' }} + /> + + { + handleAddressChange(index, 'street_address', e.target.value); + setIsEditing(true); + }} + style={{ display: 'block', marginBottom: '10px', padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB' }} + /> + + { + handleAddressChange(index, 'street_address_2', e.target.value); + setIsEditing(true); + }} + style={{ display: 'block', marginBottom: '10px', padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB' }} + /> + + { + handleAddressChange(index, 'city', e.target.value); + setIsEditing(true); + }} + style={{ display: 'block', marginBottom: '10px', padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB' }} + /> + + { + handleAddressChange(index, 'pincode', e.target.value); + setIsEditing(true); + }} + style={{ display: 'block', marginBottom: '10px', padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB' }} + /> + + + +
+ )) + ) : ( +

No addresses available. Please add a delivery address.

+ )} + {addresses.length > 0 ? ( + + ) : ( + + )} +
{ diff --git a/src/components/profileNftCard.js b/src/components/profileNftCard.js index d8066ab..7ec001d 100644 --- a/src/components/profileNftCard.js +++ b/src/components/profileNftCard.js @@ -132,7 +132,7 @@ const ProfileNftCard = ({ nft }) => { return (
{/* Main Link for NFT */} - +