From 34e6eb149d9a07bbb71ac0fbac8223f622ef04ff Mon Sep 17 00:00:00 2001 From: Yuttakhan Baingen Date: Mon, 31 Mar 2025 21:51:56 +0700 Subject: [PATCH 1/5] chore: update Box to tsx --- src/components/box/{Box.js => Box.tsx} | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) rename src/components/box/{Box.js => Box.tsx} (60%) diff --git a/src/components/box/Box.js b/src/components/box/Box.tsx similarity index 60% rename from src/components/box/Box.js rename to src/components/box/Box.tsx index 2233b5fea..d7a295d60 100644 --- a/src/components/box/Box.js +++ b/src/components/box/Box.tsx @@ -1,12 +1,17 @@ -import React from 'react' +import React, { CSSProperties, ReactElement } from 'react' import ErrorBoundary from '../error/ErrorBoundary.js' +type Props = { + className?: string + style?: CSSProperties + children?: ReactElement | ReactElement[] | string +} + export const Box = ({ className = 'pa4', style, - children, - ...props -}) => { + children +}: Props) => { return (
From 16be0cd2e56e7876921488b561103e4cb8be8e4a Mon Sep 17 00:00:00 2001 From: Yuttakhan Baingen Date: Mon, 31 Mar 2025 21:53:08 +0700 Subject: [PATCH 2/5] chore: update components to useTranslation and to tsx, apply to WelcomePage --- .../about-ipfs/{AboutIpfs.js => AboutIpfs.tsx} | 10 ++++++---- .../about-webui/{AboutWebUI.js => AboutWebUI.tsx} | 9 +++++---- .../is-connected/{IsConnected.js => IsConnected.tsx} | 9 +++++---- src/welcome/WelcomePage.js | 6 +++--- 4 files changed, 19 insertions(+), 15 deletions(-) rename src/components/about-ipfs/{AboutIpfs.js => AboutIpfs.tsx} (90%) rename src/components/about-webui/{AboutWebUI.js => AboutWebUI.tsx} (91%) rename src/components/is-connected/{IsConnected.js => IsConnected.tsx} (73%) diff --git a/src/components/about-ipfs/AboutIpfs.js b/src/components/about-ipfs/AboutIpfs.tsx similarity index 90% rename from src/components/about-ipfs/AboutIpfs.js rename to src/components/about-ipfs/AboutIpfs.tsx index db7e8b9c8..3a7842854 100644 --- a/src/components/about-ipfs/AboutIpfs.js +++ b/src/components/about-ipfs/AboutIpfs.tsx @@ -1,8 +1,10 @@ import React from 'react' -import { withTranslation, Trans } from 'react-i18next' -import Box from '../box/Box.js' +import { Trans, useTranslation } from 'react-i18next' +import Box from '../box/Box.tsx' + +const AboutIpfs = () => { + const { t } = useTranslation('welcome') -export const AboutIpfs = ({ t }) => { return (

{t('aboutIpfs.header')}

@@ -27,4 +29,4 @@ export const AboutIpfs = ({ t }) => { ) } -export default withTranslation('welcome')(AboutIpfs) +export default AboutIpfs diff --git a/src/components/about-webui/AboutWebUI.js b/src/components/about-webui/AboutWebUI.tsx similarity index 91% rename from src/components/about-webui/AboutWebUI.js rename to src/components/about-webui/AboutWebUI.tsx index 8bcb81a01..dddb2948a 100644 --- a/src/components/about-webui/AboutWebUI.js +++ b/src/components/about-webui/AboutWebUI.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { withTranslation, Trans } from 'react-i18next' -import Box from '../box/Box.js' +import { Trans, useTranslation } from 'react-i18next' +import Box from '../box/Box.tsx' -export const AboutWebUI = ({ t }) => { +const AboutWebUI = () => { + const { t } = useTranslation('welcome') return (

{t('welcomeInfo.header')}

@@ -30,4 +31,4 @@ export const AboutWebUI = ({ t }) => { ) } -export default withTranslation('welcome')(AboutWebUI) +export default AboutWebUI diff --git a/src/components/is-connected/IsConnected.js b/src/components/is-connected/IsConnected.tsx similarity index 73% rename from src/components/is-connected/IsConnected.js rename to src/components/is-connected/IsConnected.tsx index ca47f5c84..4043fb14c 100644 --- a/src/components/is-connected/IsConnected.js +++ b/src/components/is-connected/IsConnected.tsx @@ -1,9 +1,10 @@ import React from 'react' -import { withTranslation } from 'react-i18next' -import Box from '../box/Box.js' +import { useTranslation } from 'react-i18next' +import Box from '../box/Box.tsx' import GlyphTick from '../../icons/GlyphTick.js' -export const IsConnected = ({ t }) => { +const IsConnected = () => { + const { t } = useTranslation('welcome') return (
@@ -17,4 +18,4 @@ export const IsConnected = ({ t }) => { ) } -export default withTranslation('welcome')(IsConnected) +export default IsConnected diff --git a/src/welcome/WelcomePage.js b/src/welcome/WelcomePage.js index 9266683b9..279285199 100644 --- a/src/welcome/WelcomePage.js +++ b/src/welcome/WelcomePage.js @@ -8,10 +8,10 @@ import { welcomeTour } from '../lib/tours.js' import { getJoyrideLocales } from '../helpers/i8n.js' // Components -import IsConnected from '../components/is-connected/IsConnected.js' +import IsConnected from '../components/is-connected/IsConnected.tsx' import IsNotConnected from '../components/is-not-connected/IsNotConnected.js' -import AboutIpfs from '../components/about-ipfs/AboutIpfs.js' -import AboutWebUI from '../components/about-webui/AboutWebUI.js' +import AboutIpfs from '../components/about-ipfs/AboutIpfs.tsx' +import AboutWebUI from '../components/about-webui/AboutWebUI.tsx' import ComponentLoader from '../loader/ComponentLoader.js' const WelcomePage = ({ t, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => { From 07aa82afeed61e74a1d188c5369d00f78cb62c62 Mon Sep 17 00:00:00 2001 From: Yuttakhan Baingen Date: Mon, 31 Mar 2025 21:54:46 +0700 Subject: [PATCH 3/5] chore: move Box imports --- src/components/experiments/ExperimentsPanel.js | 2 +- src/components/is-not-connected/IsNotConnected.js | 2 +- src/files/info-boxes/add-files-info/AddFilesInfo.js | 2 +- src/files/info-boxes/companion-info/CompanionInfo.js | 2 +- src/peers/PeersPage.js | 2 +- src/settings/AnalyticsPage.js | 2 +- src/settings/SettingsPage.js | 2 +- src/status/BandwidthStatsDisabled.js | 2 +- src/status/PeerBandwidthTable.js | 2 +- src/status/StatusPage.js | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/experiments/ExperimentsPanel.js b/src/components/experiments/ExperimentsPanel.js index d95dd1506..f1569fd66 100644 --- a/src/components/experiments/ExperimentsPanel.js +++ b/src/components/experiments/ExperimentsPanel.js @@ -1,7 +1,7 @@ import React from 'react' import { connect } from 'redux-bundler-react' import Checkbox from '../checkbox/Checkbox.js' -import Box from '../box/Box.js' +import Box from '../box/Box.tsx' import Title from '../../settings/Title.js' const Experiments = ({ doExpToggleAction, experiments, t }) => { diff --git a/src/components/is-not-connected/IsNotConnected.js b/src/components/is-not-connected/IsNotConnected.js index 004ed68fe..202199104 100644 --- a/src/components/is-not-connected/IsNotConnected.js +++ b/src/components/is-not-connected/IsNotConnected.js @@ -3,7 +3,7 @@ import { connect } from 'redux-bundler-react' import { withTranslation, Trans } from 'react-i18next' import classNames from 'classnames' import ApiAddressForm from '../api-address-form/ApiAddressForm.js' -import Box from '../box/Box.js' +import Box from '../box/Box.tsx' import Shell from '../shell/Shell.js' import GlyphAttention from '../../icons/GlyphAttention.js' diff --git a/src/files/info-boxes/add-files-info/AddFilesInfo.js b/src/files/info-boxes/add-files-info/AddFilesInfo.js index 4b021f7fb..405f6ab07 100644 --- a/src/files/info-boxes/add-files-info/AddFilesInfo.js +++ b/src/files/info-boxes/add-files-info/AddFilesInfo.js @@ -1,6 +1,6 @@ import React from 'react' import { withTranslation, Trans } from 'react-i18next' -import Box from '../../../components/box/Box.js' +import Box from '../../../components/box/Box.tsx' const AddFilesInfo = ({ t }) => (
diff --git a/src/files/info-boxes/companion-info/CompanionInfo.js b/src/files/info-boxes/companion-info/CompanionInfo.js index 63cb4f3db..0791bd503 100644 --- a/src/files/info-boxes/companion-info/CompanionInfo.js +++ b/src/files/info-boxes/companion-info/CompanionInfo.js @@ -1,6 +1,6 @@ import React from 'react' import { withTranslation, Trans } from 'react-i18next' -import Box from '../../../components/box/Box.js' +import Box from '../../../components/box/Box.tsx' const CompanionInfo = ({ t }) => (
diff --git a/src/peers/PeersPage.js b/src/peers/PeersPage.js index 4f2bcc266..5d382c6bb 100644 --- a/src/peers/PeersPage.js +++ b/src/peers/PeersPage.js @@ -8,7 +8,7 @@ import { peersTour } from '../lib/tours.js' import { getJoyrideLocales } from '../helpers/i8n.js' // Components -import Box from '../components/box/Box.js' +import Box from '../components/box/Box.tsx' import WorldMap from './WorldMap/WorldMap.js' import PeersTable from './PeersTable/PeersTable.js' import AddConnection from './AddConnection/AddConnection.js' diff --git a/src/settings/AnalyticsPage.js b/src/settings/AnalyticsPage.js index c6c191fe8..a971c8480 100644 --- a/src/settings/AnalyticsPage.js +++ b/src/settings/AnalyticsPage.js @@ -2,7 +2,7 @@ import React from 'react' import { Helmet } from 'react-helmet' import { withTranslation } from 'react-i18next' import Title from './Title.js' -import Box from '../components/box/Box.js' +import Box from '../components/box/Box.tsx' import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js' export const AnalyticsPage = ({ t }) => ( diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js index 196a6db02..e088d8e62 100644 --- a/src/settings/SettingsPage.js +++ b/src/settings/SettingsPage.js @@ -9,7 +9,7 @@ import withTour from '../components/tour/withTour.js' import { getJoyrideLocales } from '../helpers/i8n.js' // Components import Tick from '../icons/GlyphSmallTick.js' -import Box from '../components/box/Box.js' +import Box from '../components/box/Box.tsx' import Button from '../components/button/button.tsx' import LanguageSelector from '../components/language-selector/LanguageSelector.js' import PinningManager from '../components/pinning-manager/PinningManager.js' diff --git a/src/status/BandwidthStatsDisabled.js b/src/status/BandwidthStatsDisabled.js index fee11229b..ad819ddd8 100644 --- a/src/status/BandwidthStatsDisabled.js +++ b/src/status/BandwidthStatsDisabled.js @@ -1,7 +1,7 @@ import React from 'react' import { withTranslation, Trans } from 'react-i18next' import Shell from '../components/shell/Shell.js' -import Box from '../components/box/Box.js' +import Box from '../components/box/Box.tsx' const StatusNotConnected = ({ t }) => { return ( diff --git a/src/status/PeerBandwidthTable.js b/src/status/PeerBandwidthTable.js index 0a816d7c0..3f1b05d90 100644 --- a/src/status/PeerBandwidthTable.js +++ b/src/status/PeerBandwidthTable.js @@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next' import PropTypes from 'prop-types' import { humanSize } from '../lib/files.js' import CountryFlag from 'react-country-flag' -import Box from '../components/box/Box.js' +import Box from '../components/box/Box.tsx' import { Title } from './Commons.js' import ComponentLoader from '../loader/ComponentLoader.js' diff --git a/src/status/StatusPage.js b/src/status/StatusPage.js index ae8c969ec..1623ada21 100644 --- a/src/status/StatusPage.js +++ b/src/status/StatusPage.js @@ -10,7 +10,7 @@ import NodeInfo from './NodeInfo.js' import NodeInfoAdvanced from './NodeInfoAdvanced.js' import NodeBandwidthChart from './NodeBandwidthChart.js' import NetworkTraffic from './NetworkTraffic.js' -import Box from '../components/box/Box.js' +import Box from '../components/box/Box.tsx' import AnalyticsBanner from '../components/analytics-banner/AnalyticsBanner.js' import { statusTour } from '../lib/tours.js' import { getJoyrideLocales } from '../helpers/i8n.js' From 14d73656474a28d644d605527e027622eac3634a Mon Sep 17 00:00:00 2001 From: Yuttakhan Baingen Date: Mon, 31 Mar 2025 21:57:38 +0700 Subject: [PATCH 4/5] refactor: remove unused props --- src/welcome/WelcomePage.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/welcome/WelcomePage.js b/src/welcome/WelcomePage.js index 279285199..486770a66 100644 --- a/src/welcome/WelcomePage.js +++ b/src/welcome/WelcomePage.js @@ -14,20 +14,18 @@ import AboutIpfs from '../components/about-ipfs/AboutIpfs.tsx' import AboutWebUI from '../components/about-webui/AboutWebUI.tsx' import ComponentLoader from '../loader/ComponentLoader.js' -const WelcomePage = ({ t, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => { +const WelcomePage = ({ t, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => { if (!ipfsInitFailed && !ipfsReady) { return } - const isSameOrigin = window.location.origin === apiUrl - return (
{t('title')}
- +
{ +const ConnectionStatus = ({ connected }) => { if (connected) { return (
From b70da90d9336b3b7fa77e738f307b0f27fd68fd5 Mon Sep 17 00:00:00 2001 From: Yuttakhan Baingen Date: Mon, 31 Mar 2025 22:21:37 +0700 Subject: [PATCH 5/5] chore: move Sheell to ts and apply to components --- src/components/cli-tutor-mode/CliTutorMode.js | 2 +- src/components/is-not-connected/IsNotConnected.js | 2 +- src/components/shell/{Shell.js => Shell.tsx} | 10 ++++++++-- src/status/BandwidthStatsDisabled.js | 2 +- 4 files changed, 11 insertions(+), 5 deletions(-) rename src/components/shell/{Shell.js => Shell.tsx} (73%) diff --git a/src/components/cli-tutor-mode/CliTutorMode.js b/src/components/cli-tutor-mode/CliTutorMode.js index 6c7ae41e1..c4759b65f 100644 --- a/src/components/cli-tutor-mode/CliTutorMode.js +++ b/src/components/cli-tutor-mode/CliTutorMode.js @@ -7,7 +7,7 @@ import { Modal, ModalBody, ModalActions } from '../modal/Modal.js' import StrokeCode from '../../icons/StrokeCode.js' import Button from '../button/button.tsx' import Overlay from '../overlay/Overlay.js' -import Shell from '../shell/Shell.js' +import Shell from '../shell/Shell.tsx' import StrokeDownload from '../../icons/StrokeDownload.js' import { cliCmdKeys, cliCommandList, cliCmdPrefixes } from '../../bundles/files/consts.js' diff --git a/src/components/is-not-connected/IsNotConnected.js b/src/components/is-not-connected/IsNotConnected.js index 202199104..d33f1b47c 100644 --- a/src/components/is-not-connected/IsNotConnected.js +++ b/src/components/is-not-connected/IsNotConnected.js @@ -4,7 +4,7 @@ import { withTranslation, Trans } from 'react-i18next' import classNames from 'classnames' import ApiAddressForm from '../api-address-form/ApiAddressForm.js' import Box from '../box/Box.tsx' -import Shell from '../shell/Shell.js' +import Shell from '../shell/Shell.tsx' import GlyphAttention from '../../icons/GlyphAttention.js' const TABS = { diff --git a/src/components/shell/Shell.js b/src/components/shell/Shell.tsx similarity index 73% rename from src/components/shell/Shell.js rename to src/components/shell/Shell.tsx index e9dca171d..95b0c572a 100644 --- a/src/components/shell/Shell.js +++ b/src/components/shell/Shell.tsx @@ -1,11 +1,17 @@ -import React from 'react' +import React, { ReactElement } from 'react' import classNames from 'classnames' +type Props = { + title?: string + children: ReactElement | ReactElement[] + className?: string +} + const Shell = ({ title = 'Shell', children, className -}) => { +}: Props) => { return (
{ title }
diff --git a/src/status/BandwidthStatsDisabled.js b/src/status/BandwidthStatsDisabled.js index ad819ddd8..524426167 100644 --- a/src/status/BandwidthStatsDisabled.js +++ b/src/status/BandwidthStatsDisabled.js @@ -1,6 +1,6 @@ import React from 'react' import { withTranslation, Trans } from 'react-i18next' -import Shell from '../components/shell/Shell.js' +import Shell from '../components/shell/Shell.tsx' import Box from '../components/box/Box.tsx' const StatusNotConnected = ({ t }) => {