Merge pull request #1 from jean1591/create-metric-component
Create metric component / Export methods to helpers
This commit is contained in:
Madza
GitHub
commit
7333c15844
2
.gitignore
vendored
2
.gitignore
vendored
@ -32,3 +32,5 @@ yarn-error.log*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
.env
|
||||
5224
package-lock.json
generated
5224
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
19
pages/components/MetricCard.jsx
Normal file
19
pages/components/MetricCard.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const MetricCard = ({ title, iconSrc, metric, unit = "", styles }) => {
|
||||
return (
|
||||
<div className={styles.statsCard}>
|
||||
<p>{title}</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image alt="weatherIcon" src={iconSrc} height="100px" width="100px" />
|
||||
<div>
|
||||
<h1>{metric}</h1>
|
||||
<p>{unit}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricCard;
|
||||
64
pages/components/Metrics.jsx
Normal file
64
pages/components/Metrics.jsx
Normal file
@ -0,0 +1,64 @@
|
||||
import React from "react";
|
||||
import { degToCompass } from "../services/converters";
|
||||
import {
|
||||
getTime,
|
||||
getAMPM,
|
||||
getVisibility,
|
||||
getWindSpeed,
|
||||
} from "../services/utils";
|
||||
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={getWindSpeed(systemUsed, 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={getVisibility(systemUsed, data.visibility)}
|
||||
unit={systemUsed == "metric" ? "km" : "miles"}
|
||||
styles={styles}
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title={"Sunrise"}
|
||||
iconSrc={"/icons/040-sunrise.png"}
|
||||
metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
|
||||
unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
|
||||
styles={styles}
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title={"Sunset"}
|
||||
iconSrc={"/icons/041-sunset.png"}
|
||||
metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
|
||||
unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
|
||||
styles={styles}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Metrics;
|
||||
204
pages/index.js
204
pages/index.js
@ -1,6 +1,9 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import Image from "next/image";
|
||||
import Metrics from "./components/Metrics";
|
||||
import { convertTime, ctoF, timeToAMPM } from "./services/converters";
|
||||
import { isPM } from "./services/utils";
|
||||
|
||||
export default function Home() {
|
||||
const [input, setInput] = useState("Riga");
|
||||
@ -29,58 +32,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) {
|
||||
return "PM";
|
||||
} else {
|
||||
return "AM";
|
||||
}
|
||||
};
|
||||
|
||||
const changeSystem = () =>
|
||||
systemUsed == "metric"
|
||||
? setSystemUsed("imperial")
|
||||
@ -171,154 +122,7 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.statsBox}>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Humidity</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/025-humidity.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{weatherData.main.humidity}</h1>
|
||||
<p>%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind speed</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/017-wind.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? weatherData.wind.speed
|
||||
: mpsToMph(weatherData.wind.speed)}
|
||||
</h1>
|
||||
<p>{systemUsed == "metric" ? "m/s" : "m/h"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind direction</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/014-compass.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{degToCompass(weatherData.wind.deg)}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Visibility</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/binocular.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? (weatherData.visibility / 1000).toPrecision(2)
|
||||
: kmToM(weatherData.visibility / 1000)}
|
||||
</h1>
|
||||
<p>{systemUsed == "metric" ? "km" : "miles"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Sunrise</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/040-sunrise.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{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]
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{systemUsed == "imperial"
|
||||
? isPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunrise,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Sunset</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/041-sunset.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
: timeToAMPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{systemUsed == "imperial"
|
||||
? isPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
|
||||
<div className={styles.switchBox}>
|
||||
<p
|
||||
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;
|
||||
};
|
||||
28
pages/services/utils.js
Normal file
28
pages/services/utils.js
Normal file
@ -0,0 +1,28 @@
|
||||
import { convertTime, kmToM, mpsToMph, timeToAMPM } from "./converters";
|
||||
|
||||
export const isPM = (time) => {
|
||||
let hours = time.split(":")[0];
|
||||
if (hours >= 12) {
|
||||
return "PM";
|
||||
} else {
|
||||
return "AM";
|
||||
}
|
||||
};
|
||||
|
||||
export const getWindSpeed = (systemUsed, windInMph) =>
|
||||
systemUsed == "metric" ? windInMph : mpsToMph(windInMph);
|
||||
|
||||
export const getVisibility = (systemUsed, visibilityInKm) =>
|
||||
systemUsed == "metric"
|
||||
? (visibilityInKm / 1000).toPrecision(2)
|
||||
: kmToM(visibilityInKm / 1000);
|
||||
|
||||
export const getTime = (systemUsed, currentTime, timezone) =>
|
||||
systemUsed == "metric"
|
||||
? `${parseInt(convertTime(currentTime, timezone)[0].split(":")[0])}:${
|
||||
convertTime(currentTime, timezone)[0].split(":")[1]
|
||||
}`
|
||||
: timeToAMPM(convertTime(currentTime, timezone)[0]);
|
||||
|
||||
export const getAMPM = (systemUsed, currentTime, timezone) =>
|
||||
systemUsed == "imperial" ? isPM(convertTime(currentTime, timezone)[0]) : "";
|
||||
Loading…
x
Reference in New Issue
Block a user