1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

fix re-renders caused by withTracker HOC

This commit is contained in:
Matthias Kretschmann 2019-07-11 23:01:58 +02:00
parent e488b9f001
commit ca58d7d0b1
Signed by: m
GPG Key ID: 606EEEF3C479A91F
16 changed files with 170 additions and 134 deletions

View File

@ -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,

View File

@ -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={withTracker(Styleguide)} path="/styleguide" />
<Route component={withTracker(About)} path="/about" />
<Route component={withTracker(Publish)} path="/publish" />
<Route component={withTracker(Search)} path="/search" />
<Route component={withTracker(Asset)} path="/asset/:did" />
<Route component={withTracker(Faucet)} path="/faucet" />
<Route component={withTracker(History)} path="/history" />
<Route component={withTracker(Channels)} exact path="/channels" />
<Route component={withTracker(Channel)} path="/channels/:channel" />
<Route component={withTracker(NotFound)} />
<Route component={Home} exact path="/" />
<Route component={Styleguide} path="/styleguide" />
<Route component={About} path="/about" />
<Route component={Publish} path="/publish" />
<Route component={Search} path="/search" />
<Route component={Asset} path="/asset/:did" />
<Route component={Faucet} path="/faucet" />
<Route component={History} path="/history" />
<Route component={Channels} exact path="/channels" />
<Route component={Channel} path="/channels/:channel" />
<Route component={NotFound} />
</Switch>
)

View File

@ -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), [
props.location.pathname
])
useEffect(() => {
trackPage(props.location.pathname)
}, [props.location.pathname])
return <WrappedComponent {...props} />
}

View File

@ -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)

View File

@ -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)

View File

@ -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)

View File

@ -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)

View File

@ -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>
)
}
}

View File

@ -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>
)
}
}

View File

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

View File

@ -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 { userMock } from '../../__mocks__/user-mock'
import { User } from '../context'
import Home from '.'
import { userMock } from '../../../__mocks__/user-mock'
import { User } from '../../context'
const history = createBrowserHistory()

View File

@ -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)

View File

@ -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)

View File

@ -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)

View File

@ -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)

View File

@ -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)