From 2a684d2833324f055be2f07c3542e7f8590f8b97 Mon Sep 17 00:00:00 2001 From: Mentor Palokaj Date: Mon, 20 Dec 2021 14:26:25 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20highlight=20rocketeers=20with=20out?= =?UTF-8?q?fits=20available,=20and=20have=20portfolio=20reflect=20selected?= =?UTF-8?q?=20outfits?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- minter/src/components/atoms/CircleImage.js | 1 + minter/src/components/molecules/Avatar.js | 1 - minter/src/components/organisms/Outfits.js | 22 ++------------- minter/src/components/organisms/Portfolio.js | 8 +++--- minter/src/modules/api.js | 28 +++++++++++++++++++- 5 files changed, 34 insertions(+), 26 deletions(-) diff --git a/minter/src/components/atoms/CircleImage.js b/minter/src/components/atoms/CircleImage.js index d649384..fb2f92a 100644 --- a/minter/src/components/atoms/CircleImage.js +++ b/minter/src/components/atoms/CircleImage.js @@ -6,6 +6,7 @@ export default styled.img` width: 150px; margin: 1rem; cursor: ${ ( { onClick } ) => onClick ? 'pointer' : 'none' }; + border: ${ ( { highlight } ) => highlight ? '5px solid orange' : 'none' }; &:hover { box-shadow: ${ ( { onClick } ) => onClick ? '0 0 20px 2px rgb(0 0 0 / 20%)' : 'none' }; } diff --git a/minter/src/components/molecules/Avatar.js b/minter/src/components/molecules/Avatar.js index 4268a33..54a29fd 100644 --- a/minter/src/components/molecules/Avatar.js +++ b/minter/src/components/molecules/Avatar.js @@ -3,7 +3,6 @@ import CircleImage from '../atoms/CircleImage' import { Text } from '../atoms/Text' const Wrapper = styled.div` - ` export default ( { title, ...props } ) => diff --git a/minter/src/components/organisms/Outfits.js b/minter/src/components/organisms/Outfits.js index 62557cc..cd4ba22 100644 --- a/minter/src/components/organisms/Outfits.js +++ b/minter/src/components/organisms/Outfits.js @@ -177,24 +177,6 @@ export default function Verifier() { // Find the data for the clicked Rocketeer const selected = rocketeers.find( ( { id } ) => id === rocketeerId ) - // If the selected rocketeer is available, compute it's available outfits to an easy to access property - if( selected ) { - - const newOutfitAllowedInterval = 1000 * 60 * 60 * 24 * 30 - const { value: outfits } = selected.attributes.find( ( { trait_type } ) => trait_type === 'available outfits' ) || { value: 0 } - const { value: last_outfit_change } = selected.attributes.find( ( { trait_type } ) => trait_type === 'last outfit change' ) || { value: 0 } - const timeUntilAllowedToChange = newOutfitAllowedInterval - ( Date.now() - last_outfit_change ) - - selected.outfits = outfits - selected.last_outfit_change = last_outfit_change - selected.new_outfit_available = timeUntilAllowedToChange < 0 - selected.when_new_outfit = new Date( Date.now() + timeUntilAllowedToChange ) - - const [ full, outfitnumber ] = selected.image.match( /(?:-)(\d*)(?:\.jpg)/ ) || [] - log( `Current outfit of ${ full } is ${ outfitnumber }` ) - selected.current_outfit = outfitnumber || 0 - } - log( "Selecting rocketeer ", selected ) // Set the selected rocketeer to state @@ -215,9 +197,9 @@ export default function Verifier() { Click on a Rocketeer to manage it's outfits
- { rocketeers.map( ( { id, image } ) => { + { rocketeers.map( ( { id, image, new_outfit_available } ) => { - return navigate( `/outfits/${ id }` ) } key={ id } src={ image } alt={ `Rocketeer number ${ id }` } /> + return navigate( `/outfits/${ id }` ) } key={ id } src={ image } alt={ `Rocketeer number ${ id }` } /> } ) } diff --git a/minter/src/components/organisms/Portfolio.js b/minter/src/components/organisms/Portfolio.js index f849f9c..d7e0f96 100644 --- a/minter/src/components/organisms/Portfolio.js +++ b/minter/src/components/organisms/Portfolio.js @@ -5,7 +5,7 @@ import Avatar from '../molecules/Avatar' import Loading from '../molecules/Loading' import { useState, useEffect } from 'react' -import { useRocketeerImages } from '../../modules/api' +import { useRocketeers } from '../../modules/api' import { useAddress } from '../../modules/web3' @@ -17,7 +17,7 @@ export default function Verifier() { const address = useAddress() const metamaskAddress = useAddress() const [ validatorAddress, setValidatorAddress ] = useState( ) - const rocketeers = useRocketeerImages() + const rocketeers = useRocketeers() // /////////////////////////////// @@ -37,9 +37,9 @@ export default function Verifier() { Click a Rocketeer to view it's details.
- { rocketeers.map( ( { id, src } ) => { + { rocketeers.map( ( { id, image } ) => { - return window.location.href =`https://viewer.rocketeer.fans/?rocketeer=${ id }` } key={ id } src={ src } alt={ `Rocketeer number ${ id }` } /> + return window.location.href =`https://viewer.rocketeer.fans/?rocketeer=${ id }` } key={ id } src={ image } alt={ `Rocketeer number ${ id }` } /> } ) } diff --git a/minter/src/modules/api.js b/minter/src/modules/api.js index 4ab19df..8cda88b 100644 --- a/minter/src/modules/api.js +++ b/minter/src/modules/api.js @@ -72,9 +72,35 @@ export function useRocketeers( onlyGrabThisId ) { } if( !ids.length || cancelled ) return + + // Grab Rocketeer metadata const rocketeerMetas = await callApi( `/rocketeers/?ids=${ ids.join( ',' ) }` ) log( 'Received rocketeers: ', rocketeerMetas ) - if( !cancelled ) setRocketeers( rocketeerMetas ) + + // Annotate Rocketeers + const annotatedRocketeers = rocketeerMetas.map( rocketeer => { + + // This is a dev environment issue where the token ids do not correspond to date + if( !rocketeer.attributes ) return rocketeer + + const newOutfitAllowedInterval = 1000 * 60 * 60 * 24 * 30 + const { value: outfits } = rocketeer.attributes.find( ( { trait_type } ) => trait_type === 'available outfits' ) || { value: 0 } + const { value: last_outfit_change } = rocketeer.attributes.find( ( { trait_type } ) => trait_type === 'last outfit change' ) || { value: 0 } + const timeUntilAllowedToChange = newOutfitAllowedInterval - ( Date.now() - last_outfit_change ) + + rocketeer.outfits = outfits + rocketeer.last_outfit_change = last_outfit_change + rocketeer.new_outfit_available = timeUntilAllowedToChange < 0 + rocketeer.when_new_outfit = new Date( Date.now() + timeUntilAllowedToChange ) + + const [ full, outfitnumber ] = rocketeer.image.match( /(?:-)(\d*)(?:\.jpg)/ ) || [] + rocketeer.current_outfit = outfitnumber || 0 + + return rocketeer + + } ) + + if( !cancelled ) setRocketeers( annotatedRocketeers ) } catch( e ) { log( 'Error getting Rocketeers: ', e )