implement-autoScroll

Author: manudous

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

@@ -3,6 +3,8 @@ import * as classes from './student.styles';
 // Material UI ~ components
 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';
 
 interface Props {
   room: string;
@@ -13,6 +15,15 @@ export const StudentComponent: React.FC<Props> = props => {
   const { room, log } = props;
   const { mainContainer, sessionName, studentBoard, labelTextarea } = classes;
 
+  const [autoScroll, setAutoScroll] = React.useState(false);
+
+  const textAreaRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!autoScroll)
+      textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
+  }, [log]);
+
   return (
     <>
       <main className={mainContainer}>
@@ -23,12 +34,23 @@ export const StudentComponent: React.FC<Props> = props => {
           Content
         </label>
         <TextareaAutosize
+          ref={textAreaRef}
           id="session"
           rowsMax={30}
           rowsMin={30}
           className={studentBoard}
           value={log ?? ''}
         />
+        <FormControlLabel
+          label="Disable AutoScroll"
+          control={
+            <Checkbox
+              checked={autoScroll}
+              onChange={e => setAutoScroll(e.target.checked)}
+              color="primary"
+            />
+          }
+        />
       </main>
     </>
   );

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

@@ -6,6 +6,8 @@ import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
 
 import UndoIcon from '@material-ui/icons/Undo';
 import Button from '@material-ui/core/Button';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
 
 interface Props {
   log: string;
@@ -40,8 +42,14 @@ export const SessionComponent: React.FC<Props> = props => {
     undoBtn,
   } = classes;
 
+  const [autoScroll, setAutoScroll] = React.useState(false);
+
+  const textAreaRef = React.useRef(null);
+
   React.useEffect(() => {
     handleSetSessionContent(log);
+    if (!autoScroll)
+      textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
   }, [log]);
 
   return (
@@ -51,11 +59,22 @@ export const SessionComponent: React.FC<Props> = props => {
       </label>
 
       <TextareaAutosize
+        ref={textAreaRef}
         id="session"
         rowsMax={20}
         rowsMin={20}
         className={studentBoard}
       />
+      <FormControlLabel
+        label="Disable AutoScroll"
+        control={
+          <Checkbox
+            checked={autoScroll}
+            onChange={e => setAutoScroll(e.target.checked)}
+            color="primary"
+          />
+        }
+      />
       <div className={btnContainer}>
         <Button
           variant="contained"