@churchapps/apphelper 0.0.1

package/src/pageComponents/components/SelectChurchRegister.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { ApiHelper } from "../../helpers"
+import { ChurchInterface, RegisterChurchRequestInterface } from "../../interfaces";
+import { ErrorMessages, InputBox } from "../../components"
+import { Grid, InputAdornment, TextField } from "@mui/material";
+
+interface Props {
+  initialChurchName: string,
+  registeredChurchCallback?: (church: ChurchInterface) => void,
+  selectChurch: (churchId: string) => void,
+  appName: string
+}
+
+export const SelectChurchRegister: React.FC<Props> = (props) => {
+  const suggestSubDomain = (name: string) => {
+    let result = name.toLowerCase().replaceAll("christian", "").replaceAll("church", "").replaceAll(" ", "");
+    return result;
+  }
+
+  const [church, setChurch] = React.useState<RegisterChurchRequestInterface>({ name: props.initialChurchName, appName: props.appName, subDomain: suggestSubDomain(props.initialChurchName) });
+  const [errors, setErrors] = React.useState([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const c = { ...church }
+    switch (e.target.name) {
+      case "name": c.name = e.target.value; break;
+      case "subDomain": c.subDomain = e.target.value; break;
+      case "address1": c.address1 = e.target.value; break;
+      case "address2": c.address2 = e.target.value; break;
+      case "city": c.city = e.target.value; break;
+      case "state": c.state = e.target.value; break;
+      case "zip": c.zip = e.target.value; break;
+      case "country": c.country = e.target.value; break;
+    }
+    setChurch(c);
+  }
+
+  const validate = () => {
+    let errors = [];
+    if (!church.name?.trim()) errors.push("name cannot be blank.");
+    if (!church.subDomain?.trim()) errors.push("Subdomain cannot be blank.");
+    if (!church.address1?.trim()) errors.push("Address cannot be blank.");
+    if (!church.city?.trim()) errors.push("City cannot be blank.");
+    if (!church.state?.trim()) errors.push("State/Province cannot be blank.");
+    if (!church.zip?.trim()) errors.push("Zip/Postal cannot be blank.");
+    if (!church.country?.trim()) errors.push("Country cannot be blank.");
+    setErrors(errors);
+    return errors.length === 0;
+  }
+
+  const handleSave = () => {
+    if (validate()) {
+      setIsSubmitting(true);
+      ApiHelper.post("/churches/add", church, "MembershipApi").then(async resp => {
+        setIsSubmitting(false);
+        if (resp.errors !== undefined) setErrors(errors);
+        else {
+          if (props.registeredChurchCallback) props.registeredChurchCallback(resp);
+          props.selectChurch(resp.id);
+        }
+      });
+    }
+  }
+
+  /*<TextField required fullWidth name="subDomain" label="Subdomain" id="subDomain" InputProps={{
+    endAdornment: <InputAdornment position="end">.churchapps.org</InputAdornment>
+  }} value={church.subDomain} onChange={handleChange} />
+  */
+  return (
+    <InputBox id="churchBox" saveFunction={handleSave} headerText="Register a New Church" headerIcon="church" isSubmitting={isSubmitting}>
+      <ErrorMessages errors={errors} />
+      <TextField required fullWidth name="name" label="Church Name" value={church.name} onChange={handleChange} />
+
+      <TextField required fullWidth name="address1" label="Address Line 1" value={church.address1} onChange={handleChange} />
+      <Grid container spacing={3}>
+        <Grid item xs={6}><TextField fullWidth name="address2" label="Address Line 2" value={church.address2} onChange={handleChange} /></Grid>
+        <Grid item xs={6}><TextField required fullWidth name="city" label="City" value={church.city} onChange={handleChange} /></Grid>
+      </Grid>
+      <Grid container spacing={3}>
+        <Grid item xs={6}><TextField required fullWidth name="state" label="State / Province" value={church.state} onChange={handleChange} /></Grid>
+        <Grid item xs={6}><TextField required fullWidth name="zip" label="Zip / Postal" value={church.zip} onChange={handleChange} /></Grid>
+      </Grid>
+      <TextField required fullWidth name="country" label="Country" value={church.country} onChange={handleChange} />
+    </InputBox>
+  );
+};
+

package/src/pageComponents/components/SelectChurchSearch.tsx

@@ -0,0 +1,69 @@
+import { Button, TextField } from "@mui/material";
+import React from "react";
+import { ApiHelper } from "../../helpers"
+import { ChurchInterface } from "../../interfaces";
+import { SelectableChurch } from "./SelectableChurch";
+import { SelectChurchRegister } from "./SelectChurchRegister";
+
+interface Props {
+  selectChurch: (churchId: string) => void,
+  registeredChurchCallback?: (church: ChurchInterface) => void,
+  appName: string
+}
+
+export const SelectChurchSearch: React.FC<Props> = (props) => {
+  const [searchText, setSearchText] = React.useState("");
+  const [churches, setChurches] = React.useState<ChurchInterface[]>(null);
+  const [showRegister, setShowRegister] = React.useState(false);
+
+  const handleSubmit = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = escape(searchText.trim());
+    ApiHelper.post("/churches/search", { name: term }, "MembershipApi").then(data => setChurches(data));
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearchText(e.currentTarget.value);
+
+  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); } }
+
+  const handleRegisterClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (window.confirm("Are you sure you wish to register a new church?")) {
+      setShowRegister(true);
+    }
+  }
+
+  const getRegisterLink = () => (
+    <div>
+      <a style={{ display: "block", textAlign: "center" }} href="about:blank" onClick={handleRegisterClick}>
+        Register a New Church
+      </a>
+    </div>
+  )
+
+  const getChurches = () => {
+    const result: JSX.Element[] = [];
+    churches.forEach(church => {
+      result.push(<SelectableChurch church={church} selectChurch={props.selectChurch} />);
+    });
+    result.push(getRegisterLink());
+    return result;
+  }
+
+  const getResults = () => {
+    if (churches === null) return;
+    else if (churches.length === 0) return <><p>No matches found</p>{getRegisterLink()}</>
+    else return getChurches();
+  }
+
+  if (showRegister) return (<SelectChurchRegister selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} initialChurchName={searchText} />)
+  else return (
+    <>
+      <TextField fullWidth name="searchText" label="Name" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>Search</Button> }}
+      />
+      {getResults()}
+    </>
+
+  );
+};

package/src/pageComponents/components/SelectableChurch.tsx

@@ -0,0 +1,38 @@
+import { Grid } from "@mui/material";
+import React from "react";
+import { ArrayHelper } from "../../helpers"
+import { ChurchInterface, GenericSettingInterface } from "../../interfaces";
+
+interface Props {
+  selectChurch: (churchId: string) => void,
+  church: ChurchInterface
+}
+
+export const SelectableChurch: React.FC<Props> = (props) => {
+
+  let logo = "/images/logo.png";
+  if (props.church.settings) {
+    let l: GenericSettingInterface = ArrayHelper.getOne(props.church.settings, "keyName", "logoLight");
+    if (l?.value) logo = l.value;
+  }
+  return (
+    <Grid container spacing={3}>
+      <Grid item md={6} xs={12}>
+        <a href="about:blank" style={{ fontSize: "1.125rem", display: "block", marginTop: 15, marginBottom: 15 }} onClick={(e) => { e.preventDefault(); props.selectChurch(props.church.id) }}>
+          <img src={logo} alt="church logo" className="w-100 img-fluid" />
+        </a>
+      </Grid>
+      <Grid item md={6} xs={12}>
+        <div>
+          <a href="about:blank" style={{ fontSize: "1.125rem", display: "block" }} onClick={(e) => { e.preventDefault(); props.selectChurch(props.church.id) }}>{props.church.name}</a>
+          {(props.church.address1) && <div>{props.church.address1}</div>}
+          {(props.church.city || props.church.state) && <div>
+            {props.church.city && props.church.city + ", "}
+            {props.church.state}
+          </div>}
+        </div>
+      </Grid>
+      <span style={{ display: "block", width: "100%", borderTop: "1px solid #ccc", margin: "1rem" }}></span>
+    </Grid>
+  );
+};

package/src/pageComponents/index.ts

@@ -0,0 +1,3 @@
+export { LoginPage } from "./LoginPage";
+export { LogoutPage } from "./LogoutPage";
+export { Register } from "./components/Register";

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "typeRoots": [
+      "./types",
+      "node_modules/@types"
+    ],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "target": "es6",
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "outDir": "dist",
+    "baseUrl": ".",
+    "strict": false,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react",
+    "paths": {
+      "*": [
+        "node_modules/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*",
+  ]
+}

package/tslint.json

@@ -0,0 +1,15 @@
+{
+  "defaultSeverity": "error",
+  "extends": [
+      "tslint:recommended"
+  ],
+  "jsRules": {},
+  "rules": {
+      "trailing-comma": [
+          false
+      ],
+      "no-console": false,
+      "no-bitwise": false
+  },
+  "rulesDirectory": []
+}