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(null); const [error, setError] = useState(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

{error}

; if (!company) return

Company ID is missing.

; return (

{company.name}

{company.description}

Members

    {company.members.map((member) => (
  • {member.name}
  • ))}
) } 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'}) } })