@churchapps/apphelper 0.0.10 → 0.0.11

package/src/components/material/NewPrivateMessage.tsx

@@ -1,103 +1,103 @@
-import { Button, TextField, TableRow, TableCell, Table, TableBody } from "@mui/material";
-import React from "react";
-import { ApiHelper, PersonHelper } from "../../helpers";
-import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "../../interfaces";
-import { AddNote } from "../notes/AddNote";
-import { SmallButton } from "../SmallButton";
-
-interface Props {
-  context: UserContextInterface;
-  onSelectMessage: (pm: PrivateMessageInterface) => void
-  onBack: () => void
-}
-
-export const NewPrivateMessage: React.FC<Props> = (props) => {
-
-  const [searchText, setSearchText] = React.useState("");
-  const [searchResults, setSearchResults] = React.useState([]);
-  const [selectedPerson, setSelectedPerson] = React.useState<PersonInterface>(null);
-
-  const handleSubmit = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = escape(searchText.trim());
-    ApiHelper.get("/people/search?term=" + term, "MembershipApi").then(data => setSearchResults(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 handlePersonSelected = async (person: PersonInterface) => {
-    const existing: PrivateMessageInterface = await ApiHelper.get("/privateMessages/existing/" + person.id, "MessagingApi");
-    if (existing.id) {
-      existing.person = person;
-      props.onSelectMessage(existing);
-    }
-    else setSelectedPerson(person);
-  }
-
-  const getPeople = () => {
-    let result = [];
-    for (let i = 0; i < searchResults.length; i++) {
-      const p = searchResults[i];
-      result.push(<TableRow key={p.id}>
-        <TableCell><img src={PersonHelper.getPhotoUrl(p)} alt="avatar" /></TableCell>
-        <TableCell><a href="about:blank" onClick={(e) => { e.preventDefault(); handlePersonSelected(p) }}>{p.name.display}</a></TableCell>
-      </TableRow>);
-    }
-    return result;
-  }
-
-  const handleNoteAdded = () => {
-    handlePersonSelected(selectedPerson);
-  }
-
-  const createConversation = async () => {
-    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " Private Message", visibility: "hidden" }
-    const result: ConversationInterface[] = await ApiHelper.post("/conversations", [conv], "MessagingApi");
-
-    const pm: PrivateMessageInterface = {
-      fromPersonId: props.context.person.id,
-      toPersonId: selectedPerson.id,
-      conversationId: result[0].id
-    }
-    const privateMessages: PrivateMessageInterface[] = await ApiHelper.post("/privateMessages", [pm], "MessagingApi");
-    return privateMessages[0].conversationId;
-  }
-
-  if (!selectedPerson) return (
-    <div style={{ paddingLeft: 10, paddingRight: 10 }}>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-      </span>
-      <b>New Private Message</b>
-      <div>Search for a person</div>
-
-      <TextField fullWidth label="Name" id="searchText" data-cy="search-input" name="searchText" type="text" placeholder="Name" value={searchText} onChange={handleChange}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>Search</Button> }}
-      />
-      <br />
-      <Table id="smallPeopleTable" size="small">
-        <TableBody>{getPeople()}</TableBody>
-      </Table>
-    </div>
-  );
-  else {
-    return (
-      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
-        <span style={{ float: "right" }}>
-          <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-        </span>
-        <b>New Private Message</b>
-        <div>To: {selectedPerson.name.display}</div>
-        <AddNote context={props.context} conversationId={null} onUpdate={handleNoteAdded} createConversation={createConversation} />
-      </div>
-    )
-  }
-}
+import { Button, TextField, TableRow, TableCell, Table, TableBody } from "@mui/material";
+import React from "react";
+import { ApiHelper, PersonHelper } from "../../helpers";
+import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { AddNote } from "../notes/AddNote";
+import { SmallButton } from "../SmallButton";
+
+interface Props {
+  context: UserContextInterface;
+  onSelectMessage: (pm: PrivateMessageInterface) => void
+  onBack: () => void
+}
+
+export const NewPrivateMessage: React.FC<Props> = (props) => {
+
+  const [searchText, setSearchText] = React.useState("");
+  const [searchResults, setSearchResults] = React.useState([]);
+  const [selectedPerson, setSelectedPerson] = React.useState<PersonInterface>(null);
+
+  const handleSubmit = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = escape(searchText.trim());
+    ApiHelper.get("/people/search?term=" + term, "MembershipApi").then(data => setSearchResults(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 handlePersonSelected = async (person: PersonInterface) => {
+    const existing: PrivateMessageInterface = await ApiHelper.get("/privateMessages/existing/" + person.id, "MessagingApi");
+    if (existing.id) {
+      existing.person = person;
+      props.onSelectMessage(existing);
+    }
+    else setSelectedPerson(person);
+  }
+
+  const getPeople = () => {
+    let result = [];
+    for (let i = 0; i < searchResults.length; i++) {
+      const p = searchResults[i];
+      result.push(<TableRow key={p.id}>
+        <TableCell><img src={PersonHelper.getPhotoUrl(p)} alt="avatar" /></TableCell>
+        <TableCell><a href="about:blank" onClick={(e) => { e.preventDefault(); handlePersonSelected(p) }}>{p.name.display}</a></TableCell>
+      </TableRow>);
+    }
+    return result;
+  }
+
+  const handleNoteAdded = () => {
+    handlePersonSelected(selectedPerson);
+  }
+
+  const createConversation = async () => {
+    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " Private Message", visibility: "hidden" }
+    const result: ConversationInterface[] = await ApiHelper.post("/conversations", [conv], "MessagingApi");
+
+    const pm: PrivateMessageInterface = {
+      fromPersonId: props.context.person.id,
+      toPersonId: selectedPerson.id,
+      conversationId: result[0].id
+    }
+    const privateMessages: PrivateMessageInterface[] = await ApiHelper.post("/privateMessages", [pm], "MessagingApi");
+    return privateMessages[0].conversationId;
+  }
+
+  if (!selectedPerson) return (
+    <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+      </span>
+      <b>New Private Message</b>
+      <div>Search for a person</div>
+
+      <TextField fullWidth label="Name" id="searchText" data-cy="search-input" name="searchText" type="text" placeholder="Name" value={searchText} onChange={handleChange}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>Search</Button> }}
+      />
+      <br />
+      <Table id="smallPeopleTable" size="small">
+        <TableBody>{getPeople()}</TableBody>
+      </Table>
+    </div>
+  );
+  else {
+    return (
+      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+        <span style={{ float: "right" }}>
+          <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+        </span>
+        <b>New Private Message</b>
+        <div>To: {selectedPerson.name.display}</div>
+        <AddNote context={props.context} conversationId={null} onUpdate={handleNoteAdded} createConversation={createConversation} />
+      </div>
+    )
+  }
+}

package/src/components/material/PrivateMessageDetails.tsx

@@ -1,23 +1,23 @@
-import React from "react";
-import { SmallButton } from "../SmallButton";
-import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
-import { Notes } from "../notes/Notes";
-
-interface Props {
-  context: UserContextInterface;
-  privateMessage: PrivateMessageInterface;
-  onBack: () => void
-}
-
-export const PrivateMessageDetails: React.FC<Props> = (props) => (
-  <>
-    <div style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-      </span>
-      Chat with {props.privateMessage.person.name.display}
-    </div>
-    <Notes context={props.context} conversationId={props.privateMessage.conversationId} noDisplayBox={true} />
-  </>
-);
-
+import React from "react";
+import { SmallButton } from "../SmallButton";
+import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { Notes } from "../notes/Notes";
+
+interface Props {
+  context: UserContextInterface;
+  privateMessage: PrivateMessageInterface;
+  onBack: () => void
+}
+
+export const PrivateMessageDetails: React.FC<Props> = (props) => (
+  <>
+    <div style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
+      </span>
+      Chat with {props.privateMessage.person.name.display}
+    </div>
+    <Notes context={props.context} conversationId={props.privateMessage.conversationId} noDisplayBox={true} />
+  </>
+);
+

package/src/components/material/PrivateMessages.tsx

@@ -1,87 +1,87 @@
-import React, { useState } from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { Box, Stack } from "@mui/material";
-import { SmallButton } from "../SmallButton";
-import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
-import { ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
-import { PrivateMessageDetails } from "./PrivateMessageDetails";
-import { NewPrivateMessage } from "./NewPrivateMessage";
-
-interface Props {
-  context: UserContextInterface;
-}
-
-export const PrivateMessages: React.FC<Props> = (props) => {
-
-  const [privateMessages, setPrivateMessages] = useState<PrivateMessageInterface[]>([]);
-  const [selectedMessage, setSelectedMessage] = useState<PrivateMessageInterface>(null);
-  const [inAddMode, setInAddMode] = useState(false);
-
-  const loadData = async () => {
-    const pms: PrivateMessageInterface[] = await ApiHelper.get("/privateMessages", "MessagingApi");
-    const peopleIds: string[] = [];
-    pms.forEach(pm => {
-      const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
-      if (peopleIds.indexOf(personId) === -1) peopleIds.push(personId);
-    });
-    if (peopleIds.length > 0) {
-      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
-      pms.forEach(pm => {
-        const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
-        pm.person = ArrayHelper.getOne(people, "id", personId);
-      })
-    }
-    setPrivateMessages(pms);
-  }
-
-  React.useEffect(() => { loadData(); }, []); //eslint-disable-line
-
-  const getMainLinks = () => {
-    let result: JSX.Element[] = [];
-    privateMessages.forEach(pm => {
-
-      const person = pm.person;
-      const message = pm.conversation.messages[0];
-      const photoUrl = PersonHelper.getPhotoUrl(person);
-
-      let datePosted = new Date(message.timeUpdated || message.timeSent);
-      const displayDuration = DateHelper.getDisplayDuration(datePosted);
-      const contents = message.content?.split("\n")[0];
-      const privateMessage = pm;
-      result.push(
-        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); setSelectedMessage(privateMessage) }}>
-          <div className="postedBy">
-            <img src={photoUrl} alt="avatar" />
-          </div>
-          <Box sx={{ width: "100%" }} className="note-contents">
-            <Stack direction="row" justifyContent="space-between">
-              <div>
-                <b>{person.name?.display}</b> · <span className="text-grey">{displayDuration}</span>
-                <p style={{ maxHeight: 20, overflowY: "hidden" }}>{contents}</p>
-              </div>
-            </Stack>
-          </Box>
-        </div>
-      );
-    })
-    return result;
-  }
-
-  const handleBack = () => {
-    setInAddMode(false);
-    setSelectedMessage(null);
-    loadData();
-  }
-
-  if (inAddMode) return <NewPrivateMessage context={props.context} onSelectMessage={(pm: PrivateMessageInterface) => { setSelectedMessage(pm); setInAddMode(false); }} onBack={handleBack} />
-  if (selectedMessage) return <PrivateMessageDetails privateMessage={selectedMessage} context={props.context} onBack={handleBack} />
-  else return (
-    <>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="add" onClick={() => { setInAddMode(true) }} />
-      </span>
-
-      {getMainLinks()}
-    </>
-  );
-};
+import React, { useState } from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { Box, Stack } from "@mui/material";
+import { SmallButton } from "../SmallButton";
+import { PrivateMessageInterface, UserContextInterface } from "../../interfaces";
+import { ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
+import { PrivateMessageDetails } from "./PrivateMessageDetails";
+import { NewPrivateMessage } from "./NewPrivateMessage";
+
+interface Props {
+  context: UserContextInterface;
+}
+
+export const PrivateMessages: React.FC<Props> = (props) => {
+
+  const [privateMessages, setPrivateMessages] = useState<PrivateMessageInterface[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<PrivateMessageInterface>(null);
+  const [inAddMode, setInAddMode] = useState(false);
+
+  const loadData = async () => {
+    const pms: PrivateMessageInterface[] = await ApiHelper.get("/privateMessages", "MessagingApi");
+    const peopleIds: string[] = [];
+    pms.forEach(pm => {
+      const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
+      if (peopleIds.indexOf(personId) === -1) peopleIds.push(personId);
+    });
+    if (peopleIds.length > 0) {
+      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
+      pms.forEach(pm => {
+        const personId = (pm.fromPersonId === props.context.person.id) ? pm.toPersonId : pm.fromPersonId;
+        pm.person = ArrayHelper.getOne(people, "id", personId);
+      })
+    }
+    setPrivateMessages(pms);
+  }
+
+  React.useEffect(() => { loadData(); }, []); //eslint-disable-line
+
+  const getMainLinks = () => {
+    let result: JSX.Element[] = [];
+    privateMessages.forEach(pm => {
+
+      const person = pm.person;
+      const message = pm.conversation.messages[0];
+      const photoUrl = PersonHelper.getPhotoUrl(person);
+
+      let datePosted = new Date(message.timeUpdated || message.timeSent);
+      const displayDuration = DateHelper.getDisplayDuration(datePosted);
+      const contents = message.content?.split("\n")[0];
+      const privateMessage = pm;
+      result.push(
+        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); setSelectedMessage(privateMessage) }}>
+          <div className="postedBy">
+            <img src={photoUrl} alt="avatar" />
+          </div>
+          <Box sx={{ width: "100%" }} className="note-contents">
+            <Stack direction="row" justifyContent="space-between">
+              <div>
+                <b>{person.name?.display}</b> · <span className="text-grey">{displayDuration}</span>
+                <p style={{ maxHeight: 20, overflowY: "hidden" }}>{contents}</p>
+              </div>
+            </Stack>
+          </Box>
+        </div>
+      );
+    })
+    return result;
+  }
+
+  const handleBack = () => {
+    setInAddMode(false);
+    setSelectedMessage(null);
+    loadData();
+  }
+
+  if (inAddMode) return <NewPrivateMessage context={props.context} onSelectMessage={(pm: PrivateMessageInterface) => { setSelectedMessage(pm); setInAddMode(false); }} onBack={handleBack} />
+  if (selectedMessage) return <PrivateMessageDetails privateMessage={selectedMessage} context={props.context} onBack={handleBack} />
+  else return (
+    <>
+      <span style={{ float: "right" }}>
+        <SmallButton icon="add" onClick={() => { setInAddMode(true) }} />
+      </span>
+
+      {getMainLinks()}
+    </>
+  );
+};