daml/templates/create-daml-app-test-resources/messaging.patch

diff -Naur templates/create-daml-app/daml/User.daml templates/create-daml-app-test-resources/daml/User.daml
--- templates/create-daml-app/daml/User.daml	2022-02-02 17:09:01.301176478 +0100
+++ templates/create-daml-app-test-resources/daml/User.daml	2022-02-02 17:17:07.624855269 +0100
@@ -27,6 +27,16 @@
         create this with following = userToFollow :: following
     -- FOLLOW_END
 
+    -- SENDMESSAGE_BEGIN
+    nonconsuming choice SendMessage: ContractId Message with
+        sender: Party
+        content: Text
+      controller sender
+      do
+        assertMsg "Designated user must follow you back to send a message" (elem sender following)
+        create Message with sender, receiver = username, content
+    -- SENDMESSAGE_END
+
 -- ALIAS_BEGIN
 template Alias with
     username: Party
@@ -45,3 +55,12 @@
         archive self
         create this with alias = newAlias
 -- ALIAS_END
+
+-- MESSAGE_BEGIN
+template Message with
+    sender: Party
+    receiver: Party
+    content: Text
+  where
+    signatory sender, receiver
+-- MESSAGE_END
diff -Naur templates/create-daml-app/ui/src/components/MainView.tsx templates/create-daml-app-test-resources/ui/src/components/MainView.tsx
--- templates/create-daml-app/ui/src/components/MainView.tsx	2022-02-02 17:09:01.309176539 +0100
+++ templates/create-daml-app-test-resources/ui/src/components/MainView.tsx	2022-02-02 17:47:40.054336940 +0100
@@ -8,6 +8,10 @@
 import { useParty, useLedger, useStreamFetchByKeys, useStreamQueries } from '@daml/react';
 import UserList from './UserList';
 import PartyListEdit from './PartyListEdit';
+// IMPORTS_BEGIN
+import MessageEdit from './MessageEdit';
+import MessageList from './MessageList';
+// IMPORTS_END
 
 // USERS_BEGIN
 const MainView: React.FC = () => {
@@ -88,6 +92,23 @@
               />
               {/* USERLIST_END */}
             </Segment>
+            {/* MESSAGES_SEGMENT_BEGIN */}
+            <Segment>
+              <Header as='h2'>
+                <Icon name='pencil square' />
+                <Header.Content>
+                  Messages
+                  <Header.Subheader>Send a message to a follower</Header.Subheader>
+                </Header.Content>
+              </Header>
+              <MessageEdit
+                followers={followers.map(follower => follower.username)}
+                partyToAlias={partyToAlias}
+              />
+              <Divider />
+              <MessageList partyToAlias={partyToAlias}/>
+            </Segment>
+            {/* MESSAGES_SEGMENT_END */}
           </Grid.Column>
         </Grid.Row>
       </Grid>
diff -Naur templates/create-daml-app/ui/src/components/MessageEdit.tsx templates/create-daml-app-test-resources/ui/src/components/MessageEdit.tsx
--- templates/create-daml-app/ui/src/components/MessageEdit.tsx	1970-01-01 01:00:00.000000000 +0100
+++ templates/create-daml-app-test-resources/ui/src/components/MessageEdit.tsx	2022-02-03 12:42:06.144235635 +0100
@@ -0,0 +1,69 @@
+// MESSAGEEDIT_BEGIN
+import React from 'react'
+import { Form, Button } from 'semantic-ui-react';
+import { Party } from '@daml/types';
+import { User } from '@daml.js/create-daml-app';
+import { useParty, useLedger } from '@daml/react';
+
+type Props = {
+  followers: Party[];
+  partyToAlias: Map<string, string>;
+}
+
+/**
+ * React component to edit a message to send to a follower.
+ */
+const MessageEdit: React.FC<Props> = ({followers, partyToAlias}) => {
+  const sender = useParty();
+  const [receiver, setReceiver] = React.useState<string | undefined>();
+  const [content, setContent] = React.useState("");
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const ledger = useLedger();
+
+  const submitMessage = async (event: React.FormEvent) => {
+    try {
+      event.preventDefault();
+      if (receiver === undefined) {
+        return;
+      }
+      setIsSubmitting(true);
+      await ledger.exerciseByKey(User.User.SendMessage, receiver, {sender, content});
+      setContent("");
+    } catch (error) {
+      alert(`Error sending message:\n${JSON.stringify(error)}`);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Form onSubmit={submitMessage}>
+      <Form.Select
+        fluid
+        search
+        className='test-select-message-receiver'
+        placeholder={receiver ? partyToAlias.get(receiver) ?? receiver : "Select a follower"}
+        value={receiver}
+        options={followers.map(follower => ({ key: follower, text: partyToAlias.get(follower) ?? follower, value: follower }))}
+        onChange={(event, data) => setReceiver(data.value?.toString())}
+      />
+      <Form.Input
+        className='test-select-message-content'
+        placeholder="Write a message"
+        value={content}
+        onChange={event => setContent(event.currentTarget.value)}
+      />
+      <Button
+        fluid
+        className='test-select-message-send-button'
+        type="submit"
+        disabled={isSubmitting || receiver === undefined || content === ""}
+        loading={isSubmitting}
+        content="Send"
+      />
+    </Form>
+  );
+};
+
+export default MessageEdit;
+// MESSAGEEDIT_END
diff -Naur templates/create-daml-app/ui/src/components/MessageList.tsx templates/create-daml-app-test-resources/ui/src/components/MessageList.tsx
--- templates/create-daml-app/ui/src/components/MessageList.tsx	1970-01-01 01:00:00.000000000 +0100
+++ templates/create-daml-app-test-resources/ui/src/components/MessageList.tsx	2022-02-02 17:47:13.646655436 +0100
@@ -0,0 +1,33 @@
+// MESSAGELIST_BEGIN
+import React from 'react'
+import { List, ListItem } from 'semantic-ui-react';
+import { User } from '@daml.js/create-daml-app';
+import { useStreamQueries } from '@daml/react';
+
+type Props = {
+  partyToAlias: Map<string, string>
+}
+/**
+ * React component displaying the list of messages for the current user.
+ */
+const MessageList: React.FC<Props> = ({partyToAlias}) => {
+  const messagesResult = useStreamQueries(User.Message);
+
+  return (
+    <List relaxed>
+      {messagesResult.contracts.map(message => {
+        const {sender, receiver, content} = message.payload;
+        return (
+          <ListItem
+            className='test-select-message-item'
+            key={message.contractId}>
+            <strong>{partyToAlias.get(sender) ?? sender} &rarr; {partyToAlias.get(receiver) ?? receiver}:</strong> {content}
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+export default MessageList;
+// MESSAGELIST_END