remove redundant code, render button by permission

src/components/LeaderBoard/Leaderboard.jsx

@@ -9,7 +9,8 @@ import {
  assignStarDotColors,
  showStar,
 } from 'utils/leaderboardPermissions';
-import MouseoverTextTotalTime from '../mouseoverText/mouseoverTextTotalTime';
+import MouseoverTextTotalTimeButton from '../mouseoverText/MouseoverTextTotalTimeButton';
+import MouseoverTextTotalTimeUpdater from '../mouseoverText/MouseoverTextTotalTimeUpdater';
 
 function useDeepEffect(effectFunc, deps) {
  const isFirst = useRef(true);
@@ -219,12 +220,10 @@ const LeaderBoard = ({
  <span className="d-none d-sm-inline-block" title={mouseoverText}>Total Time </span>
  </div>
  {isOwner && (
- <MouseoverTextTotalTime onUpdate={handleMouseoverTextUpdate} />
+ <MouseoverTextTotalTimeButton onUpdate={handleMouseoverTextUpdate} />
  )}
  {!isOwner && (
- <div style={{ visibility: 'hidden' }}>
- <MouseoverTextTotalTime onUpdate={handleMouseoverTextUpdate} />
- </div>
+ <MouseoverTextTotalTimeUpdater onUpdate={handleMouseoverTextUpdate} />
  )}
  </div>
  </th>

src/components/mouseoverText/mouseoverTextTotalTime.jsx → src/components/mouseoverText/MouseoverTextTotalTimeButton.jsx

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { getMouseoverText, createMouseoverText, updateMouseoverText } from '../../actions/mouseoverTextAction';
 
 
-function MouseoverTextTotalTime({
+function MouseoverTextTotalTimeButton({
  getMouseoverText,
  createMouseoverText,
  updateMouseoverText,
@@ -46,16 +46,13 @@ function MouseoverTextTotalTime({
  };
  if (text) {
  updateMouseoverText(mouseoverTextId, mouseoverText);
- setModalOpen(false);
- setText(newText);
- onUpdate(newText);
  } else {
  //console.log('createMouseoverText is ' + mouseoverText.newMouseoverText);
  createMouseoverText(mouseoverText);
- setModalOpen(false);
- setText(newText);
- onUpdate(newText);
  }
+ setModalOpen(false);
+ setText(newText);
+ onUpdate(newText);
  };
 
  const handleCancelSave = () => {
@@ -116,7 +113,7 @@ const mapDispatchToProps = dispatch => ({
  dispatch(updateMouseoverText(mouseoverTextId, mouseoverText)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(MouseoverTextTotalTime);
+export default connect(mapStateToProps, mapDispatchToProps)(MouseoverTextTotalTimeButton);
 
 
 

src/components/mouseoverText/MouseoverTextTotalTimeUpdater.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { getMouseoverText } from '../../actions/mouseoverTextAction';
+
+function MouseoverTextTotalTimeUpdater({ getMouseoverText, mouseoverText, onUpdate }) {
+ useEffect(() => {
+ getMouseoverText();
+ }, [getMouseoverText]);
+
+ useEffect(() => {
+ if (mouseoverText) {
+ onUpdate(mouseoverText); // Call the onUpdate function to pass the mouseoverText value to the parent component
+ }
+ }, [mouseoverText, onUpdate]);
+
+ return null;
+}
+
+const mapStateToProps = (state) => {
+ return {
+ mouseoverText: state?.mouseoverText?.[0]?.mouseoverText,
+ };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+ getMouseoverText: () => dispatch(getMouseoverText()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(MouseoverTextTotalTimeUpdater);