fix: search dropdown select, cleanup functional components

This commit is contained in:
David Ralph
2021-08-28 19:14:22 +01:00
parent 67ab7c8674
commit 21f8b63b80
13 changed files with 52 additions and 59 deletions

View File

@@ -21,30 +21,30 @@ const downloadImage = async (info) => {
window.stats.postEvent('feature', 'Background download');
};
export default function PhotoInformation(props) {
export default function PhotoInformation({ info, url, api }) {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const language = window.language.widgets.background;
if (props.info.hidden === true || !props.info.credit) {
if (info.hidden === true || !info.credit) {
return null;
}
// remove unsplash and pexels text
const photographer = props.info.credit.split(` ${language.unsplash}`)[0].split(` ${language.pexels}`);
const photographer = info.credit.split(` ${language.unsplash}`)[0].split(` ${language.pexels}`);
let credit = props.info.credit;
let credit = info.credit;
let photo = language.credit;
// unsplash and pexels credit
if (props.info.photographerURL && props.info.photographerURL !== '' && !props.info.offline && props.api) {
if (props.api === 'unsplash') {
photo = <a href={props.info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
credit = <><a href={props.info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;
if (info.photographerURL && info.photographerURL !== '' && !info.offline && api) {
if (api === 'unsplash') {
photo = <a href={info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;
} else {
photo = <a href={props.info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
credit = <><a href={props.info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{language.pexels}</a></>;
photo = <a href={info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{language.pexels}</a></>;
}
}
@@ -54,7 +54,7 @@ export default function PhotoInformation(props) {
setWidth(event.target.width);
setHeight(event.target.height);
};
img.src = (localStorage.getItem('ddgProxy') === 'true' && !props.info.offline && !props.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + props.url : props.url;
img.src = (localStorage.getItem('ddgProxy') === 'true' && !info.offline && !url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + url : url;
// info is still there because we want the favourite button to work
if (localStorage.getItem('photoInformation') === 'false') {
@@ -62,18 +62,18 @@ export default function PhotoInformation(props) {
<div className='photoInformation'>
<h1>{photo} <span id='credit'>{credit}</span></h1>
<div style={{ display: 'none' }}>
<span id='infoLocation'>{props.info.location || 'N/A'}</span>
<span id='infoCamera'>{props.info.camera || 'N/A'}</span>
<span id='infoLocation'>{info.location || 'N/A'}</span>
<span id='infoCamera'>{info.camera || 'N/A'}</span>
<span id='infoResolution'>{width}x{height}</span>
</div>
</div>
);
}
const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL;
const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !info.offline && !info.photographerURL;
const downloadBackground = () => {
if (downloadEnabled) {
downloadImage(props.info);
downloadImage(info);
}
};
@@ -97,13 +97,13 @@ export default function PhotoInformation(props) {
<h1>{language.information}</h1>
<hr/>
{/* fix console error by using fragment and key */}
{props.info.location && props.info.location !== 'N/A' ? <Fragment key='location'>
{info.location && info.location !== 'N/A' ? <Fragment key='location'>
<LocationOn/>
<span id='infoLocation'>{props.info.location}</span>
<span id='infoLocation'>{info.location}</span>
</Fragment> : null}
{props.info.camera && props.info.camera !== 'N/A' ? <Fragment key='camera'>
{info.camera && info.camera !== 'N/A' ? <Fragment key='camera'>
<PhotoCamera/>
<span id='infoCamera'>{props.info.camera}</span>
<span id='infoCamera'>{info.camera}</span>
</Fragment> : null}
<Resolution/>
<span id='infoResolution'>{width}x{height}</span>
@@ -112,7 +112,7 @@ export default function PhotoInformation(props) {
{downloadEnabled ?
<>
<Download/>
<span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
<span className='download' onClick={() => downloadImage(info)}>{language.download}</span>
</>
: null}
</div>

View File

@@ -53,10 +53,7 @@
display: inline-block;
margin-top: 10px;
font-size: calc(5px + 1.2vmin);
.searchSelected {
cursor: pointer;
}
user-select: none;
.searchDropdownList {
cursor: pointer;

View File

@@ -1,10 +1,10 @@
import { WiDaySunny, WiNightClear, WiDayCloudy, WiNightCloudy, WiCloud, WiCloudy, WiDayShowers, WiNightShowers, WiRain, WiThunderstorm, WiSnow, WiFog } from 'weather-icons-react';
export default function WeatherIcon(props) {
export default function WeatherIcon({ name }) {
let icon;
// props.name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
switch (props.name) {
// name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
switch (name) {
case '01d': icon = <WiDaySunny/>; break;
case '01n': icon = <WiNightClear/>; break;
case '02d': icon = <WiDayCloudy/>; break;

View File

@@ -1,9 +1,8 @@
import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirectionLeft, WiDirectionRight, WiDirectionUpLeft, WiDirectionUpRight, WiDirectionUp } from 'weather-icons-react';
export default function WindDirectionIcon(props) {
// degrees is imported because of a potential bug, idk what causes it but now it is fixed
export default function WindDirectionIcon({ degrees }) {
let icon;
// fix potential bug, idk what causes it but now it is fixed
let degrees = props.degrees;
// convert the number openweathermap gives us to closest direction or something
const directions = ['North', 'North-West', 'West', 'South-West', 'South', 'South-East', 'East', 'North-East'];