From 7a5433c24acdb2c212cb142beb1171952da0bf9e Mon Sep 17 00:00:00 2001 From: pierre-lehnen-rc <55164754+pierre-lehnen-rc@users.noreply.github.com> Date: Sat, 20 Jun 2020 14:14:59 -0300 Subject: [PATCH] [FIX] Admin UI is not rendering when trying to edit an user (#17972) Co-authored-by: Guilherme Gazzo --- client/admin/users/CustomFieldsForm.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/client/admin/users/CustomFieldsForm.js b/client/admin/users/CustomFieldsForm.js index 1df7d88f5ca..0c3d64a6ac6 100644 --- a/client/admin/users/CustomFieldsForm.js +++ b/client/admin/users/CustomFieldsForm.js @@ -1,4 +1,4 @@ -import React, { useMemo, useEffect } from 'react'; +import React, { useMemo, useEffect, useState } from 'react'; import { TextInput, Select, Field, Divider, Box } from '@rocket.chat/fuselage'; import { useSetting } from '../../contexts/SettingsContext'; @@ -59,17 +59,27 @@ export default function CustomFieldsForm({ customFieldsData, setCustomFieldsData const customFieldsJson = useSetting('Accounts_CustomFields'); // TODO: add deps. Left this way so that a possible change in the setting can't crash the page (useForm generates states automatically) - const customFields = useMemo(() => JSON.parse(customFieldsJson || '{}'), []); + const [customFields] = useState(() => { + try { + JSON.parse(customFieldsJson || '{}'); + } catch { + return {}; + } + }); + + const hasCustomFields = Boolean(Object.values(customFields).length); const defaultFields = useMemo(() => Object.entries(customFields).reduce((data, [key, value]) => { data[key] = value.defaultValue ?? ''; return data; }, {}), []); const { values, handlers } = useForm({ ...defaultFields, ...customFieldsData }); useEffect(() => { - setCustomFieldsData(values); + if (hasCustomFields) { + setCustomFieldsData(values); + } // TODO: remove stringify. Is needed to avoid infinite rendering }, [JSON.stringify(values)]); - if (!Object.values(customFields).length) { + if (!hasCustomFields) { return null; }