Extracting gantt iframe

src/views/SimproV2/Gantt/GanttFrame.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BASE_SIMPRO_LUMEN } from '../../../const/ApiConst';
+
+const GanttFrame = React.memo((props) => {
+  const { versionGanttId, idProject, token, ro, timestamp } = props;
+  const iframeSrc = `https://adw-gantt.ospro.id/edit-mode/index.html?base_url=${BASE_SIMPRO_LUMEN}&gantt_id=${versionGanttId}&proyek_id=${idProject}&token=${token}&ro=${ro}&timestamp=${timestamp}`;
+
+  return (
+    <iframe
+      id="frame-gantt"
+      src={iframeSrc}
+      style={{
+        width: '100%',
+        height: '95vh',
+      }}
+      scrolling="no"
+      frameBorder="0"
+      allow="fullscreen"
+    ></iframe>
+  );
+});
+
+export default GanttFrame;

src/views/SimproV2/Gantt/index.js

@@ -6,7 +6,7 @@ import axios from "../../../const/interceptorApi"
 import { Fab, Action } from 'react-tiny-fab';
 import 'react-tiny-fab/dist/styles.css';
 import { useHistory } from "react-router-dom";
-
+import GanttFrame from './GanttFrame';
 const token = localStorage.getItem("token")
 const userId = parseInt(localStorage.getItem("user_id"));
 const HEADER = {
@@ -82,24 +82,19 @@ const Gantt = (props) => {
 		}
 		roCount = roCount + 1;
 	}
-	const RenderGantt = () => (
-		<iframe
-			id="frame-gantt"
-			src={`https://adw-gantt.ospro.id/edit-mode/index.html?base_url=${BASE_SIMPRO_LUMEN}&gantt_id=${versionGanttId}&proyek_id=${idProject}&token=${token}&ro=${ro}&timestamp=${timestamp}`}
-			style={{
-				width: '100%',
-				height: '95vh',
-			}}
-			scrolling="no"
-			frameBorder="0"
-			allow="fullscreen"
-		></iframe>
-	)
 
 	return (
 		<>
 			<div style={{ margin: "-15px", marginBottom: "-30px" }}>
-				{ready && <RenderGantt />}
+				{ready && (
+					<GanttFrame
+						versionGanttId={versionGanttId}
+						idProject={idProject}
+						token={token}
+						ro={ro}
+						timestamp={timestamp}
+					/>
+				)}
 			</div>
 		</>
 	);