fix re-renders caused by withTracker HOC

client/__mocks__/user-mock.ts

@@ -4,6 +4,7 @@ const userMock = {
     isLogged: false,
     isLoading: false,
     isBurner: false,
+    isWeb3Capable: false,
     account: '',
     web3: {},
     ...oceanMock,
@@ -19,6 +20,7 @@ const userMockConnected = {
     isLogged: true,
     isLoading: false,
     isBurner: false,
+    isWeb3Capable: true,
     account: '0xxxxxx',
     web3: {},
     ...oceanMock,

client/src/Routes.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
-import withTracker from './hoc/withTracker'
 
 import About from './routes/About'
 import Home from './routes/Home'
@@ -17,17 +16,17 @@ import Channel from './components/templates/Channel'
 
 const Routes = () => (
     <Switch>
-        <Route component={withTracker(Home)} exact path="/" />
+        <Route component={Home} exact path="/" />
-        <Route component={withTracker(Styleguide)} path="/styleguide" />
+        <Route component={Styleguide} path="/styleguide" />
-        <Route component={withTracker(About)} path="/about" />
+        <Route component={About} path="/about" />
-        <Route component={withTracker(Publish)} path="/publish" />
+        <Route component={Publish} path="/publish" />
-        <Route component={withTracker(Search)} path="/search" />
+        <Route component={Search} path="/search" />
-        <Route component={withTracker(Asset)} path="/asset/:did" />
+        <Route component={Asset} path="/asset/:did" />
-        <Route component={withTracker(Faucet)} path="/faucet" />
+        <Route component={Faucet} path="/faucet" />
-        <Route component={withTracker(History)} path="/history" />
+        <Route component={History} path="/history" />
-        <Route component={withTracker(Channels)} exact path="/channels" />
+        <Route component={Channels} exact path="/channels" />
-        <Route component={withTracker(Channel)} path="/channels/:channel" />
+        <Route component={Channel} path="/channels/:channel" />
-        <Route component={withTracker(NotFound)} />
+        <Route component={NotFound} />
     </Switch>
 )
 

client/src/hoc/withTracker.tsx

@@ -13,16 +13,14 @@ const withTracker = <P extends RouteComponentProps>(
     options: FieldsObject = {}
 ) => {
     const trackPage = (page: string) => {
-        options.isWeb3 = window.web3 !== undefined
-
         ReactGA.set({ page, ...options })
         ReactGA.pageview(page)
     }
 
     const HOC = (props: P) => {
-        useEffect(() => trackPage(props.location.pathname), [
+        useEffect(() => {
-            props.location.pathname
+            trackPage(props.location.pathname)
-        ])
+        }, [props.location.pathname])
 
         return <WrappedComponent {...props} />
     }

client/src/routes/About.tsx

@@ -5,6 +5,7 @@ import Content from '../components/atoms/Content'
 import VersionNumbers from '../components/molecules/VersionNumbers'
 import Web3message from '../components/organisms/Web3message'
 import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss'
+import withTracker from '../hoc/withTracker'
 
 class About extends Component {
     public static contextType = Market
@@ -53,4 +54,4 @@ class About extends Component {
     }
 }
 
-export default About
+export default withTracker(About)

client/src/routes/Channels.tsx

@@ -3,6 +3,7 @@ import Route from '../components/templates/Route'
 import Content from '../components/atoms/Content'
 import channels from '../data/channels.json'
 import ChannelTeaser from '../components/organisms/ChannelTeaser'
+import withTracker from '../hoc/withTracker'
 
 class Channels extends Component {
     public render() {
@@ -21,4 +22,4 @@ class Channels extends Component {
     }
 }
 
-export default Channels
+export default withTracker(Channels)

client/src/routes/Faucet.tsx

@@ -7,6 +7,7 @@ import { User, Market } from '../context'
 import Web3message from '../components/organisms/Web3message'
 import styles from './Faucet.module.scss'
 import Content from '../components/atoms/Content'
+import withTracker from '../hoc/withTracker'
 
 interface FaucetState {
     isLoading: boolean
@@ -15,7 +16,7 @@ interface FaucetState {
     trxHash?: string
 }
 
-export default class Faucet extends PureComponent<{}, FaucetState> {
+class Faucet extends PureComponent<{}, FaucetState> {
     public static contextType = User
 
     public state = {
@@ -142,4 +143,4 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
     }
 }
 
-Faucet.contextType = User
+export default withTracker(Faucet)

client/src/routes/History.tsx

@@ -4,8 +4,11 @@ import AssetsUser from '../components/organisms/AssetsUser'
 import Web3message from '../components/organisms/Web3message'
 import { User } from '../context'
 import Content from '../components/atoms/Content'
+import withTracker from '../hoc/withTracker'
+
+class History extends Component {
+    public static contextType = User
 
-export default class History extends Component {
     public render() {
         return (
             <Route title="History">
@@ -18,4 +21,4 @@ export default class History extends Component {
     }
 }
 
-History.contextType = User
+export default withTracker(History)

client/src/routes/Home.tsx

@@ -1,102 +0,0 @@
-import React, { ChangeEvent, Component, FormEvent } from 'react'
-import { History } from 'history'
-import { User, Market } from '../context'
-import CategoryImage from '../components/atoms/CategoryImage'
-import CategoryLink from '../components/atoms/CategoryLink'
-import Button from '../components/atoms/Button'
-import Form from '../components/atoms/Form/Form'
-import Input from '../components/atoms/Form/Input'
-import Route from '../components/templates/Route'
-import styles from './Home.module.scss'
-
-import meta from '../data/meta.json'
-import Content from '../components/atoms/Content'
-import AssetsLatest from '../components/organisms/AssetsLatest'
-import ChannelTeaser from '../components/organisms/ChannelTeaser'
-
-interface HomeProps {
-    history: History
-}
-
-interface HomeState {
-    search?: string
-}
-
-export default class Home extends Component<HomeProps, HomeState> {
-    public static contextType = User
-
-    public state = {
-        search: ''
-    }
-
-    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
-        this.setState({
-            [event.target.name]: event.target.value
-        })
-    }
-
-    private searchAssets = (event: FormEvent<HTMLFormElement>) => {
-        event.preventDefault()
-        this.props.history.push(`/search?text=${this.state.search}`)
-    }
-
-    public render() {
-        const { search } = this.state
-
-        return (
-            <Route
-                title={meta.title}
-                description={meta.description}
-                className={styles.home}
-            >
-                <Content>
-                    <Form onSubmit={this.searchAssets} minimal>
-                        <Input
-                            type="search"
-                            name="search"
-                            label="Search for data sets"
-                            placeholder="e.g. shapes of plants"
-                            value={search}
-                            onChange={this.inputChange}
-                            group={
-                                <Button primary disabled={!search}>
-                                    Search
-                                </Button>
-                            }
-                        />
-                    </Form>
-                </Content>
-
-                <Content wide>
-                    <h2 className={styles.title}>Featured Channel</h2>
-                    <ChannelTeaser channel="ai-for-good" />
-                    <AssetsLatest />
-                </Content>
-
-                <Content wide>
-                    <h2 className={styles.title}>Explore Categories</h2>
-                    <div className={styles.categories}>
-                        <Market.Consumer>
-                            {({ categories }) =>
-                                categories
-                                    .sort((a, b) => a.localeCompare(b)) // sort alphabetically
-                                    .map((category: string) => (
-                                        <CategoryLink
-                                            category={category}
-                                            key={category}
-                                            className={styles.category}
-                                        >
-                                            <CategoryImage
-                                                category={category}
-                                            />
-                                            <h3>{category}</h3>
-                                        </CategoryLink>
-                                    ))
-                            }
-                        </Market.Consumer>
-                    </div>
-                </Content>
-            </Route>
-        )
-    }
-}

client/src/routes/Home/Search.tsx

@@ -0,0 +1,51 @@
+import React, { ChangeEvent, FormEvent, PureComponent } from 'react'
+import Button from '../../components/atoms/Button'
+import Form from '../../components/atoms/Form/Form'
+import Input from '../../components/atoms/Form/Input'
+
+interface SearchProps {
+    searchAssets: any
+}
+
+interface SearchState {
+    search: string
+}
+
+export default class Search extends PureComponent<SearchProps, SearchState> {
+    public state = {
+        search: ''
+    }
+
+    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        this.setState({
+            search: event.target.value
+        })
+    }
+
+    public render() {
+        const { search } = this.state
+
+        return (
+            <Form
+                onSubmit={(e: FormEvent<HTMLFormElement>) =>
+                    this.props.searchAssets(search, e)
+                }
+                minimal
+            >
+                <Input
+                    type="search"
+                    name="search"
+                    label="Search for data sets"
+                    placeholder="e.g. shapes of plants"
+                    value={search}
+                    onChange={this.inputChange}
+                    group={
+                        <Button primary disabled={!search}>
+                            Search
+                        </Button>
+                    }
+                />
+            </Form>
+        )
+    }
+}

client/src/routes/Home/index.module.scss

@@ -1,4 +1,4 @@
-@import '../styles/variables';
+@import '../../styles/variables';
 
 .home {
     display: block;

client/src/routes/Home/index.test.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Router } from 'react-router'
 import { createBrowserHistory } from 'history'
 import { render } from '@testing-library/react'
-import Home from './Home'
+import Home from '.'
-import { userMock } from '../../__mocks__/user-mock'
+import { userMock } from '../../../__mocks__/user-mock'
-import { User } from '../context'
+import { User } from '../../context'
 
 const history = createBrowserHistory()
 

client/src/routes/Home/index.tsx

@@ -0,0 +1,74 @@
+import React, { PureComponent, FormEvent } from 'react'
+import { History } from 'history'
+import { Market } from '../../context'
+import CategoryImage from '../../components/atoms/CategoryImage'
+import CategoryLink from '../../components/atoms/CategoryLink'
+import Route from '../../components/templates/Route'
+import styles from './index.module.scss'
+
+import meta from '../../data/meta.json'
+import Content from '../../components/atoms/Content'
+import AssetsLatest from '../../components/organisms/AssetsLatest'
+import ChannelTeaser from '../../components/organisms/ChannelTeaser'
+import Search from './Search'
+import withTracker from '../../hoc/withTracker'
+
+interface HomeProps {
+    history: History
+}
+
+interface HomeState {
+    search?: string
+}
+
+class Home extends PureComponent<HomeProps, HomeState> {
+    public static contextType = Market
+
+    private searchAssets = (
+        search: string,
+        event: FormEvent<HTMLFormElement>
+    ) => {
+        event.preventDefault()
+        this.props.history.push(`/search?text=${search}`)
+    }
+
+    public render() {
+        return (
+            <Route
+                title={meta.title}
+                description={meta.description}
+                className={styles.home}
+            >
+                <Content>
+                    <Search key="search" searchAssets={this.searchAssets} />
+                </Content>
+
+                <Content wide>
+                    <h2 className={styles.title}>Featured Channel</h2>
+                    <ChannelTeaser channel="ai-for-good" />
+                    <AssetsLatest />
+                </Content>
+
+                <Content wide>
+                    <h2 className={styles.title}>Explore Categories</h2>
+                    <div className={styles.categories}>
+                        {this.context.categories
+                            .sort((a: any, b: any) => a.localeCompare(b)) // sort alphabetically
+                            .map((category: string) => (
+                                <CategoryLink
+                                    category={category}
+                                    key={category}
+                                    className={styles.category}
+                                >
+                                    <CategoryImage category={category} />
+                                    <h3>{category}</h3>
+                                </CategoryLink>
+                            ))}
+                    </div>
+                </Content>
+            </Route>
+        )
+    }
+}
+
+export default withTracker(Home)

client/src/routes/NotFound.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Route from '../components/templates/Route'
 import Content from '../components/atoms/Content'
+import withTracker from '../hoc/withTracker'
 
 class NotFound extends Component {
     public render() {
@@ -12,4 +13,4 @@ class NotFound extends Component {
     }
 }
 
-export default NotFound
+export default withTracker(NotFound)

client/src/routes/Publish/index.tsx

@@ -11,6 +11,7 @@ import ReactGA from 'react-ga'
 import { steps } from '../../data/form-publish.json'
 import Content from '../../components/atoms/Content'
 import { File } from './Files'
+import withTracker from '../../hoc/withTracker'
 
 type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
 
@@ -35,7 +36,7 @@ interface PublishState {
     validationStatus?: any
 }
 
-export default class Publish extends Component<{}, PublishState> {
+class Publish extends Component<{}, PublishState> {
     public static contextType = User
 
     public state = {
@@ -357,3 +358,5 @@ export default class Publish extends Component<{}, PublishState> {
         )
     }
 }
+
+export default withTracker(Publish)

client/src/routes/Search.tsx

@@ -10,6 +10,7 @@ import AssetTeaser from '../components/molecules/AssetTeaser'
 import Pagination from '../components/molecules/Pagination'
 import styles from './Search.module.scss'
 import Content from '../components/atoms/Content'
+import withTracker from '../hoc/withTracker'
 
 interface SearchProps {
     location: Location
@@ -27,7 +28,9 @@ interface SearchState {
     searchCategories: string
 }
 
-export default class Search extends PureComponent<SearchProps, SearchState> {
+class Search extends PureComponent<SearchProps, SearchState> {
+    public static contextType = User
+
     public state = {
         results: [],
         totalResults: 0,
@@ -159,4 +162,4 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
     }
 }
 
-Search.contextType = User
+export default withTracker(Search)

client/src/routes/Styleguide.tsx

@@ -6,6 +6,7 @@ import Route from '../components/templates/Route'
 import styles from './Styleguide.module.scss'
 import form from '../data/form-styleguide.json'
 import Content from '../components/atoms/Content'
+import withTracker from '../hoc/withTracker'
 
 class Styleguide extends Component {
     public formFields = (entries: any[]) =>
@@ -47,4 +48,4 @@ class Styleguide extends Component {
     }
 }
 
-export default Styleguide
+export default withTracker(Styleguide)