#51 list messages as well as users in messages

codekiln · Mar 30, 2018 · 5deea82 · 5deea82
1 parent 03c45bb
commit 5deea82
Showing 1 changed file with 97 additions and 53 deletions.
diff --git a/...ample_project/django_react_chat_example_project/static/js/chat/rechat/src/RechatWindow.re b/...ample_project/django_react_chat_example_project/static/js/chat/rechat/src/RechatWindow.re
@@ -1,49 +1,47 @@
-/*
- let renderChatMessageItem = message => {
-   Js.log(message);
-   let getKey = msg =>
-     switch (msg##id) {
-     | Some(id) => string_of_int(id)
-     | None => "no id"
-     };
-   <RechatMessageListItem key=(getKey(message)) chatMessage=message />;
- };
-
- let renderChatWindow = chatGroup => {
-   let getMessageEdgesArray = messagesOption =>
-     switch (messagesOption) {
-     | Some(messages) => RechatUtils.arr_only_some(messages#edges)
-     | None => [||]
-     };
-   let getMessageNodesArray = someMessageEdges =>
-     switch (someMessageEdges#node) {
-     | Some(messageNode) => [|messageNode|]
-     | None => [||]
-     };
-   let messageItems =
-     getMessageEdgesArray(chatGroup##messages)
-     |> getMessageNodesArray
-     |> Array.map(renderChatMessageItem)
-     |> ReasonReact.arrayToElement;
-   <div className="RechatWindow">
-     <div className="RechatWindow__Header">
-       <div className="RechatWindow__HeaderTitle">
-         (RechatUtils.ste("Chat User 1"))
+/* let renderChatMessageItem = message => {
+     Js.log(message);
+     let getKey = msg =>
+       switch (msg##id) {
+       | Some(id) => string_of_int(id)
+       | None => "no id"
+       };
+     <RechatMessageListItem key=(getKey(message)) chatMessage=message />;
+   }; */
+/* let renderChatWindow = chatGroup => {
+     let getMessageEdgesArray = messagesOption =>
+       switch (messagesOption) {
+       | Some(messages) => RechatUtils.arr_only_some(messages#edges)
+       | None => [||]
+       };
+     let getMessageNodesArray = someMessageEdges =>
+       switch (someMessageEdges#node) {
+       | Some(messageNode) => [|messageNode|]
+       | None => [||]
+       };
+     let messageItems =
+       getMessageEdgesArray(chatGroup##messages)
+       |> getMessageNodesArray
+       |> Array.map(renderChatMessageItem)
+       |> ReasonReact.arrayToElement;
+     <div className="RechatWindow">
+       <div className="RechatWindow__Header">
+         <div className="RechatWindow__HeaderTitle">
+           (RechatUtils.ste("Chat User 1"))
+         </div>
+         <div className="RechatWindow__CloseButton">
+           (RechatUtils.ste("X"))
+         </div>
        </div>
-       <div className="RechatWindow__CloseButton">
-         (RechatUtils.ste("X"))
+       <div className="RechatWindow__MessagesPort"> messageItems </div>
+       <div className="RechatWindow__Footer">
+         <input
+           _type="text"
+           placeholder="Type a message..."
+           className="RechatWindow__Input"
+         />
        </div>
-     </div>
-     <div className="RechatWindow__MessagesPort"> messageItems </div>
-     <div className="RechatWindow__Footer">
-       <input
-         _type="text"
-         placeholder="Type a message..."
-         className="RechatWindow__Input"
-       />
-     </div>
-   </div>;
- };*/
+     </div>;
+   }; */
 type user = {
   id: string,
   name: string,
@@ -52,6 +50,14 @@ type user = {
   isCurrentUser: Js.boolean,
 };
 
+type author = {id: string};
+
+type message = {
+  id: string,
+  author,
+  text: string,
+};
+
 module GroupQuery = [%graphql
   {|
 query GetChatGroup($chatGroupId: ID!){
@@ -70,10 +76,10 @@ query GetChatGroup($chatGroupId: ID!){
     }
     messages {
       edges {
-        node {
+        node @bsRecord {
           id
           text
-          author {
+          author @bsRecord {
             id
           }
         }
@@ -87,6 +93,9 @@ query GetChatGroup($chatGroupId: ID!){
 type userObjArr =
   option({. "edges": array(option({. "node": option(user)}))});
 
+type messagesObjArr =
+  option({. "edges": array(option({. "node": option(message)}))});
+
 let parseUsers = (users: userObjArr) => {
   let someUsers =
     switch (users) {
@@ -105,27 +114,62 @@ let parseUsers = (users: userObjArr) => {
   Array.fold_left(buildUserList, [], someUsers);
 };
 
+let parseMessages = (messages: messagesObjArr) => {
+  let someMessages =
+    switch (messages) {
+    | Some(messages) => messages##edges
+    | None => [|None|]
+    };
+  let buildMessageList = (messageList, edge) =>
+    switch (edge) {
+    | Some(messageEdge) =>
+      switch (messageEdge##node) {
+      | Some(message) => [message, ...messageList]
+      | None => messageList
+      }
+    | None => messageList
+    };
+  let newMessages = Array.fold_left(buildMessageList, [], someMessages);
+  newMessages;
+};
+
 let getChatGroupUsers = chatGroup =>
   switch (chatGroup) {
   | Some(chatGroup) => parseUsers(chatGroup##users)
   | None => []
   };
 
-module StringMap = Map.Make(String);
+let getChatGroupMessages = chatGroup =>
+  switch (chatGroup) {
+  | Some(chatGroup) => parseMessages(chatGroup##messages)
+  | None => []
+  };
 
-let getUserMap = (users: list(user)) => {
-  let buildUserMap = (map, user) => StringMap.add(user.id, user, map);
-  List.fold_left(buildUserMap, StringMap.empty, users);
-};
+module StringMap = Map.Make(String);
 
+/* let getUserMap = (users: list(user)) => {
+     let buildUserMap = (map, user) => StringMap.add(user.id, user, map);
+     List.fold_left(buildUserMap, StringMap.empty, users);
+   }; */
+/* let renderMessages =  */
 let renderLoadedResult = result => {
   let chatGroup = result##chatGroup;
+  Js.log(chatGroup);
   let users = getChatGroupUsers(chatGroup);
-  let usersMap = getUserMap(users);
+  let messages = getChatGroupMessages(chatGroup);
+  Js.log(messages);
+  /* let usersMap = getUserMap(users); */
   let usersArray = ArrayLabels.of_list(users);
+  let messagesArray = ArrayLabels.of_list(messages);
+  /* let usersLiArMapper = user => <li> (RechatUtils.ste(user.name)) </li>; */
   let usersLiArMapper = user => <li> (RechatUtils.ste(user.name)) </li>;
+  let messageLiArMapper = msg => <li> (RechatUtils.ste(msg.text)) </li>;
   let usersLiArr = Array.map(usersLiArMapper, usersArray);
-  <ul> (ReasonReact.arrayToElement(usersLiArr)) </ul>;
+  let messageLiArr = Array.map(messageLiArMapper, messagesArray);
+  <div>
+    <ul> (ReasonReact.arrayToElement(usersLiArr)) </ul>
+    <ul> (ReasonReact.arrayToElement(messageLiArr)) </ul>
+  </div>;
 };
 
 module Query = RechatApollo.Instance.Query;