diff --git a/src/components/App.js b/src/components/App.js index c424bf3..76b3056 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,19 +1,17 @@ -import React from "react"; +import React, { Fragment } from "react"; + +import Loading from "./common/Loading"; +import ErrorView from "./common/ErrorView"; +import InfoView from "./common/InfoView"; import Welcome from "./Welcome"; import Gallery from "./Gallery"; -const Loading = () => ( -
-
-
-); -const ErrorView = error =>
{error}
; - const App = ({ fonts, flags, installedFonts, error, + announcement, isUserRegistered, registerUser, installFont, @@ -22,22 +20,30 @@ const App = ({ registering, loading }) => { - if (error) return ; if (loading) return ; if (isUserRegistered) return ( - + + + + + ); - return ; + return ( + + + + + + ); }; export default App; diff --git a/src/components/Gallery.js b/src/components/Gallery.js index 281ea73..7a9a22d 100644 --- a/src/components/Gallery.js +++ b/src/components/Gallery.js @@ -3,6 +3,8 @@ import styled from "styled-components"; import { Button, Switch, Card, Elevation } from "@blueprintjs/core"; import find from "lodash/find"; +import Loading from "./common/Loading"; + // Styles const Wrapper = styled.div` height: 100vh; @@ -134,11 +136,7 @@ class Gallery extends Component { return ( - {flags[id] && ( -
-
-
- )} + {flags[id] && } diff --git a/src/components/common/ErrorView.js b/src/components/common/ErrorView.js new file mode 100644 index 0000000..caf00f2 --- /dev/null +++ b/src/components/common/ErrorView.js @@ -0,0 +1,18 @@ +import React from "react"; +import styled from "styled-components"; + +// Styles +const Error = styled.div` + color: white; + text-align: center; + background-color: red; + padding: 5px 0; + font-size: 11px; +`; + +const ErrorView = ({ error }) => { + if (!error) return null; + return {error}; +}; + +export default ErrorView; diff --git a/src/components/common/InfoView.js b/src/components/common/InfoView.js new file mode 100644 index 0000000..718a263 --- /dev/null +++ b/src/components/common/InfoView.js @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; + +const electron = window.require("electron"); + +// Styles +const Announcement = styled.div` + color: white; + text-align: center; + background-color: green; + padding: 5px 0; + font-size: 11px; + cursor: pointer; +`; + +const openExternalLink = url => { + if (!url) return; + electron.shell.openExternal(url); +}; + +const InfoView = ({ announcement }) => { + if (!announcement) return null; + const { text, href } = announcement || {}; + if (!text) return null; + return ( + openExternalLink(href)}>{text} + ); +}; + +export default InfoView; diff --git a/src/components/common/Loading.js b/src/components/common/Loading.js new file mode 100644 index 0000000..58f2c38 --- /dev/null +++ b/src/components/common/Loading.js @@ -0,0 +1,9 @@ +import React from "react"; + +const Loading = () => ( +
+
+
+); + +export default Loading; diff --git a/src/containers/App.js b/src/containers/App.js index 8f501f4..e5c91cd 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -34,7 +34,7 @@ class AppContainer extends React.Component { ( error, { - announcement, + announcements, fonts, installedFonts, flags, @@ -44,7 +44,7 @@ class AppContainer extends React.Component { } ) => { this.setState(() => ({ - announcement, + announcement: announcements && announcements[0], fonts, installedFonts, flags,