Merge pull request #139 from manudous/feature/implement-autoScroll

implement-autoScroll

Author: brauliodiez

front/src/common/hooks/auto-scroll.hook.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

@@ -1,7 +1,12 @@
 import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
+
+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/auto-scroll.hook';
 
 interface Props {
   room: string;
@@ -11,25 +16,41 @@ interface Props {
 export const StudentComponent: React.FC<Props> = props => {
   const { room, log } = props;
 
+  const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll();
+
+  React.useEffect(() => {
+    doAutoScroll();
+  }, [log]);
+
   return (
-    <main className={innerClasses.root}>
-      <Typography
-        className={innerClasses.sessionName}
-        variant="body1"
-        role="heading"
-      >
-        Session name: {room ?? ''}
-      </Typography>
-      <label className={innerClasses.label} htmlFor="session">
-        Content
-      </label>
-      <TextareaAutosize
-        id="session"
-        rowsMax={30}
-        rowsMin={30}
-        className={innerClasses.textarea}
-        value={log ?? ''}
-      />
-    </main>
+
+    <>
+      <main className={innerClasses.root}>
+        <Typography className={innerClasses.sessionName} variant="body1" role="heading">
+          Session name: {room ?? ''}
+        </Typography>
+        <label className={innerClasses.label} htmlFor="session">
+          Content
+        </label>
+        <TextareaAutosize
+          ref={textAreaRef}
+          id="session"
+          rowsMax={30}
+          rowsMin={30}
+          className={innerClasses.textarea}
+          value={log ?? ''}
+        />
+        <FormControlLabel
+          label="Disable AutoScroll"
+          control={
+            <Checkbox
+              checked={isAutoScrollEnabled}
+              onChange={e => setIsAutoScrollEnabled(e.target.checked)}
+              color="primary"
+            />
+          }
+        />
+      </main>
+    </>
   );
 };

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

@@ -4,8 +4,12 @@ import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
 import UndoIcon from '@material-ui/icons/Undo';
 import Button from '@material-ui/core/Button';
-import * as innerClasses from './session.styles';
 
+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/auto-scroll.hook';
 interface Props {
   log: string;
   handleSendFullContentLog: (fullContent: string) => void;
@@ -30,8 +34,11 @@ const getFullContent = (currenSessionContent: string) => {
 export const SessionComponent: React.FC<Props> = props => {
   const { log, handleSendFullContentLog, className } = props;
 
+  const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll();
+
   React.useEffect(() => {
     handleSetSessionContent(log);
+    doAutoScroll();
   }, [log]);
 
   return (
@@ -41,11 +48,22 @@ export const SessionComponent: React.FC<Props> = props => {
       </label>
 
       <TextareaAutosize
+        ref={textAreaRef}
         id="session"
         rowsMax={20}
         rowsMin={20}
         className={innerClasses.textarea}
       />
+      <FormControlLabel
+        label="Disable AutoScroll"
+        control={
+          <Checkbox
+            checked={isAutoScrollEnabled}
+            onChange={e => setIsAutoScrollEnabled(e.target.checked)}
+            color="primary"
+          />
+        }
+      />
       <Button
         variant="contained"
         color="secondary"