mirror of
https://github.com/Permissionless-Software-Foundation/psf-memo-client.git
synced 2026-09-21 16:52:02 -07:00
Cleaning up code
This commit is contained in:
@@ -11,7 +11,8 @@ import React from 'react'
|
||||
|
||||
// Local libraries
|
||||
import GetBalance from '../balance'
|
||||
import TakePicture from '../take-picture'
|
||||
import Placeholder2 from '../placeholder2'
|
||||
import Placeholder3 from '../placeholder3'
|
||||
|
||||
let _this
|
||||
|
||||
@@ -45,7 +46,9 @@ class AppBody extends React.Component {
|
||||
case 0:
|
||||
return (<GetBalance wallet={_this.state.wallet} />)
|
||||
case 1:
|
||||
return (<TakePicture />)
|
||||
return (<Placeholder2 />)
|
||||
case 2:
|
||||
return (<Placeholder3 />)
|
||||
default:
|
||||
return (<GetBalance wallet={_this.state.wallet} />)
|
||||
}
|
||||
|
||||
@@ -16,10 +16,6 @@ class NavMenu extends React.Component {
|
||||
|
||||
// This is the event handler passed in from the Parent component.
|
||||
this.parentMenuHandler = props.menuHandler
|
||||
|
||||
// this.state = {
|
||||
// selectedMenuItem: 0
|
||||
// }
|
||||
}
|
||||
|
||||
render () {
|
||||
@@ -38,8 +34,8 @@ class NavMenu extends React.Component {
|
||||
<Navbar.Collapse id='responsive-navbar-nav'>
|
||||
<Nav className='mr-auto'>
|
||||
<Nav.Link href='#' onClick={() => this.handleClickEvent(0)}>Check Balance</Nav.Link>
|
||||
<Nav.Link href='#' onClick={() => this.handleClickEvent(1)}>Take Picture</Nav.Link>
|
||||
<Nav.Link href='#'>Placeholder 3</Nav.Link>
|
||||
<Nav.Link href='#' onClick={() => this.handleClickEvent(1)}>Placeholder2</Nav.Link>
|
||||
<Nav.Link href='#' onClick={() => this.handleClickEvent(2)}>Placeholder 3</Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Navbar>
|
||||
@@ -48,9 +44,6 @@ class NavMenu extends React.Component {
|
||||
}
|
||||
|
||||
handleClickEvent (menuItem) {
|
||||
// Update the
|
||||
// this.setState({selectedMenuItem: menuItem})
|
||||
|
||||
// Pass the selected menu item up to the parent component.
|
||||
this.parentMenuHandler(menuItem)
|
||||
}
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
/*
|
||||
This is a top level component for displaying the NFTs.
|
||||
*/
|
||||
|
||||
// Global npm libraries
|
||||
import React from 'react'
|
||||
import { Container, Row, Col } from 'react-bootstrap'
|
||||
|
||||
// Local libraries
|
||||
import NFTCard from './nft-card'
|
||||
|
||||
class NFTs extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
console.log('props passed to NFT component: ', props)
|
||||
|
||||
this.groupData = this.props.tokens.groupData
|
||||
this.nftData = this.props.tokens.nftData
|
||||
|
||||
this.state = {
|
||||
nfts: []
|
||||
}
|
||||
}
|
||||
|
||||
async componentDidMount () {
|
||||
// console.log('NFT component didMount(). nftData: ', this.nftData)
|
||||
|
||||
const nfts = []
|
||||
for (let i = 0; i < this.nftData.length; i++) {
|
||||
nfts.push(<NFTCard key={`nft${i}`} nftData={this.nftData[i]} />)
|
||||
}
|
||||
|
||||
this.setState({
|
||||
nfts
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
// Load spinner at startup while the wallet is being initialized.
|
||||
return (
|
||||
<>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col className='text-break' style={{ textAlign: 'center' }}>
|
||||
<p>Loading NFTs associated with Group token{' '}
|
||||
<a
|
||||
href={`https://token.fullstack.cash/?tokenid=${this.groupData.tokenId}`}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
{this.groupData.tokenId}
|
||||
</a>
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row><hr /></Row>
|
||||
{this.state.nfts}
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default NFTs
|
||||
@@ -1,63 +0,0 @@
|
||||
/*
|
||||
This component controls the display of each NFT.
|
||||
*/
|
||||
/* eslint-disable */
|
||||
|
||||
// Global npm libraries
|
||||
import React from 'react'
|
||||
import axios from 'axios'
|
||||
import { Container, Row, Col, Image } from 'react-bootstrap'
|
||||
|
||||
|
||||
class NFTCard extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
// console.log('NFTCard props: ', props)
|
||||
|
||||
this.tokenData = props.nftData
|
||||
|
||||
this.state = {
|
||||
mutableData: {},
|
||||
immutableData: {}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
// console.log('Rendering NFT card with this token data: ', this.tokenData)
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col style={{ textAlign: 'center' }}>
|
||||
<Image className="d-md-none" src={this.tokenData.mutableData.tokenIcon} style={{border: 'black solid 5px', maxWidth: '300px'}} />
|
||||
<Image className="d-none d-md-block" src={this.tokenData.mutableData.tokenIcon} style={{border: 'black solid 5px'}} />
|
||||
</Col>
|
||||
<Col>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<br />
|
||||
<h3>{this.tokenData.genesisData.name} ({this.tokenData.genesisData.ticker})</h3>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ textAlign: 'left' }}>
|
||||
<Col className="text-break">
|
||||
<b>Token ID:</b> <a href={`https://token.fullstack.cash/?tokenid=${this.tokenData.genesisData.tokenId}`} target="_blank">{this.tokenData.genesisData.tokenId}</a><br />
|
||||
<b>Description: </b> {this.tokenData.mutableData.description}<br />
|
||||
<b>Content: </b>
|
||||
<ul>
|
||||
<li><a href={this.tokenData.mutableData.content.youtube} target="_blank">YouTube</a></li>
|
||||
<li><a href={this.tokenData.mutableData.content.rumble} target="_blank">Rumble</a></li>
|
||||
<li><a href={this.tokenData.mutableData.content.odysee} target="_blank">Odysee</a></li>
|
||||
<li><a href={this.tokenData.mutableData.content.filecoin} target="_blank">Filecoin</a> (download)</li>
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default NFTCard
|
||||
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
This is a placeholder View
|
||||
*/
|
||||
|
||||
// Global npm libraries
|
||||
import React from 'react'
|
||||
|
||||
class Placeholder2 extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
console.log('Placeholder 2 loaded.')
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<>
|
||||
<p style={{padding: '25px'}}>This is placeholder View #2</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Placeholder2
|
||||
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
This is a placeholder View
|
||||
*/
|
||||
|
||||
// Global npm libraries
|
||||
import React from 'react'
|
||||
|
||||
class Placeholder3 extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
console.log('Placeholder 3 loaded.')
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<>
|
||||
<p style={{padding: '25px'}}>This is placeholder View #3</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Placeholder3
|
||||
@@ -1,30 +0,0 @@
|
||||
/*
|
||||
This is a View component that allows the user to take a picture with their
|
||||
webcam or phone.
|
||||
*/
|
||||
|
||||
// Global npm libraries
|
||||
import React from 'react'
|
||||
|
||||
class TakePicture extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
console.log('Take Picture component loaded')
|
||||
|
||||
// this.state = {
|
||||
// activeView: 0,
|
||||
// menuState: props.menuState
|
||||
// }
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<>
|
||||
<p>Take Picture Component Placeholder</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default TakePicture
|
||||
Reference in New Issue
Block a user