Improve code

RocketChat · May 20, 2020 · f92d592 · f92d592
1 parent 496e441
commit f92d592
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 24 deletions.
diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { Box, Skeleton, Field, Margins, Button } from '@rocket.chat/fuselage';
+import { Box, Field, Margins, Button } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
@@ -9,21 +9,15 @@ import { useRoute } from '../../contexts/RouterContext';
 import UserAvatarEditor from '../../components/basic/avatar/UserAvatarEditor';
 import { useForm } from '../../hooks/useForm';
 import UserForm from './UserForm';
+import { FormSkeleton } from './Skeleton';
 
-export function EditUserWithData({ userId, ...props }) {
+export function EditUserWithData({ uid, ...props }) {
 	const t = useTranslation();
 	const { data: roleData, state: roleState, error: roleError } = useEndpointDataExperimental('roles.list', '') || {};
-	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId }), [userId]));
+	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId: uid }), [uid]));
 
 	if ([state, roleState].includes(ENDPOINT_STATES.LOADING)) {
-		return <Box w='full' pb='x24' {...props}>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8' />
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-		</Box>;
+		return <FormSkeleton/>;
 	}
 
 	if (error || roleError) {

diff --git a/client/admin/users/Skeleton.js b/client/admin/users/Skeleton.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+
+export const FormSkeleton = (props) => <Box w='full' pb='x24' {...props}>
+	<Skeleton mbe='x8' />
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x8'/>
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x8'/>
+</Box>;
diff --git a/client/admin/users/UserInfo.js b/client/admin/users/UserInfo.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { Box, Avatar, Margins, Skeleton, Chip, Tag } from '@rocket.chat/fuselage';
+import { Box, Avatar, Margins, Chip, Tag } from '@rocket.chat/fuselage';
 import moment from 'moment';
 
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
@@ -9,6 +9,7 @@ import { DateFormat } from '../../../app/lib';
 import { UserInfoActions } from './UserInfoActions';
 import MarkdownText from '../../components/basic/MarkdownText';
 import VerticalBar from '../../components/basic/VerticalBar';
+import { FormSkeleton } from './Skeleton';
 
 const useTimezoneClock = (utcOffset = 0, updateInterval) => {
 	const [time, setTime] = useState();
@@ -28,23 +29,16 @@ const UTCClock = ({ utcOffset, ...props }) => {
 	return <Box {...props}>{time} UTC {utcOffset}</Box>;
 };
 
-export function UserInfoWithData({ userId, ...props }) {
+export function UserInfoWithData({ uid, ...props }) {
 	const t = useTranslation();
 	const [cache, setCache] = useState();
 
 	const onChange = () => setCache(new Date());
 
-	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId }), [userId, cache]));
+	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId: uid }), [uid, cache]));
 
 	if (state === ENDPOINT_STATES.LOADING) {
-		return <Box w='full' pb='x24'>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8' />
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-		</Box>;
+		return <FormSkeleton/>;
 	}
 
 	if (error) {

diff --git a/client/admin/users/UsersPage.js b/client/admin/users/UsersPage.js
@@ -56,8 +56,8 @@ function UsersPage() {
 				<VerticalBar.Close onClick={handleVerticalBarCloseButtonClick} />
 			</VerticalBar.Header>
 			<VerticalBar.Content>
-				{context === 'info' && <UserInfoWithData userId={id}/>}
-				{context === 'edit' && <EditUserWithData userId={id}/>}
+				{context === 'info' && <UserInfoWithData uid={id}/>}
+				{context === 'edit' && <EditUserWithData uid={id}/>}
 				{context === 'new' && <AddUser/>}
 				{context === 'invite' && <InviteUsers/>}
 			</VerticalBar.Content>