Merge pull request #184 from FuelRats/develop

v2.8.0

.all-contributorsrc

@@ -112,7 +112,17 @@
         "content",
         "design"
       ]
+    },
+    {
+      "login": "noctilucent-dev",
+      "name": "Nathan",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/52113097?v=4",
+      "profile": "https://github.com/noctilucent-dev",
+      "contributions": [
+        "code"
+      ]
     }
   ],
-  "repoType": "github"
+  "repoType": "github",
+  "commitConvention": "none"
 }

.eslintignore

@@ -0,0 +1,3 @@
+!.*
+**/.next
+**/node_modules

.eslintrc.js

@@ -4,12 +4,12 @@ module.exports = {
   },
   extends: '@fuelrats/eslint-config-react',
   rules: {
-    'react/prop-types': ['off'], // We're not quite ready to enforce prop-types for all files yet
     'jsx-a11y/no-noninteractive-element-interactions': ['off'], // We intend to enable this once we refactor certain key components
+    'react/prop-types': ['off'], // We're not quite ready to enforce prop-types for all files yet
   },
   settings: {
     'import/ignore': [
-      '\.worker\.js$'
-    ]
-  }
+      '.worker.js$',
+    ],
+  },
 }

.gitignore

@@ -2,6 +2,8 @@
 .idea/
 .next
 .env
+.stylelintcache
+.eslintcache
 bower_components
 node_modules
 static/compiled

.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@fuelrats/stylelint-config',
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+}

CONTRIBUTORS.md

@@ -4,7 +4,22 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore -->
-<table><tr><td align="center"><a href="http://trezy.com"><img src="https://avatars2.githubusercontent.com/u/442980?v=4" width="100px;" alt="Trezy"/><br /><sub><b>Trezy</b></sub></a><br /><a href="#blog-trezy" title="Blogposts">📝</a> <a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Atrezy" title="Bug reports">🐛</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=trezy" title="Code">💻</a> <a href="#design-trezy" title="Design">🎨</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=trezy" title="Documentation">📖</a> <a href="#ideas-trezy" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-trezy" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#question-trezy" title="Answering Questions">💬</a> <a href="#review-trezy" title="Reviewed Pull Requests">👀</a></td><td align="center"><a href="https://github.com/UncleClapton"><img src="https://avatars2.githubusercontent.com/u/2686824?v=4" width="100px;" alt="Cameron "Clapton""/><br /><sub><b>Cameron "Clapton"</b></sub></a><br /><a href="#blog-UncleClapton" title="Blogposts">📝</a> <a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3AUncleClapton" title="Bug reports">🐛</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=UncleClapton" title="Code">💻</a> <a href="#design-UncleClapton" title="Design">🎨</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=UncleClapton" title="Documentation">📖</a> <a href="#ideas-UncleClapton" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-UncleClapton" title="Answering Questions">💬</a> <a href="#review-UncleClapton" title="Reviewed Pull Requests">👀</a></td><td align="center"><a href="https://github.com/xlexi"><img src="https://avatars0.githubusercontent.com/u/125232?v=4" width="100px;" alt="Alex S. Glomsaas"/><br /><sub><b>Alex S. Glomsaas</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Axlexi" title="Bug reports">🐛</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=xlexi" title="Code">💻</a> <a href="#ideas-xlexi" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-xlexi" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td><td align="center"><a href="https://itssimple.se"><img src="https://avatars0.githubusercontent.com/u/11502257?v=4" width="100px;" alt="Chris Gårdenberg"/><br /><sub><b>Chris Gårdenberg</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/commits?author=itssimple" title="Code">💻</a></td><td align="center"><a href="https://github.com/spansh"><img src="https://avatars2.githubusercontent.com/u/103208?v=4" width="100px;" alt="spansh"/><br /><sub><b>spansh</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/commits?author=spansh" title="Code">💻</a> <a href="#design-spansh" title="Design">🎨</a></td><td align="center"><a href="https://github.com/kenneaal"><img src="https://avatars3.githubusercontent.com/u/3196591?v=4" width="100px;" alt="Kenneth Aalberg"/><br /><sub><b>Kenneth Aalberg</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Akenneaal" title="Bug reports">🐛</a> <a href="#ideas-kenneaal" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-kenneaal" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td><td align="center"><a href="https://github.com/andybish"><img src="https://avatars2.githubusercontent.com/u/6172379?v=4" width="100px;" alt="Andrew Bishop"/><br /><sub><b>Andrew Bishop</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Aandybish" title="Bug reports">🐛</a></td></tr><tr><td align="center"><a href="https://github.com/Belserium"><img src="https://avatars0.githubusercontent.com/u/1807416?v=4" width="100px;" alt="Aki Loponen"/><br /><sub><b>Aki Loponen</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3ABelserium" title="Bug reports">🐛</a> <a href="#ideas-Belserium" title="Ideas, Planning, & Feedback">🤔</a></td><td align="center"><a href="https://github.com/314numberpi"><img src="https://avatars0.githubusercontent.com/u/15672322?v=4" width="100px;" alt="314numberpi"/><br /><sub><b>314numberpi</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/commits?author=314numberpi" title="Code">💻</a> <a href="#content-314numberpi" title="Content">🖋</a> <a href="#design-314numberpi" title="Design">🎨</a></td></tr></table>
+<table>
+  <tr>
+    <td align="center"><a href="http://trezy.com"><img src="https://avatars2.githubusercontent.com/u/442980?v=4" width="100px;" alt="Trezy"/><br /><sub><b>Trezy</b></sub></a><br /><a href="#blog-trezy" title="Blogposts">📝</a> <a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Atrezy" title="Bug reports">🐛</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=trezy" title="Code">💻</a> <a href="#design-trezy" title="Design">🎨</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=trezy" title="Documentation">📖</a> <a href="#ideas-trezy" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-trezy" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#question-trezy" title="Answering Questions">💬</a> <a href="#review-trezy" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/UncleClapton"><img src="https://avatars2.githubusercontent.com/u/2686824?v=4" width="100px;" alt="Cameron "Clapton""/><br /><sub><b>Cameron "Clapton"</b></sub></a><br /><a href="#blog-UncleClapton" title="Blogposts">📝</a> <a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3AUncleClapton" title="Bug reports">🐛</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=UncleClapton" title="Code">💻</a> <a href="#design-UncleClapton" title="Design">🎨</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=UncleClapton" title="Documentation">📖</a> <a href="#ideas-UncleClapton" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-UncleClapton" title="Answering Questions">💬</a> <a href="#review-UncleClapton" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/xlexi"><img src="https://avatars0.githubusercontent.com/u/125232?v=4" width="100px;" alt="Alex S. Glomsaas"/><br /><sub><b>Alex S. Glomsaas</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Axlexi" title="Bug reports">🐛</a> <a href="https://github.com/fuelrats/fuelrats.com/commits?author=xlexi" title="Code">💻</a> <a href="#ideas-xlexi" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-xlexi" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://itssimple.se"><img src="https://avatars0.githubusercontent.com/u/11502257?v=4" width="100px;" alt="Chris Gårdenberg"/><br /><sub><b>Chris Gårdenberg</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/commits?author=itssimple" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/spansh"><img src="https://avatars2.githubusercontent.com/u/103208?v=4" width="100px;" alt="spansh"/><br /><sub><b>spansh</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/commits?author=spansh" title="Code">💻</a> <a href="#design-spansh" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/kenneaal"><img src="https://avatars3.githubusercontent.com/u/3196591?v=4" width="100px;" alt="Kenneth Aalberg"/><br /><sub><b>Kenneth Aalberg</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Akenneaal" title="Bug reports">🐛</a> <a href="#ideas-kenneaal" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-kenneaal" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/andybish"><img src="https://avatars2.githubusercontent.com/u/6172379?v=4" width="100px;" alt="Andrew Bishop"/><br /><sub><b>Andrew Bishop</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3Aandybish" title="Bug reports">🐛</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Belserium"><img src="https://avatars0.githubusercontent.com/u/1807416?v=4" width="100px;" alt="Aki Loponen"/><br /><sub><b>Aki Loponen</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/issues?q=author%3ABelserium" title="Bug reports">🐛</a> <a href="#ideas-Belserium" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/314numberpi"><img src="https://avatars0.githubusercontent.com/u/15672322?v=4" width="100px;" alt="314numberpi"/><br /><sub><b>314numberpi</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/commits?author=314numberpi" title="Code">💻</a> <a href="#content-314numberpi" title="Content">🖋</a> <a href="#design-314numberpi" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/noctilucent-dev"><img src="https://avatars3.githubusercontent.com/u/52113097?v=4" width="100px;" alt="Nathan"/><br /><sub><b>Nathan</b></sub></a><br /><a href="https://github.com/fuelrats/fuelrats.com/commits?author=noctilucent-dev" title="Code">💻</a></td>
+  </tr>
+</table>
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

client/components/AppLayout.js

@@ -21,7 +21,7 @@ import ErrorPage from '../pages/_error'
 import Header from './Header'
 import httpStatus from '../helpers/httpStatus'
 import initUserSession from '../helpers/initUserSession'
-import LoginDialog from './LoginDialog'
+import LoginModal from './LoginModal'
 import NProgress from './NProgress'
 import PageLayout from './AppLayout/PageLayout'
 import userHasPermission from '../helpers/userHasPermission'
@@ -91,6 +91,7 @@ class AppLayout extends React.Component {
 
       if (!userHasPermission(userGroups, Component.ಠ_ಠ_REQUIRED_PERMISSION)) {
         if (ctx.res) {
+          /* eslint-disable-next-line require-atomic-updates */// This is fine
           ctx.res.statusCode = httpStatus.UNAUTHORIZED
         } else {
           statusCode = httpStatus.UNAUTHORIZED
@@ -164,7 +165,6 @@ class AppLayout extends React.Component {
     const {
       renderLayout,
       isServer,
-      showLoginDialog,
     } = this.props
 
     return (
@@ -183,10 +183,7 @@ class AppLayout extends React.Component {
 
         <PageLayout {...this.pageLayoutProps} />
 
-        {showLoginDialog && (
-          <LoginDialog onClose={this._handleLoginDialogClose} />
-        )}
-
+        <LoginModal {...this.loginModalProps} />
       </div>
     )
   }
@@ -195,6 +192,13 @@ class AppLayout extends React.Component {
     Getters
   \***************************************************************************/
 
+  get loginModalProps () {
+    return {
+      isOpen: this.props.showLoginModal,
+      onClose: this._handleLoginDialogClose,
+    }
+  }
+
   get pageLayoutProps () {
     const {
       Component,
@@ -236,7 +240,7 @@ class AppLayout extends React.Component {
 
   static mapStateToProps = (state) => ({
     ...selectAuthentication(state),
-    showLoginDialog: selectFlagByName(state, { name: 'showLoginDialog' }),
+    showLoginModal: selectFlagByName(state, { name: 'showLoginDialog' }),
     user: selectUser(state),
   })
 }

client/components/AppLayout/PageLayout.js

@@ -1,40 +1,39 @@
 import React from 'react'
-import { Transition } from 'react-spring'
+import { useTransition } from 'react-spring'
 
 
 
 
 const TransitionContext = React.createContext(null)
 
 
+const PageLayout = ({ items, keys, ...transitionProps }) => useTransition(items, keys, {
+  initial: true,
+  from: { opacity: 0 },
+  enter: { opacity: 1 },
+  leave: { opacity: 0 },
+  config: {
+    tension: 350,
+    friction: 25,
+    clamp: true,
+  },
+  ...transitionProps,
+}).map(({ item, key, props }) => {
+  const {
+    Page,
+    pageProps,
+    shouldRender,
+  } = item
+
+  return shouldRender && (
+    <TransitionContext.Provider key={key} value={props}>
+      <Page {...pageProps} />
+    </TransitionContext.Provider>
+  )
+})
 
 
 
-const PageLayout = ({ items, keys }) => (
-  <Transition
-    native
-    initial
-    from={{ opacity: 0 }}
-    enter={{ opacity: 1 }}
-    leave={{ opacity: 0 }}
-    config={{
-      tension: 350,
-      friction: 25,
-      clamp: true,
-    }}
-    items={items}
-    keys={keys}>
-    {({ Page, pageProps, shouldRender }) => (style) => (
-      <TransitionContext.Provider value={style}>
-        {shouldRender && (
-          <Page {...pageProps} />
-        )}
-      </TransitionContext.Provider>
-    )}
-  </Transition>
-)
-
-
 
 const {
   Consumer: TransitionContextConsumer,

client/components/Carousel.js

@@ -148,7 +148,7 @@ class Carousel extends React.Component {
                 <animated.span
                   className="carousel-slide-text"
                   style={{
-                    transform: xPos.interpolate((value) => `translate3d(${value}%,0,0)`),
+                    transform: xPos.to((value) => (value ? `translate3d(${value}%,0,0)` : undefined)),
                   }}>
                   {slide.text}
                 </animated.span>