Use radash.get to support deep properties in ProfileTextView

package-lock.json

@@ -17,6 +17,7 @@
         "leaflet": "^1.9.4",
         "leaflet.locatecontrol": "^0.79.0",
         "prop-types": "^15.8.1",
+        "radash": "^12.1.0",
         "react-colorful": "^5.6.1",
         "react-image-crop": "^10.1.8",
         "react-leaflet": "^4.2.1",
@@ -6094,8 +6095,9 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "license": "MIT"
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
     },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
@@ -8226,6 +8228,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/radash": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/radash/-/radash-12.1.0.tgz",
+      "integrity": "sha512-b0Zcf09AhqKS83btmUeYBS8tFK7XL2e3RvLmZcm0sTdF1/UUlHSsjXdCcWNxe7yfmAlPve5ym0DmKGtTzP6kVQ==",
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "license": "MIT",

package.json

@@ -94,6 +94,7 @@
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "prop-types": "^15.8.1",
+    "radash": "^12.1.0",
     "react-colorful": "^5.6.1",
     "react-image-crop": "^10.1.8",
     "react-leaflet": "^4.2.1",

src/Components/Profile/Subcomponents/ProfileTextView.tsx

@@ -1,10 +1,12 @@
+import { get } from 'radash'
+
 import { TextView } from '#components/Map'
 
 import type { Item } from '#types/Item'
 
 export const ProfileTextView = ({
   item,
-  dataField,
+  dataField = 'text',
   heading,
   hideWhenEmpty,
 }: {
@@ -13,15 +15,19 @@ export const ProfileTextView = ({
   heading: string
   hideWhenEmpty: boolean
 }) => {
+  const text = get(item, dataField)
+
+  if (typeof text !== 'string') {
+    throw new Error('ProfileTextView: text is not a string')
+  }
+
   return (
     <div className='tw-my-10 tw-mt-2 tw-px-6'>
-      {/* eslint-disable-next-line security/detect-object-injection */}
+      {!(text === '' && hideWhenEmpty) && (
-      {!(item[dataField] === '' && hideWhenEmpty) && (
         <h2 className='tw-text-lg tw-font-semibold'>{heading}</h2>
       )}
       <div className='tw-mt-2 tw-text-sm'>
-        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, security/detect-object-injection */}
+        <TextView itemId={item.id} rawText={text} />
-        <TextView itemId={item.id} rawText={dataField ? item[dataField] : item.text} />
       </div>
     </div>
   )