From 50375898a01e27fec8a4e874e1fb7e989aa321b1 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 15 Oct 2019 14:36:19 -0300 Subject: [PATCH] Add some components of admin/info to Storybook --- .storybook/config.js | 36 ++++++++++++- .storybook/helpers.js | 45 +--------------- .../admin/info/BuildEnvironmentSection.js | 2 +- .../info/BuildEnvironmentSection.stories.js | 21 ++++++++ client/components/admin/info/CommitSection.js | 2 +- .../admin/info/CommitSection.stories.js | 21 ++++++++ .../admin/info/InformationList.stories.js | 20 ++++++++ .../components/admin/info/InformationPage.js | 2 +- .../components/admin/info/InstancesSection.js | 2 +- .../admin/info/InstancesSection.stories.js | 29 +++++++++++ .../admin/info/RocketChatSection.js | 2 +- .../admin/info/RocketChatSection.stories.js | 33 ++++++++++++ .../admin/info/RuntimeEnvironmentSection.js | 2 +- .../info/RuntimeEnvironmentSection.stories.js | 31 +++++++++++ client/components/admin/info/SkeletonText.css | 8 +-- .../admin/info/SkeletonText.stories.js | 10 ++++ client/components/admin/info/UsageSection.js | 2 +- .../admin/info/UsageSection.stories.js | 51 +++++++++++++++++++ client/components/basic/Button.stories.js | 4 -- client/components/basic/ErrorAlert.stories.js | 4 -- client/components/basic/Input.stories.js | 4 -- client/components/basic/Link.stories.js | 4 -- .../connectionStatus/ConnectionStatusAlert.js | 2 +- .../ConnectionStatusAlert.stories.js | 4 -- client/components/contexts/MeteorContext.js | 3 ++ .../components/contexts/TranslationContext.js | 4 +- client/components/header/Header.js | 2 +- .../components/pageNotFound/PageNotFound.js | 2 +- client/components/providers/MeteorProvider.js | 24 ++++++--- client/components/setupWizard/Epilogue.js | 2 +- client/components/setupWizard/Pager.js | 2 +- client/components/setupWizard/SideBar.js | 2 +- client/components/setupWizard/StepHeader.js | 2 +- client/components/setupWizard/Steps.js | 2 +- .../steps/AdminUserInformationStep.js | 2 +- .../setupWizard/steps/RegisterServerStep.js | 2 +- .../setupWizard/steps/SettingsBasedStep.js | 2 +- client/hooks/useMeteor.js | 5 ++ client/hooks/useReactiveValue.js | 8 ++- client/hooks/useTracker.js | 5 ++ client/hooks/useTranslation.js | 5 ++ 41 files changed, 317 insertions(+), 98 deletions(-) create mode 100644 client/components/admin/info/BuildEnvironmentSection.stories.js create mode 100644 client/components/admin/info/CommitSection.stories.js create mode 100644 client/components/admin/info/InformationList.stories.js create mode 100644 client/components/admin/info/InstancesSection.stories.js create mode 100644 client/components/admin/info/RocketChatSection.stories.js create mode 100644 client/components/admin/info/RuntimeEnvironmentSection.stories.js create mode 100644 client/components/admin/info/SkeletonText.stories.js create mode 100644 client/components/admin/info/UsageSection.stories.js create mode 100644 client/components/contexts/MeteorContext.js create mode 100644 client/hooks/useMeteor.js create mode 100644 client/hooks/useTracker.js create mode 100644 client/hooks/useTranslation.js diff --git a/.storybook/config.js b/.storybook/config.js index 984a7b25e28..1028ff1f13e 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,3 +1,37 @@ -import { configure } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { addDecorator, configure } from '@storybook/react'; +import React from 'react'; + +import { ConnectionStatusProvider } from '../client/components/providers/ConnectionStatusProvider.mock'; +import { TranslationProvider } from '../client/components/providers/TranslationProvider.mock'; + +addDecorator(function RocketChatDecorator(fn) { + require('@rocket.chat/icons/dist/font/RocketChat.minimal.css'); + require('../app/theme/client/main.css'); + + const linkElement = document.getElementById('theme-styles') || document.createElement('link'); + if (linkElement.id !== 'theme-styles') { + linkElement.setAttribute('id', 'theme-styles'); + linkElement.setAttribute('rel', 'stylesheet'); + linkElement.setAttribute('href', 'https://open.rocket.chat/theme.css'); + document.head.appendChild(linkElement); + } + + return + + +
+
+
+ {fn()} +
+
+ + ; +}); configure(require.context('../client', true, /\.stories\.js$/), module); diff --git a/.storybook/helpers.js b/.storybook/helpers.js index 00ad512dc47..63e4e038a44 100644 --- a/.storybook/helpers.js +++ b/.storybook/helpers.js @@ -1,44 +1 @@ -import { action } from '@storybook/addon-actions'; -import '@rocket.chat/icons/dist/font/RocketChat.minimal.css'; -import React from 'react'; - -import '../app/theme/client/main.css'; -import { ConnectionStatusProvider } from '../client/components/providers/ConnectionStatusProvider.mock'; -import { TranslationProvider } from '../client/components/providers/TranslationProvider.mock'; - -export const rocketChatWrapper = (fn) => - - - -
-
- {fn()} -
- -; +export const dummyDate = new Date(2015, 4, 19); diff --git a/client/components/admin/info/BuildEnvironmentSection.js b/client/components/admin/info/BuildEnvironmentSection.js index 22163c75ec2..25ac38008e1 100644 --- a/client/components/admin/info/BuildEnvironmentSection.js +++ b/client/components/admin/info/BuildEnvironmentSection.js @@ -1,6 +1,6 @@ import React from 'react'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { InformationList } from './InformationList'; import { InformationEntry } from './InformationEntry'; import { formatDate } from './formatters'; diff --git a/client/components/admin/info/BuildEnvironmentSection.stories.js b/client/components/admin/info/BuildEnvironmentSection.stories.js new file mode 100644 index 00000000000..d020bee7815 --- /dev/null +++ b/client/components/admin/info/BuildEnvironmentSection.stories.js @@ -0,0 +1,21 @@ +import React from 'react'; + +import { dummyDate } from '../../../../.storybook/helpers'; +import { BuildEnvironmentSection } from './BuildEnvironmentSection'; + +export default { + title: 'admin/info/BuildEnvironmentSection', + component: BuildEnvironmentSection, +}; + +const info = { + compile: { + platform: 'info.compile.platform', + arch: 'info.compile.arch', + osRelease: 'info.compile.osRelease', + nodeVersion: 'info.compile.nodeVersion', + date: dummyDate, + }, +}; + +export const _default = () => ; diff --git a/client/components/admin/info/CommitSection.js b/client/components/admin/info/CommitSection.js index f814bc5c703..e7d3570e520 100644 --- a/client/components/admin/info/CommitSection.js +++ b/client/components/admin/info/CommitSection.js @@ -1,6 +1,6 @@ import React from 'react'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { InformationList } from './InformationList'; import { InformationEntry } from './InformationEntry'; diff --git a/client/components/admin/info/CommitSection.stories.js b/client/components/admin/info/CommitSection.stories.js new file mode 100644 index 00000000000..7a3cf2ae280 --- /dev/null +++ b/client/components/admin/info/CommitSection.stories.js @@ -0,0 +1,21 @@ +import React from 'react'; + +import { CommitSection } from './CommitSection'; + +export default { + title: 'admin/info/CommitSection', + component: CommitSection, +}; + +const info = { + commit: { + hash: 'info.commit.hash', + date: 'info.commit.date', + branch: 'info.commit.branch', + tag: 'info.commit.tag', + author: 'info.commit.author', + subject: 'info.commit.subject', + }, +}; + +export const _default = () => ; diff --git a/client/components/admin/info/InformationList.stories.js b/client/components/admin/info/InformationList.stories.js new file mode 100644 index 00000000000..80502ac10cd --- /dev/null +++ b/client/components/admin/info/InformationList.stories.js @@ -0,0 +1,20 @@ +import React from 'react'; + +import { InformationList } from './InformationList'; +import { InformationEntry } from './InformationEntry'; + +export default { + title: 'admin/info/InformationList', + component: InformationList, + decorators: [ + (fn) =>
+
+ {fn()} +
+
, + ], +}; + +export const _default = () => + Value +; diff --git a/client/components/admin/info/InformationPage.js b/client/components/admin/info/InformationPage.js index cdcc1280651..752eb28d253 100644 --- a/client/components/admin/info/InformationPage.js +++ b/client/components/admin/info/InformationPage.js @@ -9,7 +9,7 @@ import { SideNav } from '../../../../app/ui-utils/client/lib/SideNav'; import { Header } from '../../header/Header'; import { Link } from '../../basic/Link'; import { ErrorAlert } from '../../basic/ErrorAlert'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { RocketChatSection } from './RocketChatSection'; import { CommitSection } from './CommitSection'; import { RuntimeEnvironmentSection } from './RuntimeEnvironmentSection'; diff --git a/client/components/admin/info/InstancesSection.js b/client/components/admin/info/InstancesSection.js index 7e82305f0cd..5cd8283c5b4 100644 --- a/client/components/admin/info/InstancesSection.js +++ b/client/components/admin/info/InstancesSection.js @@ -1,7 +1,7 @@ import React from 'react'; import { formatDate } from './formatters'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { InformationList } from './InformationList'; import { InformationEntry } from './InformationEntry'; diff --git a/client/components/admin/info/InstancesSection.stories.js b/client/components/admin/info/InstancesSection.stories.js new file mode 100644 index 00000000000..855780c0f92 --- /dev/null +++ b/client/components/admin/info/InstancesSection.stories.js @@ -0,0 +1,29 @@ +import React from 'react'; + +import { dummyDate } from '../../../../.storybook/helpers'; +import { InstancesSection } from './InstancesSection'; + +export default { + title: 'admin/info/InstancesSection', + component: InstancesSection, +}; + +const instances = [ + { + address: 'instances[].address', + broadcastAuth: 'instances[].broadcastAuth', + currentStatus: { + connected: 'instances[].currentStatus.connected', + retryCount: 'instances[].currentStatus.retryCount', + status: 'instances[].currentStatus.status', + }, + instanceRecord: { + _id: 'instances[].instanceRecord._id', + pid: 'instances[].instanceRecord.pid', + _createdAt: dummyDate, + _updatedAt: dummyDate, + }, + }, +]; + +export const _default = () => ; diff --git a/client/components/admin/info/RocketChatSection.js b/client/components/admin/info/RocketChatSection.js index 7c10d79f66f..9b5baead612 100644 --- a/client/components/admin/info/RocketChatSection.js +++ b/client/components/admin/info/RocketChatSection.js @@ -1,6 +1,6 @@ import React from 'react'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { SkeletonText } from './SkeletonText'; import { formatDate, formatHumanReadableTime } from './formatters'; import { InformationList } from './InformationList'; diff --git a/client/components/admin/info/RocketChatSection.stories.js b/client/components/admin/info/RocketChatSection.stories.js new file mode 100644 index 00000000000..ef934bd735e --- /dev/null +++ b/client/components/admin/info/RocketChatSection.stories.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import { dummyDate } from '../../../../.storybook/helpers'; +import { RocketChatSection } from './RocketChatSection'; + +export default { + title: 'admin/info/RocketChatSection', + component: RocketChatSection, +}; + +const info = { + marketplaceApiVersion: 'info.marketplaceApiVersion', +}; + +const statistics = { + version: 'statistics.version', + migration: { + version: 'statistics.migration.version', + lockedAt: dummyDate, + }, + installedAt: dummyDate, + process: { + uptime: 10 * 24 * 60 * 60, + pid: 'statistics.process.pid', + }, + uniqueId: 'statistics.uniqueId', + instanceCount: 1, + oplogEnabled: true, +}; + +export const _default = () => ; + +export const loading = () => ; diff --git a/client/components/admin/info/RuntimeEnvironmentSection.js b/client/components/admin/info/RuntimeEnvironmentSection.js index 01c2a9ff78e..0fe3eb0c08a 100644 --- a/client/components/admin/info/RuntimeEnvironmentSection.js +++ b/client/components/admin/info/RuntimeEnvironmentSection.js @@ -1,6 +1,6 @@ import React from 'react'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { SkeletonText } from './SkeletonText'; import { formatMemorySize, formatHumanReadableTime, formatCPULoad } from './formatters'; import { InformationList } from './InformationList'; diff --git a/client/components/admin/info/RuntimeEnvironmentSection.stories.js b/client/components/admin/info/RuntimeEnvironmentSection.stories.js new file mode 100644 index 00000000000..5aaed7ba95d --- /dev/null +++ b/client/components/admin/info/RuntimeEnvironmentSection.stories.js @@ -0,0 +1,31 @@ +import React from 'react'; + +import { RuntimeEnvironmentSection } from './RuntimeEnvironmentSection'; + +export default { + title: 'admin/info/RuntimeEnvironmentSection', + component: RuntimeEnvironmentSection, +}; + +const statistics = { + os: { + type: 'statistics.os.type', + platform: 'statistics.os.platform', + arch: 'statistics.os.arch', + release: 'statistics.os.release', + uptime: 10 * 24 * 60 * 60, + loadavg: [1.1, 1.5, 1.15], + totalmem: 1024, + freemem: 1024, + cpus: [{}], + }, + process: { + nodeVersion: 'statistics.process.nodeVersion', + }, + mongoVersion: 'statistics.mongoVersion', + mongoStorageEngine: 'statistics.mongoStorageEngine', +}; + +export const _default = () => ; + +export const loading = () => ; diff --git a/client/components/admin/info/SkeletonText.css b/client/components/admin/info/SkeletonText.css index baac1e70e96..438b9e72bda 100644 --- a/client/components/admin/info/SkeletonText.css +++ b/client/components/admin/info/SkeletonText.css @@ -4,15 +4,15 @@ min-width: 10em; height: 1em; - animation: Admin__InformationPage__SkeletonText__animation 1s linear 1s infinite running; + animation: Admin__InformationPage__SkeletonText__animation 1s linear 0s infinite running; opacity: 0.25; background: linear-gradient( to right, - transparent, - currentColor 50%, - transparent 100% + currentColor, + transparent 10%, + currentColor 20% ); background-size: 100vw 100vh; } diff --git a/client/components/admin/info/SkeletonText.stories.js b/client/components/admin/info/SkeletonText.stories.js new file mode 100644 index 00000000000..c16c168801a --- /dev/null +++ b/client/components/admin/info/SkeletonText.stories.js @@ -0,0 +1,10 @@ +import React from 'react'; + +import { SkeletonText } from './SkeletonText'; + +export default { + title: 'admin/info/SkeletonText', + component: SkeletonText, +}; + +export const _default = () => ; diff --git a/client/components/admin/info/UsageSection.js b/client/components/admin/info/UsageSection.js index 64b76ea0d35..106d12646d7 100644 --- a/client/components/admin/info/UsageSection.js +++ b/client/components/admin/info/UsageSection.js @@ -1,6 +1,6 @@ import React from 'react'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { SkeletonText } from './SkeletonText'; import { formatMemorySize } from './formatters'; import { InformationList } from './InformationList'; diff --git a/client/components/admin/info/UsageSection.stories.js b/client/components/admin/info/UsageSection.stories.js new file mode 100644 index 00000000000..2d9e809a92b --- /dev/null +++ b/client/components/admin/info/UsageSection.stories.js @@ -0,0 +1,51 @@ +import React from 'react'; + +import { UsageSection } from './UsageSection'; + +export default { + title: 'admin/info/UsageSection', + component: UsageSection, +}; + +const statistics = { + totalUsers: 'statistics.totalUsers', + nonActiveUsers: 'nonActiveUsers', + activeUsers: 'statistics.activeUsers', + totalConnectedUsers: 'statistics.totalConnectedUsers', + onlineUsers: 'statistics.onlineUsers', + awayUsers: 'statistics.awayUsers', + offlineUsers: 'statistics.offlineUsers', + totalRooms: 'statistics.totalRooms', + totalChannels: 'statistics.totalChannels', + totalPrivateGroups: 'statistics.totalPrivateGroups', + totalDirect: 'statistics.totalDirect', + totalLivechat: 'statistics.totalLivechat', + totalDiscussions: 'statistics.totalDiscussions', + totalThreads: 'statistics.totalThreads', + totalMessages: 'statistics.totalMessages', + totalChannelMessages: 'statistics.totalChannelMessages', + totalPrivateGroupMessages: 'statistics.totalPrivateGroupMessages', + totalDirectMessages: 'statistics.totalDirectMessages', + totalLivechatMessages: 'statistics.totalLivechatMessages', + uploadsTotal: 'statistics.uploadsTotal', + uploadsTotalSize: 1024, + integrations: { + totalIntegrations: 'statistics.integrations.totalIntegrations', + totalIncoming: 'statistics.integrations.totalIncoming', + totalIncomingActive: 'statistics.integrations.totalIncomingActive', + totalOutgoing: 'statistics.integrations.totalOutgoing', + totalOutgoingActive: 'statistics.integrations.totalOutgoingActive', + totalWithScriptEnabled: 'statistics.integrations.totalWithScriptEnabled', + }, +}; + +const apps = { + totalInstalled: 'statistics.apps.totalInstalled', + totalActive: 'statistics.apps.totalActive', +}; + +export const _default = () => ; + +export const withApps = () => ; + +export const loading = () => ; diff --git a/client/components/basic/Button.stories.js b/client/components/basic/Button.stories.js index 27428a33ba6..2aa1ea399d4 100644 --- a/client/components/basic/Button.stories.js +++ b/client/components/basic/Button.stories.js @@ -1,14 +1,10 @@ import React from 'react'; -import { rocketChatWrapper } from '../../../.storybook/helpers'; import { Button } from './Button'; export default { title: 'basic/Button', component: Button, - decorators: [ - rocketChatWrapper, - ], }; export const _default = () => ; diff --git a/client/components/basic/ErrorAlert.stories.js b/client/components/basic/ErrorAlert.stories.js index a5b8731620e..1419157742e 100644 --- a/client/components/basic/ErrorAlert.stories.js +++ b/client/components/basic/ErrorAlert.stories.js @@ -1,14 +1,10 @@ import React from 'react'; -import { rocketChatWrapper } from '../../../.storybook/helpers'; import { ErrorAlert } from './ErrorAlert'; export default { title: 'basic/ErrorAlert', component: ErrorAlert, - decorators: [ - rocketChatWrapper, - ], }; export const _default = () => Content; diff --git a/client/components/basic/Input.stories.js b/client/components/basic/Input.stories.js index 43d1885c743..95891b0c6fd 100644 --- a/client/components/basic/Input.stories.js +++ b/client/components/basic/Input.stories.js @@ -1,14 +1,10 @@ import React from 'react'; -import { rocketChatWrapper } from '../../../.storybook/helpers'; import { Input } from './Input'; export default { title: 'basic/Input', component: Input, - decorators: [ - rocketChatWrapper, - ], }; export const _default = () => ; diff --git a/client/components/basic/Link.stories.js b/client/components/basic/Link.stories.js index 6423435215e..90694dae636 100644 --- a/client/components/basic/Link.stories.js +++ b/client/components/basic/Link.stories.js @@ -1,14 +1,10 @@ import React from 'react'; -import { rocketChatWrapper } from '../../../.storybook/helpers'; import { Link } from './Link'; export default { title: 'basic/Link', component: Link, - decorators: [ - rocketChatWrapper, - ], }; export const _default = () => Link; diff --git a/client/components/connectionStatus/ConnectionStatusAlert.js b/client/components/connectionStatus/ConnectionStatusAlert.js index 24bb99718b1..d55a8879d0b 100644 --- a/client/components/connectionStatus/ConnectionStatusAlert.js +++ b/client/components/connectionStatus/ConnectionStatusAlert.js @@ -2,7 +2,7 @@ import { Icon } from '@rocket.chat/fuselage'; import React, { useEffect, useRef, useState } from 'react'; import { useConnectionStatus, useReconnect } from '../contexts/ConnectionStatusContext'; -import { useTranslation } from '../contexts/TranslationContext'; +import { useTranslation } from '../../hooks/useTranslation'; import './ConnectionStatusAlert.css'; export function ConnectionStatusAlert() { diff --git a/client/components/connectionStatus/ConnectionStatusAlert.stories.js b/client/components/connectionStatus/ConnectionStatusAlert.stories.js index 896d6376c8e..91c20b065ac 100644 --- a/client/components/connectionStatus/ConnectionStatusAlert.stories.js +++ b/client/components/connectionStatus/ConnectionStatusAlert.stories.js @@ -1,16 +1,12 @@ import { action } from '@storybook/addon-actions'; import React from 'react'; -import { rocketChatWrapper } from '../../../.storybook/helpers'; import { ConnectionStatusAlert } from './ConnectionStatusAlert'; import { ConnectionStatusProvider } from '../providers/ConnectionStatusProvider.mock'; export default { title: 'connectionStatus/ConnectionStatusAlert', component: ConnectionStatusAlert, - decorators: [ - rocketChatWrapper, - ], }; export const connected = () => diff --git a/client/components/contexts/MeteorContext.js b/client/components/contexts/MeteorContext.js new file mode 100644 index 00000000000..8f11cb6be00 --- /dev/null +++ b/client/components/contexts/MeteorContext.js @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const MeteorContext = createContext({}); diff --git a/client/components/contexts/TranslationContext.js b/client/components/contexts/TranslationContext.js index 67986658f6a..fc9c7b500c0 100644 --- a/client/components/contexts/TranslationContext.js +++ b/client/components/contexts/TranslationContext.js @@ -1,4 +1,4 @@ -import { createContext, useContext } from 'react'; +import { createContext } from 'react'; const translate = function(key) { return key; @@ -7,5 +7,3 @@ const translate = function(key) { translate.has = () => true; export const TranslationContext = createContext(translate); - -export const useTranslation = () => useContext(TranslationContext); diff --git a/client/components/header/Header.js b/client/components/header/Header.js index c3a3f4ff829..7e34e5b0fc5 100644 --- a/client/components/header/Header.js +++ b/client/components/header/Header.js @@ -1,6 +1,6 @@ import React from 'react'; -import { useTranslation } from '../contexts/TranslationContext'; +import { useTranslation } from '../../hooks/useTranslation'; import { BurgerMenuButton } from './BurgerMenuButton'; export function Header({ diff --git a/client/components/pageNotFound/PageNotFound.js b/client/components/pageNotFound/PageNotFound.js index 0b6e77a0078..eea79738cb8 100644 --- a/client/components/pageNotFound/PageNotFound.js +++ b/client/components/pageNotFound/PageNotFound.js @@ -1,7 +1,7 @@ import { Button, ButtonGroup } from '@rocket.chat/fuselage'; import React from 'react'; -import { useTranslation } from '../contexts/TranslationContext'; +import { useTranslation } from '../../hooks/useTranslation'; import { useWipeInitialPageLoading } from '../../hooks/useWipeInitialPageLoading'; import { ConnectionStatusAlert } from '../connectionStatus/ConnectionStatusAlert'; import { useRoute } from '../contexts/RouterContext'; diff --git a/client/components/providers/MeteorProvider.js b/client/components/providers/MeteorProvider.js index 902afade044..f8002fa0a3c 100644 --- a/client/components/providers/MeteorProvider.js +++ b/client/components/providers/MeteorProvider.js @@ -1,15 +1,25 @@ +import { Meteor } from 'meteor/meteor'; +import { Tracker } from 'meteor/tracker'; import React from 'react'; +import { MeteorContext } from '../contexts/MeteorContext'; import { RouterProvider } from './RouterProvider'; import { ConnectionStatusProvider } from './ConnectionStatusProvider'; import { TranslationProvider } from './TranslationProvider'; +const contextValue = { + Meteor, + Tracker, +}; + export function MeteorProvider({ children }) { - return - - - {children} - - - ; + return + + + + {children} + + + + ; } diff --git a/client/components/setupWizard/Epilogue.js b/client/components/setupWizard/Epilogue.js index 9206532ca22..1dd77db1556 100644 --- a/client/components/setupWizard/Epilogue.js +++ b/client/components/setupWizard/Epilogue.js @@ -1,7 +1,7 @@ import React from 'react'; import { Button } from '@rocket.chat/fuselage'; -import { useTranslation } from '../contexts/TranslationContext'; +import { useTranslation } from '../../hooks/useTranslation'; import { useSetting } from '../../hooks/useSetting'; import { setSetting } from './functions'; import './Epilogue.css'; diff --git a/client/components/setupWizard/Pager.js b/client/components/setupWizard/Pager.js index 018e3a18ecd..bd4d35e545b 100644 --- a/client/components/setupWizard/Pager.js +++ b/client/components/setupWizard/Pager.js @@ -1,7 +1,7 @@ import { Button, ButtonGroup } from '@rocket.chat/fuselage'; import React from 'react'; -import { useTranslation } from '../contexts/TranslationContext'; +import { useTranslation } from '../../hooks/useTranslation'; export function Pager({ disabled, onBackClick, isContinueEnabled = true }) { const t = useTranslation(); diff --git a/client/components/setupWizard/SideBar.js b/client/components/setupWizard/SideBar.js index efcb2dbc768..84511553290 100644 --- a/client/components/setupWizard/SideBar.js +++ b/client/components/setupWizard/SideBar.js @@ -1,6 +1,6 @@ import React from 'react'; -import { useTranslation } from '../contexts/TranslationContext'; +import { useTranslation } from '../../hooks/useTranslation'; import { useSetupWizardStepsState } from './StepsState'; import './SideBar.css'; diff --git a/client/components/setupWizard/StepHeader.js b/client/components/setupWizard/StepHeader.js index 2d356047974..47e8a5f4f20 100644 --- a/client/components/setupWizard/StepHeader.js +++ b/client/components/setupWizard/StepHeader.js @@ -1,7 +1,7 @@ import { Headline } from '@rocket.chat/fuselage'; import React from 'react'; -import { useTranslation } from '../contexts/TranslationContext'; +import { useTranslation } from '../../hooks/useTranslation'; import './StepHeader.css'; export function StepHeader({ number, title }) { diff --git a/client/components/setupWizard/Steps.js b/client/components/setupWizard/Steps.js index e8dff18514a..bc7306f4400 100644 --- a/client/components/setupWizard/Steps.js +++ b/client/components/setupWizard/Steps.js @@ -1,9 +1,9 @@ import React from 'react'; +import { useTranslation } from '../../hooks/useTranslation'; import { AdminUserInformationStep } from './steps/AdminUserInformationStep'; import { SettingsBasedStep } from './steps/SettingsBasedStep'; import { RegisterServerStep } from './steps/RegisterServerStep'; -import { useTranslation } from '../contexts/TranslationContext'; import { Epilogue } from './Epilogue'; import { SideBar } from './SideBar'; import { useSetupWizardStepsState, finalStep } from './StepsState'; diff --git a/client/components/setupWizard/steps/AdminUserInformationStep.js b/client/components/setupWizard/steps/AdminUserInformationStep.js index 0a278badf4c..fae479562cb 100644 --- a/client/components/setupWizard/steps/AdminUserInformationStep.js +++ b/client/components/setupWizard/steps/AdminUserInformationStep.js @@ -8,7 +8,7 @@ import { handleError } from '../../../../app/utils/client'; import { callbacks } from '../../../../app/callbacks/client'; import { useFocus } from '../../../hooks/useFocus'; import { useSetting } from '../../../hooks/useSetting'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { useSetupWizardStepsState } from '../StepsState'; import { Step } from '../Step'; import { StepHeader } from '../StepHeader'; diff --git a/client/components/setupWizard/steps/RegisterServerStep.js b/client/components/setupWizard/steps/RegisterServerStep.js index 8a29c8d0039..c1d0db9ce57 100644 --- a/client/components/setupWizard/steps/RegisterServerStep.js +++ b/client/components/setupWizard/steps/RegisterServerStep.js @@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react'; import { call } from '../../../../app/ui-utils/client'; import { handleError } from '../../../../app/utils/client'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { Icon } from '../../basic/Icon'; import { Pager } from '../Pager'; import { useSetupWizardParameters } from '../ParametersProvider'; diff --git a/client/components/setupWizard/steps/SettingsBasedStep.js b/client/components/setupWizard/steps/SettingsBasedStep.js index 6c0aed84efa..7836f4b3f19 100644 --- a/client/components/setupWizard/steps/SettingsBasedStep.js +++ b/client/components/setupWizard/steps/SettingsBasedStep.js @@ -4,7 +4,7 @@ import React, { useEffect, useReducer, useState } from 'react'; import { handleError } from '../../../../app/utils/client'; import { useFocus } from '../../../hooks/useFocus'; -import { useTranslation } from '../../contexts/TranslationContext'; +import { useTranslation } from '../../../hooks/useTranslation'; import { useReactiveValue } from '../../../hooks/useReactiveValue'; import { Pager } from '../Pager'; import { useSetupWizardParameters } from '../ParametersProvider'; diff --git a/client/hooks/useMeteor.js b/client/hooks/useMeteor.js new file mode 100644 index 00000000000..352b6b3c64e --- /dev/null +++ b/client/hooks/useMeteor.js @@ -0,0 +1,5 @@ +import { useContext } from 'react'; + +import { MeteorContext } from '../components/contexts/MeteorContext'; + +export const useMeteor = () => useContext(MeteorContext).Meteor; diff --git a/client/hooks/useReactiveValue.js b/client/hooks/useReactiveValue.js index 00e63cad57c..e8d0d69314c 100644 --- a/client/hooks/useReactiveValue.js +++ b/client/hooks/useReactiveValue.js @@ -1,10 +1,16 @@ -import { Tracker } from 'meteor/tracker'; import { useEffect, useState } from 'react'; +import { useTracker } from './useTracker'; + export const useReactiveValue = (getValue, deps = []) => { + const Tracker = useTracker(); const [value, setValue] = useState(getValue); useEffect(() => { + if (!Tracker) { + return; + } + const computation = Tracker.autorun(() => { const newValue = getValue(); setValue(() => newValue); diff --git a/client/hooks/useTracker.js b/client/hooks/useTracker.js new file mode 100644 index 00000000000..50259de0fbb --- /dev/null +++ b/client/hooks/useTracker.js @@ -0,0 +1,5 @@ +import { useContext } from 'react'; + +import { MeteorContext } from '../components/contexts/MeteorContext'; + +export const useTracker = () => useContext(MeteorContext).Tracker; diff --git a/client/hooks/useTranslation.js b/client/hooks/useTranslation.js new file mode 100644 index 00000000000..2258ff0adb3 --- /dev/null +++ b/client/hooks/useTranslation.js @@ -0,0 +1,5 @@ +import { useContext } from 'react'; + +import { TranslationContext } from '../components/contexts/TranslationContext'; + +export const useTranslation = () => useContext(TranslationContext);