Spaces:
Sleeping
Sleeping
File size: 3,562 Bytes
ea9ca44 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | import React, { useState } from 'react';
import { supabase } from '../supabaseClient'; // Make sure this path is correct
const CompanyProfileForm = () => {
// State to hold the form data
const [contactName, setContactName] = useState('');
const [companyName, setCompanyName] = useState('');
const [companyDomain, setCompanyDomain] = useState('');
const [logoFile, setLogoFile] = useState(null);
const [loading, setLoading] = useState(false);
// 👇 PASTE YOUR FUNCTION HERE 👇
async function handleProfileSubmit(event) {
event.preventDefault();
setLoading(true);
try {
// 1. Get the current user
const { data: { user }, error: userError } = await supabase.auth.getUser();
if (userError) throw userError;
if (!user) throw new Error("User not found.");
// 2. Upload the company logo
let publicLogoUrl = null;
if (logoFile) {
const filePath = `public/${user.id}-${Date.now()}`;
const { error: uploadError } = await supabase.storage
.from('company_logos')
.upload(filePath, logoFile);
if (uploadError) throw uploadError;
const { data } = supabase.storage
.from('company_logos')
.getPublicUrl(filePath);
publicLogoUrl = data.publicUrl;
}
// 3. Insert into your 'companies' table
const { data: companyData, error: companyInsertError } = await supabase
.from('companies')
.insert({
name: companyName,
logo_url: publicLogoUrl,
domain: companyDomain,
})
.select('id')
.single();
if (companyInsertError) throw companyInsertError;
// 4. Update the user's profile
const { error: profileUpdateError } = await supabase
.from('profiles')
.update({
full_name: contactName,
company_id: companyData.id,
})
.eq('id', user.id);
if (profileUpdateError) throw profileUpdateError;
alert('Company profile created successfully!');
} catch (error) {
console.error('Error creating company profile:', error.message);
alert('Error: ' + error.message);
} finally {
setLoading(false);
}
}
// This is the JSX for your form
return (
<form onSubmit={handleProfileSubmit}>
<h2>Create Company Profile</h2>
<div>
<label htmlFor="contactName">Contact Name</label>
<input
id="contactName"
type="text"
value={contactName}
onChange={(e) => setContactName(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="companyName">Company Name</label>
<input
id="companyName"
type="text"
value={companyName}
onChange={(e) => setCompanyName(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="companyDomain">Company Domain</label>
<input
id="companyDomain"
type="text"
value={companyDomain}
onChange={(e) => setCompanyDomain(e.target.value)}
/>
</div>
<div>
<label htmlFor="logo">Company Logo</label>
<input
id="logo"
type="file"
accept="image/*"
onChange={(e) => setLogoFile(e.target.files[0])}
/>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Saving...' : 'Save Profile'}
</button>
</form>
);
};
export default CompanyProfileForm; |