refactor: export converter methods to converters.js
This commit is contained in:
Jean Robertou
parent
5afa019645
commit
06bae70384
85
pages/components/Metrics.jsx
Normal file
85
pages/components/Metrics.jsx
Normal 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
133
pages/index.js
@ -1,7 +1,8 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import styles from "../styles/Home.module.css";
|
import styles from "../styles/Home.module.css";
|
||||||
import Image from "next/image";
|
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() {
|
export default function Home() {
|
||||||
const [input, setInput] = useState("Riga");
|
const [input, setInput] = useState("Riga");
|
||||||
@ -30,49 +31,6 @@ export default function Home() {
|
|||||||
getData();
|
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) => {
|
const isPM = (time) => {
|
||||||
let hours = time.split(":")[0];
|
let hours = time.split(":")[0];
|
||||||
if (hours >= 12) {
|
if (hours >= 12) {
|
||||||
@ -172,92 +130,7 @@ export default function Home() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.statsBox}>
|
<Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
|
||||||
<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>
|
|
||||||
<div className={styles.switchBox}>
|
<div className={styles.switchBox}>
|
||||||
<p
|
<p
|
||||||
className={styles.switch}
|
className={styles.switch}
|
||||||
|
|||||||
44
pages/services/converters.js
Normal file
44
pages/services/converters.js
Normal 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;
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user