CF2-49: Fixed selecting of default values to display

src/pages/Measure/MeasureTable.jsx

@@ -10,12 +10,10 @@ import '../../styles/measure.css'
 
 const format='YYYY.MM.DD HH:mm'
 
-export const MeasureTable = ({idWell, idCategory, title, columns, values, updateMeasuresDelegate}) => {
+export const MeasureTable = ({idWell, idCategory, title, columns, values, updateMeasures}) => {
-  var defaultDisplay = values && values.length
-                       ? values[values.length-1] 
-                       : []
 
   const [showLoader, setShowLoader] = useState(false);
+  const [selectedTimeLineId, setSelectedTimeLineId] = useState(0)
   const [displayedValues, setDisplayedValues] = useState([]);
   const [editingColumns, setEditingColumns] = useState(columns);
   const [isTableEditing, setIsTableEditing] = useState(false);
@@ -23,6 +21,36 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
 
   const [measuresForm] = Form.useForm();
 
+  const createEditingColumns = (cols, renderDelegate) =>
+  cols.map(col =>
+    ({ render: renderDelegate,
+      ...col
+    })
+  )
+
+  useEffect(() => {
+    let valuesToDisplay = []
+
+    if(selectedTimeLineId === 0) {
+      valuesToDisplay = values.length
+                        ? values[values.length-1] 
+                        : []
+    } else {
+      valuesToDisplay = values.find(el => el.id === selectedTimeLineId)
+    }
+
+    setDisplayedValues(valuesToDisplay)
+  }, [selectedTimeLineId, values])
+
+  useEffect(() => {
+    let switchableColumns = []
+    isTableEditing && editingActionName !== 'Удалить'
+      ? switchableColumns = createEditingColumns(columns, () => <input className='w-100'></input>)
+      : switchableColumns = createEditingColumns(columns, null)
+
+    setEditingColumns(switchableColumns)
+  }, [isTableEditing, columns, editingActionName])
+
   const buttonsConfig = [
     {name:'Добавить', key:'add'}, 
     {name:'Редактировать', key:'edit'}, 
@@ -60,7 +88,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
             if(editingActionName === 'Удалить'){
               setShowLoader(true)
               await MeasureService.markAsDelete(idWell, displayedValues.id)
-              updateMeasuresDelegate()
+              updateMeasures()
               setShowLoader(false)
               setIsTableEditing(false)
             } else {
@@ -73,27 +101,6 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
         <Button key='decline' className='w-100' onClick={()=> setIsTableEditing(false)}>Нет</Button>
       </div>
     </div>
-
-  const createEditingColumns = (cols, renderDelegate) =>
-    cols.map(col =>
-      ({ render: renderDelegate,
-        ...col
-      })
-    )
-
-  useEffect(() => {
-    setDisplayedValues(defaultDisplay)
-  }, [defaultDisplay])
-
-  useEffect(() => {
-    let switchableColumns = []
-    isTableEditing && editingActionName !== 'Удалить'
-      ? switchableColumns = createEditingColumns(columns, () => <input className='w-100'></input>)
-      : switchableColumns = createEditingColumns(columns, null)
-
-    setEditingColumns(switchableColumns)
-  }, [isTableEditing, columns, editingActionName])
-
   
   let handleSubmitMeasuresForm = async (formData) => {
     // if(isTableEditing)
@@ -112,7 +119,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
     setShowLoader(true)
     await MeasureService.insert(idWell, measureParams)
     setIsTableEditing(false)
-    updateMeasuresDelegate()
+    updateMeasures()
     setShowLoader(false)
   }
 
@@ -137,8 +144,8 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
                 className={index === values.length-1 
                            ? 'last-measure-button' 
                            : 'measure-button'}
-                onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} 
+                onClick={() => setSelectedTimeLineId(item.id)} 
-                dot={item.id === displayedValues.id 
+                dot={item?.id === displayedValues?.id 
                             ? <ExclamationCircleOutlined className="timeline-clock-icon" /> 
                             : null}
               >
@@ -155,7 +162,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
             onFinish={handleSubmitMeasuresForm}
           >
             <View
-              item={displayedValues.data}
+              item={displayedValues?.data ?? []}
               columns={editingColumns}
             />
           </Form>