@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
122 lines • 5.75 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import React, { useState } from "react";
import { ArrayHelper } from "@churchapps/helpers";
import { ApiHelper } from "@churchapps/helpers";
import { UserHelper } from "../../helpers/UserHelper";
import { NavItem } from "./NavItem";
import { Locale } from "../../helpers";
export const ChurchList = props => {
const [userChurches, setUserChurches] = useState(() => {
try {
// If we have currentUserChurch, use it as fallback
if (props.currentUserChurch && (!props.userChurches || !Array.isArray(props.userChurches))) {
return [props.currentUserChurch];
}
let churches = props.userChurches;
// Ensure we have an array
if (!Array.isArray(churches)) {
console.warn("ChurchList - Expected array but got:", typeof churches, churches);
// If it's a plain church object and we have currentUserChurch, use that
if (props.currentUserChurch) {
return [props.currentUserChurch];
}
churches = [];
}
// Filter for valid userChurch objects (should have church property)
const validChurches = churches.filter(uc => {
const isValid = uc && uc.church && uc.church.id;
if (!isValid) {
console.warn("ChurchList - Invalid church structure:", uc);
}
return isValid;
});
// If no valid churches but we have currentUserChurch, use it
if (validChurches.length === 0 && props.currentUserChurch) {
return [props.currentUserChurch];
}
return validChurches;
}
catch (error) {
console.error("ChurchList - Error processing churches:", error);
// Last resort: if we have currentUserChurch, use it
if (props.currentUserChurch) {
return [props.currentUserChurch];
}
return [];
}
});
// Update local state when props change
React.useEffect(() => {
try {
// If we have currentUserChurch, use it as fallback
if (props.currentUserChurch && (!props.userChurches || !Array.isArray(props.userChurches))) {
setUserChurches([props.currentUserChurch]);
return;
}
let churches = props.userChurches;
// Ensure we have an array
if (!Array.isArray(churches)) {
if (props.currentUserChurch) {
setUserChurches([props.currentUserChurch]);
return;
}
churches = [];
}
// Filter for valid userChurch objects
const validChurches = churches.filter(uc => uc && uc.church && uc.church.id);
// If no valid churches but we have currentUserChurch, use it
if (validChurches.length === 0 && props.currentUserChurch) {
setUserChurches([props.currentUserChurch]);
}
else {
setUserChurches(validChurches);
}
}
catch (error) {
console.error("ChurchList useEffect - Error updating churches:", error);
if (props.currentUserChurch) {
setUserChurches([props.currentUserChurch]);
}
else {
setUserChurches([]);
}
}
}, [props.userChurches, props.currentUserChurch]);
const handleDelete = async (uc) => {
// Helper function to get label with fallback
const getLabel = (key, fallback) => {
const label = Locale.label(key);
return label && label !== key ? label : fallback;
};
const confirmMessage = getLabel("wrapper.sureRemoveChurch", "Are you sure you wish to delete this church? You will no longer be a member of {}.").replace("{}", uc.church.name?.toUpperCase());
if (window.confirm(confirmMessage)) {
await ApiHelper.delete(`/userchurch/record/${props.context.user.id}/${uc.church.id}/${uc.person.id}`, "MembershipApi");
await ApiHelper.delete(`/rolemembers/self/${uc.church.id}/${props.context.user.id}`, "MembershipApi");
// remove the same from userChurches
const idx = ArrayHelper.getIndex(UserHelper.userChurches, "church.id", uc.church.id);
if (idx > -1)
UserHelper.userChurches.splice(idx, 1);
props?.onDelete();
}
};
// Helper function to get label with fallback
const getLabel = (key, fallback) => {
const label = Locale.label(key);
return label && label !== key ? label : fallback;
};
const result = [];
userChurches.forEach(uc => {
const userChurch = uc;
const churchName = uc.church.name;
result.push(_jsx(NavItem, { selected: (uc.church.id === props.currentUserChurch.church.id) && true, onClick: async () => {
await UserHelper.selectChurch(props.context, userChurch.church.id, null);
// Call the onChurchChange callback if provided
if (props.onChurchChange) {
props.onChurchChange();
}
}, label: churchName || "Unknown", icon: "church", deleteIcon: uc.church.id !== props.currentUserChurch.church.id ? "delete" : null, deleteLabel: getLabel("wrapper.deleteChurch", "Delete"), deleteFunction: () => { handleDelete(uc); } }, userChurch.church.id));
});
return _jsx("div", { id: "church-list", children: result });
};
//# sourceMappingURL=ChurchList.js.map