[WIP] typing indicator

api/channels-list/index.ts

@@ -2,13 +2,17 @@ import "../startup";
 import { Context, HttpRequest } from "@azure/functions";
 import { authorized } from "../common/ApiRequestContext";
 
-type ChannelSummary = { name: string };
+type ChannelSummary = { name: string; type: string };
 type ChannelListResponse = { channels: ChannelSummary[] };
 
 export default async function (context: Context, req: HttpRequest): Promise<void> {
   await authorized(context, req, () => {
     const channels: ChannelListResponse = {
-      channels: [{ name: "global-welcome" }, { name: "some-other-channel" }]
+      channels: [
+        { name: "global-welcome", type: "public" },
+        { name: "some-other-channel", type: "public" },
+        { name: "utility", type: "private" }
+      ]
     };
 
     context.res = { status: 200, body: JSON.stringify(channels) };

app/src/components/Channels/ChannelBrowser.jsx

@@ -7,12 +7,16 @@ import ChatContainer from "../Chat/ChatContainer";
 export default function ({ toggleChannelView }) {
   const { api } = useAuth();
   const [channels, setChannels] = useState([]);
-  const [currentChannel, setCurrentChannel] = useState("global-welcome");
+  const [currentChannel, setCurrentChannel] = useState(null);
+
+  const [] = useState("");
 
   useEffect(() => {
     const fetchChannels = async () => {
       const response = await api.listChannels();
-      setChannels(response.channels);
+      const { channels } = response;
+      setChannels(channels);
+      setCurrentChannel(channels[0].name);
     };
     fetchChannels();
   }, []);
@@ -23,7 +27,7 @@ export default function ({ toggleChannelView }) {
     toggleChannelView();
   };
 
-  return (
+  return !currentChannel ? null : (
     <>
       <ChannelList channels={channels} onChannelSelected={channelSelected} />
       <ChatContainer currentChannel={currentChannel} onChatExit={toggleChannelView} />

app/src/components/Channels/ChannelList.jsx

@@ -10,7 +10,8 @@ const ChannelList = ({ channels, onChannelSelected }) => {
     onChannelSelected(channel.name);
   };
 
-  const channelListItems = channels.map((channel) => (
+  const publicChannels = channels.filter((el) => el.type === "public");
+  const channelListItems = publicChannels.map((channel) => (
     <li key={channel.name}>
       <Link
         to={`/channel/${channel.name}`}

app/src/components/Chat/ChatContainer.jsx

@@ -6,24 +6,76 @@ import useArchive from "./../../hooks/useArchive";
 import autoScrollHistory from "./autoScrollHistory";
 import "./chat.css";
 
+const ChatInputStatus = ({ message }) => {
+  return <div className="send-status">{message}</div>;
+};
+
+const formatMessage = (eventObject) => {
+  // coerse String to Object
+  return typeof eventObject === "string" //
+    ? { text: `${eventObject || ""}`.trim() }
+    : eventObject;
+};
+
 const ChatContainer = ({ currentChannel, onChatExit }) => {
   const endOfChatLog = useRef(null);
+  const [archive, rewind] = useArchive(currentChannel);
+
   const [history, setHistory] = useState([]);
+  const [status, setStatus] = useState([]);
+  const [activity, setActivity] = useState();
 
-  useEffect(() => {
-    setHistory([]); // Reset history on channel change
-  }, [currentChannel]);
+  // Reset history on channel change
 
   const [channel] = useChannel(currentChannel, (message) => {
     setHistory((prev) => [...prev.slice(-199), message]);
   });
 
-  const [archive, rewind] = useArchive(currentChannel);
+  const sendMessage = (eventObject = null) => {
+    channel.publish("message", formatMessage(eventObject));
+    setStatusMessage(null);
+  };
 
-  const sendMessage = (messageText) => {
-    channel.publish("message", { text: messageText });
+  const sendStatus = (eventObject = null) => {
+    channel.presence.enter();
+    channel.presence.update(formatMessage(eventObject));
   };
 
+  const handlePresenceUpdate = (member) => {
+    const { data, clientId, connectionId } = member;
+    const { text } = data;
+
+    if (text === activity) return;
+
+    // clients on channel excluding the author as shallow copy Object
+    let clients = [];
+
+    channel.presence.get((_, members) => {
+      const typing = clientId === member.clientId;
+      clients = members.map((client) => ({ ...client, typing }));
+      console.log(typing, clientId, member.clientId);
+    });
+
+    switch (text) {
+      case "start":
+        console.log(text);
+        setActivity("Typing ...");
+        break;
+
+      case "done":
+        console.log(text);
+        setActivity("");
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  useEffect(() => setHistory([]), [currentChannel]);
+  useEffect(() => setStatus(activity), [activity]);
+  useEffect(() => channel.presence.subscribe(handlePresenceUpdate));
+
   autoScrollHistory(archive, endOfChatLog);
 
   return (
@@ -42,8 +94,9 @@ const ChatContainer = ({ currentChannel, onChatExit }) => {
         <ChatList history={history} />
         <li className="end-message" ref={endOfChatLog} />
       </ul>
-      <ChatInput sendMessage={sendMessage} />
-    </section >
+      <ChatInput sendMessage={sendMessage} sendStatus={sendStatus} />
+      <ChatInputStatus message={status} />
+    </section>
   );
 };
 

app/src/components/Chat/ChatInput.jsx

@@ -1,33 +1,57 @@
 import React from "react";
+import ContentEditable from "react-contenteditable";
 
-export const ChatInput = ({ sendMessage }) => {
+let timer = -1;
+
+export const ChatInput = ({ sendMessage, sendStatus }) => {
   const [message, setMessage] = React.useState("");
+  const clearStatusAfter = 5 * 1000; // miliseconds
+
+  React.useEffect(() => {
+    if (!message) return;
+    if (timer < 0) sendStatus("start");
+
+    const callback = () => {
+      sendStatus("done");
+      console.log({ timer });
+      timer = -1;
+    };
+
+    clearTimeout(timer);
+    timer = setTimeout(callback, clearStatusAfter);
+  }, [message]);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (message.trim() === "") {
-      return;
-    }
+    if (!`${message}`.trim()) return;
+
     sendMessage(message);
     setMessage("");
+    clearTimeout(timer);
+    timer = -1;
+    sendStatus("done");
+  };
+
+  const handleChange = ({ target }) => setMessage(target.value || "");
+
+  const handleKeydown = (e) => {
+    const passive = /^(control|arrow|shift|alt|meta|page|insert|home)/i;
+    if (passive.test(e.code)) return;
+
+    switch (e.code) {
+      case "Enter":
+        handleSubmit(e);
+        break;
+
+      default:
+        // tarpit for keypress
+        break;
+    }
   };
 
   return (
     <form className="send" onSubmit={handleSubmit}>
-      <textarea
-        autoFocus
-        className="send-input"
-        onChange={(e) => {
-          setMessage(e.target.value);
-        }}
-        onKeyDown={(e) => {
-          if (e.code == "Enter") {
-            e.preventDefault();
-            handleSubmit(e);
-          }
-        }}
-        value={message}
-      ></textarea>
+      <ContentEditable className="send-message" html={ message } onChange={handleChange} onKeyDown={handleKeydown} />
       <button className="send-button">Send</button>
     </form>
   );

app/src/components/Chat/chat.css

@@ -7,22 +7,31 @@
 
 .send {
   display: flex;
-  margin: 0 1rem 1rem;
+  flex-direction: row;
+  margin: 0 0.5rem;
+  font-size: 1rem;
 }
 
-.send-input {
+.send-status {
+  color: #777777;
+  font-size: 0.8rem;
+  height: 1.5rem;
+  margin: 0.25rem 0.5rem 0;
+}
+
+.send-input,
+.send-message {
   width: 100%;
   padding: var(--spacer);
-  font-size: 1rem;
   font-family: inherit;
+  border: 1px solid black;
+  border-radius: 0;
 }
-
 .send-button {
-  padding: 1rem 2rem;
+  padding: 0.5rem 1rem;
   border: 0;
-  font-family: inherit;
-  font-size: 1rem;
   font-weight: bold;
+  font-family: inherit;
   background-color: var(--primary);
   color: var(--primary-text);
   cursor: pointer;

package.json

@@ -54,6 +54,7 @@
     "ansi-regex": "^5.0.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
+    "react-contenteditable": "^3.3.6",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "tslib": "^2.3.1"