UI component refactor

src/composables/messageRenderer/useMessageRenderer.ts

@@ -1,52 +1,45 @@
-import useMessageOffsets from "./useOffsets";
 import useRendererAnims from "./useRendererAnims";
+import useOffsetCalculator from './useOffsetCalculator';
 export default function useMessageRenderer() {
 
-    const { calculateMessageOffsets } = useMessageOffsets();
-    const { scrollAnimate, stackAnimate } = useRendererAnims();
+    const { calculateMessageOffsets } = useOffsetCalculator();
+    const { shiftAnimate, stackAnimate } = useRendererAnims();
 
-    let messageOffset = {
-        x: 0,
-        y: 0
-    };
+    let messageList: NodeList;
     let modifier: string;
-    let msg: HTMLElement | null;
-    let renderList: NodeList;
-    let scrollAnim = false;
-    let scroll = 0;
+    let message: HTMLElement | null;
+    let messageOffset = { x: 0, y: 0 };
+    let shift = false;
+    let shiftValue = 0;
 
-    function setRenderList(): void {
-        const messages = document.querySelectorAll(".test");
-        if (messages.length) renderList = messages;
-    }
-
-    function renderMessage(el: SVGGElement): void {
+    function animateMessage(el: SVGGElement): void {
         const transform = {
             initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
             finalTranslate: `translate(${messageOffset.x} ${messageOffset.y + 5})`
         }
-        scrollAnim ? scrollAnimate(el, transform, scroll, renderList) : stackAnimate(el, transform);
+        shift ? shiftAnimate(el, transform, shiftValue, messageList) : stackAnimate(el, transform);
     }
 
     function beforeEnter(el: SVGGElement): void {
-        setRenderList();
         modifier = el.className.baseVal.substring(0, 2);
+        const queryResult = document.querySelectorAll(".messageList");
+        if (queryResult.length) messageList = queryResult;
     }
 
     function enter(el: SVGGElement): void {
-        msg = document.getElementById(el.id);
+        message = document.getElementById(el.id);
     }
 
     function afterEnter(el: SVGGElement) {
         const messagePadding = 10;
-        if (msg) {
-            messageOffset = calculateMessageOffsets(msg, modifier);
-            scrollAnim = messageOffset.y > 450 ? true : false;
+        if (message) {
+            messageOffset = calculateMessageOffsets(message, modifier);
+            shift = messageOffset.y > 450 ? true : false;
         }
-        if (scrollAnim) {
-            scroll -= el.getBBox().height + messagePadding;
+        if (shift) {
+            shiftValue -= el.getBBox().height + messagePadding;
         }
-        renderMessage(el);
+        animateMessage(el);
     }
 
     return {