chore: remove selectApiUrl selector (#2412)

Author: SgtPooki

src/bundles/config.js

@@ -1,6 +1,7 @@
 import memoize from 'p-memoize'
 import { multiaddrToUri as toUri } from '@multiformats/multiaddr-to-uri'
 import { createAsyncResourceBundle, createSelector } from 'redux-bundler'
+import { contextBridge } from '../helpers/context-bridge'
 
 const LOCAL_HOSTNAMES = ['127.0.0.1', '[::1]', '0.0.0.0', '[::]']
 
@@ -53,10 +54,13 @@ bundle.selectConfigObject = createSelector(
   (configStr) => JSON.parse(configStr)
 )
 
-bundle.selectApiUrl = createSelector(
+bundle.reactIsSameOriginToBridge = createSelector(
   'selectConfigObject',
   'selectPublicGateway',
-  (config, publicGateway) => getURLFromAddress('API', config) || publicGateway
+  (config, publicGateway) => {
+    const apiUrl = getURLFromAddress('API', config) || publicGateway
+    contextBridge.setContext('selectIsSameOrigin', window.location.origin === apiUrl)
+  }
 )
 
 bundle.selectGatewayUrl = createSelector(

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

@@ -1,30 +1,26 @@
 import React, { useState } from 'react'
-import { connect } from 'redux-bundler-react'
-import { withTranslation, Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import ApiAddressForm from '../api-address-form/api-address-form'
 import Box from '../box/Box.js'
 import Shell from '../shell/Shell.js'
 import GlyphAttention from '../../icons/GlyphAttention.js'
+import { useBridgeSelector } from '../../helpers/context-bridge'
 
 const TABS = {
   UNIX: 'unix',
   POWERSHELL: 'windowsPS',
   WINDOWS: 'windowsCMD'
 }
 
-/**
- * @param {Object} props
- * @param {import('i18next').TFunction} props.t
- * @param {string} props.apiUrl
- * @param {boolean} props.connected
- * @param {boolean} props.sameOrigin
- */
-const IsNotConnected = ({ t, apiUrl: _apiUrl, connected: _connected, sameOrigin }) => {
+const IsNotConnected = () => {
+  const { t } = useTranslation('welcome')
+  const isSameOrigin = useBridgeSelector('selectIsSameOrigin')
   const [activeTab, setActiveTab] = useState(TABS.UNIX)
   const defaultDomains = ['http://localhost:3000', 'http://127.0.0.1:5001', 'https://webui.ipfs.io']
   const origin = window.location.origin
   const addOrigin = defaultDomains.indexOf(origin) === -1
+
   return (
     <Box className='pv3 ph4 lh-copy charcoal'>
       <div className='flex flex-wrap items-center'>
@@ -43,7 +39,7 @@ const IsNotConnected = ({ t, apiUrl: _apiUrl, connected: _connected, sameOrigin
           <code className='db'>Initializing daemon...</code>
           <code className='db'>RPC API server listening on /ip4/127.0.0.1/tcp/5001</code>
         </Shell>
-        { !sameOrigin && (
+        { !isSameOrigin && (
           <div>
             <Trans i18nKey='notConnected.paragraph3' t={t}>
               <li className='mb3 mt4'>Is your Kubo RPC API configured to allow <a className='link blue' href='https://github.com/ipfs/ipfs-webui#configure-kubo-rpc-api-cors-headers'>cross-origin (CORS) requests</a>? If not, run these commands and then start your daemon from the terminal:</li>
@@ -92,8 +88,4 @@ const IsNotConnected = ({ t, apiUrl: _apiUrl, connected: _connected, sameOrigin
   )
 }
 
-export default connect(
-  'selectIpfsConnected',
-  'selectApiUrl',
-  withTranslation('welcome')(IsNotConnected)
-)
+export default IsNotConnected

src/welcome/WelcomePage.js

@@ -13,24 +13,24 @@ 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 ComponentLoader from '../loader/ComponentLoader.js'
+import { useBridgeSelector } from '../helpers/context-bridge'
 
 /**
  * @param {Object} props
  * @param {import('i18next').TFunction} props.t
- * @param {string} props.apiUrl
  * @param {boolean} props.ipfsInitFailed
  * @param {boolean} props.ipfsConnected
  * @param {boolean} props.ipfsReady
  * @param {boolean} props.toursEnabled
  * @param {(data: any) => void} props.handleJoyrideCallback
  */
-const WelcomePage = ({ t, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => {
+const WelcomePage = ({ t, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => {
+  const isSameOrigin = useBridgeSelector('selectIsSameOrigin')
+
   if (!ipfsInitFailed && !ipfsReady) {
     return <ComponentLoader />
   }
 
-  const isSameOrigin = window.location.origin === apiUrl
-
   return (
     <div>
       <Helmet>
@@ -75,7 +75,6 @@ const ConnectionStatus = ({ t: _t, connected, sameOrigin: _sameOrigin }) => {
     )
   }
   return (
-    // @ts-expect-error - IsNotConnected needs type fixes
     <IsNotConnected />
   )
 }
@@ -84,7 +83,6 @@ export default connect(
   'selectIpfsInitFailed',
   'selectIpfsConnected',
   'selectIpfsReady',
-  'selectApiUrl',
   'selectToursEnabled',
   withTour(withTranslation('welcome')(WelcomePage))
 )