@churchapps/apphelper 0.2.3 → 0.2.4

package/dist/components/B1ShareModal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    contentDisplayName: string;
+    contentType: string;
+    contentId: string;
+    onClose: () => void;
+};
+export declare function B1ShareModal(props: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=B1ShareModal.d.ts.map

package/dist/components/B1ShareModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"B1ShareModal.d.ts","sourceRoot":"","sources":["../../src/components/B1ShareModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,KAAK,GAAG;IACX,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,qBAwFxC"}

package/dist/components/B1ShareModal.js

@@ -0,0 +1,103 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.B1ShareModal = void 0;
+const helpers_1 = require("@churchapps/helpers");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const Loading_1 = require("./Loading");
+function B1ShareModal(props) {
+    const [groupId, setGroupId] = (0, react_2.useState)("");
+    const [groups, setGroups] = (0, react_2.useState)(null);
+    const [comment, setComment] = (0, react_2.useState)("");
+    const [showSuccess, setShowSuccess] = (0, react_2.useState)(false);
+    const loadData = () => __awaiter(this, void 0, void 0, function* () {
+        const g = yield helpers_1.ApiHelper.get("/groups/my", "MembershipApi");
+        if (g.length > 0)
+            setGroupId(g[0].id);
+        setGroups(g);
+    });
+    const handleChange = (e) => {
+        e.preventDefault();
+        switch (e.target.name) {
+            case "group":
+                setGroupId(e.target.value);
+                break;
+            case "comment":
+                setComment(e.target.value);
+                break;
+        }
+    };
+    const handlePost = () => {
+        setShowSuccess(true);
+        if (groupId === "")
+            alert("Please select a group.");
+        else if (comment === "")
+            alert("Please add a comment.");
+        else {
+            const payload = {
+                groupId: groupId,
+                contentType: props.contentType,
+                contentId: props.contentId,
+                comment: comment,
+                title: props.contentDisplayName
+            };
+            helpers_1.ApiHelper.post("/conversations/start", payload, "MessagingApi").then(() => {
+                setShowSuccess(true);
+            });
+        }
+    };
+    (0, react_2.useEffect)(() => { loadData(); }, []);
+    const style = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 600,
+        bgcolor: 'background.paper',
+        border: '2px solid #000',
+        boxShadow: 24,
+    };
+    const getModalContent = () => {
+        if (!helpers_1.UserHelper.currentUserChurch)
+            return react_1.default.createElement("p", null, "Please log in first.");
+        else if (!groups)
+            return (react_1.default.createElement(Loading_1.Loading, null));
+        else if (groups.length === 0)
+            return (react_1.default.createElement("p", null, "You are not a currently a member of any groups on B1."));
+        else
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("h2", null,
+                    "Sharing '",
+                    props.contentDisplayName,
+                    "' to B1 Group"),
+                react_1.default.createElement(material_1.FormControl, { fullWidth: true },
+                    react_1.default.createElement(material_1.InputLabel, null, "Group"),
+                    react_1.default.createElement(material_1.Select, { label: "Group", name: "group", value: groupId, onChange: handleChange }, groups.map(g => react_1.default.createElement(material_1.MenuItem, { key: g.id, value: g.id }, g.name)))),
+                react_1.default.createElement(material_1.TextField, { fullWidth: true, multiline: true, label: "Comment", name: "comment", value: comment, onChange: handleChange, rows: 3, placeholder: "Include a comment with your post." })));
+    };
+    if (showSuccess)
+        return (react_1.default.createElement(material_1.Snackbar, { open: true, anchorOrigin: { horizontal: "center", vertical: "bottom" }, autoHideDuration: 2500, onClose: () => props.onClose() },
+            react_1.default.createElement(material_1.Alert, { variant: "filled", severity: "success" }, "Content shared")));
+    else
+        return (react_1.default.createElement(material_1.Modal, { open: true, onClose: props.onClose },
+            react_1.default.createElement(material_1.Box, { sx: style },
+                react_1.default.createElement("div", { style: { paddingLeft: 16, paddingRight: 16 } }, getModalContent()),
+                react_1.default.createElement(material_1.DialogActions, { sx: { paddingX: "16px", paddingBottom: "12px" } },
+                    react_1.default.createElement(material_1.Button, { variant: "outlined", onClick: props.onClose }, "Close"),
+                    react_1.default.createElement(material_1.Button, { variant: "contained", onClick: handlePost }, "Post")))));
+}
+exports.B1ShareModal = B1ShareModal;
+//# sourceMappingURL=B1ShareModal.js.map

package/dist/components/B1ShareModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"B1ShareModal.js","sourceRoot":"","sources":["../../src/components/B1ShareModal.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@churchapps/apphelper",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Library of helper functions for React and NextJS ChurchApps",
   "main": "dist/index.js",
   "scripts": {

package/src/components/B1ShareModal.tsx

@@ -0,0 +1,102 @@
+import { GroupInterface, ApiHelper, UserHelper } from "@churchapps/helpers";
+import { Modal, Box, FormControl, InputLabel, MenuItem, Select, TextField, SelectChangeEvent, Button, DialogActions, Alert, Snackbar } from "@mui/material";
+import React from "react";
+import { useEffect, useState } from "react";
+import { Loading } from "./Loading";
+
+type Props = {
+  contentDisplayName: string;
+  contentType: string;
+  contentId: string;
+  onClose: () => void;
+};
+
+export function B1ShareModal(props: Props) {
+  const [groupId, setGroupId] = useState("");
+  const [groups, setGroups] = useState<GroupInterface[]>(null);
+  const [comment, setComment] = useState("");
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const loadData = async () => {
+    const g = await ApiHelper.get("/groups/my", "MembershipApi");
+    if (g.length > 0) setGroupId(g[0].id);
+    setGroups(g);
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    e.preventDefault();
+    switch (e.target.name) {
+      case "group":
+        setGroupId(e.target.value as string);
+        break;
+      case "comment":
+        setComment(e.target.value as string);
+        break;
+    }
+  }
+
+  const handlePost = () => {
+    setShowSuccess(true);
+    if (groupId === "") alert("Please select a group.");
+    else if (comment === "") alert("Please add a comment.");
+    else {
+      const payload = {
+        groupId: groupId,
+        contentType: props.contentType,
+        contentId: props.contentId,
+        comment: comment,
+        title: props.contentDisplayName
+      }
+      ApiHelper.post("/conversations/start", payload, "MessagingApi").then(() => {
+        setShowSuccess(true);
+      });
+    }
+  }
+
+  useEffect(() => { loadData(); }, []);
+
+  const style = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 600,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+  };
+
+  const getModalContent = () => {
+    if (!UserHelper.currentUserChurch) return <p>Please log in first.</p>
+    else if (!groups) return (<Loading />);
+    else if (groups.length === 0) return (<p>You are not a currently a member of any groups on B1.</p>);
+    else return (<>
+      <h2>Sharing '{props.contentDisplayName}' to B1 Group</h2>
+      <FormControl fullWidth>
+        <InputLabel>Group</InputLabel>
+        <Select label="Group" name="group" value={groupId} onChange={handleChange}>
+          {groups.map(g => <MenuItem key={g.id} value={g.id}>{g.name}</MenuItem>)}
+        </Select>
+      </FormControl>
+      <TextField fullWidth multiline label="Comment" name="comment" value={comment} onChange={handleChange} rows={3} placeholder="Include a comment with your post." />
+    </>);
+  }
+
+
+  if (showSuccess) return (<Snackbar open={true} anchorOrigin={{ horizontal: "center", vertical: "bottom" }} autoHideDuration={2500} onClose={() => props.onClose()}>
+    <Alert variant="filled" severity="success">Content shared</Alert>
+  </Snackbar>)
+  else return (<Modal open={true} onClose={props.onClose}>
+    <Box sx={style}>
+      <div style={{paddingLeft:16, paddingRight:16}}>
+        {getModalContent()}
+      </div>
+      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+        <Button variant="outlined" onClick={props.onClose}>Close</Button>
+        <Button variant="contained" onClick={handlePost}>Post</Button>
+      </DialogActions>
+    </Box>
+
+  </Modal>);
+
+}