switch export const

This commit is contained in:
madarsbiss 2021-09-23 12:54:45 +03:00
parent 236650857f
commit be238fe88b
11 changed files with 30 additions and 50 deletions

View File

@ -1,7 +1,5 @@
import styles from "./ContentBox.module.css"; import styles from "./ContentBox.module.css";
const ContentBox = ({ children }) => { export const ContentBox = ({ children }) => {
return <div className={styles.wrapper}>{children}</div>; return <div className={styles.wrapper}>{children}</div>;
}; };
export default ContentBox;

View File

@ -1,7 +1,7 @@
import { getWeekDay, getTime, getAMPM } from "../services/utils"; import { getWeekDay, getTime, getAMPM } from "../services/utils";
import styles from "./DateAndTime.module.css"; import styles from "./DateAndTime.module.css";
const DateAndTime = ({ weatherData, systemUsed }) => { export const DateAndTime = ({ weatherData, systemUsed }) => {
return ( return (
<h2 className={styles.title}> <h2 className={styles.title}>
{`${getWeekDay(weatherData)}, ${getTime( {`${getWeekDay(weatherData)}, ${getTime(
@ -11,6 +11,4 @@ const DateAndTime = ({ weatherData, systemUsed }) => {
)} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`} )} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
</h2> </h2>
); );
}; };
export default DateAndTime;

View File

@ -1,6 +1,6 @@
import styles from "./ErrorScreen.module.css"; import styles from "./ErrorScreen.module.css";
const ErrorScreen = ({ errorMessage, children }) => { export const ErrorScreen = ({ errorMessage, children }) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<h1 className={styles.message}>{errorMessage}</h1> <h1 className={styles.message}>{errorMessage}</h1>
@ -8,5 +8,3 @@ const ErrorScreen = ({ errorMessage, children }) => {
</div> </div>
); );
}; };
export default ErrorScreen;

View File

@ -1,7 +1,5 @@
import styles from "./Header.module.css"; import styles from "./Header.module.css";
const Header = ({ children }) => { export const Header = ({ children }) => {
return <div className={styles.wrapper}>{children}</div>; return <div className={styles.wrapper}>{children}</div>;
}; };
export default Header;

View File

@ -1,11 +1,9 @@
import styles from "./LoadingScreen.module.css"; import styles from "./LoadingScreen.module.css";
const LoadingScreen = ({ loadingMessage }) => { export const LoadingScreen = ({ loadingMessage }) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<h1>{loadingMessage}</h1> <h1>{loadingMessage}</h1>
</div> </div>
); );
}; };
export default LoadingScreen;

View File

@ -2,7 +2,7 @@ import Image from "next/image";
import { ctoF } from "../services/converters"; import { ctoF } from "../services/converters";
import styles from "./MainCard.module.css"; import styles from "./MainCard.module.css";
const MainCard = ({ export const MainCard = ({
city, city,
country, country,
description, description,
@ -37,6 +37,4 @@ const MainCard = ({
</p> </p>
</div> </div>
); );
}; };
export default MainCard;

View File

@ -5,36 +5,36 @@ import {
getVisibility, getVisibility,
getWindSpeed, getWindSpeed,
} from "../services/utils"; } from "../services/utils";
import MetricCard from "./MetricsCard"; import {MetricsCard} from "./MetricsCard";
import styles from "./MetricsBox.module.css"; import styles from "./MetricsBox.module.css";
const MetricsBox = ({ weatherData, systemUsed }) => { export const MetricsBox = ({ weatherData, systemUsed }) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<MetricCard <MetricsCard
title={"Humidity"} title={"Humidity"}
iconSrc={"/icons/humidity.png"} iconSrc={"/icons/humidity.png"}
metric={weatherData.main.humidity} metric={weatherData.main.humidity}
unit={"%"} unit={"%"}
/> />
<MetricCard <MetricsCard
title={"Wind speed"} title={"Wind speed"}
iconSrc={"/icons/wind.png"} iconSrc={"/icons/wind.png"}
metric={getWindSpeed(systemUsed, weatherData.wind.speed)} metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
unit={systemUsed == "metric" ? "m/s" : "m/h"} unit={systemUsed == "metric" ? "m/s" : "m/h"}
/> />
<MetricCard <MetricsCard
title={"Wind direction"} title={"Wind direction"}
iconSrc={"/icons/compass.png"} iconSrc={"/icons/compass.png"}
metric={degToCompass(weatherData.wind.deg)} metric={degToCompass(weatherData.wind.deg)}
/> />
<MetricCard <MetricsCard
title={"Visibility"} title={"Visibility"}
iconSrc={"/icons/binocular.png"} iconSrc={"/icons/binocular.png"}
metric={getVisibility(systemUsed, weatherData.visibility)} metric={getVisibility(systemUsed, weatherData.visibility)}
unit={systemUsed == "metric" ? "km" : "miles"} unit={systemUsed == "metric" ? "km" : "miles"}
/> />
<MetricCard <MetricsCard
title={"Sunrise"} title={"Sunrise"}
iconSrc={"/icons/sunrise.png"} iconSrc={"/icons/sunrise.png"}
metric={getTime( metric={getTime(
@ -48,7 +48,7 @@ const MetricsBox = ({ weatherData, systemUsed }) => {
weatherData.timezone weatherData.timezone
)} )}
/> />
<MetricCard <MetricsCard
title={"Sunset"} title={"Sunset"}
iconSrc={"/icons/sunset.png"} iconSrc={"/icons/sunset.png"}
metric={getTime( metric={getTime(
@ -60,6 +60,4 @@ const MetricsBox = ({ weatherData, systemUsed }) => {
/> />
</div> </div>
); );
}; };
export default MetricsBox;

View File

@ -1,7 +1,7 @@
import Image from "next/image"; import Image from "next/image";
import styles from "./MetricsCard.module.css"; import styles from "./MetricsCard.module.css";
const MetricsCard = ({ title, iconSrc, metric, unit }) => { export const MetricsCard = ({ title, iconSrc, metric, unit }) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<p>{title}</p> <p>{title}</p>
@ -15,5 +15,3 @@ const MetricsCard = ({ title, iconSrc, metric, unit }) => {
</div> </div>
); );
}; };
export default MetricsCard;

View File

@ -1,6 +1,6 @@
import styles from "./Search.module.css"; import styles from "./Search.module.css";
const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => { export const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
return ( return (
<input <input
className={styles.search} className={styles.search}
@ -13,5 +13,3 @@ const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
/> />
); );
}; };
export default Search;

View File

@ -1,6 +1,6 @@
import styles from "./UnitSwitch.module.css"; import styles from "./UnitSwitch.module.css";
const UnitSwitch = ({ onClick, systemUsed }) => { export const UnitSwitch = ({ onClick, systemUsed }) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<p <p
@ -20,5 +20,3 @@ const UnitSwitch = ({ onClick, systemUsed }) => {
</div> </div>
); );
}; };
export default UnitSwitch;

View File

@ -1,18 +1,18 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import MainCard from "../components/MainCard"; import {MainCard} from "../components/MainCard";
import ContentBox from "../components/ContentBox"; import {ContentBox} from "../components/ContentBox";
import Header from "../components/Header"; import {Header} from "../components/Header";
import DateAndTime from "../components/DateAndTime"; import {DateAndTime} from "../components/DateAndTime";
import Search from "../components/Search"; import {Search} from "../components/Search";
import MetricsBox from "../components/MetricsBox"; import {MetricsBox} from "../components/MetricsBox";
import UnitSwitch from "../components/UnitSwitch"; import {UnitSwitch} from "../components/UnitSwitch";
import LoadingScreen from "../components/LoadingScreen"; import {LoadingScreen} from "../components/LoadingScreen";
import ErrorScreen from "../components/ErrorScreen"; import {ErrorScreen} from "../components/ErrorScreen";
import styles from "../styles/Home.module.css"; import styles from "../styles/Home.module.css";
const App = () => { export const App = () => {
const [input, setInput] = useState("Riga"); const [input, setInput] = useState("Riga");
const [execute, setExecute] = useState(true); const [execute, setExecute] = useState(true);
const [weatherData, setWeatherData] = useState(); const [weatherData, setWeatherData] = useState();