WIP 2

RocketChat · May 19, 2020 · b783913 · b783913
1 parent 18aca6d
commit b783913
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 25 deletions.
diff --git a/client/admin/users/CustomFieldsForm.js b/client/admin/users/CustomFieldsForm.js
@@ -42,31 +42,28 @@ const CustomSelect = (props) => {
 };
 
 const CustomFieldsAssembler = ({ customFields, didUpdate, customFieldsData, setCustomFieldsData, ...props }) => Object.entries(customFields).map(([key, value]) => {
-	const [state, setState] = useState((customFieldsData && customFieldsData[key]) ?? value.defaultValue ?? '');
-	useEffect(() => {
-		if (didUpdate) {
-			setCustomFieldsData({ ...customFieldsData, [key]: state });
-		}
-	}, [state]);
+
 	return value.type === 'text'
 		? <CustomTextInput key={key} name={key} {...value} setState={setState} state={state} {...props}/>
 		: <CustomSelect key={key} name={key} {...value} setState={setState} state={state} {...props}/>;
 });
 
 export default function CustomFieldsForm({ customFieldsData, setCustomFieldsData, ...props }) {
 	const fields = useSetting('Accounts_CustomFields');
+	{ ...fields, ...customFieldsData}
 
-	const parsedFields = useMemo(() => JSON.parse(fields), [fields]);
+	// USE FORM
+	const parsedFields = useMemo(() => JSON.parse(fields), []);
 
 	const [didUpdate, setDidUpdate] = useState(false);
 
-	useEffect(() => {
-		setDidUpdate(true);
-		if (!Object.values(customFieldsData).length) {
-			const initialData = Object.entries(parsedFields).reduce((data, [key, value]) => { data[key] = value.defaultValue ?? ''; return data; }, {});
-			setCustomFieldsData(initialData);
-		}
-	}, []);
+	// useEffect(() => { SETA O DEFAULT NO FORM
+	// 	setDidUpdate(true);
+	// 	if (!Object.values(customFieldsData).length) {
+	// 		const initialData = Object.entries(parsedFields).reduce((data, [key, value]) => { data[key] = value.defaultValue ?? ''; return data; }, {});
+	// 		setCustomFieldsData(initialData);
+	// 	}
+	// }, []);
 
 	return <CustomFieldsAssembler didUpdate={didUpdate} customFields={parsedFields} customFieldsData={customFieldsData} setCustomFieldsData={setCustomFieldsData} {...props}/>;
 }
diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js
@@ -2,7 +2,6 @@ import React, { useMemo, useState, useCallback } from 'react';
 import { Field, TextInput, Box, Skeleton, ToggleSwitch, Icon, TextAreaInput, MultiSelectFiltered, Margins, Button, Divider } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
-import { useEndpointData } from '../../hooks/useEndpointData';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
 import { useEndpointAction } from '../../hooks/useEndpointAction';
 import { useEndpointUpload } from '../../hooks/useEndpointUpload';
@@ -14,10 +13,10 @@ import VerticalBar from '../../components/basic/VerticalBar';
 
 export function EditUserWithData({ userId, ...props }) {
 	const t = useTranslation();
-	const roleData = useEndpointData('roles.list', '') || {};
+	const { data: roleData, state: roleState, error: roleError } = useEndpointDataExperimental('roles.list', '') || {};
 	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId }), [userId]));
 
-	if (state === ENDPOINT_STATES.LOADING) {
+	if ([state, roleState].includes(ENDPOINT_STATES.LOADING)) {
 		return <Box w='full' pb='x24' {...props}>
 			<Skeleton mbe='x4'/>
 			<Skeleton mbe='x8' />
@@ -28,7 +27,7 @@ export function EditUserWithData({ userId, ...props }) {
 		</Box>;
 	}
 
-	if (error) {
+	if (error || roleError) {
 		return <Box mbs='x16' {...props}>{t('User_not_found')}</Box>;
 	}
 
@@ -106,7 +105,7 @@ export function EditUser({ data, roles, ...props }) {
 	const testEqual = (a, b) => a === b || !(a || b);
 	const handleChange = (field, currentValue, getValue = (e) => e.currentTarget.value, areEqual = testEqual) => (e) => setNewData({ ...newData, [field]: areEqual(getValue(e), currentValue) ? null : getValue(e) });
 
-	const availableRoles = roles.map(({ _id, description }) => [_id, description || _id]);
+	const availableRoles = roles.map(({ _id, description }) => [_id, description || _id]);// memo
 	const selectedRoles = newData.roles ?? data.roles;
 	const name = newData.name ?? data.name ?? '';
 	const username = newData.username ?? data.username;
@@ -182,8 +181,10 @@ export function EditUser({ data, roles, ...props }) {
 			</Field.Row>
 		</Field>
 		<Divider />
-		<Box fontScale='s2'>{t('Custom_Fields')}</Box>
-		<CustomFieldsForm customFieldsData={customFieldsData} setCustomFieldsData={setCustomFieldsData}/>
+		{ customFieldsData && <>
+			<Box fontScale='s2'>{t('Custom_Fields')}</Box>
+			<CustomFieldsForm customFieldsData={customFieldsData} setCustomFieldsData={setCustomFieldsData}/>
+		</>}
 		<Field>
 			<Field.Row>
 				<Box display='flex' flexDirection='row' justifyContent='space-between' w='full'>

diff --git a/client/hooks/useEndpointDataExperimental.js b/client/hooks/useEndpointDataExperimental.js
@@ -5,14 +5,13 @@ import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 
 export const ENDPOINT_STATES = {
 	LOADING: 'LOADING',
-	DELAYING: 'DELAYING',
 	DONE: 'DONE',
 	ERROR: 'ERROR',
 };
 
 const defaultState = { data: null, state: ENDPOINT_STATES.LOADING };
 
-export const useEndpointDataExperimental = (endpoint, params = {}) => {
+export const useEndpointDataExperimental = (endpoint, params = {}, { delayTimeout = 1000 } = {}) => {
 	const [data, setData] = useState(defaultState);
 
 	const getData = useEndpoint('GET', endpoint);
@@ -27,8 +26,8 @@ export const useEndpointDataExperimental = (endpoint, params = {}) => {
 					return;
 				}
 
-				setData({ state: ENDPOINT_STATES.DELAYING });
-			}, 1000);
+				setData({ delaying: true, state: ENDPOINT_STATES.LOADING });
+			}, delayTimeout);
 
 			try {
 				setData(defaultState);