Skip to content

Commit

Permalink
Merge branch 'development' of github.com:chingu-voyage5/Geckos-Team-0…
Browse files Browse the repository at this point in the history
… into feature-Link-modal-#78-kiran
  • Loading branch information
kiranshuaib committed Jul 25, 2018
2 parents f9f3d06 + 462a714 commit ade1bbe
Show file tree
Hide file tree
Showing 10 changed files with 664 additions and 167 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-icons": "^2.2.7",
"react-icons-weather": "^1.0.5",
"react-modal": "^3.4.5",
"react-scripts": "1.1.4"
},
Expand Down
63 changes: 29 additions & 34 deletions src/components/App.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,44 @@
import React, { Component } from 'react';
import '../styles/App.css';
import React, { Component } from "react";
import "../styles/App.css";

import Time from './Time';
import Name from './Name';
import Weather from './Weather';
import Focus from "./Focus";
import ToDo from "./ToDo.js";
import Links from "./Links";
import Search from "./Search";
import Quotes from "./Quotes";
import Settings from "./Settings";
import WallpaperInfo from "./WallpaperInfo";
import WeatherContainer from "./WeatherContainer";

class App extends Component {


render() {

return (
<div className="App">
<div className="App__Top">
<div className="APP__Top__Left">
<Links />
<Search />
</div>
<Weather />
</div>
<div className="App__Center">
<Time />
<Name />
<Focus />
</div>
<div className="App__Footer">
<div className="App__Footer__Left">
<Settings />
<WallpaperInfo />
</div>
<Quotes />
<ToDo />
</div>
</div>
);
}
render() {
return (
<div className="App">
<div className="App__Top">
<div className="APP__Top__Left">
<Links />
<Search />
</div>
<WeatherContainer />
</div>
<div className="App__Center">
<Time />
<Name />
<Focus />
</div>
<div className="App__Footer">
<div className="App__Footer__Left">
<Settings />
<WallpaperInfo />
</div>
<Quotes />
<ToDo />
</div>
</div>
);
}
}

export default App;


48 changes: 48 additions & 0 deletions src/components/MainWeather.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React, {Fragment} from "react";
import Store from "../store";
import "../styles/Weather.css";

import WeatherIcon from "react-icons-weather";

function MainWeather(props) {
const { handleOpenModal } = props;

return (
<div
className="Weather--Main"
onClick={() => handleOpenModal()}
>
<Store.Consumer>
{
store => {
const { weatherCode, temperature } = store.currentWeather;
const { city, countryCode } = store.location;
const { unit } = store;

return (
<Fragment>
<div className="Weather--Main__Row">
<WeatherIcon name="yahoo" iconId={weatherCode || "32"} />
<div className="temp">
<span>
{unit ? store.convertToC(temperature) : temperature}°
</span>
</div>
</div>
<div className="Weather--Main__Row">
<div className="location">
<span>
{city}{countryCode}
</span>
</div>
</div>
</Fragment>
);
}
}
</Store.Consumer>
</div>
);
}

export default MainWeather;
2 changes: 1 addition & 1 deletion src/components/Quotes.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,4 @@ class Actions extends React.Component {
}
}

export default Quotes;
export default Quotes;
103 changes: 19 additions & 84 deletions src/components/Weather.js
Original file line number Diff line number Diff line change
@@ -1,102 +1,37 @@
import React from "react";
import MainWeather from "./MainWeather";
import "../styles/Weather.css";

import Shower from "react-icons/lib/ti/weather-shower";
import Modal from "react-modal";
import WeatherModal from "./WeatherModal";

class Weather extends React.Component {
constructor() {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
constructor(props) {
super(props);
this.state = {
showModal: false,
};
}
handleOpenModal() {

handleOpenModal = () => {
this.setState({ showModal: true });
}
};

handleCloseModal() {
handleCloseModal = () => {
this.setState({ showModal: false });
}
};

render() {

return (
<div id="Weather">
<div onClick={this.handleOpenModal}>
<div className="Weather__Row">
<Shower />
<Temp />
</div>
<div className="Weather__Row">
<Location />
</div>
</div>

<Modal
className="Weather__Modal"
overlayClassName="Overlay"
isOpen={this.state.showModal}
onRequestClose={this.handleCloseModal}
>
<div className="Modal__Content">
<div className="Current__Weather__Container">
<div className="Current__Weather__Wrapper">
<div className="Current__Weather__Head">
<span id="Current__Location">Location</span>
<span id="Current__Weather">Rain</span>
</div>
<div className="Weather__Wrapper">
<Shower id="Weather__Icon" />
<span id="Current__Temp">19°</span>
</div>
</div>
<span id="Temp__Convert">°C</span>
</div>
<div className="Daily__Weather__Container">
<DailyWeather />
<DailyWeather />
<DailyWeather />
<DailyWeather />
<DailyWeather />
</div>
</div>
</Modal>
<MainWeather handleOpenModal={this.handleOpenModal} />
<WeatherModal
isActive={this.state.showModal}
handleCloseModal={this.handleCloseModal}
/>
</div>
);
}
}

function Temp() {
return (
<div id="Temp">
<span>19°</span>
</div>
);
}

function Location() {
return (
<div id="Location">
<span>Location</span>
</div>
);
}

function DailyWeather() {
return (
<div className="Daily__Weather__Wrapper">
<span className="Day">TUE</span>
<div className="Daily__Weather">
<Shower />
<span id="Temp_High">19°</span>
<span id="Temp__Low">19°</span>
</div>
</div>
);
}

Modal.setAppElement("#root");
export default Weather;
export default Weather;
Loading

0 comments on commit ade1bbe

Please sign in to comment.