Scribd
Upload
6 views4 pages

Message 8

The document is a React component for a modal that allows users to create a new tenant by filling out a form with their name, email, and description. It handles form submission, error management, and displays a loading state while submitting. Upon successful creation, it triggers a callback to notify the parent component and closes the modal.

Uploaded by

Mariana Andrade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views4 pages

Message 8

The document is a React component for a modal that allows users to create a new tenant by filling out a form with their name, email, and description. It handles form submission, error management, and displays a loading state while submitting. Upon successful creation, it triggers a callback to notify the parent component and closes the modal.

Uploaded by

Mariana Andrade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

"use client"

import { useState } from "react";

export default function CreateTenantModal({ onClose, onTenantCreated }) {


const [formData, setFormData] = useState({
name: "",
email: "",
description: ""
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState(null);

const handleChange = (e) => {


const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};

const handleSubmit = async (e) => {


e.preventDefault();
setIsSubmitting(true);
setError(null);

try {
const response = await fetch('http://localhost:8000/tenant/create/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: formData.name,
description: formData.description,
email: formData.email
}),
});

if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Failed to create tenant');
}

const data = await response.json();

const newTenant = {
id: data.id || Date.now(),
name: formData.name,
email: formData.email,
description: formData.description,
createdAt: new Date().toISOString(),
imageUrl: null,
path: data.path || `/${formData.name}`,
subGroups: data.subGroups || []
};

onTenantCreated(newTenant);
onClose();
} catch (error) {
console.error("Error creating tenant:", error);
setError(error.message || 'Failed to create tenant');
} finally {
setIsSubmitting(false);
}
};

return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-
center z-50 p-4">
<div className="bg-white rounded-lg shadow-lg w-full max-w-md">
<div className="p-6">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-bold text-gray-800">Create New Tenant</h2>
<button
onClick={onClose}
className="text-gray-500 hover:text-gray-700"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0
0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>

<form onSubmit={handleSubmit} className="space-y-4">


<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-
700 mb-1">
Tenant Name *
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md
focus:outline-none focus:ring-2 focus:ring-green-500"
placeholder="Enter tenant name"
/>
</div>

<div>
<label htmlFor="email" className="block text-sm font-medium text-
gray-700 mb-1">
Contact Email *
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md
focus:outline-none focus:ring-2 focus:ring-green-500"
placeholder="Enter contact email"
/>
</div>

<div>
<label htmlFor="description" className="block text-sm font-medium
text-gray-700 mb-1">
Description
</label>
<textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
rows={3}
className="w-full px-3 py-2 border border-gray-300 rounded-md
focus:outline-none focus:ring-2 focus:ring-green-500"
placeholder="Enter tenant description"
/>
</div>

{error && (
<div className="text-red-500 text-sm mt-2">
Error: {error}
</div>
)}

<div className="flex justify-end space-x-3 pt-4">


<button
type="button"
onClick={onClose}
className="px-4 py-2 border border-gray-300 rounded-md text-gray-
700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500"
>
Cancel
</button>
<button
type="submit"
disabled={isSubmitting}
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-
green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50
disabled:cursor-not-allowed"
>
{isSubmitting ? (
<span className="flex items-center">
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10"
stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8
0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135
5.824 3 7.938l3-2.647z"></path>
</svg>
Creating...
</span>
) : "Create Tenant"}
</button>
</div>
</form>
</div>
</div>
</div>
);
}

You might also like