@churchapps/apphelper 0.5.11 → 0.6.0

package/src/components/ImageEditor.tsx

@@ -1,161 +1,167 @@
-"use client";
-
-import React, { useState, useEffect, useRef, Suspense, lazy } from "react";
-import { InputBox, SmallButton, Loading } from ".";
-import { Locale } from "../helpers";
-import "../../public/css/cropper.css";
-
-// Lazy load the Cropper component
-const Cropper = lazy(() => import("react-cropper").then(module => ({ default: module.default })));
-
-interface Props {
-  title?: string;
-  photoUrl: string;
-  aspectRatio: number;
-  onUpdate: (dataUrl?: string) => void;
-  onCancel?: () => void;
-  outputWidth?: number;
-  outputHeight?: number;
-  hideDelete?: boolean;
-}
-
-export function ImageEditor(props: Props) {
-  const [photoSrc, setPhotoSrc] = useState<string>("");
-  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
-  const cropperRef = useRef<HTMLImageElement>(null);
-  let timeout: number | null = null;
-
-  const handleSave = () => {
-    console.log('ImageEditor handleSave called, croppedImageDataUrl:', croppedImageDataUrl ? 'Data URL available' : 'No data URL');
-    props.onUpdate(croppedImageDataUrl);
-  };
-
-  const handleDelete = () => props.onUpdate("");
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    let files;
-    if (e.target) {
-      files = e.target.files;
-    }
-    if (!files || files.length === 0) return;
-    
-    const reader = new FileReader();
-    reader.onload = () => {
-      const url = reader.result.toString();
-      console.log('ImageEditor file uploaded, setting photoSrc');
-      setPhotoSrc(url);
-      setCroppedImageDataUrl("");
-    };
-    reader.readAsDataURL(files[0]);
-    
-    // Clear the input value to allow re-uploading the same file
-    e.target.value = "";
-  };
-
-  const selectDefaultCropZone = () => {
-    const imageElement: any = cropperRef?.current;
-    let cropper: any = imageElement?.cropper;
-    if (props.aspectRatio===0)
-    {
-      let containerData = cropper.getContainerData();
-      const imgWidth = cropper.getImageData().width;
-      const imgHeight = cropper.getImageData().height;
-      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
-      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
-      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
-    } else {
-      let desiredAspect = props.aspectRatio;
-      let containerData = cropper.getContainerData();
-      let imgAspect = cropper.getImageData().aspectRatio;
-      let scale = imgAspect / desiredAspect;
-      if (scale < 1) {
-        const imgWidth = cropper.getImageData().width;
-        let l = (containerData.width - imgWidth) / 2.0;
-        let t = (containerData.height - (containerData.height * scale)) / 2.0;
-        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
-      } else {
-        const imgHeight = cropper.getImageData().height;
-        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
-        let t = cropper.canvasData.top;
-        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
-      }
-    }
-
-  }
-
-  const handleCrop = () => {
-    if (timeout !== null) {
-      window.clearTimeout(timeout);
-      timeout = null;
-    }
-
-    timeout = window.setTimeout(() => {
-      if (cropperRef.current !== null) {
-        const imageElement: any = cropperRef?.current;
-        const cropper: any = imageElement?.cropper;
-
-        //Do not enlarge if less
-        const imageData = cropper.getImageData();
-        let width = props.outputWidth || 400;
-        let height = props.outputHeight || 300;
-        if (imageData.naturalWidth < width && imageData.naturalHeight < height) {
-          width = imageData.naturalWidth;
-          height = imageData.naturalHeight;
-        }
-
-        const url = cropper.getCroppedCanvas({ width, height }).toDataURL("image/png", 0.4);
-        console.log('ImageEditor handleCrop setting croppedImageDataUrl');
-        setCroppedImageDataUrl(url);
-      }
-    }, 200);
-  };
-
-  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
-
-  return (
-    <InputBox
-      id="cropperBox"
-      headerIcon=""
-      headerText={props.title}
-      ariaLabelDelete="deletePhoto"
-      saveText={Locale.label("common.update")}
-      saveFunction={handleSave}
-      cancelFunction={props.onCancel}
-      deleteFunction={(!props.hideDelete) && handleDelete}
-      headerActionContent={
-        <div>
-          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
-          <SmallButton
-            icon="upload"
-            text="Upload"
-            onClick={() => {
-              document.getElementById("fileUpload").click();
-            }}
-          />
-        </div>
-      }
-    >
-      <Suspense fallback={<Loading />}>
-        <Cropper
-          ref={cropperRef}
-          src={photoSrc}
-          key={photoSrc}
-          style={{ height: 240, width: "100%" }}
-          aspectRatio={props.aspectRatio}
-          guides={false}
-          crop={handleCrop}
-          autoCropArea={1}
-          viewMode={0}
-          responsive={true}
-          restore={false}
-          checkOrientation={false}
-          background={false}
-          ready={() => {
-            setTimeout(selectDefaultCropZone, 100);
-          }}
-        />
-      </Suspense>
-    </InputBox>
-  );
-}
+"use client";
+
+import React, { useState, useEffect, useRef, Suspense, lazy } from "react";
+import { InputBox, SmallButton, Loading } from ".";
+import { Locale } from "../helpers";
+import "../../public/css/cropper.css";
+
+// Lazy load the Cropper component
+const Cropper = lazy(() => import("react-cropper").then(module => ({ default: module.default })));
+
+interface Props {
+  title?: string;
+  photoUrl: string;
+  aspectRatio: number;
+  onUpdate: (dataUrl?: string) => void;
+  onCancel?: () => void;
+  outputWidth?: number;
+  outputHeight?: number;
+  hideDelete?: boolean;
+}
+
+export function ImageEditor(props: Props) {
+  const [photoSrc, setPhotoSrc] = useState<string>("");
+  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
+  const cropperRef = useRef<HTMLImageElement>(null);
+  const timeoutRef = useRef<number | null>(null);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleSave = () => {
+    props.onUpdate(croppedImageDataUrl);
+  };
+
+  const handleDelete = () => props.onUpdate("");
+
+  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    let files;
+    if (e.target) {
+      files = e.target.files;
+    }
+    if (!files || files.length === 0) return;
+    
+    const reader = new FileReader();
+    reader.onload = () => {
+      const url = reader.result.toString();
+      setPhotoSrc(url);
+      setCroppedImageDataUrl("");
+    };
+    reader.readAsDataURL(files[0]);
+    
+    // Clear the input value to allow re-uploading the same file
+    e.target.value = "";
+  };
+
+  const selectDefaultCropZone = () => {
+    const imageElement: any = cropperRef?.current;
+    let cropper: any = imageElement?.cropper;
+    if (props.aspectRatio===0)
+    {
+      let containerData = cropper.getContainerData();
+      const imgWidth = cropper.getImageData().width;
+      const imgHeight = cropper.getImageData().height;
+      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
+      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
+      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
+    } else {
+      let desiredAspect = props.aspectRatio;
+      let containerData = cropper.getContainerData();
+      let imgAspect = cropper.getImageData().aspectRatio;
+      let scale = imgAspect / desiredAspect;
+      if (scale < 1) {
+        const imgWidth = cropper.getImageData().width;
+        let l = (containerData.width - imgWidth) / 2.0;
+        let t = (containerData.height - (containerData.height * scale)) / 2.0;
+        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
+      } else {
+        const imgHeight = cropper.getImageData().height;
+        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
+        let t = cropper.canvasData.top;
+        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
+      }
+    }
+
+  }
+
+  const handleCrop = () => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    timeoutRef.current = window.setTimeout(() => {
+      if (cropperRef.current !== null) {
+        const imageElement: any = cropperRef?.current;
+        const cropper: any = imageElement?.cropper;
+
+        //Do not enlarge if less
+        const imageData = cropper.getImageData();
+        let width = props.outputWidth || 400;
+        let height = props.outputHeight || 300;
+        if (imageData.naturalWidth < width && imageData.naturalHeight < height) {
+          width = imageData.naturalWidth;
+          height = imageData.naturalHeight;
+        }
+
+        const url = cropper.getCroppedCanvas({ width, height }).toDataURL("image/png", 0.4);
+        setCroppedImageDataUrl(url);
+      }
+    }, 200);
+  };
+
+  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
+
+  return (
+    <InputBox
+      id="cropperBox"
+      headerIcon=""
+      headerText={props.title}
+      ariaLabelDelete="deletePhoto"
+      saveText={Locale.label("common.update")}
+      saveFunction={handleSave}
+      cancelFunction={props.onCancel}
+      deleteFunction={(!props.hideDelete) && handleDelete}
+      headerActionContent={
+        <div>
+          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
+          <SmallButton
+            icon="upload"
+            text="Upload"
+            onClick={() => {
+              document.getElementById("fileUpload").click();
+            }}
+          />
+        </div>
+      }
+    >
+      <Suspense fallback={<Loading />}>
+        <Cropper
+          ref={cropperRef}
+          src={photoSrc}
+          key={photoSrc}
+          style={{ height: 240, width: "100%" }}
+          aspectRatio={props.aspectRatio}
+          guides={false}
+          crop={handleCrop}
+          autoCropArea={1}
+          viewMode={0}
+          responsive={true}
+          restore={false}
+          checkOrientation={false}
+          background={false}
+          ready={() => {
+            setTimeout(selectDefaultCropZone, 100);
+          }}
+        />
+      </Suspense>
+    </InputBox>
+  );
+}

package/src/components/PageHeader.tsx

@@ -92,8 +92,8 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ icon, title, subtitle, c
       {/* Statistics row */}
       {statistics && statistics.length > 0 && (
         <Stack id="page-header-statistics" direction={{ xs: "column", sm: "row" }} spacing={3} sx={{ mt: 3 }}>
-          {statistics.map((stat, index) => (
-            <Stack key={index} direction="row" spacing={1} alignItems="center">
+          {statistics.map((stat) => (
+            <Stack key={stat.label} direction="row" spacing={1} alignItems="center">
               {React.cloneElement(stat.icon as React.ReactElement<any>, { sx: { color: "#FFF", fontSize: 20 } })}
               <Typography variant="h6" sx={{ color: "#FFF", fontWeight: 600, mr: 1 }}>
                 {stat.value}

package/src/components/QuestionEdit.tsx

@@ -42,9 +42,9 @@ export const QuestionEdit = React.forwardRef<any, Props>(({noBackground = false,
     let choiceOptions = [];
     if (q.choices !== undefined && q.choices !== null) {
       if (q.fieldType === "Multiple Choice") {
-        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
+        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={q.choices[i].value} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
       } else if (q.fieldType === "Checkbox") {
-        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<FormControlLabel key={i} label={q.choices[i].text} control={<Checkbox onChange={handleCheck} name={q.choices[i].value} />} />);
+        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<FormControlLabel key={q.choices[i].value} label={q.choices[i].text} control={<Checkbox onChange={handleCheck} name={q.choices[i].value} />} />);
       }
     }
 

package/src/components/SmallButton.tsx

@@ -22,7 +22,7 @@ export const SmallButton = React.forwardRef<HTMLDivElement, Props>((props, ref)
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     if (props.href) setRedirectUrl(props.href);
-    else props.onClick(e);
+    else if (props.onClick) props.onClick(e);
   }
 
   const style = (props.text)