Refactor: wire backlog page to overmind (#50)

* refactor: remove unused settings and wire up existing to overmind

* refactor: move components around on summary page

* style: fix styles for dropdown

* style: fix styles for checkbox

* refactor: migrate sorting and ordering to overmind

* feat: styling fixes as well as empty state for the issues table

* style: better image for empty state

* feat: change navbar title via context

* fix: resolve focus issues in Dropdown

* feat: different empty state for empty search

Author: Spring3

.eslintrc.json

@@ -84,6 +84,7 @@
       2,
       { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
     ],
+    "implicit-arrow-linebreak": ["error", "beside"],
     "import/no-extraneous-dependencies": [
       "error",
       {

main/redmine.js

@@ -79,7 +79,7 @@ const createRequestClient = () => {
         method: data.method || 'GET',
         headers: data.headers,
         json: data.body,
-        serchParams: data.query
+        searchParams: data.query
       });
 
       console.log(response.statusCode, response.body);

main/transformers/issues.js

@@ -9,7 +9,7 @@ const transform = (route, responseBody) => {
           project: issue.project,
           tracker: issue.tracker,
           status: issue.status,
-          proprity: issue.priority,
+          priority: issue.priority,
           author: issue.author,
           assignee: issue.assigned_to,
           subject: issue.subject,

package.json

@@ -164,8 +164,10 @@
     "rc-slider": "^9.2.1",
     "react": "^17.0.2",
     "react-confirm-alert": "^2.5.0",
+    "react-cool-inview": "^2.0.8",
     "react-day-picker": "^7.4.0",
     "react-dom": "^17.0.2",
+    "react-focus-lock": "^2.6.0",
     "react-redux": "^6.0.1",
     "react-responsive-modal": "^3.6.0",
     "react-router-dom": "^5.3.0",

render/App.jsx

@@ -105,7 +105,7 @@ const Routes = ({ dispatch }) => {
   return (
     <Switch>
       <Route path="/" exact component={LoginView} />
-      <Route path="/app" exact component={(props) => <AppView {...props} />} />
+      <Route path="/app" exact component={AppView} />
     </Switch>
   );
 };

render/about/__tests__/AboutPage.spec.jsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import { version } from '../../../package.json';
 
 import AboutPage from '../AboutPage';
-import theme from '../../theme';
+import { theme } from '../../theme';
 
 describe('About page', () => {
   afterEach(cleanup);

render/about/index.jsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 
 import AboutPage from './AboutPage';
-import theme from '../theme';
+import { theme } from '../theme';
 
 try {
   // eslint-disable-next-line import/no-extraneous-dependencies, global-require

render/assets/empty-search-state.png

@@ -8,24 +8,24 @@ const StyledButton = styled.button`
   font-size: 14px;
   outline: none;
   text-align: center;
-  
-  ${(props) => css`
+
+  ${props => css`
     background: ${props.theme.bg};
     transition: color ease ${props.theme.transitionTime};
     transition: background ease ${props.theme.transitionTime};
     width: ${props.block ? '100%' : 'auto'};
   `}
 
-  ${(props) => {
+  ${props => {
     if (!props.disabled) {
       return css`
-        border: 2px solid ${props.palette.light};    
+        border: 2px solid ${props.palette.light};
         color: ${props.palette.light};
         cursor: pointer;
-    
+
         &:hover,
         &:focus {
-          background: ${props.palette.light}; 
+          background: ${props.palette.light};
           color: ${props.theme.hoverText} !important;
 
           svg {
@@ -46,42 +46,7 @@ const StyledButton = styled.button`
         fill: ${props.theme.minorText};
       }
     `;
-  }
-}
-`;
-
-const StyledLink = styled.a`
-  text-decoration: none;
-  color: ${(props) => props.theme.main};
-  transition: color ease ${(props) => props.theme.transitionTime};
-
-  ${(props) => {
-    if (!props.disabled) {
-      return css`
-          &:hover {
-            color: ${props.theme.mainDark};
-
-            svg {
-              fill: ${props.theme.mainDark}
-            }
-          }
-        `;
-    }
-    return css`
-        color: ${props.theme.minorText};
-        
-        svg {
-          fill: ${props.theme.minorText};
-        }
-      `;
-  }
-}
-
-  &:active,
-  &:focus,
-  &:visited {
-    background: transparent;
-  }
+  }}
 `;
 
 class Button extends Component {
@@ -109,18 +74,11 @@ class Button extends Component {
           dark: theme.mainDark
         };
     }
-  }
+  };
 
   render() {
     const {
-      id,
-      children,
-      type,
-      disabled,
-      block,
-      onClick,
-      theme,
-      className
+      id, children, type, disabled, block, onClick, theme, className
     } = this.props;
     return (
       <StyledButton
@@ -140,10 +98,7 @@ class Button extends Component {
 }
 
 Button.propTypes = {
-  id: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   theme: PropTypes.object.isRequired,
   children: PropTypes.node.isRequired,
   type: PropTypes.oneOf(['button', 'submit']),
@@ -163,54 +118,4 @@ Button.defaultProps = {
   className: undefined
 };
 
-class GhostButton extends Component {
-  preventDefault = (e) => {
-    e.preventDefault();
-    e.persist();
-    const { onClick, disabled } = this.props;
-    if (onClick && !disabled) {
-      onClick(e);
-    }
-  }
-
-  render() {
-    const {
-      id, children, disabled, className
-    } = this.props;
-    return (
-      <StyledLink
-        id={id}
-        onClick={this.preventDefault}
-        href="#"
-        disabled={disabled}
-        className={className}
-      >
-        {children}
-      </StyledLink>
-    );
-  }
-}
-
-GhostButton.propTypes = {
-  id: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-};
-
-GhostButton.defaultProps = {
-  id: undefined,
-  disabled: false,
-  onClick: undefined,
-  className: undefined
-};
-
-export {
-  GhostButton
-};
-
 export default withTheme(Button);