Merge pull request #822 from classtranscribe/733-inote-editor-dont-us…

…e-index-position-for-keys-for-items-in-a-react-list replaced item id keys with uuid ones
classtranscribe · Jun 11, 2024 · e4812ae · e4812ae
2 parents 2255c8a + 12b60bf
commit e4812ae
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 85 deletions.
diff --git a/src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterContent.js b/src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterContent.js
@@ -1,5 +1,6 @@
 import React, {useState, useRef} from 'react';
 import { CTFragment } from 'layout';
+import { v4 as uuidv4 } from 'uuid';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
@@ -24,7 +25,7 @@ let Tags = ({data, handleDelete}) => {
   }
 
   return (
-    <Box style={boxstyle}>
+    <Box style={boxstyle} data-testid="tag">
       <Typography style={tagstyle}>{data}</Typography>
       <Cancel
         style={tagstyle}
@@ -102,9 +103,11 @@ const ChapterContent = ({
           placeholder={tags.length < 5 ? "Enter tags" : ""} // tagging specific parts of the book ie. solutions
         />  
         <CTFragment alignItCenter>
-          {tags.map((data) => (
-            <Tags data={data} handleDelete={handleDelete} key={data} />
-            ))}
+          {tags.map((data) => {
+            const uuid = uuidv4();
+            return (
+              <Tags data={data} handleDelete={handleDelete} key={`tag-${id}-${uuid}`} />
+            )})}
         </CTFragment>
 
 

diff --git a/src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterInfo.js b/src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterInfo.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { CTFragment } from 'layout';
+import { v4 as uuidv4 } from 'uuid';
 import { epub } from '../../../controllers';
 import { ChapterTitle } from '../../../components';
 import ChapterContent from './ChapterContent';
@@ -59,20 +60,22 @@ function ChapterInfo({ chapter, currChIndex, dispatch }) {
         onSave={onSaveTitle}
       />
 
-      {contents.map((content, index) => (
-        <ChapterContent
-          id={`ch-content-${id}-${index}`}
-          key={`ch-content-${id}-${index}`}
-          index={index}
-          condition={condition}
-          dispatch={dispatch}
-          content={content}
-          onInsert={onInsert(index)}
-          onRemove={onRemove(index)}
-          onTextChange={onTextChange(index)}
-          onImageChange={onImageChange(index)}
-        />
-      ))}
+      {contents.map((content, index) => { 
+        const uuid = uuidv4();
+        return (
+          <ChapterContent
+            id={`ch-content-${id}-${index}`}
+            key={`ch-content-${id}-${uuid}`}
+            index={index}
+            condition={condition}
+            dispatch={dispatch}
+            content={content}
+            onInsert={onInsert(index)}
+            onRemove={onRemove(index)}
+            onTextChange={onTextChange(index)}
+            onImageChange={onImageChange(index)}
+          />
+        )})}
 
       <ChapterNewContent onInsert={onInsert(contents.length)} />
     </CTFragment>

diff --git a/src/screens/EPub/views/EditEPubChapter/ChapterEditor/SubChapterItem.js b/src/screens/EPub/views/EditEPubChapter/ChapterEditor/SubChapterItem.js
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { CTFragment, CTText } from 'layout';
+import { v4 as uuidv4 } from 'uuid';
 import { epub } from '../../../controllers';
 import { ChapterTitle } from '../../../components';
 import ChapterContent from './ChapterContent';
@@ -66,18 +67,20 @@ function SubChapterItem({
         onSave={onSaveTitle}
       />
 
-      {contents.map((content, index) => (
-        <ChapterContent
-          id={`sch-content-${id}-${index}`}
-          key={`sch-content-${id}-${index}`}
-          index={index}
-          content={content}
-          onInsert={onInsert(index)}
-          onRemove={onRemove(index)}
-          onTextChange={onTextChange(index)}
-          onImageChange={onImageChange(index)}
-        />
-      ))}
+      {contents.map((content, index) => { 
+        const uuid = uuidv4();
+        return (
+          <ChapterContent
+            id={`sch-content-${id}-${index}`}
+            key={`sch-content-${id}-${uuid}`}
+            index={index}
+            content={content}
+            onInsert={onInsert(index)}
+            onRemove={onRemove(index)}
+            onTextChange={onTextChange(index)}
+            onImageChange={onImageChange(index)}
+          />
+        )})}
 
       <ChapterNewContent index={subChapter.contents.length} onInsert={onInsert(contents.length)} />
     </CTFragment>

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -6,6 +6,7 @@ import { connect } from 'dva'
 import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions} from '@material-ui/core';
 import { EPubImageData } from 'entities/EPubs';
 import { timestr } from 'utils';
+import { v4 as uuidv4 } from 'uuid';
 import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
 import {epub as epubTools} from '../../../controllers';
 
@@ -246,64 +247,66 @@ function INoteChapter ({
           </CTFragment>
 
         ) : (// If the chapter has elements, then iterate through all of them
-          chapter.contents.map((content, itemIdx) => (
-            <CTFragment key={itemIdx}>
-              <CTFragment className="item-actions">
-                {mergeChapterBtnElement(itemIdx)}
-                {splitBtnElement(itemIdx)}
-                {addImgElement(itemIdx)}
-                {addTextElement(itemIdx)}
-                {watchVideoElement(itemIdx)}
-              </CTFragment>
+          chapter.contents.map((content, itemIdx) => { 
+            const uuid = uuidv4();
+            return (
+              <CTFragment key={`ch-content-${chapter.id}-${uuid}`}>
+                <CTFragment className="item-actions">
+                  {mergeChapterBtnElement(itemIdx)}
+                  {splitBtnElement(itemIdx)}
+                  {addImgElement(itemIdx)}
+                  {addTextElement(itemIdx)}
+                  {watchVideoElement(itemIdx)}
+                </CTFragment>
 
-              {typeof content === "object" ? ( // image
-                <CTFragment className='img-con'>   
-                  <ChapterImage 
+                {typeof content === "object" ? ( // image
+                  <CTFragment className='img-con'>   
+                    <ChapterImage 
+                      id={`ch-content-${chapter.id}-${itemIdx}`}
+                      image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                      enableChapterScreenshots
+                      onChooseImage={onImageChange(itemIdx)}
+                      onRemoveImage={onRemove(itemIdx)}
+                    />
+                    <Dialog
+                      open={dialogOpen}
+                      onClose={handleNo}
+                      aria-labelledby="alert-dialog-title"
+                      aria-describedby="alert-dialog-description"
+                    >
+                      <DialogTitle id="alert-dialog-title">
+                        Delete Image Block
+                      </DialogTitle>
+                      <DialogContent>
+                        <DialogContentText id="alert-dialog-description">
+                          Do you want to delete the Image Block?
+                        </DialogContentText>
+                      </DialogContent>
+                      <DialogActions>
+                        <Button onClick={handleNo} autoFocus>NO</Button>
+                        <Button onClick={handleYes}>YES</Button>
+                      </DialogActions>
+                    </Dialog> 
+                  </CTFragment> 
+              ) : ( // text 
+                <CTFragment className='item-text'>   
+                  <ChapterText  
                     id={`ch-content-${chapter.id}-${itemIdx}`}
-                    image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
-                    enableChapterScreenshots
-                    onChooseImage={onImageChange(itemIdx)}
-                    onRemoveImage={onRemove(itemIdx)}
+                    text={content}
+                    onSaveText={onTextChange(itemIdx)}
                   />
-                  <Dialog
-                    open={dialogOpen}
-                    onClose={handleNo}
-                    aria-labelledby="alert-dialog-title"
-                    aria-describedby="alert-dialog-description"
-                  >
-                    <DialogTitle id="alert-dialog-title">
-                      Delete Image Block
-                    </DialogTitle>
-                    <DialogContent>
-                      <DialogContentText id="alert-dialog-description">
-                        Do you want to delete the Image Block?
-                      </DialogContentText>
-                    </DialogContent>
-                    <DialogActions>
-                      <Button onClick={handleNo} autoFocus>NO</Button>
-                      <Button onClick={handleYes}>YES</Button>
-                    </DialogActions>
-                  </Dialog> 
-                </CTFragment> 
-            ) : ( // text 
-              <CTFragment className='item-text'>   
-                <ChapterText  
-                  id={`ch-content-${chapter.id}-${itemIdx}`}
-                  text={content}
-                  onSaveText={onTextChange(itemIdx)}
-                />
-              </CTFragment>  
-          )}  
-              {itemIdx === chapter.contents.length - 1 && ( 
-              <CTFragment className="item-actions">
-                {mergeChapterBtnElement(chapter.contents.length)}
-                {splitBtnElement(chapter.contents.length)}
-                {addImgElement(chapter.contents.length)}
-                {addTextElement(chapter.contents.length)}
-                {watchVideoElement(chapter.contents.length)}
-              </CTFragment>)}
-            </CTFragment>
-        )))}
+                </CTFragment>  
+              )}  
+                {itemIdx === chapter.contents.length - 1 && ( 
+                <CTFragment className="item-actions">
+                  {mergeChapterBtnElement(chapter.contents.length)}
+                  {splitBtnElement(chapter.contents.length)}
+                  {addImgElement(chapter.contents.length)}
+                  {addTextElement(chapter.contents.length)}
+                  {watchVideoElement(chapter.contents.length)}
+                </CTFragment>)}
+              </CTFragment>
+            )}))}
       </CTFragment>
 
       {insertType !== null && (