Untitled
2 weeks ago in JavaScript
import {useEffect, useState} from "react";
import {apiClient} from "../api/axios.ts";
interface CompanyDetailsHook {
company: Company | null;
error: string | null;
handleRoleChange: (userId: string, newRole: string) => void;
loading: boolean;
}
export interface Company{
id:string
name: string
description: string
avatarUrl: string;
members: User[];
}
interface User {
id: string;
name: string;
role: string;
}
const useCompanyDetails = (companyId: string):CompanyDetailsHook => {
const [company, setCompany] = useState<Company | null>(null);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
const fetchCompanyDetails = async () => {
try {
const response = await apiClient.get(`/details/${companyId}`);
setCompany(response.data);
} catch (err) {
console.error('Error fetching company details:', err);
setError("Failed to load company details");
} finally {
setLoading(false);
}
};
if (companyId) {
fetchCompanyDetails();
} else {
console.error("Invalid companyId:", companyId);
}
}, [companyId]);
const handleRoleChange = async (userId: string, newRole: string) => {
try {
await apiClient.put(`/company/${companyId}/member/${userId}/role`, { role: newRole });
setCompany((prevCompany) =>
prevCompany
? {
...prevCompany,
members: prevCompany.members.map((member) =>
member.id === userId ? { ...member, role: newRole } : member
),
}
: prevCompany
);
} catch (err) {
console.error('Error updating role:', err);
setError("Failed to update role");
}
};
return {company, error, handleRoleChange, loading};
};
export default useCompanyDetails;
///////////////////////////////////
import React from "react";
import { useParams } from 'react-router-dom';
import useCompanyDetails from "../../../hooks/useCompanyDetails.ts";
const CompanyDetailPage: React.FC = () => {
const { companyId } = useParams<{ companyId: string }>();
console.log(companyId);
const {company, error, handleRoleChange} = useCompanyDetails(companyId!);
if (error) return <p>{error}</p>;
if (!company) return <p>Company ID is missing.</p>;
return (
<div>
<h2>{company.name}</h2>
<p>{company.description}</p>
<h3>Members</h3>
<ul>
{company.members.map((member) => (
<li key={member.id}>
<span>{member.name}</span>
<select
value={member.role}
onChange={(e) => handleRoleChange(member.id, e.target.value)}
>
<option value="member">Member</option>
<option value="manager">Manager</option>
<option value="admin">Admin</option>
</select>
</li>
))}
</ul>
</div>
)
}
export default CompanyDetailPage;
//////
router.get('/details/:companyId', async (req, res) => {
const companyId = req.params.companyId;
try {
const companyRepo = AppDataSource.getRepository(Company);
const company = await companyRepo.findOne({
where: { company_id: companyId },
relations: ['members'],
})
if (!company) {
res.status(404).json({message: 'Company not found'})
return
}
res.status(200).json(company);
} catch (error) {
console.log('Error fetching company details:', error);
res.status(500).json({message: 'Server error'})
}
})