@churchapps/apphelper 0.4.11 → 0.4.17

package/src/components/markdownEditor/plugins/emoji/EmojisPlugin.tsx

@@ -1,70 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import type {LexicalEditor} from 'lexical';
-import 'material-symbols';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$createTextNode, TextNode} from 'lexical';
-import {useEffect} from 'react';
-import materialIcons from '../../IconNamesList';
-
-import {$createEmojiNode, EmojiNode} from './EmojiNode';
-import { EMOJI_NODE_MARKDOWN_REGEX } from './EmojiNodeTransform';
-
-
-function useEmojis(editor: LexicalEditor): void {
-  useEffect(() => {
-    if (!editor.hasNodes([EmojiNode, TextNode])) {
-      throw new Error('EmojisPlugin: EmojiNode not registered on editor');
-    }
-
-    if (!materialIcons || !Array.isArray(materialIcons)) {
-      return;
-      // throw new Error('EmojisPlugin: materialIcons not properly loaded');
-    }
-
-    return editor.registerNodeTransform(TextNode, (textNode) => {
-      if (EMOJI_NODE_MARKDOWN_REGEX.test(textNode.getTextContent()) || materialIcons.map((materialIcon : string) => ':' + materialIcon + ':').some((materialIcon : string) => textNode.getTextContent().includes(materialIcon))) {
-
-        const materialIconToInsert = materialIcons.find((materialIcon : string) => textNode.getTextContent().replaceAll(':', '').includes(materialIcon));
-
-        if (!materialIconToInsert) return;
-
-        const initialTextInput = textNode.getTextContent();
-        const emojiNode = $createEmojiNode(materialIconToInsert);
-
-        const leftoverTextNodes : Array<TextNode> = [];
-
-        initialTextInput?.split(':').forEach((leftoverTextString : string, index : number) => {
-          if (materialIcons.includes(leftoverTextString)) {
-            const emojiNode = $createEmojiNode(leftoverTextString);
-
-            leftoverTextNodes.push(emojiNode);
-            return;
-          }
-          leftoverTextNodes.push($createTextNode(leftoverTextString));
-        });
-
-        textNode.setTextContent('');
-
-
-        textNode.getParent().splice(textNode.getIndexWithinParent(), 1, leftoverTextNodes);
-
-        (leftoverTextNodes.find((node : TextNode) => materialIcons.includes(node.__text)) || leftoverTextNodes[leftoverTextNodes.length - 1]).select();
-
-        textNode.remove();
-      }
-    });
-  }, [editor]);
-}
-
-export default function EmojisPlugin(): React.ReactElement | null {
-  const [editor] = useLexicalComposerContext();
-  useEmojis(editor);
-  return null;
-}

package/src/components/markdownEditor/plugins/index.ts

@@ -1,6 +0,0 @@
-export { ToolbarPlugin } from "./ToolbarPlugin";
-export { CustomAutoLinkPlugin } from "./AutoLinkPlugin";
-export { ListMaxIndentLevelPlugin } from "./ListMaxIndentLevelPlugin";
-export { PLAYGROUND_TRANSFORMERS } from "./MarkdownTransformers";
-export { ReadOnlyPlugin } from "./ReadOnlyPlugin";
-export { ControlledEditorPlugin } from "./ControlledEditorPlugin";

package/src/components/markdownEditor/theme.ts

@@ -1,65 +0,0 @@
-export const theme = {
-  placeholder: "editor-placeholder",
-  paragraph: "editor-paragraph",
-  quote: "editor-quote",
-  heading: {
-    h1: "editor-heading-h1",
-    h2: "editor-heading-h2",
-    h3: "editor-heading-h3",
-    h4: "editor-heading-h4",
-    h5: "editor-heading-h5"
-  },
-  list: {
-    nested: {
-      listitem: "editor-nested-listitem"
-    },
-    ol: "editor-list-ol",
-    ul: "editor-list-ul",
-    listitem: "editor-listitem"
-  },
-  image: "editor-image",
-  link: "editor-link",
-  text: {
-    bold: "editor-text-bold",
-    italic: "editor-text-italic",
-    overflowed: "editor-text-overflowed",
-    hashtag: "editor-text-hashtag",
-    underline: "editor-text-underline",
-    strikethrough: "editor-text-strikethrough",
-    underlineStrikethrough: "editor-text-underlineStrikethrough",
-    code: "editor-text-code"
-  },
-  code: "editor-code",
-  codeHighlight: {
-    atrule: "editor-tokenAttr",
-    attr: "editor-tokenAttr",
-    boolean: "editor-tokenProperty",
-    builtin: "editor-tokenSelector",
-    cdata: "editor-tokenComment",
-    char: "editor-tokenSelector",
-    class: "editor-tokenFunction",
-    "class-name": "editor-tokenFunction",
-    comment: "editor-tokenComment",
-    constant: "editor-tokenProperty",
-    deleted: "editor-tokenProperty",
-    doctype: "editor-tokenComment",
-    entity: "editor-tokenOperator",
-    function: "editor-tokenFunction",
-    important: "editor-tokenVariable",
-    inserted: "editor-tokenSelector",
-    keyword: "editor-tokenAttr",
-    namespace: "editor-tokenVariable",
-    number: "editor-tokenProperty",
-    operator: "editor-tokenOperator",
-    prolog: "editor-tokenComment",
-    property: "editor-tokenProperty",
-    punctuation: "editor-tokenPunctuation",
-    regex: "editor-tokenVariable",
-    selector: "editor-tokenSelector",
-    string: "editor-tokenSelector",
-    symbol: "editor-tokenProperty",
-    tag: "editor-tokenProperty",
-    url: "editor-tokenOperator",
-    variable: "editor-tokenVariable"
-  }
-};

package/src/components/reporting/ChartReport.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import React from "react";
-import { Chart } from "react-google-charts";
-import { ReportOutputInterface, ReportResultInterface } from "@churchapps/helpers";
-import { ReportHelper } from "../../helpers/ReportHelper";
-import { Locale } from "../../helpers";
-
-interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
-
-export const ChartReport = (props: Props) => {
-  let rows: any = [];
-
-  const getChartData = () => {
-    if (props.output.columns.length === 2) return getSingleData();
-    else return getMultiData();
-  }
-
-  const getHeaders = () => {
-    const result: string[] = [];
-    const uniqueValues: string[] = [];
-
-    props.reportResult.table.forEach(d => {
-      const val = ReportHelper.getField(props.output.columns[1], d);
-      if (uniqueValues.indexOf(val) === -1) uniqueValues.push(val);
-    });
-
-    result.push(props.output.columns[0].header);
-    uniqueValues.forEach(v => result.push(v));
-
-    return result;
-  }
-
-  const getHeaderIndex = (headers: string[], header: string) => {
-    let result = -1;
-    let i = 0;
-    headers.forEach(h => {
-      if (h === header) result = i;
-      i++;
-    })
-    return result;
-  }
-
-  const transformData = (headers: string[]) => {
-    const result: any[] = [];
-    props.reportResult.table.forEach(d => {
-      const firstVal = ReportHelper.getField(props.output.columns[0], d);
-      const secondVal = ReportHelper.getField(props.output.columns[1], d);
-      const headerIndex = getHeaderIndex(headers, secondVal);
-
-      let row: any[] = []
-      if (result.length === 0 || firstVal !== result[result.length - 1][0]) {
-        row[0] = firstVal;
-        for (let i = 1; i < headers.length; i++) row[i] = 0;
-        result.push(row);
-      } else row = result[result.length - 1];
-
-      row[headerIndex] = parseFloat(d[props.output.columns[2].value]);
-    });
-
-    return result;
-  }
-
-  const getMultiData = () => {
-    const headers = getHeaders();
-    rows = [];
-    rows.push(headers);
-    transformData(headers).forEach(d => {
-      rows.push(d);
-    })
-
-    return rows;
-  }
-
-  const getSingleData = () => {
-    rows = [];
-    rows.push([props.output.columns[0].header, props.output.columns[1].header]);
-    props.reportResult.table.forEach(d => {
-      rows.push([ReportHelper.getField(props.output.columns[0], d), parseFloat(ReportHelper.getField(props.output.columns[1], d))])
-    });
-    return rows;
-  }
-
-  let result = <p>{Locale.label("reporting.noData")}</p>
-  if (props.reportResult.table?.length > 0) result = (<Chart chartType="ColumnChart" data={getChartData()} width="100%" height="400px" options={{ height: 400, legend: { position: "top", maxLines: 3 }, bar: { groupWidth: "75%" }, isStacked: true }} />);
-
-  return result;
-
-}

package/src/components/reporting/ReportFilter.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import React from "react";
-import { ReportInterface, ParameterInterface } from "@churchapps/helpers";
-import { ArrayHelper, Locale } from "../../helpers"
-import { InputBox } from "../"
-import { ReportFilterField } from "./ReportFilterField";
-
-interface Props { report: ReportInterface, onChange: (report: ReportInterface) => void, onRun: () => void }
-
-export const ReportFilter = (props: Props) => {
-
-  const handleChange = (parameter: ParameterInterface, permittedChildIds: string[]) => {
-    const r = { ...props.report };
-    const p: ParameterInterface = ArrayHelper.getOne(r.parameters, "keyName", parameter.keyName);
-    p.value = parameter.value;
-    updateChildIds(r, p, permittedChildIds)
-    props.onChange(r);
-  }
-
-  const updateChildIds = (report: ReportInterface, parameter: ParameterInterface, permittedChildIds: string[]) => {
-    switch (parameter.sourceKey) {
-      case "campus":
-        setRequiredParentIds(report, "service", permittedChildIds);
-        break;
-      case "service":
-        setRequiredParentIds(report, "serviceTime", permittedChildIds);
-        break;
-      case "serviceTime":
-        setRequiredParentIds(report, "group", permittedChildIds);
-        break;
-    }
-  }
-
-  const setRequiredParentIds = (report: ReportInterface, childSourceKey: string, requiredParentIds: string[]) => {
-    const child: ParameterInterface = ArrayHelper.getOne(report.parameters, "sourceKey", childSourceKey);
-    if (child) child.requiredParentIds = requiredParentIds;
-  }
-
-  const getInputs = () => {
-    const result: React.ReactElement[] = [];
-    props.report.parameters.forEach((p, i) => {
-      if (p.source === "dropdown" || p.source === "date") {
-        result.push(<ReportFilterField key={i} parameter={p} report={props.report} onChange={handleChange} />)
-      }
-    });
-    return result;
-  }
-
-  const inputs = getInputs();
-  if (inputs.length > 0) {
-    return <InputBox id="formSubmissionBox" headerText="Filter Report" headerIcon="summarize" saveFunction={props.onRun} saveText={Locale.label("reporting.runReport")}>
-      {inputs}
-    </InputBox>
-  } else return <> </>
-}

package/src/components/reporting/ReportFilterField.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import React from "react";
-import { ReportInterface, ParameterInterface } from "@churchapps/helpers";
-import { ApiHelper, ArrayHelper, DateHelper, Locale } from "../../helpers";
-import { FormControl, InputLabel, Select, SelectChangeEvent, TextField, MenuItem } from "@mui/material";
-import { useMountedState } from "../../hooks/useMountedState";
-
-interface Props {
-  parameter: ParameterInterface,
-  report: ReportInterface,
-  onChange: (parameter: ParameterInterface, permittedChildIds: string[]) => void
-}
-
-export const ReportFilterField = (props: Props) => {
-
-  const [rawData, setRawData] = React.useState<any[]>(null);
-  const [secondaryData, setSecondaryData] = React.useState<any[]>(null);
-  const isMounted = useMountedState();
-
-  const init = async () => {
-    switch (props.parameter.sourceKey) {
-      case "provided":
-        setRawData(props.parameter.options);
-        break;
-      case "month":
-        setRawData(getMonths());
-        break;
-      case "campus":
-        ApiHelper.get("/campuses", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        break;
-      case "service":
-        ApiHelper.get("/services", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        break;
-      case "serviceTime":
-        ApiHelper.get("/serviceTimes", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        break;
-      case "group":
-        ApiHelper.get("/groups", "MembershipApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        ApiHelper.get("/groupServiceTimes", "AttendanceApi").then(data => {
-          if(isMounted()) {
-            setSecondaryData(data);
-          }})
-        break;
-    }
-    setDefaultValue();
-  }
-
-  const setDefaultValue = () => {
-    switch (props.parameter.source) {
-      case "date":
-        if (props.parameter.defaultValue) {
-          let dt = new Date();
-          if (props.parameter.defaultValue === "yesterday") dt.setDate(dt.getDate() - 1);
-          if (props.parameter.defaultValue === "lastYear") dt.setFullYear(dt.getFullYear() - 1);
-          if (props.parameter.defaultValue === "lastSunday") dt = DateHelper.getLastSunday();
-          const p = { ...props.parameter };
-          p.value = DateHelper.formatHtml5Date(dt);
-          props.onChange(p, []);
-        }
-        break;
-    }
-  }
-
-  const getMonths = () => {
-    const list = [Locale.label("month.january"), Locale.label("month.february"), Locale.label("month.march"), Locale.label("month.april"), Locale.label("month.may"), Locale.label("month.june"), Locale.label("month.july"), Locale.label("month.august"), Locale.label("month.september"), Locale.label("month.october"), Locale.label("month.november"), Locale.label("month.december")]
-
-    const result = [];
-    for (let i = 0; i < list.length; i++) result.push({ value: (i + 1).toString(), text: list[i] });
-    return result;
-  }
-
-  const getIdName = () => {
-    const result: { value: string, text: string }[] = [];
-    filterOptions().forEach(d => { result.push({ value: d.id, text: d.name }); });
-    return result;
-  }
-
-  const filterOptions = () => {
-    let result = rawData;
-    if (props.parameter.requiredParentIds?.length > 0) {
-      switch (props.parameter.sourceKey) {
-        case "service":
-          result = ArrayHelper.getAllArray(rawData, "campusId", props.parameter.requiredParentIds);
-          result.unshift({ id: "", name: "Any" });
-          break;
-        case "serviceTime":
-          result = ArrayHelper.getAllArray(rawData, "serviceId", props.parameter.requiredParentIds);
-          result.unshift({ id: "", name: "Any" });
-          break;
-        case "group":
-          const times = ArrayHelper.getAllArray(secondaryData, "serviceTimeId", props.parameter.requiredParentIds)
-          result = ArrayHelper.getAllArray(rawData, "id", ArrayHelper.getUniqueValues(times, "groupId"));
-          result.unshift({ id: "", name: "Any" });
-          break;
-      }
-    }
-    return result;
-  }
-
-  const getOptions = () => {
-    let options: { value: string, text: string }[] = []
-    if (rawData) {
-      switch (props.parameter.sourceKey) {
-        case "campus":
-        case "service":
-        case "serviceTime":
-        case "group":
-          options = getIdName();
-          break;
-        case "month":
-        case "provided":
-          options = rawData;
-          break;
-      }
-    }
-
-    return options;
-  }
-
-  const options = getOptions();
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    const p = { ...props.parameter };
-    p.value = e.target.value;
-    let parentIds = [];
-    if (p.value) parentIds.push(p.value);
-    props.onChange(p, parentIds);
-  }
-
-  React.useEffect(() => { init() }, [props.parameter.keyName, isMounted]); //eslint-disable-line
-
-  let result = <></>
-  switch (props.parameter.source) {
-    case "dropdown":
-      result = (
-        <FormControl fullWidth>
-          <InputLabel>{props.parameter.displayName}</InputLabel>
-          <Select value={options.find(v => v.value === props.parameter.value)?.value || ""} label={props.parameter.displayName} onChange={handleChange} name={props.parameter.keyName}>
-            {options.map((o,i) => <MenuItem key={i} value={o.value}>{o.text}</MenuItem>)}
-          </Select>
-        </FormControl>
-      );
-      break;
-    case "date":
-      result = (<TextField type="date" fullWidth InputLabelProps={{shrink: true}} label={Locale.label("common.date")} value={props.parameter.value || ""} onChange={handleChange} name={props.parameter.keyName} />)
-      break;
-  }
-  return result;
-
-}

package/src/components/reporting/ReportOutput.tsx

@@ -1,168 +0,0 @@
-"use client";
-
-import React, { useRef } from "react";
-import { ArrayHelper, PersonInterface, ReportInterface, ReportResultInterface } from "@churchapps/helpers";
-import { DisplayBox, ExportLink, Loading } from "../"
-import { ApiHelper, Locale } from "../../helpers"
-import { useReactToPrint } from "react-to-print";
-import { TableReport } from "./TableReport";
-import { ChartReport } from "./ChartReport";
-import { TreeReport } from "./TreeReport";
-import { Button, Icon, Menu, MenuItem } from "@mui/material";
-import { useMountedState } from "../../hooks/useMountedState";
-import { Link } from "react-router-dom";
-
-interface Props { keyName: string, report: ReportInterface }
-
-export const ReportOutput = (props: Props) => {
-	const [reportResult, setReportResult] = React.useState<ReportResultInterface>(null);
-	const [detailedPersonSummary, setDetailedPersonSummary] = React.useState<any[]>(null);
-	const [customHeaders, setCustomHeaders] = React.useState([]);
-	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-	const [downloadData, setDownloadData] = React.useState<ReportResultInterface>(null);
-	const open = Boolean(anchorEl);
-	const contentRef = useRef<HTMLDivElement>(null);
-	const isMounted = useMountedState();
-
-	const handlePrint = useReactToPrint({
-		contentRef
-	})
-
-	const populatePeople = async (data: any[]) => {
-		let result: any[] = [];
-		let headers: { label: string, key: string }[] = [];
-		const peopleIds = ArrayHelper.getIds(data, "personId");
-		if (peopleIds.length > 0) {
-			const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
-			const filteredData = data.filter((d) => d.personId !== null);
-			filteredData.forEach((d) => {
-				const person: PersonInterface = ArrayHelper.getOne(people, "id", d.personId);
-				const funds = Object.assign({}, ...d.funds);
-				const obj = {
-					firstName: person.name.first,
-					lastName: person.name.last,
-					email: person.contactInfo?.email,
-					address: person.contactInfo.address1 + (person.contactInfo.address2 ? `, ${person.contactInfo.address2}` : ""),
-					city: person.contactInfo.city,
-					state: person.contactInfo.state,
-					zip: person.contactInfo.zip,
-					totalDonation: d.totalAmount,
-					...funds
-				};
-				result.push(obj);
-			});
-		}
-
-		//for anonymous donations
-		const anonDonations = ArrayHelper.getOne(data, "personId", null);
-		if (anonDonations) {
-			const funds = Object.assign({}, ...anonDonations.funds);
-			const obj = {
-				firstName: "Anonymous",
-				totalDonation: anonDonations.totalAmount,
-				...funds
-			}
-			result.push(obj);
-		}
-
-		// Collect all unique keys across all objects
-		const allKeys = new Set<string>();
-		result.forEach(obj => {
-			Object.keys(obj).forEach(key => allKeys.add(key));
-		});
-
-		// Create headers for all unique keys
-		allKeys.forEach(key => headers.push({ label: key, key: key }));
-
-		setCustomHeaders(headers);
-		setDetailedPersonSummary(result);
-	}
-
-	const runReport = () => {
-		if (props.report) {
-			const queryParams: string[] = [];
-			props.report.parameters.forEach(p => {
-				if (p.value) queryParams.push(p.keyName + "=" + p.value);
-			});
-			let url = "/reports/" + props.report.keyName + "/run";
-			if (queryParams) url += "?" + queryParams.join("&");
-
-			ApiHelper.get(url, "ReportingApi").then((data: ReportResultInterface) => {
-				if (isMounted()) {
-					setReportResult(data);
-				}
-			});
-
-			const donationUrl = "/donations/summary?type=person&" + queryParams.join("&");
-			ApiHelper.get(donationUrl, "GivingApi").then((data) => { populatePeople(data); });
-
-			if (props.keyName === "groupAttendance") {
-				let url = "/reports/groupAttendanceDownload/run";
-				if (queryParams) url += "?" + queryParams.join("&");
-				ApiHelper.get(url, "ReportingApi").then((data: ReportResultInterface) => {
-					setDownloadData(data);
-				})
-			}
-		}
-	}
-
-	const getExportMenu = (key: number) => {
-		const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-			setAnchorEl(event.currentTarget);
-		}
-
-		const handleClose = () => {
-			setAnchorEl(null);
-		}
-		return (<>
-			<Button size="small" title={Locale.label("reporting.downloadOptions")} onClick={handleClick} key={key}><Icon>download</Icon></Button>
-			<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-				{reportResult?.table?.length > 0 && <MenuItem sx={{ padding: "5px" }} onClick={handleClose}><ExportLink data={props.keyName === "groupAttendance" ? downloadData?.table : reportResult.table} filename={props.report.displayName.replace(" ", "_") + ".csv"} text={Locale.label("reporting.summary")} icon={props.keyName === "attendanceTrend" ? "calendar_month" : "volunteer_activism"} /></MenuItem>}
-				{(props.keyName === "donationSummary" && detailedPersonSummary?.length > 0) && <MenuItem sx={{ padding: "5px" }} onClick={handleClose}><ExportLink data={detailedPersonSummary} filename="Detailed_Donation_Summary.csv" text={Locale.label("reporting.detailed")} icon="person" customHeaders={customHeaders} spaceAfter={true} /></MenuItem>}
-				{(props.keyName === "donationSummary" && detailedPersonSummary?.length > 0) && <MenuItem sx={{ padding: "5px" }} onClick={handleClose}><Button onClick={() => { window.open("/downloads/DonationTemplate.docx") }}><Icon sx={{ marginRight: 1 }}>description</Icon>{Locale.label("reporting.sampleTemplate")}</Button></MenuItem>}
-			</Menu>
-		</>)
-	}
-
-	React.useEffect(runReport, [props.report, isMounted]);
-
-	const getEditContent = () => {
-		const result: React.ReactElement[] = [];
-
-		if (reportResult) {
-			result.push(<button type="button" className="no-default-style" key={result.length - 2} onClick={handlePrint} title="print"><Icon>print</Icon></button>);
-		}
-		if (reportResult?.table.length > 0 || detailedPersonSummary?.length > 0) {
-			result.push(getExportMenu(result.length - 1))
-		}
-		return result;
-	}
-
-	const getOutputs = () => {
-		const result: React.ReactElement[] = [];
-		reportResult.outputs.forEach(o => {
-			if (o.outputType === "table") result.push(<TableReport key={o.outputType} reportResult={reportResult} output={o} />)
-			if (o.outputType === "tree") result.push(<TreeReport key={o.outputType} reportResult={reportResult} output={o} />)
-			else if (o.outputType === "barChart") result.push(<ChartReport key={o.outputType} reportResult={reportResult} output={o} />)
-		})
-
-		return result;
-	}
-
-	const getResults = () => {
-		if (!props.report) return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText={Locale.label("reporting.runReport")} editContent={getEditContent()}><p>{Locale.label("reporting.useFilter")}</p></DisplayBox>);
-
-		else if (!reportResult) return <Loading />
-		else {
-			return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText={props.report.displayName} editContent={getEditContent()}>
-				{getOutputs()}
-			</DisplayBox>);
-		}
-	}
-
-	return (
-		<>
-			{getResults()}
-		</>
-	);
-}