Update dependencies, format code, update translations

.env

@@ -1 +1 @@
-NODE_PATH=src/
+SKIP_PREFLIGHT_CHECK=true

.nvmrc

@@ -0,0 +1 @@
+v12.1.0

.prettierrc

@@ -0,0 +1 @@
+{}

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}

package.json

@@ -1,27 +1,39 @@
 {
   "name": "keihard",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "homepage": "http://keihardroeien.nl",
   "private": true,
   "dependencies": {
-    "i18next": "^11.3.2",
-    "i18next-browser-languagedetector": "^2.2.0",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-i18next": "^7.6.1",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.2.0",
-    "react-router-redux": "^5.0.0-alpha.9",
-    "react-scripts": "1.1.4",
-    "redux": "^4.0.0",
-    "redux-devtools-extension": "^2.13.2",
-    "redux-saga": "^0.16.0",
-    "styled-components": "^3.2.6"
+    "i18next": "^19.4.2",
+    "i18next-browser-languagedetector": "^4.1.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-i18next": "^11.3.5",
+    "react-is": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-scripts": "^3.4.1",
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-saga": "^1.1.3",
+    "styled-components": "^5.1.0",
+    "typeface-passion-one": "^0.0.72"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/components/App.js

@@ -1,29 +1,27 @@
-import React, { Fragment } from 'react'
-import { Route, Switch } from 'react-router'
+import React from "react";
 
-import Translations from 'components/Translations'
-import Theme from 'components/Theme'
-import { Container } from 'components/lib'
-import SponsorModal from 'components/SponsorModal'
-import PhotoModal from 'components/PhotoModal'
-import HomePage from 'pages/home'
+import Translations from "components/Translations";
+import LocaleTracker from "components/LocaleTracker";
+import Theme from "components/Theme";
+import { Container } from "components/lib";
+import SponsorModal from "components/SponsorModal";
+import PhotoModal from "components/PhotoModal";
+import HomePage from "pages/home";
 
 const App = () => (
   <Translations>
-    <Theme>
-      <Fragment>
+    <LocaleTracker>
+      <Theme>
         <Container>
-          <Switch>
-            <Route path="/" exact component={HomePage} />
-          </Switch>
+          <HomePage />
         </Container>
         <SponsorModal />
-        {[1,2,3,4,5,6].map(n =>
+        {[1, 2, 3, 4, 5, 6].map((n) => (
           <PhotoModal key={n} n={n} />
-        )}
-      </Fragment>
-    </Theme>
+        ))}
+      </Theme>
+    </LocaleTracker>
   </Translations>
-)
+);
 
-export default App
+export default App;

src/components/Footer.js

@@ -1,62 +1,87 @@
-import React from 'react'
-import styled from 'styled-components'
-import { translate, Trans } from 'react-i18next'
+import React from "react";
+import styled from "styled-components";
+import { withTranslation, Trans } from "react-i18next";
 
-import { Text, Link, Wrapper, Row, Button } from 'components/lib'
-import Waves from 'components/Waves'
-import Title from 'components/Title'
-import Sponsors from 'components/Sponsors'
+import { Text, Link, Wrapper, Row, Button } from "components/lib";
+import Waves from "components/Waves";
+import Title from "components/Title";
+import Sponsors from "components/Sponsors";
 
-const Footer = styled.footer`
+const FooterContainer = styled.footer`
   position: relative;
   padding: 4em 0;
 
-  background:
-    linear-gradient(#fff, #f2f2f2 2em);
-`
+  background: linear-gradient(#fff, #f2f2f2 2em);
+`;
 
 const FooterWaves = styled(Waves)`
   position: absolute;
-  left: 0; top: 0;
+  left: 0;
+  top: 0;
   right: 0;
 
   width: 100%;
   height: 4em;
 
   transform: scale(1, -1);
 
-  fill: rgba(255, 255, 255, .4);
-`
+  fill: rgba(255, 255, 255, 0.4);
+`;
 
 const Languages = styled.div`
   text-align: center;
-`
+`;
 
-const Language = Button.extend`
-  margin: 0 .25em;
-`
+const Language = styled(Button)`
+  margin: 0 0.25em;
+`;
 
-export default translate('page')(({t, i18n}) => (
-  <Footer>
+const Footer = ({ i18n }) => (
+  <FooterContainer>
     <FooterWaves />
     <Wrapper>
       <Title>
-        <Trans i18nKey="thanks"><strong>Thanks</strong></Trans>
+        <Trans i18nKey="page:thanks">
+          <strong>Thanks</strong>
+        </Trans>
       </Title>
       <Row>
         <Sponsors />
       </Row>
       <Row>
         <Text center>
-          <Trans i18nKey="further questions">For questions, email <Link href="mailto:[email protected]">[email protected]</Link></Trans>
+          <Trans i18nKey="page:further_questions">
+            For questions, email{" "}
+            <Link href="mailto:[email protected]">
+              [email protected]
+            </Link>
+          </Trans>
         </Text>
       </Row>
       <Row>
         <Languages>
-          <Language medium primary onClick={() => { i18n.changeLanguage('nl'); }}>NL</Language>
-          <Language medium primary onClick={() => { i18n.changeLanguage('en'); }}>EN</Language>
+          <Language
+            medium
+            primary
+            onClick={() => {
+              i18n.changeLanguage("nl");
+            }}
+          >
+            NL
+          </Language>
+          <Language
+            medium
+            primary
+            onClick={() => {
+              i18n.changeLanguage("en");
+            }}
+          >
+            EN
+          </Language>
         </Languages>
       </Row>
     </Wrapper>
-  </Footer>
-))
+  </FooterContainer>
+);
+
+export default withTranslation()(Footer);

src/components/Header.js

@@ -1,40 +1,41 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from "react";
+import styled from "styled-components";
 
-import { Link } from 'components/lib'
-import Waves from 'components/Waves'
+import { Link } from "components/lib";
+import Waves from "components/Waves";
 
-import headerBg from 'assets/header.jpg'
-import kika from 'assets/kika.png'
+import headerBg from "assets/header.jpg";
+import kika from "assets/kika.png";
 
 const Header = styled.header`
   position: relative;
 
   height: 40vmin;
-  background-color: ${props => props.theme.colors.primary};
-  background:
-    linear-gradient(90deg, transparent 75%, rgba(255, 255, 255, .1)),
+  background-color: ${(props) => props.theme.colors.primary};
+  background: linear-gradient(90deg, transparent 75%, rgba(255, 255, 255, 0.1)),
     linear-gradient(transparent 80%, #fff),
     url(${headerBg}) no-repeat left 30% top 50% / cover;
-`
+`;
 
 const KiKaImage = styled.img`
   position: absolute;
-  right: 2em; top: 2em;
+  right: 2em;
+  top: 2em;
 
   height: 50%;
-`
+`;
 
 const HeaderWaves = styled(Waves)`
   position: absolute;
   left: 0;
-  right: 0; bottom: 0;
+  right: 0;
+  bottom: 0;
 
   width: 100%;
   height: 20%;
 
-  fill: rgba(255, 255, 255, .8);
-`
+  fill: rgba(255, 255, 255, 0.8);
+`;
 
 export default () => (
   <Header>
@@ -43,4 +44,4 @@ export default () => (
     </Link>
     <HeaderWaves />
   </Header>
-)
+);

src/components/LocaleTracker.js

@@ -0,0 +1,8 @@
+import { useTranslation } from "react-i18next";
+
+const LocaleTracker = ({ children }) => {
+  useTranslation();
+  return children;
+};
+
+export default LocaleTracker;