@churchapps/apphelper 0.1.3 → 0.1.4

package/src/components/InputBox.tsx

@@ -1,73 +1,73 @@
-import React from "react";
-import { Paper, Box, Typography, Stack, styled, Button, Icon, PaperProps } from "@mui/material";
-import { HelpIcon } from "./HelpIcon";
-
-interface Props {
-  id?: string;
-  children?: React.ReactNode;
-  headerIcon?: string;
-  headerText?: string;
-  help?: string;
-  saveText?: string;
-  headerActionContent?: React.ReactNode;
-  cancelFunction?: () => void;
-  deleteFunction?: () => void;
-  saveFunction: () => void;
-  "data-cy"?: string;
-  className?: string;
-  isSubmitting?: boolean;
-  ariaLabelDelete?: string;
-  ariaLabelSave?: string;
-  saveButtonType?: "submit" | "button";
-  mainContainerCssProps?: PaperProps;
-}
-
-const CustomContextBox = styled(Box)({
-  marginTop: 10,
-  overflowX: "hidden",
-  "& p": { color: "#666" },
-  "& label": { color: "#999" },
-  "& ul": { paddingLeft: 15 },
-  "& li": {
-    marginBottom: 10,
-    "& i": { marginRight: 5 }
-  },
-  "& td": {
-    "& i": { marginRight: 5 }
-  }
-})
-
-export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
-  let buttons = [];
-  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>Cancel</Button>);
-  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>Delete</Button>);
-  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || "save"}</Button>);
-
-  let classNames = ["inputBox"];
-  if (props.className) {
-    classNames.push(props.className);
-  }
-
-  return (
-    <Paper id={props.id} sx={{ padding: 2, marginBottom: 4 }} data-cy={props["data-cy"]} {...mainContainerCssProps}>
-      {props.help && <HelpIcon article={props.help} />}
-      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-cy="header">
-        <Box sx={{ display: "flex", alignItems: "center" }}>
-          {props.headerIcon && <Icon sx={{ color: "#1976d2" }}>{props.headerIcon}</Icon>}
-          {props.headerText && (
-            <Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color="primary">
-              {props.headerText}
-            </Typography>
-          )}
-        </Box>
-        <Box>
-          {props.headerActionContent}
-        </Box>
-      </Box>
-      <CustomContextBox>{props.children}</CustomContextBox>
-      <Stack direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
-        {buttons}
-      </Stack>
-    </Paper>
-  );
-}
+import React from "react";
+import { Paper, Box, Typography, Stack, styled, Button, Icon, PaperProps } from "@mui/material";
+import { HelpIcon } from "./HelpIcon";
+
+interface Props {
+  id?: string;
+  children?: React.ReactNode;
+  headerIcon?: string;
+  headerText?: string;
+  help?: string;
+  saveText?: string;
+  headerActionContent?: React.ReactNode;
+  cancelFunction?: () => void;
+  deleteFunction?: () => void;
+  saveFunction: () => void;
+  "data-cy"?: string;
+  className?: string;
+  isSubmitting?: boolean;
+  ariaLabelDelete?: string;
+  ariaLabelSave?: string;
+  saveButtonType?: "submit" | "button";
+  mainContainerCssProps?: PaperProps;
+}
+
+const CustomContextBox = styled(Box)({
+  marginTop: 10,
+  overflowX: "hidden",
+  "& p": { color: "#666" },
+  "& label": { color: "#999" },
+  "& ul": { paddingLeft: 15 },
+  "& li": {
+    marginBottom: 10,
+    "& i": { marginRight: 5 }
+  },
+  "& td": {
+    "& i": { marginRight: 5 }
+  }
+})
+
+export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
+  let buttons = [];
+  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>Cancel</Button>);
+  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>Delete</Button>);
+  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || "save"}</Button>);
+
+  let classNames = ["inputBox"];
+  if (props.className) {
+    classNames.push(props.className);
+  }
+
+  return (
+    <Paper id={props.id} sx={{ padding: 2, marginBottom: 4 }} data-cy={props["data-cy"]} {...mainContainerCssProps}>
+      {props.help && <HelpIcon article={props.help} />}
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-cy="header">
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          {props.headerIcon && <Icon sx={{ color: "#1976d2" }}>{props.headerIcon}</Icon>}
+          {props.headerText && (
+            <Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color="primary">
+              {props.headerText}
+            </Typography>
+          )}
+        </Box>
+        <Box>
+          {props.headerActionContent}
+        </Box>
+      </Box>
+      <CustomContextBox>{props.children}</CustomContextBox>
+      <Stack direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
+        {buttons}
+      </Stack>
+    </Paper>
+  );
+}

package/src/components/Loading.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { Dots } from "react-activity";
-import "react-activity/dist/library.css";
-
-interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
-
-export const Loading: React.FC<Props> = (props) => {
-
-  const getContents = () => {
-    const text = (props.loadingText) ? props.loadingText : "Loading"
-    const color = (props.color) ? props.color : "#222"
-    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
-    switch (props.size) {
-      case "sm":
-        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
-        break;
-      case "lg":
-        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
-        break;
-    }
-    return result;
-  }
-
-  return (
-    <div style={{ textAlign: "center", fontFamily: "Roboto" }}>
-      {getContents()}
-    </div>
-  )
-}
+import React from "react";
+import { Dots } from "react-activity";
+import "react-activity/dist/library.css";
+
+interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
+
+export const Loading: React.FC<Props> = (props) => {
+
+  const getContents = () => {
+    const text = (props.loadingText) ? props.loadingText : "Loading"
+    const color = (props.color) ? props.color : "#222"
+    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
+    switch (props.size) {
+      case "sm":
+        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
+        break;
+      case "lg":
+        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
+        break;
+    }
+    return result;
+  }
+
+  return (
+    <div style={{ textAlign: "center", fontFamily: "Roboto" }}>
+      {getContents()}
+    </div>
+  )
+}

package/src/components/PersonAdd.tsx

@@ -1,75 +1,75 @@
-import React, { useState } from "react";
-import { ApiHelper } from "../helpers";
-import { PersonInterface } from "../interfaces"
-import { TextField, Button, Table, TableBody, TableRow, TableCell } from "@mui/material";
-import { SmallButton } from "./SmallButton";
-import { CreatePerson } from "./CreatePerson";
-
-interface Props {
-  addFunction: (person: PersonInterface) => void;
-  person?: PersonInterface;
-  getPhotoUrl: (person: PersonInterface) => string;
-  searchClicked?: () => void;
-  filterList?: string[];
-  includeEmail?: boolean;
-  actionLabel?: string;
-  showCreatePersonOnNotFound?: boolean;
-}
-
-export const PersonAdd: React.FC<Props> = ({ addFunction, getPhotoUrl, searchClicked, filterList = [], includeEmail = false, actionLabel, showCreatePersonOnNotFound = false }) => {
-  const [searchResults, setSearchResults] = useState<PersonInterface[]>([]);
-  const [searchText, setSearchText] = useState("");
-  const [hasSearched, setHasSearched] = useState<boolean>(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setHasSearched(false); setSearchText(e.currentTarget.value); }
-  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSearch(null); } }
-
-  const handleSearch = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = searchText.trim();
-    ApiHelper.post("/people/search", { term: term }, "MembershipApi")
-      .then((data: PersonInterface[]) => {
-        setHasSearched(true);
-        const filteredResult = data.filter(s => !filterList.includes(s.id))
-        setSearchResults(filteredResult);
-        if (searchClicked) {
-          searchClicked();
-        }
-      });
-  }
-  const handleAdd = (person: PersonInterface) => {
-    let sr: PersonInterface[] = [...searchResults];
-    const idx = sr.indexOf(person);
-    sr.splice(idx, 1);
-    setSearchResults(sr);
-    addFunction(person);
-  }
-
-  //<button className="text-success no-default-style" aria-label="addPerson" data-index={i} onClick={handleAdd}><Icon>person</Icon> Add</button>
-  let rows = [];
-  for (let i = 0; i < searchResults.length; i++) {
-    const sr = searchResults[i];
-
-    rows.push(
-      <TableRow key={sr.id}>
-        <TableCell><img src={getPhotoUrl(sr)} alt="avatar" /></TableCell>
-        <TableCell>{sr.name.display}{includeEmail && (<><br /><i style={{ color: "#999" }}>{sr.contactInfo.email}</i></>)}</TableCell>
-        <TableCell>
-          <SmallButton color="success" icon="person" text={actionLabel || "Add"} ariaLabel="addPerson" onClick={() => handleAdd(sr)} />
-        </TableCell>
-      </TableRow>
-    );
-  }
-
-  return (
-    <>
-      <TextField fullWidth name="personAddText" label="Person" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
-      />
-      {showCreatePersonOnNotFound && hasSearched && searchText && searchResults.length === 0 && (
-        <CreatePerson navigateOnCreate={false} onCreate={person => { setSearchText(""); setSearchResults([person]) }} />
-      )}
-      <Table size="small" id="householdMemberAddTable"><TableBody>{rows}</TableBody></Table>
-    </>
-  );
-}
+import React, { useState } from "react";
+import { ApiHelper } from "../helpers";
+import { PersonInterface } from "../interfaces"
+import { TextField, Button, Table, TableBody, TableRow, TableCell } from "@mui/material";
+import { SmallButton } from "./SmallButton";
+import { CreatePerson } from "./CreatePerson";
+
+interface Props {
+  addFunction: (person: PersonInterface) => void;
+  person?: PersonInterface;
+  getPhotoUrl: (person: PersonInterface) => string;
+  searchClicked?: () => void;
+  filterList?: string[];
+  includeEmail?: boolean;
+  actionLabel?: string;
+  showCreatePersonOnNotFound?: boolean;
+}
+
+export const PersonAdd: React.FC<Props> = ({ addFunction, getPhotoUrl, searchClicked, filterList = [], includeEmail = false, actionLabel, showCreatePersonOnNotFound = false }) => {
+  const [searchResults, setSearchResults] = useState<PersonInterface[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [hasSearched, setHasSearched] = useState<boolean>(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setHasSearched(false); setSearchText(e.currentTarget.value); }
+  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSearch(null); } }
+
+  const handleSearch = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = searchText.trim();
+    ApiHelper.post("/people/search", { term: term }, "MembershipApi")
+      .then((data: PersonInterface[]) => {
+        setHasSearched(true);
+        const filteredResult = data.filter(s => !filterList.includes(s.id))
+        setSearchResults(filteredResult);
+        if (searchClicked) {
+          searchClicked();
+        }
+      });
+  }
+  const handleAdd = (person: PersonInterface) => {
+    let sr: PersonInterface[] = [...searchResults];
+    const idx = sr.indexOf(person);
+    sr.splice(idx, 1);
+    setSearchResults(sr);
+    addFunction(person);
+  }
+
+  //<button className="text-success no-default-style" aria-label="addPerson" data-index={i} onClick={handleAdd}><Icon>person</Icon> Add</button>
+  let rows = [];
+  for (let i = 0; i < searchResults.length; i++) {
+    const sr = searchResults[i];
+
+    rows.push(
+      <TableRow key={sr.id}>
+        <TableCell><img src={getPhotoUrl(sr)} alt="avatar" /></TableCell>
+        <TableCell>{sr.name.display}{includeEmail && (<><br /><i style={{ color: "#999" }}>{sr.contactInfo.email}</i></>)}</TableCell>
+        <TableCell>
+          <SmallButton color="success" icon="person" text={actionLabel || "Add"} ariaLabel="addPerson" onClick={() => handleAdd(sr)} />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <>
+      <TextField fullWidth name="personAddText" label="Person" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
+      />
+      {showCreatePersonOnNotFound && hasSearched && searchText && searchResults.length === 0 && (
+        <CreatePerson navigateOnCreate={false} onCreate={person => { setSearchText(""); setSearchResults([person]) }} />
+      )}
+      <Table size="small" id="householdMemberAddTable"><TableBody>{rows}</TableBody></Table>
+    </>
+  );
+}

package/src/components/QuestionEdit.tsx

@@ -1,63 +1,63 @@
-import React from "react";
-import { MuiTelInput } from "mui-tel-input";
-import { AnswerInterface, QuestionInterface } from "../interfaces";
-import { Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField } from "@mui/material";
-
-interface Props {
-  answer: AnswerInterface
-  question: QuestionInterface,
-  noBackground?: boolean,
-  changeFunction: (questionId: string, value: string) => void
-}
-
-export const QuestionEdit: React.FC<Props> = ({noBackground = false, ...props}) => {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    props.changeFunction(props.question.id, e.target.value);
-  }
-  let q = props.question;
-
-  if (q.fieldType === "Heading") return <h5>{q.title}</h5>;
-  else {
-    let input = null;
-    let choiceOptions = [];
-    if (q.choices !== undefined && q.choices !== null) {
-      for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
-    }
-
-    let answerValue = (props.answer === null) ? "" : props.answer.value
-    switch (q.fieldType) {
-      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Multiple Choice": {
-        input = (
-          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
-            <InputLabel>{q.title}</InputLabel>
-            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>{choiceOptions}</Select>
-          </FormControl>);
-        break;
-      }
-      case "Yes/No": {
-        input = (
-          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
-            <InputLabel>{q.title}</InputLabel>
-            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>
-              <MenuItem value="False">No</MenuItem>
-              <MenuItem value="True">Yes</MenuItem>
-            </Select>
-          </FormControl>);
-        break;
-      }
-      case "Whole Number":
-      case "Decimal":
-        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{shrink: true}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />;
-        break;
-      case "Date": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="date" InputLabelProps={{shrink: true}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} label={q.title} placeholder="" value={answerValue} onChange={(value) => { props.changeFunction(props.question.id, value); }} defaultCountry="US" focusOnSelectCountry />; break;
-      case "Email": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="email" label={q.title} placeholder="john@doe.com" value={answerValue} onChange={handleChange} />; break;
-      case "Text Area": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} multiline rows={4} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      default: return null;
-    }
-    return input;
-  }
-
-}
-
+import React from "react";
+import { MuiTelInput } from "mui-tel-input";
+import { AnswerInterface, QuestionInterface } from "../interfaces";
+import { Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField } from "@mui/material";
+
+interface Props {
+  answer: AnswerInterface
+  question: QuestionInterface,
+  noBackground?: boolean,
+  changeFunction: (questionId: string, value: string) => void
+}
+
+export const QuestionEdit: React.FC<Props> = ({noBackground = false, ...props}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    props.changeFunction(props.question.id, e.target.value);
+  }
+  let q = props.question;
+
+  if (q.fieldType === "Heading") return <h5>{q.title}</h5>;
+  else {
+    let input = null;
+    let choiceOptions = [];
+    if (q.choices !== undefined && q.choices !== null) {
+      for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
+    }
+
+    let answerValue = (props.answer === null) ? "" : props.answer.value
+    switch (q.fieldType) {
+      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Multiple Choice": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>{choiceOptions}</Select>
+          </FormControl>);
+        break;
+      }
+      case "Yes/No": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>
+              <MenuItem value="False">No</MenuItem>
+              <MenuItem value="True">Yes</MenuItem>
+            </Select>
+          </FormControl>);
+        break;
+      }
+      case "Whole Number":
+      case "Decimal":
+        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{shrink: true}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />;
+        break;
+      case "Date": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="date" InputLabelProps={{shrink: true}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} label={q.title} placeholder="" value={answerValue} onChange={(value) => { props.changeFunction(props.question.id, value); }} defaultCountry="US" focusOnSelectCountry />; break;
+      case "Email": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="email" label={q.title} placeholder="john@doe.com" value={answerValue} onChange={handleChange} />; break;
+      case "Text Area": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} multiline rows={4} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      default: return null;
+    }
+    return input;
+  }
+
+}
+

package/src/components/SmallButton.tsx

@@ -1,39 +1,39 @@
-import React from "react";
-import { Button, Icon, Tooltip } from "@mui/material";
-import { Navigate } from "react-router-dom";
-
-interface Props {
-  ariaLabel?: string;
-  text?: string;
-  icon: string;
-  color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
-  toolTip?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  href?: string;
-  disabled?: boolean
-}
-
-export const SmallButton = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const [redirectUrl, setRedirectUrl] = React.useState("");
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (props.href) setRedirectUrl(props.href);
-    else props.onClick(e);
-  }
-
-  const style = (props.text)
-    ? { backgroundColor: props.color, "& span": { marginRight: 1 } }
-    : { minWidth: "auto", padding: "4px 4px" }
-
-  if (redirectUrl) return <Navigate to={redirectUrl} />
-  else return (
-    <Tooltip title={props.toolTip || ""} arrow placement="top">
-      <Button sx={style} disabled={props.disabled} variant={props.text ? "outlined" : "text"} color={props.color} aria-label={props.ariaLabel || "editButton"} onClick={handleClick} size="small">
-        <Icon>{props.icon}</Icon>{(props.text) ? props.text : ""}
-      </Button>
-    </Tooltip>
-  );
-});
-
-SmallButton.displayName = "SmallButton";
+import React from "react";
+import { Button, Icon, Tooltip } from "@mui/material";
+import { Navigate } from "react-router-dom";
+
+interface Props {
+  ariaLabel?: string;
+  text?: string;
+  icon: string;
+  color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+  toolTip?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  href?: string;
+  disabled?: boolean
+}
+
+export const SmallButton = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const [redirectUrl, setRedirectUrl] = React.useState("");
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (props.href) setRedirectUrl(props.href);
+    else props.onClick(e);
+  }
+
+  const style = (props.text)
+    ? { backgroundColor: props.color, "& span": { marginRight: 1 } }
+    : { minWidth: "auto", padding: "4px 4px" }
+
+  if (redirectUrl) return <Navigate to={redirectUrl} />
+  else return (
+    <Tooltip title={props.toolTip || ""} arrow placement="top">
+      <Button sx={style} disabled={props.disabled} variant={props.text ? "outlined" : "text"} color={props.color} aria-label={props.ariaLabel || "editButton"} onClick={handleClick} size="small">
+        <Icon>{props.icon}</Icon>{(props.text) ? props.text : ""}
+      </Button>
+    </Tooltip>
+  );
+});
+
+SmallButton.displayName = "SmallButton";

package/src/components/SupportModal.tsx

@@ -1,26 +1,26 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
-import React from "react";
-
-interface Props {
-  appName?: string
-  onClose: () => void
-}
-
-export const SupportModal: React.FC<Props> = ({ appName = "", onClose }) => {
-  const subject = appName ? `?subject=${appName} Support` : ""
-
-  return (<>
-    <Dialog open={true} onClose={onClose}>
-      <DialogTitle>Get Support</DialogTitle>
-      <DialogContent>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>mail</Icon> Email:</Stack></b> <a href={"mailto:support@livecs.org" + subject}>support@livecs.org</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>phone_iphone</Icon> Phone:</Stack></b> <a href="tel:+19189942638">+1 (918) 994-2638</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> Messenger:</Stack></b> <a href="https://m.me/livecsolutions" target="_new">https://m.me/livecsolutions</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> Knowledge Base:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
-      </DialogContent>
-      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
-        <Button variant="outlined" onClick={onClose}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  </>);
-};
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
+import React from "react";
+
+interface Props {
+  appName?: string
+  onClose: () => void
+}
+
+export const SupportModal: React.FC<Props> = ({ appName = "", onClose }) => {
+  const subject = appName ? `?subject=${appName} Support` : ""
+
+  return (<>
+    <Dialog open={true} onClose={onClose}>
+      <DialogTitle>Get Support</DialogTitle>
+      <DialogContent>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>mail</Icon> Email:</Stack></b> <a href={"mailto:support@livecs.org" + subject}>support@livecs.org</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>phone_iphone</Icon> Phone:</Stack></b> <a href="tel:+19189942638">+1 (918) 994-2638</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> Messenger:</Stack></b> <a href="https://m.me/livecsolutions" target="_new">https://m.me/livecsolutions</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> Knowledge Base:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
+      </DialogContent>
+      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+        <Button variant="outlined" onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  </>);
+};