fixing re rendering in challenge view

Program-AR · Oct 29, 2024 · 095aa53 · 095aa53
1 parent 1d95761
commit 095aa53
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 55 deletions.
diff --git a/locales/en-us/creator.json b/locales/en-us/creator.json
@@ -140,6 +140,7 @@
 		"clue": "Clue",
 		"includeClue": "Include a clue",
 		"defaultDescription": "Your **statement** will look like this...",
+		"defaultClue": "Your **clue** will look like this...",
 		"defaultTitle": "Write your challenge's title..."
 	},
 	"tools": {

diff --git a/locales/es-ar/creator.json b/locales/es-ar/creator.json
@@ -140,6 +140,7 @@
 		"clue": "Pista",
 		"includeClue": "Incluir una pista",
 		"defaultDescription": "Así se verá tu **enunciado**...",
+		"defaultClue": "Así se verá tu **pista**...",
 		"defaultTitle": "Escribí tu título..."
 	},
 	"tools": {

diff --git a/locales/pt-br/creator.json b/locales/pt-br/creator.json
@@ -140,6 +140,7 @@
 		"clue": "Pista",
 		"includeClue": "Incluir uma pista",
 		"defaultDescription": "Assim se verá teu **enunciado**...",
+		"defaultClue": "Assim se verá teu **pista**...",
 		"defaultTitle": "Escreva teu título..."
 	},
 	"tools": {

diff --git a/src/components/challengeView/ChallengeView.tsx b/src/components/challengeView/ChallengeView.tsx
@@ -73,8 +73,6 @@ type ChallengeWorkspaceProps = {
 
 const ChallengeWorkspace = ({ statement, challenge, clue }: ChallengeWorkspaceProps) => {
   const { isSmallScreen } = useThemeContext()
-  // const [descriptionOrClue, setDescriptionOrClue] = useState(statement!)
-  // const setToShow = (show: StatementTextToShow) => setDescriptionOrClue(show === StatementTextToShow.CLUE ? clue! : statement!)
   const [first, setFirst] = useState<boolean>(true)
 
   useEffect(() => {
@@ -97,8 +95,6 @@ const ChallengeWorkspace = ({ statement, challenge, clue }: ChallengeWorkspacePr
   return <>
     <Stack flexGrow={1} direction='column' height='100%'>
       <StatementDescription
-        // text={descriptionOrClue}
-        //setShowStatement={() => {}}
         statement={statement}
         clue={clue}
         clueIsEnabled={clue !== ''}

diff --git a/src/components/challengeView/StatementDescription.tsx b/src/components/challengeView/StatementDescription.tsx
@@ -4,22 +4,18 @@ import { WbIncandescent, MenuBook } from"@mui/icons-material"
 import { PBCard } from "../PBCard";
 import remarkGfm from 'remark-gfm';
 import remarkemoji from 'remark-emoji';
-//import { StatementTextToShow } from "../creator/Editor/MarkDownEdition/MarkdownEditor";
 import { useThemeContext } from "../../theme/ThemeContext";
-import { useState } from "react";
+import { MutableRefObject, useState } from "react";
 
 export type StatementDescriptionProps = {
   statement?: string
   clue?: string
-  // text: string
-  //setShowStatement: (show: StatementTextToShow) => void
   clueIsEnabled: boolean
   urlImage: string
+  statementButtonRef?: MutableRefObject<HTMLButtonElement | null>
+  clueButtonRef?: MutableRefObject<HTMLButtonElement | null>
 }
 
-// TODO: This component should have state of its own to know when to show the clue.
-// TODO: StatementTextToShow should be on this file.
-
 export enum StatementTextToShow {
   STATEMENT,
   CLUE
@@ -35,11 +31,11 @@ export const StatementDescription = (props: StatementDescriptionProps) => {
         <img height="100%" alt="actor" src={props.urlImage}/>
         <Stack width="50px" height="100%" alignItems="center" justifyContent="center" sx={{backgroundColor: darken(theme.palette.text.secondary, 0.13)}}>
 
-          <Button onClick={() => setShowStatement(StatementTextToShow.STATEMENT)} sx={{minWidth:"50px"}}>
+          <Button ref={props.statementButtonRef} onClick={() => setShowStatement(StatementTextToShow.STATEMENT)} sx={{minWidth:"50px"}}>
             <MenuBook/>
           </Button>
 
-          <Button disabled={!props.clueIsEnabled} onClick={() => setShowStatement(StatementTextToShow.CLUE)} sx={{color:"#ebca14", minWidth:"50px"}}>
+          <Button disabled={!props.clueIsEnabled} ref={props.clueButtonRef} onClick={() => setShowStatement(StatementTextToShow.CLUE)} sx={{color:"#ebca14", minWidth:"50px"}}>
             <WbIncandescent style={{ transform: "rotate(180deg)"}}/>
           </Button>
 

diff --git a/src/components/creator/Editor/ChallengeDetailsEdition/StatementEdition.tsx b/src/components/creator/Editor/ChallengeDetailsEdition/StatementEdition.tsx
@@ -56,7 +56,7 @@ export const StatementEdition = (props: StatementEditionType) => {
                         title={`${t('statement.title')}${t(`selection.cards.${actor}.name`)}`}>
             <Box style={{ justifyContent:'center'}}>
 
-            <MarkdownEditor statement={statement} clue={clue} setStatement={setStatement} setClue={setClue} clueIsEnabled={false} urlImage={""} />
+            <MarkdownEditor statement={statement} clue={clue} setStatement={setStatement} setClue={setClue} />
 
             </Box>
         </GenericModalDialog>

diff --git a/src/components/creator/Editor/MarkDownEdition/MarkdownEditor.tsx b/src/components/creator/Editor/MarkDownEdition/MarkdownEditor.tsx
@@ -1,7 +1,7 @@
 import { MarkdownInput } from "./MarkdownInput"
 import { StatementDescription } from "../../../challengeView/StatementDescription"
 import { LocalStorage } from "../../../../localStorage"
-import { StatementDescriptionProps } from "../../../challengeView/StatementDescription"
+import { useRef } from "react"
 
 type MarkdownEditorProps = {
     statement: string
@@ -10,15 +10,27 @@ type MarkdownEditorProps = {
     setClue: (clue?: string) => void
 }
 
-export const MarkdownEditor = (props: MarkdownEditorProps & StatementDescriptionProps) => 
+export const MarkdownEditor = (props: MarkdownEditorProps) => {
 
-/* La sentencia translate="no" evita la traducción del contenido de la pagina cuando está activada en Chrome/Safari */ /* con motivo del error que se producía: "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node"*/ /* similar a lo descripto en la siguiente documentacion por ser un inconveniente entre React DOM vs Real DOM en la renderizacion */ /* cuando Chrome o Safari modifican el html para producir la traduccion en linea, lo hace solo en uno de ellos provocando el error.*/ /* https://github.com/facebook/react/issues/17256*/ /* Se aplica esta solucion https://stackoverflow.com/questions/12238396/how-to-disable-google-translate-from-html-in-chrome/12238414#12238414*/ <span translate="no">
-    <MarkdownInput setShowStatement={props.setShowStatement} statement={props.statement} clue={props.clue} setClue={props.setClue} setStatement={props.setStatement} />
-    <StatementDescription
-        //text={textToShow}
-        //setShowStatement={() => { } }
-        statement={props.statement}
-        clue={props.clue}
-        clueIsEnabled={!!props.clue}
-        urlImage={`imagenes/sceneImages/${LocalStorage.getCreatorChallenge()!.scene.type}/tool.png`} />
-</span>
+    const clueButtonRef = useRef<HTMLButtonElement | null>(null)
+    const statementButtonRef = useRef<HTMLButtonElement | null>(null)
+
+    /* La sentencia translate="no" evita la traducción del contenido de la pagina cuando está activada en Chrome/Safari */ /* con motivo del error que se producía: "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node"*/ /* similar a lo descripto en la siguiente documentacion por ser un inconveniente entre React DOM vs Real DOM en la renderizacion */ /* cuando Chrome o Safari modifican el html para producir la traduccion en linea, lo hace solo en uno de ellos provocando el error.*/ /* https://github.com/facebook/react/issues/17256*/ /* Se aplica esta solucion https://stackoverflow.com/questions/12238396/how-to-disable-google-translate-from-html-in-chrome/12238414#12238414*/
+
+    return <span translate="no">
+        <MarkdownInput 
+            clueButtonRef={clueButtonRef}
+            statementButtonRef={statementButtonRef}
+            statement={props.statement} 
+            clue={props.clue} 
+            setClue={props.setClue} 
+            setStatement={props.setStatement} />
+        <StatementDescription
+            clueButtonRef={clueButtonRef}
+            statementButtonRef={statementButtonRef}
+            statement={props.statement}
+            clue={props.clue}
+            clueIsEnabled={!!props.clue}
+            urlImage={`imagenes/sceneImages/${LocalStorage.getCreatorChallenge()!.scene.type}/tool.png`} />
+    </span>
+}
diff --git a/src/components/creator/Editor/MarkDownEdition/MarkdownInput.tsx b/src/components/creator/Editor/MarkDownEdition/MarkdownInput.tsx
@@ -1,22 +1,22 @@
 import { Switch, FormControlLabel, TextField } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import { StatementTextToShow } from "../../../challengeView/StatementDescription";
+import { MutableRefObject, useState } from "react";
 
 type MarkdownInputProps = {
   statement: string,
   setStatement: (statement: string) => void,
   clue: string | undefined,
   setClue: (clue?: string) => void
-  setShowStatement: (selected: StatementTextToShow) => void
+  statementButtonRef: MutableRefObject<HTMLButtonElement | null>
+  clueButtonRef: MutableRefObject<HTMLButtonElement | null>
 }
 
 export const MarkdownInput = (props: MarkdownInputProps) => {
 
   const [clueIsEnabled, setClueIsEnabled] = useState<boolean>(!!props.clue)
 
   const { t } = useTranslation('creator');
-  
+
   const onClueChange = (e: { currentTarget: { value: string; }; }) => {
     const newValue = e.currentTarget.value;
     props.setClue(newValue)
@@ -29,18 +29,19 @@ export const MarkdownInput = (props: MarkdownInputProps) => {
 
   const toggleClueEnabled = (e: { currentTarget: { checked: boolean }; }) => {
     setClueIsEnabled(e.currentTarget.checked)
-    if(!e.currentTarget.checked) {
+    if (!e.currentTarget.checked) {
       props.setClue(undefined)
-      props.setShowStatement(StatementTextToShow.STATEMENT)
-      props.statement
+      props.statementButtonRef.current?.click()
+    } else {
+      props.setClue(t("statement.defaultClue")!)
     }
 
   }
 
 
   return (
     <>
-    <TextField
+      <TextField
         fullWidth
         autoFocus
         size="small"
@@ -49,28 +50,26 @@ export const MarkdownInput = (props: MarkdownInputProps) => {
         label={t('statement.description')}
         value={props.statement}
         onChange={onStatementChange}
-        onFocus={() => props.setShowStatement(StatementTextToShow.STATEMENT)}
-        //onFocus={() => props.statement}
-        sx={{marginTop: '10px'}}
+        onFocus={() => props.statementButtonRef.current?.click()}
+        sx={{ marginTop: '10px' }}
         id="statement-input"
-    />
-    <FormControlLabel control={<Switch color="secondary" onChange={toggleClueEnabled} checked={clueIsEnabled}/>} label={t("statement.includeClue")}/>
+      />
+      <FormControlLabel control={<Switch color="secondary" onChange={toggleClueEnabled} checked={clueIsEnabled} />} label={t("statement.includeClue")} />
 
-    {clueIsEnabled ? 
-    <TextField
-        fullWidth
-        size="small"
-        multiline={true}
-        label={t('statement.clue')}
-        value={props.clue}
-        onChange={onClueChange}
-        onFocus={() => props.setShowStatement(StatementTextToShow.CLUE)}
-        //onFocus={() => props.clue}
-        id="clue-input"
-    />
-    :
-    <></>
-  }
-</>
+      {clueIsEnabled ?
+        <TextField
+          fullWidth
+          size="small"
+          multiline={true}
+          label={t('statement.clue')}
+          value={props.clue}
+          onChange={onClueChange}
+          onFocus={() => props.clueButtonRef.current?.click()}
+          id="clue-input"
+        />
+        :
+        <></>
+      }
+    </>
   );
 }