add use-Auto-Scroll.tsx in common/hooks and implement in student.component.tsx and session.component.tsx

Author: manudous

front/src/common/hooks/use-Auto-Scroll.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const useAutoScroll = () => {
+  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = React.useState(true);
+  const textAreaRef = React.useRef(null);
+
+  const doAutoScroll = () => {
+     if(isAutoScrollEnabled && textAreaRef.current) {
+      textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
+    }
+  }
+
+  return {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll}
+}

front/src/pods/student/student.component.tsx

@@ -6,6 +6,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 import * as innerClasses from './student.styles';
+import { useAutoScroll } from '../../common/hooks/use-Auto-Scroll';
 
 interface Props {
   room: string;
@@ -15,24 +16,17 @@ interface Props {
 export const StudentComponent: React.FC<Props> = props => {
   const { room, log } = props;
 
-  const [isAutoScrollEnabled, setAutoScrollEnabled] = React.useState(true);
-
-  const textAreaRef = React.useRef(null);
+  const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll();
 
   React.useEffect(() => {
-    if (isAutoScrollEnabled && textAreaRef.current) {
-      textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
-    }
+    doAutoScroll();
   }, [log]);
 
   return (
+
     <>
       <main className={innerClasses.root}>
-        <Typography
-          className={innerClasses.sessionName}
-          variant="body1"
-          role="heading"
-        >
+        <Typography className={innerClasses.sessionName} variant="body1" role="heading">
           Session name: {room ?? ''}
         </Typography>
         <label className={innerClasses.label} htmlFor="session">
@@ -51,7 +45,7 @@ export const StudentComponent: React.FC<Props> = props => {
           control={
             <Checkbox
               checked={isAutoScrollEnabled}
-              onChange={e => setAutoScrollEnabled(e.target.checked)}
+              onChange={e => setIsAutoScrollEnabled(e.target.checked)}
               color="primary"
             />
           }

front/src/pods/trainer/components/session.component.tsx

@@ -9,7 +9,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 
 import * as innerClasses from './session.styles';
-
+import { useAutoScroll } from '../../../common/hooks/use-Auto-Scroll';
 interface Props {
   log: string;
   handleSendFullContentLog: (fullContent: string) => void;
@@ -34,15 +34,11 @@ const getFullContent = (currenSessionContent: string) => {
 export const SessionComponent: React.FC<Props> = props => {
   const { log, handleSendFullContentLog, className } = props;
 
-  const [isAutoScrollEnabled, setAutoScrollEnabled] = React.useState(true);
-
-  const textAreaRef = React.useRef(null);
+  const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll();
 
   React.useEffect(() => {
     handleSetSessionContent(log);
-    if (isAutoScrollEnabled && textAreaRef.current) {
-      textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
-    }
+    doAutoScroll();
   }, [log]);
 
   return (
@@ -63,7 +59,7 @@ export const SessionComponent: React.FC<Props> = props => {
         control={
           <Checkbox
             checked={isAutoScrollEnabled}
-            onChange={e => setAutoScrollEnabled(e.target.checked)}
+            onChange={e => setIsAutoScrollEnabled(e.target.checked)}
             color="primary"
           />
         }