Skip to content

Commit

Permalink
Added the ui implementation for 5 days weather info
Browse files Browse the repository at this point in the history
  • Loading branch information
@hmdNetizen
hmdNetizen committed Jul 1, 2021
1 parent 11c636c commit d33157c
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 56 deletions.
103 changes: 57 additions & 46 deletions src/components/RectangularCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,67 @@
import { Fragment } from "react";
import { useTypedSelector } from "./hooks/useTypedSelector";
import { TiLocationArrow } from "react-icons/ti";

const RectangularCard: React.FC = () => {
const { weatherData } = useTypedSelector((state) => state.weather);
return (
<div className="rectangular__card">
{/* COLUMN ONE - ROW ONE */}
<div className="rectangular__card__content">
<p className="rectangular__card_title">Wind Status</p>
<h2 className="rectangular__card__rate">
7 <span>mph</span>
</h2>
<div className="rectangular__card__bottom__wrapper">
<div className="rectangular__card__icon__wrapper">
<TiLocationArrow
size={20}
color="#E7E7EB"
className="rectangular__card__icon"
/>
<Fragment>
{weatherData && (
<div className="rectangular__card">
{/* COLUMN ONE - ROW ONE */}
<div className="rectangular__card__content">
<p className="rectangular__card_title">Wind Status</p>
<h2 className="rectangular__card__rate">
{weatherData.consolidated_weather[0].wind_speed.toFixed(2)}{" "}
<span>mph</span>
</h2>
<div className="rectangular__card__bottom__wrapper">
<div className="rectangular__card__icon__wrapper">
<TiLocationArrow
size={20}
color="#E7E7EB"
className="rectangular__card__icon"
/>
</div>
<p>WSW</p>
</div>
</div>
<p>WSW</p>
</div>
</div>
{/* COLUMN TWO - ROW ONE */}
<div className="rectangular__card__content">
<p className="rectangular__card_title">Humidity</p>
<h2 className="rectangular__card__rate">
84<span style={{ marginLeft: 0 }}>%</span>
</h2>
<div className="rectangular__card__progressBar">
<div className="rectangular__card__progressBar__wrapper">
<p className="rectangular__card__progressBar__point">0</p>
<p className="rectangular__card__progressBar__point">50</p>
<p className="rectangular__card__progressBar__point">100</p>
{/* COLUMN TWO - ROW ONE */}
<div className="rectangular__card__content">
<p className="rectangular__card_title">Humidity</p>
<h2 className="rectangular__card__rate">
{weatherData.consolidated_weather[0].humidity}
<span style={{ marginLeft: 0 }}>%</span>
</h2>
<div className="rectangular__card__progressBar">
<div className="rectangular__card__progressBar__wrapper">
<p className="rectangular__card__progressBar__point">0</p>
<p className="rectangular__card__progressBar__point">50</p>
<p className="rectangular__card__progressBar__point">100</p>
</div>
<div className="rectangular__card__progressBar__line" />
<p className="rectangular__card__progressBar__percent">%</p>
</div>
</div>
{/* COLUMN ONE - ROW TWO */}
<div className="rectangular__card__content rectangular__card__content--row">
<p className="rectangular__card_title">Visibility</p>
<h2 className="rectangular__card__rate">
{weatherData.consolidated_weather[0].visibility.toFixed(1)}
<span style={{ marginLeft: " 0.5em" }}>miles</span>
</h2>
</div>
{/* COLUMN TWO - ROW TWO */}
<div className="rectangular__card__content rectangular__card__content--row">
<p className="rectangular__card_title">Air Pressure</p>
<h2 className="rectangular__card__rate">
{weatherData.consolidated_weather[0].air_pressure.toFixed(0)}
<span style={{ marginLeft: " 0.5em" }}>mb</span>
</h2>
</div>
<div className="rectangular__card__progressBar__line" />
<p className="rectangular__card__progressBar__percent">%</p>
</div>
</div>
{/* COLUMN ONE - ROW TWO */}
<div className="rectangular__card__content rectangular__card__content--row">
<p className="rectangular__card_title">Visibility</p>
<h2 className="rectangular__card__rate">
6,4<span style={{ marginLeft: " 0.5em" }}>miles</span>
</h2>
</div>
{/* COLUMN TWO - ROW TWO */}
<div className="rectangular__card__content rectangular__card__content--row">
<p className="rectangular__card_title">Air Pressure</p>
<h2 className="rectangular__card__rate">
998<span style={{ marginLeft: " 0.5em" }}>mb</span>
</h2>
</div>
</div>
)}
</Fragment>
);
};

Expand Down
31 changes: 25 additions & 6 deletions src/components/SquareCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
import placeholderIcon from "../assets/Thunderstorm.png";
import moment from "moment";
import showWeatherImage from "./showWeatherImage";

const SquareCard: React.FC = () => {
interface Props {
day: {
id: number;
applicable_date: string;
weather_state_abbr: string;
min_temp: number;
max_temp: number;
};
}

const SquareCard: React.FC<Props> = ({ day }) => {
const days =
day &&
moment(day.applicable_date).format("ll") ===
moment().add(1, "days").format("ll")
? "Tomorrow"
: moment(day.applicable_date).format("ddd, D MMM");
return (
<div className="squareCard">
<div className="squareCard__title">Tomorrow</div>
<div className="squareCard__title">{days}</div>
<img
src={placeholderIcon}
src={showWeatherImage(day.weather_state_abbr)}
alt="Weather condition icon"
className="squareCard__img"
/>
<div className="squareCard__content">
<p className="squareCard__content__text--1">
16<sup>o</sup>C
{day.max_temp.toFixed(0)}
<sup>o</sup>C
</p>
<p className="squareCard__content__text--2">
11<sup>o</sup>C
{day.min_temp.toFixed(0)}
<sup>o</sup>C
</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/Aside.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const AsideContent: React.FC<Props> = ({ openSearch, setOpenSearch }) => {
/>
<div className="aside__weather__description">
<h1 className="aside__weather__degree">
{Math.ceil(weatherData.consolidated_weather[0].the_temp)}
{weatherData.consolidated_weather[0].the_temp.toFixed(0)}
<sup>o</sup>
<span>C</span>
</h1>
Expand Down
9 changes: 6 additions & 3 deletions src/components/layouts/ContentSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useTypedSelector } from "../hooks/useTypedSelector";
import RectangularCard from "../RectangularCard";
import SquareCard from "../SquareCard";
import Footer from "./Footer";

const ContentSection: React.FC = () => {
const { weatherData } = useTypedSelector((state) => state.weather);
return (
<section className="section">
<div className="section__temperature">
Expand All @@ -14,9 +16,10 @@ const ContentSection: React.FC = () => {
</button>
</div>
<div className="card">
{[...new Array(5)].map((data: any, index) => (
<SquareCard key={index} />
))}
{weatherData &&
weatherData.consolidated_weather
.slice(1)
.map((data: any) => <SquareCard key={data.id} day={data} />)}
</div>
<div className="section__highlights">
<h2 className="section__highlights__title">Today's highlights</h2>
Expand Down

0 comments on commit d33157c

Please sign in to comment.