Export logic to custom hook, add scrolling functionalities

Scrolling functionalities:
* When conversation show-up, automatically scroll messages to bottom
* When new message create or received scroll to bottom
* When scroll to top get messages history (it's not finished, waiting for backend)

Author: thecactoos

src/components/Messages/Messages.js

@@ -1,44 +1,70 @@
-import React, { useEffect, useRef } from "react";
-import { useParams } from "react-router-dom";
+import React from "react";
+import { useTransition, animated } from "react-spring";
 
 // Components
 import Message from "./Message/Message";
 
 // Styles
 import classes from "./Messages.module.scss";
 
-function Messages({ messages, members }) {
-  const { conversationId } = useParams();
-  const refMessagesEnd = useRef();
-  // const isIntersecting = useOnScreen(refMessagesEnd);
+// Hooks
+import useMessages from "./useMessages";
 
-  useEffect(() => {
-    refMessagesEnd.current.scrollIntoView();
-  }, [conversationId]);
+function Messages({ messages, members }) {
+  const { showMessages, refMessagesStart, refMessagesEnd } = useMessages(
+    messages
+  );
+  const transitions = useTransition(showMessages, null, {
+    from: {
+      width: "100%",
+      display: "grid",
+      gridTemplateColumns: "1rem 2fr 5fr 2fr 1rem",
+      alignContent: "start",
+      listStyle: "none",
+      paddingTop: "1rem",
+      position: "relative",
+      opacity: 0,
+    },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+  });
 
   return (
-    <ul className={classes.Messages}>
-      {messages.length !== 0
-        ? messages.map((message) => {
-            return (
-              <Message
-                content={message.content}
-                senderId={message.sender}
-                avatar={
-                  members.find(
-                    (member) =>
-                      member?._id === message.sender ||
-                      member.id === message.sender
-                  ).avatar50x50
-                }
-                key={message.tempId ? message.tempId : message._id}
-                isSending={message.isSending}
-              />
-            );
-          })
-        : null}
-      <li ref={refMessagesEnd}>&nbsp;</li>
-    </ul>
+    <div className={classes.MessagesWrapper}>
+      {transitions.map(
+        ({ item, props, key }) =>
+          item && (
+            <animated.ul key={key} style={props}>
+              <li
+                ref={refMessagesStart}
+                className={classes.MessagesStartListItem}
+              >
+                &nbsp;
+              </li>
+              {messages.map((message) => {
+                return (
+                  <Message
+                    content={message.content}
+                    senderId={message.sender}
+                    avatar={
+                      members.find(
+                        (member) =>
+                          member?._id === message.sender ||
+                          member.id === message.sender
+                      ).avatar50x50
+                    }
+                    key={message.tempId ? message.tempId : message._id}
+                    isSending={message.isSending}
+                  />
+                );
+              })}
+              <li ref={refMessagesEnd} className={classes.MessagesEndListItem}>
+                &nbsp;
+              </li>
+            </animated.ul>
+          )
+      )}
+    </div>
   );
 }
 

src/components/Messages/Messages.module.scss

@@ -1,15 +1,35 @@
 @import "../../styles/scrollbar";
 
-.Messages {
-  display: grid;
+.MessagesWrapper {
   grid-row: 2 / 3;
   height: 0;
   min-height: 100%;
   overflow-y: auto;
+  @include withCustomScrollbar;
+}
+
+.Messages {
+  display: grid;
   grid-template-columns: 1rem 2fr 5fr 2fr 1rem;
   align-content: start;
   list-style: none;
   padding-top: 1rem;
+  position: relative;
+}
 
-  @include withCustomScrollbar;
+.MessagesEndListItem {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 15vh;
+}
+
+.MessagesStartListItem {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin-top: 80px;
+  height: 15vh;
 }

src/components/Messages/useMessages.js

@@ -0,0 +1,51 @@
+import { useEffect, useState, useRef } from "react";
+import { useSelector } from "react-redux";
+import useOnScreen from "../../hooks/useOnScreen";
+
+const useMessages = (messages) => {
+  const refMessagesEnd = useRef(null);
+  const refMessagesStart = useRef(null);
+  const isLoaded = useSelector((state) => state.main.isLoaded);
+  const [isInitial, setIsInitial] = useState(true);
+  const isMessagesEndVisible = useOnScreen(refMessagesEnd);
+  const isMessagesStartVisible = useOnScreen(refMessagesStart);
+
+  useEffect(() => {
+    if (isLoaded && messages.length !== 0) {
+      // Initially show messages in the end, without smooth scroll
+      if (isInitial) {
+        refMessagesEnd.current.scrollIntoView(false);
+        setIsInitial(false);
+      }
+      // Scroll smooth when user is in the end of messages
+      else if (isMessagesEndVisible) {
+        refMessagesEnd.current.scrollIntoView({ behavior: "smooth" });
+      }
+      // Scroll to last messages when logged user send message
+      else if (
+        Object.prototype.hasOwnProperty.call(
+          messages[messages.length - 1],
+          "tempId"
+        )
+      ) {
+        refMessagesEnd.current.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [messages, isLoaded, isMessagesEndVisible, isInitial, refMessagesEnd]);
+
+  useEffect(() => {
+    if (isMessagesStartVisible) {
+      console.log("download");
+      // TO-DO
+      // GET HISTORY
+    }
+  }, [isMessagesStartVisible]);
+
+  return {
+    showMessages: messages.length !== 0,
+    refMessagesStart,
+    refMessagesEnd,
+  };
+};
+
+export default useMessages;