Add Loading animations and update error handling #14

JulianBlohm · 2020-11-27T10:38:51Z

New loading animations are displayed during fetching and with the dynamic URL there was a reason to separate the error handling of main and result page. Therefore I added a error page shown if fetching was not successful from result page.

-Prettier fixed

…button component

vercel · 2020-11-27T10:38:53Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/julianblohm/hotspotornot/6em5eoswo
✅ Preview: https://hotspotornot-git-loading-screen.julianblohm.vercel.app

alex-jonas

nice work 👍

alex-jonas · 2020-11-27T13:42:17Z

src/ResultPage.js

+                    </section>
+                    <section className="information-wrapper">
+                        <a href="https://www.bundesregierung.de/breg-de/themen/coronavirus/corona-bundeslaender-1745198">
+                            <Button text="Regeln der Bundesländer" />


Does this work? Actually, a button within anchor-tags is not valid HTML

oh really? Actually it works, but you're right. Gonna change it to just a link.

src/ResultPage.js

alex-jonas · 2020-11-27T13:47:12Z

src/components/Button.js

@@ -1,33 +1,40 @@
 import styled from 'styled-components/macro'
 import PropTypes from 'prop-types'

-function Button({text, onClick}) {
-
+function Button({ text, onClick, className }) {


The component name sounds like a button element, but it represents a div.

Yeah true, did some stupid stuff there, gonna remove the div and solve the styling with props.

alex-jonas · 2020-11-27T14:00:28Z

src/ErrorPage.js

+        <ErrorPageStyled>
+            <section className="county-class-red result-wrapper">
+                <h3>Sorry, Daten konnten nicht geladen werden.</h3>
+                <span>Probiere eine neue Suche!</span>


You may want to set the styling in "result-wrapper" class to get rid of the span?

Good point, but have to stick with the span, cause don't want the whole text in the result wrapper being font-weight: 300.

alex-jonas · 2020-11-27T14:08:30Z

src/components/LoadingSpinner.js

+        animation: loading-spinner 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    }
+
+    .loading-spinner div:nth-child(2) {


interesting selector :)

copy-pasta 🍝

ninapeters

Really well structured and clean code. I left only three comments. Keep it up!

ninapeters · 2020-11-27T15:10:30Z

src/MainPage.js

-        </MainPageStyled> 
+                isDataLoading={isDataLoading}
+                setSearchOrigin={setSearchOrigin}
+            ></Form>


You don't embed anything in your form tag. So you can close it directly without a closing tag.

ninapeters · 2020-11-27T15:12:59Z

src/ResultPage.js

+                        )}
+                        <h3>
+                            Die 7-Tage-Inzidenz <br /> liegt bei{' '}
+                            {countyData.incidence}.{' '}


Same problem with the empty brackets.

Yeah I really don't know where they come from 🧐
Update--> found out that prettier formatted the text and placed these brackets as string with space, so that the incidence has space to the text.

ninapeters · 2020-11-27T15:18:15Z

src/MainPage.js

+    padding: 10px;
+    display: grid;
+    grid-gap: 20px;
+    background: #f5f5f7;


Sometimes you work with color variables. So it's not quite stringent.

thanks! Got the variables after I styled that one, I guess

dajanaheinze

Nice Work! Maybe you could think about your color variable naming. It's only a little think :)

dajanaheinze · 2020-11-28T07:11:00Z

src/MainPage.js

@@ -31,7 +31,7 @@ const MainPageStyled = styled.div`
    padding: 10px;
    display: grid;
    grid-gap: 20px;
-    background: #f5f5f7;
+    background: var(--silver);


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.

dajanaheinze · 2020-11-28T07:14:47Z

src/components/Button.js

-    }
+export default styled.button`
+    border: none;
+    background: ${(props) => (props.disabled ? 'var(--gray)' : 'var(--blue)')};


same here ;-) "more speacking names" maybe

It is also easier to change the main colors in the whole app that way. :)

JanaHaeusler

Nice work and a very important app! Excited to see what is comming next. :) If questions arise regarding my comments, feel free to ask. I hope it is helpful.

JanaHaeusler · 2020-11-28T11:39:02Z

src/MainPage.js

@@ -22,7 +22,7 @@ function MainPage({
                errorMessage={errorMessage}
                isDataLoading={isDataLoading}
                setSearchOrigin={setSearchOrigin}
-            ></Form>


Could be there a more descriptive name for the form and what it is doing? Hard to think of something, but maybe you have a practical idea. CheckHotspotFormor something like this?

JanaHaeusler · 2020-11-28T11:41:48Z

src/components/Button.js

-    }
+export default styled.button`
+    border: none;
+    background: ${(props) => (props.disabled ? 'var(--gray)' : 'var(--blue)')};


It is also easier to change the main colors in the whole app that way. :)

JanaHaeusler · 2020-11-28T11:44:05Z

src/components/Button.js

+    font-size: 1rem;
+    border-radius: 5px;
+    margin: 20px 0;
+    cursor: pointer;


You could think of grouping properties according theire functions to have a better overview. E. g. everything with display, fonts and so on.

JanaHaeusler · 2020-11-28T11:45:57Z

src/components/ExternalLink.js

+    border-radius: 5px;
+    margin: 20px 0;
+    cursor: pointer;
+`


Same point reagrding grouping here as well :)

JulianBlohm added 4 commits November 26, 2020 11:39

Add Loading Page with loading Spinner before result page is shown

e12b7ac

WIP Errorhandling and loading animations, add different kinds of the …

b6101b7

…button component

Add error handling logic and loading animation logic

a9e228a

Clean up code

5296850

alex-jonas reviewed Nov 27, 2020

View reviewed changes

ninapeters reviewed Nov 27, 2020

View reviewed changes

Refactor components, add external link component, fix bugs

ef74214

vercel bot deployed to Preview November 27, 2020 18:58 View deployment

Fix wording and h2 style

52592cd

vercel bot deployed to Preview November 27, 2020 19:09 View deployment

dajanaheinze reviewed Nov 28, 2020

View reviewed changes

JanaHaeusler reviewed Nov 28, 2020

View reviewed changes

JulianBlohm merged commit 9b2311c into main Nov 29, 2020

JulianBlohm deleted the loading-screen branch December 1, 2020 14:50

JulianBlohm linked an issue Dec 8, 2020 that may be closed by this pull request

Loading animation and error handling #20

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Loading animations and update error handling #14

Add Loading animations and update error handling #14

JulianBlohm commented Nov 27, 2020 •

edited

Loading

vercel bot commented Nov 27, 2020 •

edited

Loading

alex-jonas left a comment

alex-jonas Nov 27, 2020

JulianBlohm Nov 27, 2020 •

edited

Loading

alex-jonas Nov 27, 2020

JulianBlohm Nov 27, 2020

alex-jonas Nov 27, 2020

JulianBlohm Nov 27, 2020 •

edited

Loading

alex-jonas Nov 27, 2020

JulianBlohm Nov 27, 2020

ninapeters left a comment

ninapeters Nov 27, 2020

ninapeters Nov 27, 2020

JulianBlohm Nov 27, 2020 •

edited

Loading

ninapeters Nov 27, 2020

JulianBlohm Nov 27, 2020

dajanaheinze left a comment

dajanaheinze Nov 28, 2020

dajanaheinze Nov 28, 2020

JanaHaeusler Nov 28, 2020

JanaHaeusler left a comment

JanaHaeusler Nov 28, 2020

JanaHaeusler Nov 28, 2020

JanaHaeusler Nov 28, 2020

JanaHaeusler Nov 28, 2020

Add Loading animations and update error handling #14

Add Loading animations and update error handling #14

Conversation

JulianBlohm commented Nov 27, 2020 • edited Loading

vercel bot commented Nov 27, 2020 • edited Loading

alex-jonas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JulianBlohm Nov 27, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JulianBlohm Nov 27, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ninapeters left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JulianBlohm Nov 27, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dajanaheinze left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JanaHaeusler left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JulianBlohm commented Nov 27, 2020 •

edited

Loading

vercel bot commented Nov 27, 2020 •

edited

Loading

JulianBlohm Nov 27, 2020 •

edited

Loading

JulianBlohm Nov 27, 2020 •

edited

Loading

JulianBlohm Nov 27, 2020 •

edited

Loading