Updated breadcrumbs/mobile pages

Author: jzongker

package-lock.json

@@ -7,7 +7,7 @@
     "@churchapps/apphelper": "0.6.19",
     "@churchapps/apphelper-donations": "0.6.17",
     "@churchapps/apphelper-forms": "0.6.14",
-    "@churchapps/apphelper-login": "0.6.17",
+    "@churchapps/apphelper-login": "0.6.18",
     "@churchapps/apphelper-markdown": "0.6.15",
     "@churchapps/apphelper-website": "0.6.17",
     "@churchapps/content-providers": "0.1.6",

package.json

@@ -42,7 +42,7 @@ export const PlanTypePage = () => {
 
   return (
     <>
-      <Box sx={{ position: "relative", "& #page-header > div": { paddingTop: "3.5rem !important" } }}>
+      <Box sx={{ position: "relative", "& #page-header > div": { paddingTop: "5.5rem !important" } }}>
         <PageHeader
           title={planType.data.name || Locale.label("plans.planTypePage.planType")}
           subtitle={Locale.label("plans.planTypePage.subtitle")}
@@ -54,10 +54,11 @@ export const PlanTypePage = () => {
           transform: "translateX(-50%)",
           width: "100vw",
           zIndex: 2,
-          paddingX: { xs: 2, sm: 3, md: 4 },
           paddingTop: 1.5,
         }}>
-          <Breadcrumbs items={breadcrumbItems} showHome={true} />
+          <Container maxWidth="xl">
+            <Breadcrumbs items={breadcrumbItems} showHome={true} />
+          </Container>
         </Box>
       </Box>
 

src/serving/planTypes/PlanTypePage.tsx

@@ -63,7 +63,7 @@ export const PlanPage = () => {
 
   return (
     <>
-      <Box sx={{ position: "relative", "& #page-header > div": { paddingTop: "3.5rem !important" } }}>
+      <Box sx={{ position: "relative", "& #page-header > div": { paddingTop: "5.5rem !important" } }}>
         <PageHeader title={plan.name || Locale.label("plans.planPage.servicePlan")} subtitle={Locale.label("plans.planPage.subtitle")} />
         <Box sx={{
           position: "absolute",
@@ -72,10 +72,11 @@ export const PlanPage = () => {
           transform: "translateX(-50%)",
           width: "100vw",
           zIndex: 2,
-          paddingX: { xs: 2, sm: 3, md: 4 },
           paddingTop: 1.5,
         }}>
-          <Breadcrumbs items={breadcrumbItems} showHome={true} />
+          <Container maxWidth="xl">
+            <Breadcrumbs items={breadcrumbItems} showHome={true} />
+          </Container>
         </Box>
       </Box>
       <PlanNavigation selectedTab={selectedTab} onTabChange={setSelectedTab} plan={plan} />

src/serving/plans/PlanPage.tsx

@@ -110,11 +110,9 @@ export function AppEdit({ currentTab: currentTabFromProps, updatedFunction = ()
   };
 
   const onSelect = useCallback((iconName: string) => {
-    const t = { ...currentTab };
-    t.icon = iconName;
-    setCurrentTab(t);
+    setCurrentTab(prev => ({ ...prev, icon: iconName }));
     setIsModalOpen(false);
-  }, [currentTab]);
+  }, []);
 
   const handleDelete = () => {
     if (window.confirm(Locale.label("settings.app.confirmDeleteTab"))) {
@@ -132,31 +130,36 @@ export function AppEdit({ currentTab: currentTabFromProps, updatedFunction = ()
     setShowPhotoGallery(false);
   };
 
-  const loadPages = () => {
+  const loadPages = useCallback(() => {
     ApiHelper.get("/pages", "ContentApi").then((_pages: PageInterface[]) => {
-      const filteredPages: PageInterface[] = [];
-      _pages.forEach(p => { if (p.url.startsWith("/member")) filteredPages.push(p); });
-      setPages(filteredPages || []);
+      setPages(_pages || []);
     });
-  };
+  }, []);
+
+  useEffect(() => {
+    if (currentTab?.linkType === "page" && pages === null) {
+      loadPages();
+    }
+  }, [currentTab?.linkType, pages, loadPages]);
+
+  useEffect(() => {
+    if (currentTab?.linkType === "page" && pages && pages.length > 0 && currentTab.linkData === "") {
+      setCurrentTab(prev => ({ ...prev, linkData: pages[0]?.id || "" }));
+    }
+  }, [currentTab?.linkType, currentTab?.linkData, pages]);
 
   const getPage = () => {
     if (currentTab?.linkType === "page") {
-      let options: React.ReactElement[] = [];
-      if (pages === null) loadPages();
-      else {
-        options = [];
+      const options: React.ReactElement[] = [];
+      if (pages) {
         pages.forEach(page => {
           options.push(<MenuItem value={page.id} key={page.id}>{page.title}</MenuItem>);
         });
-        if (currentTab.linkData === "") {
-          setCurrentTab(prev => ({ ...prev, linkData: pages[0]?.id || "" }));
-        }
       }
       return (
         <FormControl fullWidth>
           <InputLabel id="page">{Locale.label("settings.appEdit.page")}</InputLabel>
-          <Select labelId="page" label={Locale.label("settings.appEdit.page")} name="page" value={currentTab?.linkData} onChange={handleChange} data-testid="page-select">
+          <Select labelId="page" label={Locale.label("settings.appEdit.page")} name="page" value={currentTab?.linkData || ""} onChange={handleChange} data-testid="page-select">
             {options}
           </Select>
         </FormControl>

src/settings/components/AppEdit.tsx

@@ -197,10 +197,10 @@
     i18next "^25.3.2"
     react-i18next "^15.6.1"
 
-"@churchapps/apphelper-login@0.6.17":
-  version "0.6.17"
-  resolved "https://registry.npmjs.org/@churchapps/apphelper-login/-/apphelper-login-0.6.17.tgz"
-  integrity sha512-oG9CbHwLkbycOnChRrHZ66PlMxHpCBsXSEsaykxdzxORM1YcC6/fl85YZGlcgZ/EgzRtCn09Np7/jaGbbDPRfw==
+"@churchapps/apphelper-login@0.6.18":
+  version "0.6.18"
+  resolved "https://registry.npmjs.org/@churchapps/apphelper-login/-/apphelper-login-0.6.18.tgz"
+  integrity sha512-Y19UbUA9is9/Z7XjpzLzqRdDa96u9/P7Ky3Ok9RPW67Xc34wEIDKlYUt289Rs97l96+Yfc+MzO74ukJy1ooVrg==
   dependencies:
     "@mui/icons-material" "^7.3.1"
     "@mui/material" "^7.3.1"