chore: run npm run eslint -- --fix

.eslintrc.cjs

@@ -11,6 +11,7 @@ module.exports = {
  // ignore .ts files because it fails to parse it.
  ignorePatterns: 'src/**/*.ts',
  rules: {
+ 'import/esm-extensions': 'error',
  'react/prop-types': [0, { ignore: ['className'], customValidators: [], skipUndeclared: true }] // TODO: set this rule to error when all issues are resolved.
  },
  overrides: [

src/App.js

@@ -4,20 +4,20 @@ import { connect } from 'redux-bundler-react'
 import { getNavHelper } from 'internal-nav-helper'
 import ReactJoyride from 'react-joyride'
 import { withTranslation } from 'react-i18next'
-import { normalizeFiles } from './lib/files'
+import { normalizeFiles } from './lib/files.js'
 // React DnD
 import { DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
 // Lib
-import { appTour } from './lib/tours'
-import { getJoyrideLocales } from './helpers/i8n'
+import { appTour } from './lib/tours.js'
+import { getJoyrideLocales } from './helpers/i8n.js'
 // Components
-import NavBar from './navigation/NavBar'
-import ComponentLoader from './loader/ComponentLoader'
-import Notify from './components/notify/Notify'
-import Connected from './components/connected/Connected'
-import TourHelper from './components/tour/TourHelper'
-import FilesExploreForm from './files/explore-form/FilesExploreForm'
+import NavBar from './navigation/NavBar.js'
+import ComponentLoader from './loader/ComponentLoader.js'
+import Notify from './components/notify/Notify.js'
+import Connected from './components/connected/Connected.js'
+import TourHelper from './components/tour/TourHelper.js'
+import FilesExploreForm from './files/explore-form/FilesExploreForm.js'
 
 export class App extends Component {
  static propTypes = {

src/bundles/analytics.js

@@ -3,13 +3,13 @@
 // @ts-ignore
 import root from 'window-or-global'
 import changeCase from 'change-case'
-import * as Enum from './enum'
+import * as Enum from './enum.js'
 import { createSelector } from 'redux-bundler'
-import { ACTIONS as FILES } from './files/consts'
-import { ACTIONS as CONIFG } from './config-save'
-import { ACTIONS as INIT } from './ipfs-provider'
-import { ACTIONS as EXP } from './experiments'
-import { getDeploymentEnv } from '../env'
+import { ACTIONS as FILES } from './files/consts.js'
+import { ACTIONS as CONIFG } from './config-save.js'
+import { ACTIONS as INIT } from './ipfs-provider.js'
+import { ACTIONS as EXP } from './experiments.js'
+import { getDeploymentEnv } from '../env.js'
 
 /**
  * @typedef {import('./ipfs-provider').Init} Init

src/bundles/analytics.test.js

@@ -1,6 +1,6 @@
 /* global describe, it, expect, beforeEach, afterEach, jest */
 import { composeBundlesRaw } from 'redux-bundler'
-import createAnalyticsBundle from './analytics'
+import createAnalyticsBundle from './analytics.js'
 
 beforeEach(() => {
  global.Countly = {

src/bundles/config-save.js

@@ -1,7 +1,7 @@
 // @ts-check
 
-import * as Enum from './enum'
-import { perform } from './task'
+import * as Enum from './enum.js'
+import { perform } from './task.js'
 
 /**
  * @typedef {import('./task').Perform<'CONFIG_SAVE', Error, void, void>} ConfigSave

src/bundles/experiments.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'redux-bundler'
-import * as Enum from './enum'
+import * as Enum from './enum.js'
 export const ACTIONS = Enum.from([
  'EXPERIMENTS_TOGGLE',
  'EXPERIMENTS_UPDATE_STATE'

src/bundles/files.test.js

@@ -1,6 +1,6 @@
 /* global it, expect, jest */
 import { composeBundlesRaw } from 'redux-bundler'
-import createFilesBundle from './files'
+import createFilesBundle from './files/index.js'
 import CID from 'cids'
 
 const iterate = async function * (items) {

src/bundles/files/actions.js

@@ -1,16 +1,16 @@
 /* eslint-disable require-yield */
 
 import { join, dirname, basename } from 'path'
-import { getDownloadLink, getShareableLink, getCarLink } from '../../lib/files'
-import countDirs from '../../lib/count-dirs'
+import { getDownloadLink, getShareableLink, getCarLink } from '../../lib/files.js'
+import countDirs from '../../lib/count-dirs.js'
 import memoize from 'p-memoize'
 import all from 'it-all'
 import map from 'it-map'
 import last from 'it-last'
 import CID from 'cids'
 
-import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath } from './utils'
-import { IGNORED_FILES, ACTIONS } from './consts'
+import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath } from './utils.js'
+import { IGNORED_FILES, ACTIONS } from './consts.js'
 
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService

src/bundles/files/index.js

@@ -1,7 +1,7 @@
-import { sortFiles } from './utils'
-import { DEFAULT_STATE, ACTIONS, SORTING } from './consts'
-import selectors from './selectors'
-import actions from './actions'
+import { sortFiles } from './utils.js'
+import { DEFAULT_STATE, ACTIONS, SORTING } from './consts.js'
+import selectors from './selectors.js'
+import actions from './actions.js'
 
 export { ACTIONS }
 

src/bundles/files/selectors.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'redux-bundler'
-import { ACTIONS } from './consts'
-import { infoFromPath } from './utils'
+import { ACTIONS } from './consts.js'
+import { infoFromPath } from './utils.js'
 
 /**
  * @typedef {import('./protocol').Model} Files

src/bundles/files/utils.js

@@ -1,6 +1,6 @@
-import { sortByName, sortBySize } from '../../lib/sort'
-import { IS_MAC, SORTING } from './consts'
-import * as Task from '../task'
+import { sortByName, sortBySize } from '../../lib/sort.js'
+import { IS_MAC, SORTING } from './consts.js'
+import * as Task from '../task.js'
 
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService

src/bundles/gateway.js

@@ -1,4 +1,4 @@
-import { readSetting, writeSetting } from './local-storage'
+import { readSetting, writeSetting } from './local-storage.js'
 
 export const DEFAULT_GATEWAY = 'https://ipfs.io' // TODO: switch to dweb.link when https://github.com/ipfs/kubo/issues/7318
 const IMG_ARRAY = [

src/bundles/index.js

@@ -1,30 +1,30 @@
 import { composeBundles, createCacheBundle } from 'redux-bundler'
-import ipfsProvider from './ipfs-provider'
+import ipfsProvider from './ipfs-provider.js'
 import { exploreBundle } from 'ipld-explorer-components'
-import appIdle from './app-idle'
-import nodeBandwidthChartBundle from './node-bandwidth-chart'
-import nodeBandwidthBundle from './node-bandwidth'
-import peersBundle from './peers'
-import peerLocationsBundle from './peer-locations'
-import pinningBundle from './pinning'
-import routesBundle from './routes'
-import redirectsBundle from './redirects'
-import filesBundle from './files'
-import configBundle from './config'
-import configSaveBundle from './config-save'
-import toursBundle from './tours'
-import notifyBundle from './notify'
-import connectedBundle from './connected'
-import retryInitBundle from './retry-init'
-import identityBundle from './identity'
-import bundleCache from '../lib/bundle-cache'
-import ipfsDesktop from './ipfs-desktop'
-import repoStats from './repo-stats'
-import createAnalyticsBundle from './analytics'
-import experimentsBundle from './experiments'
-import cliTutorModeBundle from './cli-tutor-mode'
-import gatewayBundle from './gateway'
-import ipnsBundle from './ipns'
+import appIdle from './app-idle.js'
+import nodeBandwidthChartBundle from './node-bandwidth-chart.js'
+import nodeBandwidthBundle from './node-bandwidth.js'
+import peersBundle from './peers.js'
+import peerLocationsBundle from './peer-locations.js'
+import pinningBundle from './pinning.js'
+import routesBundle from './routes.js'
+import redirectsBundle from './redirects.js'
+import filesBundle from './files/index.js'
+import configBundle from './config.js'
+import configSaveBundle from './config-save.js'
+import toursBundle from './tours.js'
+import notifyBundle from './notify.js'
+import connectedBundle from './connected.js'
+import retryInitBundle from './retry-init.js'
+import identityBundle from './identity.js'
+import bundleCache from '../lib/bundle-cache.js'
+import ipfsDesktop from './ipfs-desktop.js'
+import repoStats from './repo-stats.js'
+import createAnalyticsBundle from './analytics.js'
+import experimentsBundle from './experiments.js'
+import cliTutorModeBundle from './cli-tutor-mode.js'
+import gatewayBundle from './gateway.js'
+import ipnsBundle from './ipns.js'
 
 export default composeBundles(
  createCacheBundle({

src/bundles/ipfs-provider.js

@@ -5,9 +5,9 @@ import multiaddr from 'multiaddr'
 import { getIpfs, providers } from 'ipfs-provider'
 import first from 'it-first'
 import last from 'it-last'
-import * as Enum from './enum'
-import { perform } from './task'
-import { readSetting, writeSetting } from './local-storage'
+import * as Enum from './enum.js'
+import { perform } from './task.js'
+import { readSetting, writeSetting } from './local-storage.js'
 
 /* TODO: restore when no longer bundle standalone ipld with ipld-explorer
  * context: https://github.com/ipfs/ipld-explorer-components/pull/289

src/bundles/ipns.js

@@ -1,5 +1,5 @@
 import all from 'it-all'
-import { readSetting, writeSetting } from './local-storage'
+import { readSetting, writeSetting } from './local-storage.js'
 
 const init = () => ({
  keys: [],

src/bundles/node-bandwidth-chart.test.js

@@ -1,9 +1,9 @@
 /* global it, expect */
 import { composeBundlesRaw, createReactorBundle } from 'redux-bundler'
-import createNodeBandwidthChartBundle from './node-bandwidth-chart'
-import { randomInt } from '../../test/helpers/random'
-import sleep from '../../test/helpers/sleep'
-import { fakeBandwidth } from '../../test/helpers/bandwidth'
+import createNodeBandwidthChartBundle from './node-bandwidth-chart.js'
+import { randomInt } from '../../test/helpers/random.js'
+import sleep from '../../test/helpers/sleep.js'
+import { fakeBandwidth } from '../../test/helpers/bandwidth.js'
 
 const mockNodeBandwidthBundle = {
  name: 'nodeBandwidth',

src/bundles/notify.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'redux-bundler'
-import { ACTIONS as EXP_ACTIONS } from './experiments'
-import { ACTIONS as FILES_ACTIONS } from './files'
+import { ACTIONS as EXP_ACTIONS } from './experiments.js'
+import { ACTIONS as FILES_ACTIONS } from './files/index.js'
 
 /*
 # Notify

src/bundles/notify.test.js

@@ -1,7 +1,7 @@
 /* global it, expect */
 import { composeBundlesRaw, createReactorBundle } from 'redux-bundler'
-import notifyBundle from './notify'
-import sleep from '../../test/helpers/sleep'
+import notifyBundle from './notify.js'
+import sleep from '../../test/helpers/sleep.js'
 
 const appTimeBundle = {
  name: 'appTime',

src/bundles/peer-bandwidth.test.js

@@ -1,10 +1,10 @@
 /* global it, expect */
 import { composeBundlesRaw, createReactorBundle } from 'redux-bundler'
-import createPeerBandwidthBundle from './peer-bandwidth'
-import { fakeCid } from '../../test/helpers/cid'
-import { randomInt } from '../../test/helpers/random'
-import sleep from '../../test/helpers/sleep'
-import { fakeBandwidth } from '../../test/helpers/bandwidth'
+import createPeerBandwidthBundle from './peer-bandwidth.js'
+import { fakeCid } from '../../test/helpers/cid.js'
+import { randomInt } from '../../test/helpers/random.js'
+import sleep from '../../test/helpers/sleep.js'
+import { fakeBandwidth } from '../../test/helpers/bandwidth.js'
 
 async function fakePeer () {
  const peer = (await fakeCid()).toBaseEncodedString('base58btc')

src/bundles/peer-locations.test.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'redux-bundler'
-import createPeersLocationBundle from './peer-locations'
+import createPeersLocationBundle from './peer-locations.js'
 
 jest.mock('redux-bundler', () => ({
  createAsyncResourceBundle: (args) => ({ ...args }),

src/bundles/pinning.js

@@ -1,10 +1,10 @@
 // @ts-check
-import { pinningServiceTemplates } from '../constants/pinning'
+import { pinningServiceTemplates } from '../constants/pinning.js'
 import memoize from 'p-memoize'
 import CID from 'cids'
 import all from 'it-all'
 
-import { readSetting, writeSetting } from './local-storage'
+import { readSetting, writeSetting } from './local-storage.js'
 
 // This bundle leverages createCacheBundle and persistActions for
 // the persistence layer that keeps pins in IndexDB store

src/bundles/retry-init.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'redux-bundler'
-import { ACTIONS } from './ipfs-provider'
+import { ACTIONS } from './ipfs-provider.js'
 
 /**
  * @typedef {import('./ipfs-provider').Message} Message

src/bundles/routes.js

@@ -1,14 +1,14 @@
 import { createRouteBundle } from 'redux-bundler'
-import StatusPage from '../status/LoadableStatusPage'
-import FilesPage from '../files/LoadableFilesPage'
-import PinsPage from '../pins/LoadablePinsPage'
-import StartExploringPage from '../explore/LoadableStartExploringPage'
-import ExplorePage from '../explore/LoadableExplorePage'
-import PeersPage from '../peers/LoadablePeersPage'
-import SettingsPage from '../settings/LoadableSettingsPage'
-import AnalyticsPage from '../settings/AnalyticsPage'
-import WelcomePage from '../welcome/LoadableWelcomePage'
-import BlankPage from '../blank/BlankPage'
+import StatusPage from '../status/LoadableStatusPage.js'
+import FilesPage from '../files/LoadableFilesPage.js'
+import PinsPage from '../pins/LoadablePinsPage.js'
+import StartExploringPage from '../explore/LoadableStartExploringPage.js'
+import ExplorePage from '../explore/LoadableExplorePage.js'
+import PeersPage from '../peers/LoadablePeersPage.js'
+import SettingsPage from '../settings/LoadableSettingsPage.js'
+import AnalyticsPage from '../settings/AnalyticsPage.js'
+import WelcomePage from '../welcome/LoadableWelcomePage.js'
+import BlankPage from '../blank/BlankPage.js'
 
 export default createRouteBundle({
  '/explore': StartExploringPage,

src/components/about-ipfs/AboutIpfs.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box'
+import Box from '../box/Box.js'
 
 export const AboutIpfs = ({ t }) => {
  return (

src/components/about-webui/AboutWebUI.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box'
+import Box from '../box/Box.js'
 
 export const AboutWebUI = ({ t }) => {
  return (

src/components/analytics-banner/AnalyticsBanner.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from '../button/Button'
+import Button from '../button/Button.js'
 
 const AnalyticsBanner = ({ className, label, yesLabel, onYes }) => {
  return (

src/components/analytics-toggle/AnalyticsToggle.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Trans } from 'react-i18next'
 import { connect } from 'redux-bundler-react'
-import Checkbox from '../checkbox/Checkbox'
-import Details from '../details/Details'
+import Checkbox from '../checkbox/Checkbox.js'
+import Details from '../details/Details.js'
 
 const ExampleRequest = ({ url, method = 'GET' }) => {
  return (

src/components/api-address-form/ApiAddressForm.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
-import Button from '../button/Button'
-import { checkValidAPIAddress } from '../../bundles/ipfs-provider'
+import Button from '../button/Button.js'
+import { checkValidAPIAddress } from '../../bundles/ipfs-provider.js'
 
 const ApiAddressForm = ({ t, doUpdateIpfsApiAddress, ipfsApiAddress, ipfsInitFailed }) => {
  const [value, setValue] = useState(asAPIString(ipfsApiAddress))

src/components/box/Box.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ErrorBoundary from '../error/ErrorBoundary'
+import ErrorBoundary from '../error/ErrorBoundary.js'
 
 export const Box = ({
  className = 'pa4',

src/components/button/Button.stories.js

@@ -1,7 +1,7 @@
 import React from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 
-import Button from './Button'
+import Button from './Button.js'
 
 /**
  * @type {import('@storybook/react').Meta}

src/components/checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Tick from '../../icons/GlyphSmallTick'
+import Tick from '../../icons/GlyphSmallTick.js'
 import './Checkbox.css'
 
 const Checkbox = ({ className, label, disabled, checked, onChange, ...props }) => {