-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Loading animations and update error handling #14
Changes from all commits
e12b7ac
b6101b7
a9e228a
5296850
ef74214
52592cd
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import styled from 'styled-components/macro' | ||
import Button from './components/Button' | ||
|
||
function ErrorPage({ setErrorMessage, showMainPage }) { | ||
function resetError() { | ||
setErrorMessage('') | ||
showMainPage() | ||
} | ||
|
||
return ( | ||
<ErrorPageStyled> | ||
<section className="result-wrapper"> | ||
<h3>Sorry, Daten konnten nicht geladen werden.</h3> | ||
<span>Probiere eine neue Suche!</span> | ||
</section> | ||
<section className="information-wrapper"> | ||
<Button onClick={resetError}>Neue Suche</Button> | ||
</section> | ||
</ErrorPageStyled> | ||
) | ||
} | ||
|
||
const ErrorPageStyled = styled.div` | ||
.result-wrapper { | ||
padding: 37px; | ||
background: var(--red); | ||
color: var(--silver); | ||
} | ||
|
||
.information-wrapper { | ||
margin: 0 18px; | ||
} | ||
` | ||
export default ErrorPage |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import styled from 'styled-components/macro' | ||
import LoadingSpinner from './components/LoadingSpinner' | ||
|
||
function LoadingPage() { | ||
return ( | ||
<LoadingContainer> | ||
<LoadingSpinner /> | ||
</LoadingContainer> | ||
) | ||
} | ||
|
||
const LoadingContainer = styled.div` | ||
height: 100vh; | ||
display: grid; | ||
place-items: center; | ||
` | ||
|
||
export default LoadingPage |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,33 +2,40 @@ import { useEffect } from 'react' | |
import styled from 'styled-components/macro' | ||
import Form from './components/Form' | ||
|
||
|
||
function MainPage({setUserPlace, errorMessage, isCountyDataLoaded, resetSearch}) { | ||
|
||
useEffect(() => {isCountyDataLoaded && resetSearch()}, []) | ||
function MainPage({ | ||
userPlace, | ||
setUserPlace, | ||
errorMessage, | ||
isDataLoading, | ||
resetSearch, | ||
setSearchOrigin, | ||
}) { | ||
useEffect(() => { | ||
userPlace && resetSearch() | ||
}, []) | ||
|
||
return ( | ||
<MainPageStyled> | ||
<h1>Bin ich in einem Covid-19 Hotspot?</h1> | ||
<Form | ||
<Form | ||
setUserPlace={setUserPlace} | ||
errorMessage={errorMessage} | ||
> | ||
</Form> | ||
</MainPageStyled> | ||
isDataLoading={isDataLoading} | ||
setSearchOrigin={setSearchOrigin} | ||
/> | ||
</MainPageStyled> | ||
) | ||
} | ||
|
||
const MainPageStyled = styled.div` | ||
padding: 10px; | ||
display: grid; | ||
grid-gap: 20px; | ||
background: #F5F5F7; | ||
padding: 10px; | ||
display: grid; | ||
grid-gap: 20px; | ||
background: var(--silver); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nice to work with variablen. You might think about it work with main oder primary in the naming. So it's a little bit clearer what kind it is. |
||
|
||
h1 { | ||
margin: 100px 0; | ||
} | ||
h1 { | ||
margin: 100px 0; | ||
} | ||
` | ||
|
||
|
||
export default MainPage | ||
export default MainPage |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,16 @@ | ||
import styled from 'styled-components/macro' | ||
import PropTypes from 'prop-types' | ||
|
||
function Button({text, onClick}) { | ||
|
||
return ( | ||
<> | ||
<ButtonStyled onClick={onClick}>{text}</ButtonStyled> | ||
</> | ||
) | ||
} | ||
|
||
const ButtonStyled = styled.button` | ||
border: none; | ||
background: var(--button); | ||
color: white; | ||
width: 100%; | ||
display: flex; | ||
height: 48px; | ||
justify-content: center; | ||
align-items: center; | ||
font-size: 1rem; | ||
border-radius: 5px; | ||
margin: 20px 0 ; | ||
cursor: pointer; | ||
export default styled.button` | ||
border: none; | ||
background: ${(props) => (props.disabled ? 'var(--gray)' : 'var(--blue)')}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same here ;-) "more speacking names" maybe There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It is also easier to change the main colors in the whole app that way. :) |
||
color: white; | ||
width: 100%; | ||
display: flex; | ||
height: 48px; | ||
justify-content: center; | ||
align-items: center; | ||
font-size: 1rem; | ||
border-radius: 5px; | ||
margin: 20px 0; | ||
cursor: pointer; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You could think of grouping properties according theire functions to have a better overview. E. g. everything with display, fonts and so on. |
||
` | ||
|
||
Button.propTypes = { | ||
text: PropTypes.string.isRequired, | ||
onClick: PropTypes.func | ||
} | ||
|
||
export default Button |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You may want to set the styling in "result-wrapper" class to get rid of the
span
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point, but have to stick with the span, cause don't want the whole text in the result wrapper being font-weight: 300.