Fixed tabs an provider linking

Author: jzongker

src/serving/ServingPage.tsx

@@ -38,23 +38,6 @@ export const ServingPage = () => {
     },
   });
 
-  const selectedMinistry = ministries.data?.find((g) => g.id === selectedMinistryId);
-
-  // Auto-select first accessible ministry when data loads
-  React.useEffect(() => {
-    if (ministries.data && ministries.data.length > 0 && !selectedMinistryId) {
-      const accessibleMinistry = ministries.data.find((g) => {
-        const members = ArrayHelper.getAll(groupMembers.data || [], "groupId", g.id);
-        return members.length === 0 || ArrayHelper.getOne(members, "personId", context.person?.id) !== null || UserHelper.checkAccess(Permissions.membershipApi.roles.edit);
-      });
-      if (accessibleMinistry) {
-        setSelectedMinistryId(accessibleMinistry.id);
-      } else if (ministries.data.length > 0) {
-        setSelectedMinistryId(ministries.data[0].id);
-      }
-    }
-  }, [ministries.data, groupMembers.data, selectedMinistryId, context.person?.id]);
-
   const handleShowAdd = () => setShowAdd(true);
 
   const handleAddUpdated = () => {
@@ -76,6 +59,18 @@ export const ServingPage = () => {
     return isMember;
   });
 
+  const selectedMinistry = groups.find((g) => g.id === selectedMinistryId);
+
+  // Auto-select first ministry from filtered groups, or reset if current selection is not in filtered list
+  React.useEffect(() => {
+    if (groups.length > 0) {
+      const isCurrentSelectionValid = groups.some(g => g.id === selectedMinistryId);
+      if (!selectedMinistryId || !isCurrentSelectionValid) {
+        setSelectedMinistryId(groups[0].id);
+      }
+    }
+  }, [groups, selectedMinistryId]);
+
   // Show add ministry form
   if (showAdd) {
     return (
@@ -200,7 +195,7 @@ export const ServingPage = () => {
               <TeamList ministry={selectedMinistry} />
             </Grid>
             <Grid size={{ xs: 12 }}>
-              <ContentProviderAuthManager ministryId={selectedMinistry.id} />
+              <ContentProviderAuthManager key={selectedMinistry.id} ministryId={selectedMinistry.id} />
             </Grid>
           </Grid>
         )}

src/serving/components/ActionSelector.tsx

@@ -109,7 +109,7 @@ export const ActionSelector: React.FC<Props> = ({ open, onClose, onSelect, conte
   // Mode: "associated" shows actions from contentPath, "browse" allows navigation
   const [mode, setMode] = useState<"associated" | "browse">(contentPath ? "associated" : "browse");
 
-  const availableProviders = useMemo(() => getAvailableProviders(), []);
+  const availableProviders = useMemo(() => getAvailableProviders(["lessonschurch", "signpresenter", "bibleproject"]), []);
 
   const currentProviderInfo = useMemo(() => {
     const pid = mode === "associated" ? (providerId || "lessonschurch") : selectedProviderId;

src/serving/components/ContentProviderAuthManager.tsx

@@ -14,6 +14,8 @@ interface Props {
 }
 
 export const ContentProviderAuthManager: React.FC<Props> = ({ ministryId, onAuthChange }) => {
+  console.log("[ContentProviderAuthManager] Render with ministryId:", ministryId);
+
   const [linkedProviders, setLinkedProviders] = useState<ContentProviderAuthInterface[]>([]);
   const [loading, setLoading] = useState(true);
   const [showProviderSelector, setShowProviderSelector] = useState(false);
@@ -28,10 +30,18 @@ export const ContentProviderAuthManager: React.FC<Props> = ({ ministryId, onAuth
   const [codeVerifier, setCodeVerifier] = useState<string | null>(null);
   const [pkceWindow, setPkceWindow] = useState<Window | null>(null);
 
-  const availableProviders = useMemo(() => getAvailableProviders(["lessonschurch", "signpresenter", "bibleproject"]), []);
+  const availableProviders = useMemo(() => {
+    const providers = getAvailableProviders(["lessonschurch", "signpresenter", "bibleproject"]);
+    console.log("[ContentProviderAuthManager] availableProviders:", providers);
+    return providers;
+  }, []);
 
   // Get implemented providers
-  const authProviders = useMemo(() => availableProviders.filter(p => p.implemented), [availableProviders]);
+  const authProviders = useMemo(() => {
+    const implemented = availableProviders.filter(p => p.implemented);
+    console.log("[ContentProviderAuthManager] authProviders (implemented):", implemented);
+    return implemented;
+  }, [availableProviders]);
 
   // Providers not yet linked (for modal)
   const unlinkableProviders = useMemo(() => {
@@ -40,24 +50,30 @@ export const ContentProviderAuthManager: React.FC<Props> = ({ ministryId, onAuth
   }, [authProviders, linkedProviders]);
 
   const loadLinkedProviders = useCallback(async () => {
+    console.log("[ContentProviderAuthManager] loadLinkedProviders called, ministryId:", ministryId);
     if (!ministryId) {
+      console.log("[ContentProviderAuthManager] No ministryId, clearing providers");
       setLinkedProviders([]);
       setLoading(false);
       return;
     }
     try {
       setLoading(true);
+      console.log("[ContentProviderAuthManager] Fetching linked providers...");
       const linked = await ContentProviderAuthHelper.getLinkedProviders(ministryId);
+      console.log("[ContentProviderAuthManager] API returned:", linked);
       setLinkedProviders(linked || []);
     } catch (error) {
-      console.error("Error loading linked providers:", error);
+      console.error("[ContentProviderAuthManager] Error loading linked providers:", error);
       setLinkedProviders([]);
     } finally {
+      console.log("[ContentProviderAuthManager] Setting loading to false");
       setLoading(false);
     }
   }, [ministryId]);
 
   useEffect(() => {
+    console.log("[ContentProviderAuthManager] useEffect triggered, calling loadLinkedProviders");
     loadLinkedProviders();
   }, [loadLinkedProviders]);
 
@@ -342,7 +358,10 @@ export const ContentProviderAuthManager: React.FC<Props> = ({ ministryId, onAuth
     return availableProviders.find(p => p.id === authProviderId) || null;
   }, [authProviderId, availableProviders]);
 
+  console.log("[ContentProviderAuthManager] Render state - loading:", loading, "authProviders.length:", authProviders.length, "linkedProviders:", linkedProviders);
+
   if (loading) {
+    console.log("[ContentProviderAuthManager] Showing loading spinner");
     return (
       <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
         <CircularProgress />
@@ -351,6 +370,7 @@ export const ContentProviderAuthManager: React.FC<Props> = ({ ministryId, onAuth
   }
 
   if (authProviders.length === 0) {
+    console.log("[ContentProviderAuthManager] No authProviders, showing empty message");
     return (
       <Typography color="text.secondary">
         {Locale.label("plans.contentProviderAuth.noProvidersAvailable") || "No content providers available that require authentication."}

src/serving/components/LessonSelector.tsx

@@ -43,7 +43,7 @@ export const LessonSelector: React.FC<Props> = ({ open, onClose, onSelect, retur
     return getProvider(selectedProviderId);
   }, [selectedProviderId]);
 
-  const availableProviders = useMemo(() => getAvailableProviders(), []);
+  const availableProviders = useMemo(() => getAvailableProviders(["lessonschurch", "signpresenter", "bibleproject"]), []);
 
   // Path-based navigation
   const [currentPath, setCurrentPath] = useState<string>("");