fix: photoinformation console errors

This commit is contained in:
David Ralph
2021-08-20 11:52:05 +01:00
parent 34cf696bb4
commit 98c857e7ad
2 changed files with 12 additions and 7 deletions

View File

@@ -30,11 +30,15 @@ export default class Favourite extends PureComponent {
return;
}
// photo information now hides information if it isn't sent, unless if photoinformation hover is hidden
const location = document.getElementById('infoLocation');
const camera = document.getElementById('infoCamera');
localStorage.setItem('favourite', JSON.stringify({
url: url,
credit: document.getElementById('credit').textContent,
location: document.getElementById('infoLocation') ? document.getElementById('infoLocation').innerText : 'N/A',
camera: document.getElementById('infoCamera') ? document.getElementById('infoCamera').innerText : 'N/A',
location: location ? location.innerText : 'N/A',
camera: camera ? camera.innerText : 'N/A',
resolution: document.getElementById('infoResolution').textContent
}));

View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, Fragment } from 'react';
import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
const toDataURL = async (url) => {
@@ -77,14 +77,15 @@ export default function PhotoInformation(props) {
<Info className='infoIcon'/>
<h1>{language.information}</h1>
<hr/>
{props.info.location && props.info.location !== 'N/A' ? <>
{/* fix console error by using fragment and key */}
{props.info.location && props.info.location !== 'N/A' ? <Fragment key='location'>
<LocationOn/>
<span id='infoLocation'>{props.info.location}</span>
</> : null}
{props.info.camera && props.info.camera !== 'N/A' ? <>
</Fragment> : null}
{props.info.camera && props.info.camera !== 'N/A' ? <Fragment key='camera'>
<PhotoCamera/>
<span id='infoCamera'>{props.info.camera}</span>
</> : null}
</Fragment> : null}
<Resolution/>
<span id='infoResolution'>{width}x{height}</span>
<Photographer/>