update files session.component.tsx and student.component.tsx

Author: manudous

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

@@ -7,7 +7,6 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 import * as innerClasses from './student.styles';
 
-
 interface Props {
   room: string;
   log: string;
@@ -16,20 +15,24 @@ interface Props {
 export const StudentComponent: React.FC<Props> = props => {
   const { room, log } = props;
 
-  const [autoScroll, setAutoScroll] = React.useState(false);
+  const [isAutoScrollEnabled, setAutoScrollEnabled] = React.useState(true);
 
   const textAreaRef = React.useRef(null);
 
   React.useEffect(() => {
-    if (!autoScroll)
+    if (isAutoScrollEnabled && textAreaRef.current) {
       textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
+    }
   }, [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">
@@ -47,8 +50,8 @@ export const StudentComponent: React.FC<Props> = props => {
           label="Disable AutoScroll"
           control={
             <Checkbox
-              checked={autoScroll}
-              onChange={e => setAutoScroll(e.target.checked)}
+              checked={isAutoScrollEnabled}
+              onChange={e => setAutoScrollEnabled(e.target.checked)}
               color="primary"
             />
           }

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

@@ -34,14 +34,15 @@ const getFullContent = (currenSessionContent: string) => {
 export const SessionComponent: React.FC<Props> = props => {
   const { log, handleSendFullContentLog, className } = props;
 
-  const [autoScroll, setAutoScroll] = React.useState(false);
+  const [isAutoScrollEnabled, setAutoScrollEnabled] = React.useState(true);
 
   const textAreaRef = React.useRef(null);
 
   React.useEffect(() => {
     handleSetSessionContent(log);
-    if (!autoScroll)
+    if (isAutoScrollEnabled && textAreaRef.current) {
       textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
+    }
   }, [log]);
 
   return (
@@ -61,8 +62,8 @@ export const SessionComponent: React.FC<Props> = props => {
         label="Disable AutoScroll"
         control={
           <Checkbox
-            checked={autoScroll}
-            onChange={e => setAutoScroll(e.target.checked)}
+            checked={isAutoScrollEnabled}
+            onChange={e => setAutoScrollEnabled(e.target.checked)}
             color="primary"
           />
         }