Merge pull request #381 from CaptainFact/staging

Release 1.0.0

Co-authored-by: null <greenkeeper[bot]@users.noreply.github.com>
Co-authored-by: Vincent Lefoulon <[email protected]>

.babelrc

@@ -1,8 +1,5 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
     [
       "@babel/plugin-proposal-decorators",
@@ -13,6 +10,7 @@
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",
-    "babel-plugin-styled-components"
+    "babel-plugin-styled-components",
+    "transform-react-remove-prop-types"
   ]
 }

.eslintrc.yml

@@ -62,7 +62,7 @@ rules:
   react/self-closing-comp: ['warn']
   react/jsx-indent: ['warn']
   react/no-array-index-key: ['warn']
-  react/prefer-stateless-function: ['warn']
+  react/prefer-stateless-function: off
   # JSX
   jsx-a11y/anchor-is-valid:
     - warn
@@ -77,6 +77,7 @@ rules:
   jsx-a11y/click-events-have-key-events: ['warn']
   jsx-a11y/no-static-element-interactions: ['warn']
   jsx-a11y/media-has-caption: ['warn']
+  jsx-a11y/accessible-emoji: ['warn']
   jsx-a11y/anchor-has-content: off
 
   # Following rule haves been disabled for compatibility with

.gitignore

@@ -18,6 +18,7 @@
 .tmproj
 nbproject
 Thumbs.db
+.history
 
 # NPM packages folder.
 node_modules/
@@ -31,6 +32,9 @@ coverage
 # Ignore cypress videos and screenshots
 cypress/videos
 
+# Ignore styleguide build
+styleguide
+
 # API dev image resources
 dev/dev_docker_api_resources/*
 !dev/dev_docker_api_resources/.keep

README.md

@@ -33,6 +33,8 @@ should be enough. Otherwise follow the procedure below:
   - `npm start` - Start the frontend
   - `npm run test` - run all unit tests
 
+Frontend is started on http://localhost:3333
+
 A default account should have been created for you with
 email=`[email protected]` and password=`password`.
 

app/API/graphql_api.js

@@ -1,8 +1,23 @@
 import ApolloClient from 'apollo-boost'
 import { GRAPHQL_API_URL } from '../config'
 
+const authMiddleware = operation => {
+  const token = localStorage.getItem('token')
+
+  if (token) {
+    operation.setContext({
+      headers: {
+        authorization: `Bearer ${token}`
+      }
+    })
+  }
+
+  return operation
+}
+
 const GraphQLClient = new ApolloClient({
-  uri: GRAPHQL_API_URL
+  uri: GRAPHQL_API_URL,
+  request: authMiddleware
 })
 
 export default GraphQLClient

app/API/graphql_queries.js

@@ -43,3 +43,20 @@ export const VideosAddedByUserQuery = gql`
     }
   }
 `
+
+export const loggedInUserSubscriptionsQuery = gql`
+  query LoggedInUserSubscriptions($scopes: [String]) {
+    loggedInUser {
+      subscriptions(scopes: $scopes) {
+        id
+        scope
+        videoId
+        isSubscribed
+        video {
+          hashId
+          title
+        }
+      }
+    }
+  }
+`

app/components/App/index.jsx → app/components/App/Layout.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
-
 import { Helmet } from 'react-helmet'
 
+import { Flex } from '@rebass/grid'
 import { FlashMessages } from '../Utils'
+import Navbar from './Navbar'
 import Sidebar from './Sidebar'
 import { MainModalContainer } from '../Modal/MainModalContainer'
 import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
@@ -13,7 +14,7 @@ import BackgroundNotifier from './BackgroundNotifier'
   locale: state.UserPreferences.locale,
   sidebarExpended: state.UserPreferences.sidebarExpended
 }))
-export default class App extends React.PureComponent {
+export default class Layout extends React.PureComponent {
   render() {
     const { locale, sidebarExpended, children } = this.props
     const mainContainerClass = sidebarExpended ? undefined : 'expended'
@@ -25,6 +26,7 @@ export default class App extends React.PureComponent {
         </Helmet>
         <MainModalContainer />
         <FlashMessages />
+        <Navbar />
         <Sidebar />
         <div id="main-container" className={mainContainerClass}>
           {children}

app/components/App/Logo.jsx

@@ -1,15 +1,56 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import styled, { css } from 'styled-components'
+import { themeGet } from 'styled-system'
 
+import { Flex } from '@rebass/grid'
 import logo from '../../assets/logo.svg'
 import borderlessLogo from '../../assets/logo-borderless.svg'
+import { Span, Small } from '../StyledUtils/Text'
 
-const Logo = ({ borderless = false }) => (
-  <h1 className="site-logo title is-1">
-    <img alt="C" src={borderless ? borderlessLogo : logo} />
-    <span className="logo-captain">aptain</span>
-    <span className="logo-fact">Fact</span>
-    <small className="beta"> (Beta)</small>
-  </h1>
+const LogoContainer = styled(Flex)`
+  max-height: 100%;
+  align-items: center;
+  font-family: ${themeGet('fontFamily.serif')};
+  color: ${themeGet('colors.black.500')};
+
+  ${props => css`
+    font-size: ${props.size / 2}px;
+    height: ${props.size}px;
+  `}
+`
+
+const Image = styled.img`
+  height: 100%;
+  width: ${props => props.size}px;
+`
+
+/**
+ * The main website logo.
+ */
+const Logo = ({ borderless, height }) => (
+  <LogoContainer size={height}>
+    <Image alt="C" src={borderless ? borderlessLogo : logo} />
+    <Span ml="1px">aptain</Span>
+    <Span fontWeight="bold" mr={1}>
+      Fact
+    </Span>
+    <Small display={['none', 'block']} color="black.300" fontSize="0.6em" pb="0.2em">
+      (Beta)
+    </Small>
+  </LogoContainer>
 )
 
+Logo.propTypes = {
+  /** If true, a version of the logo without border will be used */
+  borderless: PropTypes.bool,
+  /** Base height of the component in pixels */
+  height: PropTypes.number
+}
+
+Logo.defaultProps = {
+  borderless: false,
+  height: 30
+}
+
 export default Logo