-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'development' of github.com:chingu-voyage5/Geckos-Team-0…
… into feature-Link-modal-#78-kiran
- Loading branch information
Showing
10 changed files
with
664 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -51,4 +51,4 @@ class Actions extends React.Component { | |
} | ||
} | ||
|
||
export default Quotes; | ||
export default Quotes; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Oops, something went wrong.