@churchapps/apphelper 0.0.1

package/src/components/CreatePerson.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { UserHelper, ApiHelper } from "../helpers";
+import { Permissions, PersonInterface, HouseholdInterface } from "../interfaces";
+import { Button, Grid, TextField } from "@mui/material"
+import { ErrorMessages } from "./ErrorMessages"
+import { useMountedState } from "../hooks/useMountedState"
+
+interface Props {
+  navigateOnCreate?: boolean;
+  onCreate?: (person: PersonInterface) => void;
+}
+
+export function CreatePerson({ navigateOnCreate = true, onCreate = () => {} }: Props) {
+  const navigate = useNavigate()
+  const [person, setPerson] = React.useState<PersonInterface>({ name: { first: "", last: "" }, contactInfo: {} });
+  const [errors, setErrors] = React.useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const isMounted = useMountedState()
+
+  const validate = () => {
+    const result = [];
+    if (!person.name?.first) result.push("Please enter a first name.");
+    if (!person.name?.last) result.push("Please enter a last name.");
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setErrors([]);
+    const p = { ...person } as PersonInterface;
+    let value = e.target.value;
+    switch (e.target.name) {
+      case "first": p.name.first = value; break;
+      case "last": p.name.last = value; break;
+    }
+    setPerson(p);
+  }
+
+  function handleSubmit() {
+    let household = { name: person.name.last } as HouseholdInterface;
+    if (validate()) {
+      setIsSubmitting(true);
+      ApiHelper.post("/households", [household], "MembershipApi").then(data => {
+        household.id = data[0].id;
+        person.householdId = household.id;
+        person.name.display = [person.name.first, person.name.last].join(" ");
+        ApiHelper.post("/people", [person], "MembershipApi").then(data => {
+          person.id = data[0].id
+          onCreate(person);
+          setPerson({...person, name: { first: "", last: "" }});
+          navigateOnCreate && navigate("/people/" + person.id);
+        }).finally(() => {
+          if (isMounted()) {
+            setIsSubmitting(false);
+          }
+        });
+      });
+    }
+  }
+
+  if (!UserHelper.checkAccess(Permissions.membershipApi.people.edit)) return null;
+  return (
+    <div>
+      <p className="pl-1 mb-3 text-dark"><b>Add a New Person</b></p>
+      <ErrorMessages errors={errors} />
+      <Grid container spacing={3} alignItems="center">
+        <Grid item md={4} xs={12}>
+          <TextField size="small" margin="none" fullWidth type="text" aria-label="firstName" label="First Name" name="first" value={person.name.first || ""} onChange={handleChange} onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleSubmit} />
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <TextField size="small" margin="none" fullWidth type="text" aria-label="lastName" label="Last Name" name="last" value={person.name.last || ""} onChange={handleChange} onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleSubmit} />
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <Button type="submit" fullWidth variant="contained" disabled={isSubmitting} onClick={handleSubmit}>Add</Button>
+        </Grid>
+      </Grid>
+    </div>
+  )
+}

package/src/components/DisplayBox.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Paper, Box, Typography, styled, Icon } from "@mui/material";
+import { HelpIcon } from "./HelpIcon";
+import { SmallButton } from "./SmallButton";
+
+interface Props {
+  id?: string,
+  children: React.ReactNode,
+  headerIcon?: string,
+  headerText: string,
+  editFunction?: () => void,
+  editContent?: React.ReactNode,
+  "data-cy"?: string,
+  ariaLabel?: string,
+  footerContent?: React.ReactNode,
+  help?: string
+}
+
+/* "& p": { color: "#666" }, */
+const CustomContextBox = styled(Box)({
+  marginTop: 10,
+  overflowX: "hidden",
+  "& label": { color: "#999" },
+  "& ul": { paddingLeft: 0 },
+  "& li": {
+    listStyleType: "none",
+    marginBottom: 10,
+    "& i": { marginRight: 5 }
+  },
+  "& td": {
+    "& i": { marginRight: 5 }
+  },
+  "& td:first-of-type": { paddingLeft: 0 },
+  "& td:last-of-type": { paddingRight: 0 },
+  "& th:first-of-type": { paddingLeft: 0 },
+  "& th:last-of-type": { paddingRight: 0 }
+});
+
+export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+
+  let editContent: React.ReactNode;
+  if (props.editFunction !== undefined) {
+    editContent = <SmallButton icon="edit" aria-label={props.ariaLabel || "editButton"} onClick={props.editFunction} />
+  }
+  else if (props.editContent !== undefined) editContent = props.editContent;
+
+  return (
+    <Paper sx={{ padding: 2, marginBottom: 4 }} id={props.id} data-cy={props["data-cy"] || ""}>
+      {props.help && <HelpIcon article={props.help} />}
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          {props.headerIcon && <Icon sx={{ color: "#1976d2" }}>{props.headerIcon}</Icon>}
+          <Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color="primary">
+            {props.headerText}
+          </Typography>
+
+        </Box>
+        <Box>
+          {editContent}
+        </Box>
+      </Box>
+      <CustomContextBox ref={ref} data-cy="content">{props.children}</CustomContextBox>
+      {props.footerContent && (<div style={{ marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 }}>{props.footerContent}</div>)}
+    </Paper>
+  );
+})
+
+DisplayBox.displayName = "DisplayBox";

package/src/components/ErrorMessages.tsx

@@ -0,0 +1,26 @@
+import { Alert, Snackbar } from "@mui/material";
+import React, { useEffect } from "react";
+
+interface Props { errors: string[] }
+
+export const ErrorMessages: React.FC<Props> = props => {
+  const [open, setOpen] = React.useState(false);
+  let [items, setItems] = React.useState([]);
+
+  useEffect(() => {
+    if (props.errors.length > 0) {
+      let _items = [];
+      for (let i = 0; i < props.errors.length; i++) {
+        _items.push(<div key={i}>{props.errors[i]}</div>);
+      }
+      setItems(_items);
+      setOpen(true);
+    }
+  }, [props.errors]);
+
+  let result = (<Snackbar open={open} anchorOrigin={{ horizontal: "center", vertical: "bottom" }} autoHideDuration={6000} onClose={() => setOpen(false)}>
+    <Alert variant="filled" severity="error">{items}</Alert>
+  </Snackbar>);
+
+  return result;
+}

package/src/components/ExportLink.tsx

@@ -0,0 +1,61 @@
+import { Button, Icon } from "@mui/material";
+import React from "react";
+import { CSVLink } from "react-csv";
+
+interface Props {
+  data: any[],
+  spaceAfter?: boolean,
+  spaceBefore?: boolean,
+  filename?: string
+}
+
+export const ExportLink: React.FC<Props> = (props) => {
+
+  const getHeaders = () => {
+    let result = [];
+    if (props.data?.length > 0) {
+      let names = getAllPropertyNames();
+      for (let i = 0; i < names.length; i++) { result.push({ label: names[i], key: names[i] }); }
+    }
+    return result;
+  }
+
+  const getAllPropertyNames = () => {
+    let result = [];
+    for (let i = 0; i < props.data.length; i++) {
+      let propertyNames = getPropertyNames("", props.data[i]);
+      for (let j = 0; j < propertyNames.length; j++) if (result.indexOf(propertyNames[j]) === -1) result.push(propertyNames[j]);
+    }
+    return result.sort();
+  }
+
+  const getPropertyNames = (prefix: string, obj: any) => {
+    let result = [];
+    let names = Object.getOwnPropertyNames(obj)
+    for (let i = 0; i < names.length; i++) {
+      let t = typeof obj[names[i]];
+      switch (t) {
+        case "number":
+        case "string":
+        case "boolean":
+          result.push(prefix + names[i]);
+          break;
+        case "object":
+          if ((obj[names[i]] !== null)) {
+            let children: string[] = getPropertyNames(prefix + names[i] + ".", obj[names[i]]);
+            for (let j = 0; j < children.length; j++) result.push(children[j]);
+          }
+      }
+    }
+    return result;
+  }
+
+  if (!props.data || props.data?.length === 0) return null;
+  else {
+    let items = [];
+    if (props.spaceBefore) items.push(" ");
+    items.push(<CSVLink key={props.filename} data={props.data} headers={getHeaders()} filename={props.filename || "export.csv"}> <Button><Icon>file_download</Icon></Button></CSVLink>);
+    if (props.spaceAfter) items.push(" ");
+    return (<>{items}</>);
+  }
+}

package/src/components/FloatingSupport.tsx

@@ -0,0 +1,16 @@
+import { Fab, Icon } from "@mui/material";
+import React from "react";
+import { SupportModal } from "./SupportModal";
+
+interface Props { appName?: string }
+
+export const FloatingSupport: React.FC<Props> = (props) => {
+  const [showSupport, setShowSupport] = React.useState(false);
+
+  return (<>
+    <Fab color="primary" style={{ position: "fixed", cursor: "pointer", bottom: "20px", right: (showSupport) ? 47 : 30 }} onClick={() => { setShowSupport(!showSupport) }} aria-label="Support">
+      <Icon style={{ fontSize: 40 }}>contact_support</Icon>
+    </Fab>
+    {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
+  </>);
+};

package/src/components/FormSubmissionEdit.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { ErrorMessages, InputBox, QuestionEdit } from "./";
+import { ApiHelper, UniqueIdHelper, UserHelper } from "../helpers";
+import { AnswerInterface, QuestionInterface, FormSubmissionInterface } from "../interfaces";
+
+interface Props {
+  addFormId: string,
+  contentType: string,
+  contentId: string,
+  formSubmissionId: string,
+  unRestrictedFormId?: string,
+  personId?: string,
+  churchId?: string,
+  showHeader?: boolean,
+  noBackground?:boolean,
+  updatedFunction: () => void,
+  cancelFunction?: () => void,
+  sendEmail?: boolean,
+}
+
+export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackground = false, sendEmail = false, ...props}) => {
+  const [formSubmission, setFormSubmission] = React.useState(null);
+  const [errors, setErrors] = React.useState([]);
+
+  const getDeleteFunction = () => (!UniqueIdHelper.isMissing(formSubmission?.id)) ? handleDelete : undefined
+  const handleDelete = () => {
+    if (window.confirm("Are you sure you wish to delete this form data?")) {
+      ApiHelper.delete("/formsubmissions/" + formSubmission.id, "MembershipApi").then(() => {
+        props.updatedFunction();
+      });
+    }
+  }
+
+  const getAnswer = (questionId: string) => {
+    let answers = formSubmission.answers;
+    for (let i = 0; i < answers.length; i++) if (answers[i].questionId === questionId) return answers[i];
+    return null;
+  }
+
+  const setFormSubmissionData = (data: any) => {
+    const formId = props.addFormId || props.unRestrictedFormId;
+    let fs: FormSubmissionInterface = {
+      formId, contentType: props.contentType, contentId: props.contentId, answers: []
+    };
+    fs.questions = data;
+    fs.answers = [];
+    fs.questions.forEach((q) => {
+      let answer: AnswerInterface = { formSubmissionId: fs.id, questionId: q.id, required: q.required };
+      answer.value = getDefaultValue(q);
+      fs.answers.push(answer);
+    });
+    setFormSubmission(fs);
+  }
+
+  const loadData = () => {
+    console.log("loadData", "fs", props.formSubmissionId, "af", props.addFormId, props.unRestrictedFormId)
+    if (!UniqueIdHelper.isMissing(props.formSubmissionId)) ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then(data => setFormSubmission(data));
+    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then(data => setFormSubmissionData(data));
+    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then(data => setFormSubmissionData(data));
+  }
+
+  const getDefaultValue = (q: QuestionInterface) => {
+    let result = "";
+    if (q.fieldType === "Yes/No") result = "False";
+    else if (q.fieldType === "Multiple Choice") {
+      if (q.choices !== undefined && q.choices !== null && q.choices.length > 0) result = q.choices[0].value;
+    }
+    return result;
+  }
+
+  const handleSave = () => {
+    const fs = formSubmission;
+    fs.churchId = UserHelper.currentUserChurch.church.id;
+    fs.submittedBy = props.personId || null;
+    fs.submissionDate = new Date();
+    fs.churchId = props.churchId || null;
+    let e: any = [];
+    fs.answers.forEach((a: AnswerInterface) => {
+
+      if (a.required && a.value === "") {
+        const q = fs.questions.find((q: QuestionInterface) => q.id === a.questionId);
+        e.push(q.title + " is required");
+        setErrors(e);
+      }
+    });
+    if (!e.length) ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res) => {
+      if (res?.[0]?.error) {
+        setErrors([res?.[0].error]);
+      } else {
+        props.updatedFunction();
+      }
+    });
+  }
+
+  const handleChange = (questionId: string, value: string) => {
+    let fs = { ...formSubmission };
+    let answer: AnswerInterface = null;
+    for (let i = 0; i < fs.answers.length; i++) if (fs.answers[i].questionId === questionId) answer = fs.answers[i];
+    if (answer !== null) answer.value = value;
+    else {
+      answer = { formSubmissionId: fs.id, questionId: questionId, value: value };
+      fs.answers.push(answer);
+    }
+    setFormSubmission(fs);
+  }
+
+  React.useEffect(loadData, []); //eslint-disable-line
+
+  let questionList = [];
+  if (formSubmission != null) {
+    let questions = formSubmission.questions;
+    for (let i = 0; i < questions.length; i++) questionList.push(<QuestionEdit noBackground={noBackground} key={questions[i].id} question={questions[i]} answer={getAnswer(questions[i].id)} changeFunction={handleChange} />);
+  }
+
+  return (
+    <InputBox id="formSubmissionBox" headerText={showHeader ? (formSubmission?.form?.name || "Edit Form") : ""} headerIcon={showHeader ? "person" : ""} mainContainerCssProps={noBackground ? { sx: {backgroundColor: "transparent", boxShadow: 0}}: {}} saveFunction={handleSave} cancelFunction={props.cancelFunction} deleteFunction={getDeleteFunction()}>
+      <ErrorMessages errors={errors} />
+      {questionList}
+    </InputBox>
+  );
+}
+

package/src/components/HelpIcon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { SmallButton } from "./SmallButton";
+
+interface Props { article: string; }
+
+export const HelpIcon = (props: Props) => (
+  <span style={{ float: "right", color: "#1976d2" }}>
+    <SmallButton icon="help" aria-label={"help"} onClick={() => window.open("https://support.churchapps.org/" + props.article, "_blank")} />
+  </span>
+)

package/src/components/ImageEditor.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect, useRef } from "react";
+import Cropper from "react-cropper";
+import "cropperjs/dist/cropper.css";
+import { InputBox, SmallButton } from ".";
+
+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: any = null;
+
+  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;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const url = reader.result.toString();
+      setPhotoSrc(url);
+      setCroppedImageDataUrl(url);
+      setTimeout(selectDefaultCropZone, 500);
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  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 = 0;
+        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;
+
+        const url = cropper.getCroppedCanvas({ width: props.outputWidth || 400, height: props.outputHeight || 300 }).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="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>
+      }
+    >
+      <Cropper
+        ref={cropperRef}
+        src={photoSrc}
+        style={{ height: 240, width: "100%" }}
+        aspectRatio={props.aspectRatio}
+        guides={false}
+        crop={handleCrop}
+      />
+    </InputBox>
+  );
+}

package/src/components/InputBox.tsx

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

package/src/components/Loading.tsx

@@ -0,0 +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>
+  )
+}