diff --git a/app/ResolveRoute.js b/app/ResolveRoute.js index d057967..1a8f2ea 100644 --- a/app/ResolveRoute.js +++ b/app/ResolveRoute.js @@ -112,5 +112,8 @@ export default function resolveRoute(path) if (match) { return {page: 'NFTMarketPage', params: match.slice(1)} } + if (path === '/all-nft') { + return {page: 'AllNFTPage'} + } return {page: 'NotFound'}; } diff --git a/app/RootRoute.js b/app/RootRoute.js index 77d8721..359aeed 100644 --- a/app/RootRoute.js +++ b/app/RootRoute.js @@ -39,6 +39,8 @@ export default { cb(null, [require('@pages/nft/NFTTokenPage')]); } else if (route.page === 'NFTMarketPage') { cb(null, [require('@pages/nft/NFTMarketPage')]); + } else if (route.page === 'AllNFTPage') { + cb(null, [require('@pages/nft/AllNFTPage')]) } else if (route.page === 'Market') { cb(null, [require('@pages/MarketLoader')]); } else if (route.page === 'Rating') { diff --git a/app/components/all.scss b/app/components/all.scss index fb72464..e48581c 100644 --- a/app/components/all.scss +++ b/app/components/all.scss @@ -85,6 +85,7 @@ @import "./pages/Rating"; @import "./pages/UserProfile"; @import "./pages/Witnesses"; +@import "./pages/nft/AllNFTPage"; @import "./pages/nft/NFTCollectionPage"; @import "./pages/nft/NFTMarketPage"; @import "./pages/nft/NFTTokenPage"; diff --git a/app/components/modules/Header.jsx b/app/components/modules/Header.jsx index 42e8fd4..c810a1d 100644 --- a/app/components/modules/Header.jsx +++ b/app/components/modules/Header.jsx @@ -116,6 +116,8 @@ class Header extends React.Component { page_title = tt('header_jsx.nft_token') } else if (route.page === `NFTMarketPage`){ page_title = tt('header_jsx.nft_market') + } else if (route.page === `AllNFTPage`){ + page_title = tt('all_nft_page_jsx.title') } else { page_name = ''; //page_title = route.page.replace( /([a-z])([A-Z])/g, '$1 $2' ).toLowerCase(); } diff --git a/app/components/pages/nft/AllNFTPage.jsx b/app/components/pages/nft/AllNFTPage.jsx new file mode 100644 index 0000000..f72cb7c --- /dev/null +++ b/app/components/pages/nft/AllNFTPage.jsx @@ -0,0 +1,177 @@ +import React from 'react' +import { connect, } from 'react-redux' +import tt from 'counterpart' +import Reveal from 'react-foundation-components/lib/global/reveal' + +import DropdownMenu from 'app/components/elements/DropdownMenu' +import Icon from 'app/components/elements/Icon' +import LoadingIndicator from 'app/components/elements/LoadingIndicator' +import NFTTokenItem from 'app/components/elements/nft/NFTTokenItem' +import NFTTokenTransfer from 'app/components/modules/nft/NFTTokenTransfer' +import NFTTokenSell from 'app/components/modules/nft/NFTTokenSell' +import g from 'app/redux/GlobalReducer' + +class AllNFTPage extends React.Component { + state = {} + + componentDidMount() { + this.refetch() + } + + refetch = () => { + this.props.fetchNFTTokens(0, this.sort, this.sortReversed) + } + + showTransfer = (e, tokenIdx) => { + e.preventDefault() + this.setState({ + showTransfer: true, + tokenIdx, + }) + } + + hideTransfer = () => { + this.setState({ + showTransfer: false, + }) + } + + showSell = (e, tokenIdx) => { + e.preventDefault() + this.setState({ + showSell: true, + tokenIdx, + }) + } + + hideSell = () => { + this.setState({ + showSell: false, + }) + } + + sortOrder = (e, sort, sortReversed) => { + e.preventDefault() + this.sort = sort + this.sortReversed = sortReversed + this.refetch() + } + + render() { + const { currentUser, nft_tokens, nft_assets, } = this.props + + const tokens = nft_tokens ? nft_tokens.toJS().data : null + const assets = nft_assets ? nft_assets.toJS() : {} + + const next_from = nft_tokens && nft_tokens.get('next_from') + + let items = [] + if (!tokens) { + items = + } else if (!tokens.length) { + items = {tt('nft_tokens_jsx.not_yet')} + } else { + for (let i = 0; i < tokens.length; ++i) { + const token = tokens[i] + items.push() + } + } + + const { showTransfer, showSell, tokenIdx } = this.state + + const sortItems = [ + { link: '#', onClick: e => { + this.sortOrder(e, 'by_last_update', false) + }, value: tt('nft_tokens_jsx.sort_new') }, + { link: '#', onClick: e => { + this.sortOrder(e, 'by_last_update', true) + }, value: tt('nft_tokens_jsx.sort_old') }, + { link: '#', onClick: e => { + this.sortOrder(e, 'by_last_price', false) + }, value: tt('nft_tokens_jsx.sort_price') }, + { link: '#', onClick: e => { + this.sortOrder(e, 'by_name', false) + }, value: tt('nft_tokens_jsx.sort_name') }, + ] + + let currentSort + if (this.sort === 'by_last_price') { + currentSort = tt('nft_tokens_jsx.sort_price') + } else if (this.sort === 'by_name') { + currentSort = tt('nft_tokens_jsx.sort_name') + } else { + if (this.sortReversed) { + currentSort = tt('nft_tokens_jsx.sort_old') + } else { + currentSort = tt('nft_tokens_jsx.sort_new') + } + } + + return (
+
+
+

{tt('all_nft_page_jsx.title')}

+    + + + {currentSort} + + + +
+
+
+
+ {items} + {next_from ?
+
+
: null} +
+
+ + + + + + + + +
) + } +} + +module.exports = { + path: '/all-nft', + component: connect( + (state, ownProps) => { + const currentUser = state.user.getIn(['current']) + + return { + currentUser, + nft_tokens: state.global.get('nft_tokens'), + nft_assets: state.global.get('nft_assets') + } + }, + dispatch => ({ + fetchNFTTokens: (start_token_id, sort, sortReversed) => { + dispatch(g.actions.fetchNftTokens({ account: '', start_token_id, sort, reverse_sort: sortReversed })) + }, + }) + )(AllNFTPage), +} \ No newline at end of file diff --git a/app/components/pages/nft/AllNFTPage.scss b/app/components/pages/nft/AllNFTPage.scss new file mode 100644 index 0000000..873e70b --- /dev/null +++ b/app/components/pages/nft/AllNFTPage.scss @@ -0,0 +1,7 @@ +.AllNFTPage { + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 0.2rem; + padding-right: 0.2rem; + flex: 1; +} diff --git a/app/components/pages/nft/NFTMarketPage.jsx b/app/components/pages/nft/NFTMarketPage.jsx index b0d6d71..0d89537 100644 --- a/app/components/pages/nft/NFTMarketPage.jsx +++ b/app/components/pages/nft/NFTMarketPage.jsx @@ -1,5 +1,6 @@ import React from 'react' import { connect, } from 'react-redux' +import { Link } from 'react-router' import tt from 'counterpart' import LoadingIndicator from 'app/components/elements/LoadingIndicator' @@ -74,7 +75,12 @@ class NFTMarketPage extends React.Component { return
-

{tt('header_jsx.nft_market')}

+
+

{tt('header_jsx.nft_market')}

+ + {tt('all_nft_page_jsx.title')} + +
{content}
diff --git a/app/locales/en.json b/app/locales/en.json index 834b797..869692e 100644 --- a/app/locales/en.json +++ b/app/locales/en.json @@ -786,6 +786,11 @@ "your_token": "Your token", "owner": "Owner" }, + "all_nft_page_jsx": { + "title": "All NFT on the Golos", + "no_at_all": "No NFT-tokens on Golos. You can ", + "no_at_all2": "issue your own!" + }, "nft_collection_page_jsx": { "owner_is": "Owner of collection is ", "not_yet": "No tokens yet in this collection." diff --git a/app/locales/ru-RU.json b/app/locales/ru-RU.json index 1deb421..3de3310 100644 --- a/app/locales/ru-RU.json +++ b/app/locales/ru-RU.json @@ -1140,6 +1140,11 @@ "your_token": "Ваш токен", "owner": "Владелец" }, + "all_nft_page_jsx": { + "title": "Все NFT на Golos", + "no_at_all": "На Golos нет ни одного NFT-токена. Вы можете ", + "no_at_all2": "выпустить первый токен!" + }, "nft_collection_page_jsx": { "owner_is": "Владелец коллекции - ", "not_yet": "В этой коллекции еще нет токенов."