feat: unificar lógica de verificación de administrador y gestión del botón de edición en OrganizationPublicProfile

This commit is contained in:
2026-09-14 14:26:38 -03:00
parent 86f5422828
commit 69e6e659e0
2 changed files with 86 additions and 66 deletions
+67 -47
View File
@@ -104,47 +104,83 @@ export default function OrganizationPublicProfile() {
const [currentPage, setCurrentPage] = useState<number>(1);
const [isOrgAdmin, setIsOrgAdmin] = useState<boolean>(false);
const [showEditPopup, setShowEditPopup] = useState<boolean>(false);
const SessionInfo = useSessionStore();
// Append edit button to header wrapper when admin
// Unified effect: check admin status and manage edit button DOM element
useEffect(() => {
if (!isOrgAdmin) return;
if (!SessionInfo.userId || !oid) {
setIsOrgAdmin(false);
const existing = document.getElementById("edit-header-btn");
if (existing) existing.remove();
return;
}
const wrapper = document.getElementById("header-wrapper");
if (!wrapper) return;
let cancelled = false;
const btn = document.createElement("div");
btn.id = "edit-header-btn";
btn.innerHTML = `
<button style="
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,0.45);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
transition: background 0.2s;
" onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
`;
btn.querySelector("button")!.addEventListener("click", () => setShowEditPopup(true));
wrapper.appendChild(btn);
checkOrgAdmin(oid, SessionInfo.userId)
.then((isAdmin) => {
if (cancelled) return;
console.log("isAdmin:", isAdmin);
setIsOrgAdmin(isAdmin);
// Append or remove button based on the result
const wrapper = document.getElementById("header-wrapper");
if (!wrapper) return;
if (isAdmin) {
const existingBtn = document.getElementById("edit-header-btn");
if (existingBtn) existingBtn.remove();
const btn = document.createElement("div");
btn.id = "edit-header-btn";
btn.innerHTML = `
<button style="
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,0.45);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
transition: background 0.2s;
" onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
`;
btn.querySelector("button")!.addEventListener("click", () =>
setShowEditPopup(true),
);
wrapper.appendChild(btn);
} else {
// Remove button for non-admin users
const existingBtn = document.getElementById("edit-header-btn");
if (existingBtn) existingBtn.remove();
}
})
.catch(() => {
if (cancelled) return;
setIsOrgAdmin(false);
// Ensure button is removed on error
const existingBtn = document.getElementById("edit-header-btn");
if (existingBtn) existingBtn.remove();
});
// Cleanup: mark as cancelled and remove button
return () => {
cancelled = true;
const existing = document.getElementById("edit-header-btn");
if (existing) existing.remove();
};
}, [isOrgAdmin]);
}, [SessionInfo.userId, oid]);
const SessionInfo = useSessionStore();
const eventHandler = useEventHandlerStore();
const alert = useAlert();
const confirm = useConfirmStore();
@@ -186,22 +222,6 @@ export default function OrganizationPublicProfile() {
});
}, [SessionInfo, authorizedUsers]);
// Check if the logged-in user is admin of this organization
useEffect(() => {
if (!SessionInfo.userId || !oid) {
setIsOrgAdmin(false);
return;
}
checkOrgAdmin(oid, SessionInfo.userId)
.then((isAdmin) => {
setIsOrgAdmin(isAdmin);
})
.catch(() => {
setIsOrgAdmin(false);
});
}, [SessionInfo.userId, oid]);
useEffect(() => {
if (!OrganizationData.orgData) return;
if (!oid) return; //if (!OrganizationData.orgData.id) return;