Cleaning up code

This commit is contained in:
Chris Troutner
2022-07-04 07:34:25 -07:00
parent 518fd79329
commit 3bb9383e3e
7 changed files with 55 additions and 169 deletions
+5 -2
View File
@@ -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} />)
}
+2 -9
View File
@@ -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)
}
-65
View File
@@ -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
-63
View File
@@ -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
+24
View File
@@ -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
+24
View File
@@ -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
-30
View File
@@ -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