Migrate components in Welcome page to Typescript

src/components/about-ipfs/AboutIpfs.js → 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 (
     <Box>
       <h2 className='mt0 mb3 montserrat fw2 f3 charcoal'>{t('aboutIpfs.header')}</h2>
@@ -27,4 +29,4 @@ export const AboutIpfs = ({ t }) => {
   )
 }
 
-export default withTranslation('welcome')(AboutIpfs)
+export default AboutIpfs

src/components/about-webui/AboutWebUI.js → 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 (
     <Box>
       <h2 className='mt0 mb3 montserrat fw2 f3 charcoal'>{t('welcomeInfo.header')}</h2>
@@ -30,4 +31,4 @@ export const AboutWebUI = ({ t }) => {
   )
 }
 
-export default withTranslation('welcome')(AboutWebUI)
+export default AboutWebUI

src/components/box/Box.js → 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 (
     <section className={className} style={{ background: '#fbfbfb', ...style }}>
       <ErrorBoundary>

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'
 

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 }) => {

src/components/is-connected/IsConnected.js → 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 (
     <Box className='pv3 ph4'>
       <div>
@@ -17,4 +18,4 @@ export const IsConnected = ({ t }) => {
   )
 }
 
-export default withTranslation('welcome')(IsConnected)
+export default IsConnected

src/components/is-not-connected/IsNotConnected.js

@@ -3,8 +3,8 @@ 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 Shell from '../shell/Shell.js'
+import Box from '../box/Box.tsx'
+import Shell from '../shell/Shell.tsx'
 import GlyphAttention from '../../icons/GlyphAttention.js'
 
 const TABS = {

src/components/shell/Shell.js → 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 (
     <div className={classNames('br1 overflow-hidden', className)}>
       <div className='f7 mb0 sans-serif ttu tracked charcoal pv1 pl2 bg-black-20'>{ title }</div>

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 }) => (
   <div className='mv4 tc navy f5' >

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 }) => (
   <div className='mv4 tc navy f5' >

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'

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 }) => (

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'

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 Shell from '../components/shell/Shell.tsx'
+import Box from '../components/box/Box.tsx'
 
 const StatusNotConnected = ({ t }) => {
   return (

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'
 

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'

src/welcome/WelcomePage.js

@@ -8,26 +8,24 @@ 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 }) => {
+const WelcomePage = ({ t, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => {
   if (!ipfsInitFailed && !ipfsReady) {
     return <ComponentLoader />
   }
 
-  const isSameOrigin = window.location.origin === apiUrl
-
   return (
     <div>
       <Helmet>
         <title>{t('title')}</title>
       </Helmet>
       <div className='lh-copy charcoal'>
-        <ConnectionStatus connected={ipfsConnected} sameOrigin={isSameOrigin} t={t} />
+        <ConnectionStatus connected={ipfsConnected} />
       </div>
       <ReactJoyride
         run={toursEnabled}
@@ -40,7 +38,7 @@ const WelcomePage = ({ t, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, tour
   )
 }
 
-const ConnectionStatus = ({ t, connected, sameOrigin }) => {
+const ConnectionStatus = ({ connected }) => {
   if (connected) {
     return (
       <div>