@churchapps/apphelper 0.1.0 → 0.1.1

package/src/pageComponents/components/SelectChurchModal.tsx

@@ -1,41 +1,41 @@
-import React from "react";
-import { ChurchInterface, LoginUserChurchInterface } from "../../interfaces";
-import { SelectChurchSearch } from "./SelectChurchSearch";
-import { SelectableChurch } from "./SelectableChurch";
-import { ErrorMessages } from "../../components"
-import { Dialog, DialogContent, DialogTitle } from "@mui/material";
-
-interface Props {
-  appName: string,
-  show: boolean,
-  userChurches?: LoginUserChurchInterface[],
-  selectChurch: (churchId: string) => void,
-  registeredChurchCallback?: (church: ChurchInterface) => void,
-  errors?: string[]
-}
-
-export const SelectChurchModal: React.FC<Props> = (props) => {
-  const [showSearch, setShowSearch] = React.useState(false);
-
-  const handleClose = () => {
-    window.location.reload();
-  }
-
-  const getContents = () => {
-    if (showSearch || props.userChurches?.length === 0) return <SelectChurchSearch selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} />
-    else return (<>
-      {props.userChurches?.map(uc => (<SelectableChurch church={uc.church} selectChurch={props.selectChurch} key={uc.church.id} />))}
-      <a href="about:blank" style={{ display: "block", textAlign: "center" }} onClick={(e) => { e.preventDefault(); setShowSearch(true); }}>Choose another church</a>
-    </>);
-  }
-
-  return (
-    <Dialog open={props.show} onClose={handleClose}>
-      <DialogTitle>Select Church</DialogTitle>
-      <DialogContent sx={{ width: 500, maxWidth: "100%" }}>
-        <ErrorMessages errors={props.errors} />
-        {getContents()}
-      </DialogContent>
-    </Dialog>
-  );
-};
+import React from "react";
+import { ChurchInterface, LoginUserChurchInterface } from "../../interfaces";
+import { SelectChurchSearch } from "./SelectChurchSearch";
+import { SelectableChurch } from "./SelectableChurch";
+import { ErrorMessages } from "../../components"
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+
+interface Props {
+  appName: string,
+  show: boolean,
+  userChurches?: LoginUserChurchInterface[],
+  selectChurch: (churchId: string) => void,
+  registeredChurchCallback?: (church: ChurchInterface) => void,
+  errors?: string[]
+}
+
+export const SelectChurchModal: React.FC<Props> = (props) => {
+  const [showSearch, setShowSearch] = React.useState(false);
+
+  const handleClose = () => {
+    window.location.reload();
+  }
+
+  const getContents = () => {
+    if (showSearch || props.userChurches?.length === 0) return <SelectChurchSearch selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} />
+    else return (<>
+      {props.userChurches?.map(uc => (<SelectableChurch church={uc.church} selectChurch={props.selectChurch} key={uc.church.id} />))}
+      <a href="about:blank" style={{ display: "block", textAlign: "center" }} onClick={(e) => { e.preventDefault(); setShowSearch(true); }}>Choose another church</a>
+    </>);
+  }
+
+  return (
+    <Dialog open={props.show} onClose={handleClose}>
+      <DialogTitle>Select Church</DialogTitle>
+      <DialogContent sx={{ width: 500, maxWidth: "100%" }}>
+        <ErrorMessages errors={props.errors} />
+        {getContents()}
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/pageComponents/components/SelectChurchRegister.tsx

@@ -1,88 +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>
-  );
-};
-
+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

@@ -1,69 +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()}
-    </>
-
-  );
-};
+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

@@ -1,38 +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>
-  );
-};
+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

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

package/tsconfig.json

@@ -1,35 +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/**/*",
-  ]
+{
+  "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

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