Mathis/forecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: export converter methods to converters.js

Browse Source
This commit is contained in:
Jean Robertou 2021-08-06 20:57:13 +02:00
parent 5afa019645
commit 06bae70384
3 changed files with 132 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
pages/components/Metrics.jsx Normal file
View File

@ -0,0 +1,85 @@
import React from "react";
import {
convertTime,
degToCompass,
kmToM,
mpsToMph,
timeToAMPM,
} from "../services/converters";
import MetricCard from "./MetricCard";
const Metrics = ({ styles, data, systemUsed }) => {
return (
<div className={styles.statsBox}>
<MetricCard
title={"Humidity"}
iconSrc={"/icons/025-humidity.png"}
metric={data.main.humidity}
unit={"%"}
styles={styles}
/>
<MetricCard
title={"Wind speed"}
iconSrc={"/icons/017-wind.png"}
metric={
systemUsed == "metric" ? data.wind.speed : mpsToMph(data.wind.speed)
}
unit={systemUsed == "metric" ? "m/s" : "m/h"}
styles={styles}
/>
<MetricCard
title={"Wind direction"}
iconSrc={"/icons/014-compass.png"}
metric={degToCompass(data.wind.deg)}
styles={styles}
/>
<MetricCard
title={"Visibility"}
iconSrc={"/icons/binocular.png"}
metric={
systemUsed == "metric"
? (data.visibility / 1000).toPrecision(2)
: kmToM(data.visibility / 1000)
}
unit={systemUsed == "metric" ? "km" : "miles"}
styles={styles}
/>
<MetricCard
title={"Sunrise"}
iconSrc={"/icons/040-sunrise.png"}
metric={
systemUsed == "metric"
? `${parseInt(
convertTime(data.sys.sunrise, data.timezone)[0].split(":")[0]
)}:${
convertTime(data.sys.sunrise, data.timezone)[0].split(":")[1]
}`
: timeToAMPM(convertTime(data.sys.sunrise, data.timezone)[0])
}
styles={styles}
/>
<MetricCard
title={"Sunset"}
iconSrc={"/icons/041-sunset.png"}
metric={
systemUsed == "metric"
? convertTime(data.sys.sunset, data.timezone)[0]
: timeToAMPM(convertTime(data.sys.sunset, data.timezone)[0])
}
unit={
systemUsed == "imperial"
? isPMs(convertTime(data.sys.sunset, data.timezone)[0])
: ""
}
styles={styles}
/>
</div>
);
};
export default Metrics;

133
pages/index.js
View File

@ -1,7 +1,8 @@
import { useState, useEffect } from "react";
import styles from "../styles/Home.module.css";
import Image from "next/image";
import MetricCard from "./components/MetricCard";
import Metrics from "./components/Metrics";
import { convertTime, ctoF, timeToAMPM } from "./services/converters";
export default function Home() {
const [input, setInput] = useState("Riga");
@ -30,49 +31,6 @@ export default function Home() {
getData();
}, []);
function degToCompass(num) {
var val = Math.floor(num / 22.5 + 0.5);
var arr = [
"N",
"NNE",
"NE",
"ENE",
"E",
"ESE",
"SE",
"S/SE",
"S",
"SSW",
"SW",
"WSW",
"W",
"WNW",
"NW",
"NNW",
];
return arr[val % 16];
}
const convertTime = (unixSeconds, timezone) => {
const time = new Date((unixSeconds + timezone) * 1000)
.toISOString()
.match(/(\d{2}:\d{2})/);
return time;
};
const ctoF = (c) => (c * 9) / 5 + 32;
const mpsToMph = (mps) => (mps * 2.236936).toFixed(2);
const kmToM = (km) => (km / 1.609).toFixed(1);
const timeToAMPM = (time) => {
let hours = time.split(":")[0];
let minutes = time.split(":")[1];
hours = hours % 12;
hours = hours ? hours : 12;
return hours + ":" + minutes;
};
const isPM = (time) => {
let hours = time.split(":")[0];
if (hours >= 12) {
@ -172,92 +130,7 @@ export default function Home() {
/>
</div>
<div className={styles.statsBox}>
<MetricCard
title={"Humidity"}
iconSrc={"/icons/025-humidity.png"}
metric={weatherData.main.humidity}
unit={"%"}
styles={styles}
/>
<MetricCard
title={"Wind speed"}
iconSrc={"/icons/017-wind.png"}
metric={
systemUsed == "metric"
? weatherData.wind.speed
: mpsToMph(weatherData.wind.speed)
}
unit={systemUsed == "metric" ? "m/s" : "m/h"}
styles={styles}
/>
<MetricCard
title={"Wind direction"}
iconSrc={"/icons/014-compass.png"}
metric={degToCompass(weatherData.wind.deg)}
styles={styles}
/>
<MetricCard
title={"Visibility"}
iconSrc={"/icons/binocular.png"}
metric={
systemUsed == "metric"
? (weatherData.visibility / 1000).toPrecision(2)
: kmToM(weatherData.visibility / 1000)
}
unit={systemUsed == "metric" ? "km" : "miles"}
styles={styles}
/>
<MetricCard
title={"Sunrise"}
iconSrc={"/icons/040-sunrise.png"}
metric={
systemUsed == "metric"
? `${parseInt(
convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[0].split(":")[0]
)}:${
convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[0].split(":")[1]
}`
: timeToAMPM(
convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[0]
)
}
styles={styles}
/>
<MetricCard
title={"Sunset"}
iconSrc={"/icons/041-sunset.png"}
metric={
systemUsed == "metric"
? convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
: timeToAMPM(
convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
)
}
unit={
systemUsed == "imperial"
? isPM(
convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
)
: ""
}
styles={styles}
/>
</div>
<Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
<div className={styles.switchBox}>
<p
className={styles.switch}

44
pages/services/converters.js Normal file
View File

@ -0,0 +1,44 @@
export const ctoF = (c) => (c * 9) / 5 + 32;
export const mpsToMph = (mps) => (mps * 2.236936).toFixed(2);
export const kmToM = (km) => (km / 1.609).toFixed(1);
export const timeToAMPM = (time) => {
let hours = time.split(":")[0];
let minutes = time.split(":")[1];
hours = hours % 12;
hours = hours ? hours : 12;
return hours + ":" + minutes;
};
export const degToCompass = (num) => {
var val = Math.floor(num / 22.5 + 0.5);
var arr = [
"N",
"NNE",
"NE",
"ENE",
"E",
"ESE",
"SE",
"S/SE",
"S",
"SSW",
"SW",
"WSW",
"W",
"WNW",
"NW",
"NNW",
];
return arr[val % 16];
};
export const convertTime = (unixSeconds, timezone) => {
const time = new Date((unixSeconds + timezone) * 1000)
.toISOString()
.match(/(\d{2}:\d{2})/);
return time;
};