SOROKA-148: Цикл обновлений на свойствах, обработка ошибок json (#43)

src/components/dashboard/Property.tsx

@@ -54,14 +54,16 @@ const Property = observer(({ element, index }: PropertyProps) => {
         [index, cardStore, typeDefinition]
     )
 
+    const storedValue = cardStore.observingArray[index]?.data
+
     const form = useMemo(
         () =>
             renderForm({
-                value: cardStore.observingArray[index]?.data,
+                value: storedValue,
                 onChange,
                 showHelp: helpButtonPressed
             }),
-        [helpButtonPressed, cardStore.observingArray, onChange, index, renderForm]
+        [helpButtonPressed, storedValue, onChange, renderForm]
     )
 
     return (

src/components/properties/DateProperty/DateProperty.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { DateItemData } from './DateInput'
 import DateItem from './DateItem'
@@ -9,10 +10,13 @@ export type DatePropertyProps = {
 }
 
 const DateProperty = ({ showHelp, value, onChange }: DatePropertyProps) => {
-    const handleItemChange = (newDate: DateItemData, isValid: boolean) => {
-        // todo: when dates list will be applied — key must become useful, unique and stable for each date item
-        onChange(newDate, isValid)
-    }
+    const handleItemChange = useCallback(
+        (newDate: DateItemData, isValid: boolean) => {
+            // todo: when dates list will be applied — key must become useful, unique and stable for each date item
+            onChange(newDate, isValid)
+        },
+        [onChange]
+    )
 
     return (
         <>

src/stores/cardStore.ts

@@ -3,6 +3,7 @@ import { makeAutoObservable, runInAction } from 'mobx'
 import CardsAPI from 'api/cards'
 import { USER_ROLES } from 'utils/constants'
 // TODO: Dependency cycle
+import { parseJSON } from 'utils/strings'
 import { authStore, propertiesStore } from './rootStore'
 import { TYPES } from './propertiesStore'
 
@@ -133,7 +134,8 @@ export default class CardStore {
 
     setObservingArrayFromBackend(backendData: any) {
         this.observingArray = backendData.data.map((el: any) => {
-            const dataParsed = TYPES[el.property.dataType.name].parseAs === 'json' ? JSON.parse(el.data) : el.data
+            const propertyType = TYPES[el.property.dataType.name]
+            const dataParsed = propertyType.parseAs === 'json' ? parseJSON(el.data, propertyType.defaultData) : el.data
             return {
                 ...el,
                 data: dataParsed,

src/utils/strings.ts

@@ -7,4 +7,15 @@ export function getShortStringName(string: string) {
     return string
 }
 
+export function parseJSON(input: string, fallbackValue: any) {
+    let result
+    try {
+        result = JSON.parse(input)
+    } catch {
+        result = fallbackValue
+    }
+
+    return result
+}
+
 export default {}