remove unnecessary dependencies on

- dispatch and other functions

- elements initialised with createRef()

Also, replace props.location with props.location.search

16 files changed, 19 insertions, 26 deletions

diff --git a/blocks/eda-frontend/src/App.js b/blocks/eda-frontend/src/App.js
index 4273cacc..9b38be4c 100644
--- a/blocks/eda-frontend/src/App.js
+++ b/blocks/eda-frontend/src/App.js
@@ -23,7 +23,7 @@ function PrivateRoute ({ component: Component, ...rest }) {
   const isLoading = useSelector(state => state.authReducer.isLoading)
   const dispatch = useDispatch()
 
-  useEffect(() => dispatch(loadUser()), [dispatch])
+  useEffect(() => dispatch(loadUser()), [])
 
   return (
     <Route
@@ -50,7 +50,7 @@ function PublicRoute ({ component: Component, restricted, nav, ...rest }) {
   const isLoading = useSelector(state => state.authReducer.isLoading)
   const dispatch = useDispatch()
 
-  useEffect(() => dispatch(loadUser()), [dispatch])
+  useEffect(() => dispatch(loadUser()), [])
 
   return (
     <Route
diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
index 6f3486fd..875244dc 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
@@ -46,7 +46,7 @@ export default function DashSidebar (props) {
   // For Fetching Saved Schematics
   useEffect(() => {
     dispatch(fetchSchematics())
-  }, [dispatch])
+  }, [])
 
   const button = 'My ' + process.env.REACT_APP_DIAGRAMS_NAME
   const placeholder = 'Find your ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME + '...'
diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
index d48ab7c9..7b1fd019 100644
--- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
+++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
@@ -63,7 +63,7 @@ export default function ProgressPanel () {
   // For Fetching Saved Schematics
   useEffect(() => {
     dispatch(fetchSchematics())
-  }, [dispatch])
+  }, [])
 
   const tab = 'Recent ' + process.env.REACT_APP_DIAGRAMS_NAME
   const typography = 'You have not created any ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
index 85cfea3f..8d8cb712 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
@@ -63,7 +63,7 @@ export default function SchematicsList () {
   // For Fetching Saved Schematics
   useEffect(() => {
     dispatch(fetchSchematics())
-  }, [dispatch])
+  }, [])
 
   const typography1 = "You don't have any saved " + process.env.REACT_APP_SMALL_DIAGRAMS_NAME + '...'
   return (
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
index d6e52b85..c6b42863 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
@@ -103,7 +103,7 @@ export default function ComponentSidebar ({ compRef }) {
   // For Fetching Libraries
   useEffect(() => {
     dispatch(fetchLibraries())
-  }, [dispatch])
+  }, [])
 
   // Used to chunk array
   const chunk = (array, size) => {
@@ -246,7 +246,7 @@ export function ComponentImages () {
   // For Fetching Image Paths
   useEffect(() => {
     dispatch(fetchComponentImages())
-  }, [dispatch])
+  }, [])
 
   return (
     <div>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index 8196e3f2..581eba9d 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -402,8 +402,7 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
       if (re.test(filename)) {
         const reader = new FileReader()
         reader.onload = function (event) {
-          // FIXME: issue in rendering
-          // dispatch(loadingDiagram(true))
+          dispatch(loadingDiagram(true))
           const title = filename.replace(re, '')
           let dataDump = event.target.result
           const xmlDoc = mxUtils.parseXml(dataDump)
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
index c69788af..b578016f 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
@@ -1,4 +1,4 @@
-import React, { createRef, useEffect, useRef, useState } from 'react'
+import React, { createRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { List, ListItemText, Tooltip, Popover } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
@@ -18,7 +18,6 @@ const useStyles = makeStyles((theme) => ({
 export default function SideComp ({ component }) {
   const classes = useStyles()
   const imageRef = createRef()
-  const isLoaded = useRef(false)
 
   const [anchorEl, setAnchorEl] = useState(null)
 
@@ -33,13 +32,9 @@ export default function SideComp ({ component }) {
   const id = open ? 'simple-popover' : undefined
 
   useEffect(() => {
-    if (isLoaded.current) {
-      return
-    }
-    isLoaded.current = true
     // Function call to make components draggable
     AddComponent(component, imageRef.current)
-  }, [imageRef, component])
+  }, [component])
 
   const link1 = process.env.REACT_APP_BLOCK_NAME + ' Name'
   const link2 = process.env.REACT_APP_CATEGORY_NAME
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
index 0fb36ce0..75de22d9 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
@@ -658,7 +658,7 @@ export default function SimulationScreen ({ open, close }) {
     simulationResult(getUrl, getStreamingUrl)
   }, [isResult, simulationResult])
 
-  useEffect(() => getSimulationResult(taskId), [taskId, getSimulationResult])
+  useEffect(() => getSimulationResult(taskId), [taskId])
 
   useEffect(() => {
     for (let i = 0; i < Highcharts.charts.length; i++) {
diff --git a/blocks/eda-frontend/src/pages/Dashboard.js b/blocks/eda-frontend/src/pages/Dashboard.js
index 2ba84b43..2794f6c8 100644
--- a/blocks/eda-frontend/src/pages/Dashboard.js
+++ b/blocks/eda-frontend/src/pages/Dashboard.js
@@ -26,7 +26,7 @@ export default function Dashboard () {
 
   useEffect(() => {
     document.title = 'Dashboard - ' + process.env.REACT_APP_NAME
-  })
+  }, [])
 
   return (
     <div className={classes.root}>
diff --git a/blocks/eda-frontend/src/pages/Gallery.js b/blocks/eda-frontend/src/pages/Gallery.js
index a08ed8e9..ec7da9c4 100644
--- a/blocks/eda-frontend/src/pages/Gallery.js
+++ b/blocks/eda-frontend/src/pages/Gallery.js
@@ -38,7 +38,7 @@ function SchematicCard ({ sch }) {
 
   useEffect(() => {
     document.title = 'Gallery - ' + process.env.REACT_APP_NAME
-  })
+  }, [])
 
   const imageName = images('./' + sch.media)
 
diff --git a/blocks/eda-frontend/src/pages/Home.js b/blocks/eda-frontend/src/pages/Home.js
index 7d4bcf6b..88a6294b 100644
--- a/blocks/eda-frontend/src/pages/Home.js
+++ b/blocks/eda-frontend/src/pages/Home.js
@@ -19,7 +19,7 @@ export default function Home () {
 
   useEffect(() => {
     document.title = process.env.REACT_APP_NAME
-  })
+  }, [])
 
   const typography1 = process.env.REACT_APP_NAME + ' on Cloud'
   const typography2 = 'Online ' + process.env.REACT_APP_NAME + ' Simulator'
diff --git a/blocks/eda-frontend/src/pages/Login.js b/blocks/eda-frontend/src/pages/Login.js
index 5d1da000..2af2fc1f 100644
--- a/blocks/eda-frontend/src/pages/Login.js
+++ b/blocks/eda-frontend/src/pages/Login.js
@@ -66,7 +66,7 @@ export default function SignIn (props) {
     } else {
       url = ''
     }
-  }, [dispatch, props.location.search])
+  }, [props.location.search])
 
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
diff --git a/blocks/eda-frontend/src/pages/NotFound.js b/blocks/eda-frontend/src/pages/NotFound.js
index 0dcff9c4..f0f68501 100644
--- a/blocks/eda-frontend/src/pages/NotFound.js
+++ b/blocks/eda-frontend/src/pages/NotFound.js
@@ -16,7 +16,7 @@ export default function NotFound () {
 
   useEffect(() => {
     document.title = 'Not Found - ' + name
-  })
+  }, [])
 
   return (
     <Container maxWidth='lg' className={classes.header}>
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
index c75efc4d..db55f996 100644
--- a/blocks/eda-frontend/src/pages/SchematicEditor.js
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -59,7 +59,7 @@ export default function SchematicEditor (props) {
         dispatch(fetchSchematic(cktid))
       }
     }
-  }, [compRef, gridRef, outlineRef, props.location, dispatch])
+  }, [props.location.search])
 
   return (
     <div className={classes.root}>
diff --git a/blocks/eda-frontend/src/pages/signUp.js b/blocks/eda-frontend/src/pages/signUp.js
index 4895b696..bce4873e 100644
--- a/blocks/eda-frontend/src/pages/signUp.js
+++ b/blocks/eda-frontend/src/pages/signUp.js
@@ -57,7 +57,7 @@ export default function SignUp () {
   useEffect(() => {
     dispatch(authDefault())
     document.title = 'Sign Up - ' + process.env.REACT_APP_NAME
-  }, [dispatch])
+  }, [])
 
   const history = useHistory()
 
diff --git a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
index 08d83b4f..c490a364 100644
--- a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
+++ b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
@@ -174,8 +174,7 @@ export const loadGallery = (saveId) => (dispatch, getState) => {
     return
   }
 
-  // FIXME: issue in rendering
-  // dispatch(loadingDiagram(true))
+  dispatch(loadingDiagram(true))
   // Check if the data is xcos or xml
   const parser = new DOMParser()
   const xmlDoc = parser.parseFromString(data.data_dump, 'application/xml')