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:
parent
e488b9f001
commit
ca58d7d0b1
@ -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,
|
||||
|
@ -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>
|
||||
)
|
||||
|
||||
|
@ -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} />
|
||||
}
|
||||
|
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
51
client/src/routes/Home/Search.tsx
Normal file
51
client/src/routes/Home/Search.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
@import '../styles/variables';
|
||||
@import '../../styles/variables';
|
||||
|
||||
.home {
|
||||
display: block;
|
@ -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()
|
||||
|
74
client/src/routes/Home/index.tsx
Normal file
74
client/src/routes/Home/index.tsx
Normal 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)
|
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user