migration

Author: MacKentoch

front/src/Root.js

@@ -0,0 +1,57 @@
+// @flow
+
+// #region imports
+import React, { Component, Fragment } from 'react';
+import { Router, Switch, Route } from 'react-router-dom';
+import compose from 'recompose/compose';
+import createHistory from 'history/createBrowserHistory';
+import withMainLayout from './hoc/withMainLayout';
+import MainRoutes from './routes/MainRoutes';
+import ScrollToTop from './components/scrollToTop/ScrollToTop';
+import LogoutRoute from './components/logoutRoute';
+import AuthProvider from './contexts/auth/providerComponent';
+import { devToolsStore } from './contexts/withDevTools';
+import Login from './pages/login';
+import GlobalStyle from './style/GlobalStyles';
+// #endregion
+
+// #region flow types
+type Props = any;
+type State = any;
+// #endregion
+
+// #region constants
+const MainApp = compose(withMainLayout())(MainRoutes);
+
+const history = createHistory();
+// #endregion
+
+class Root extends Component<Props, State> {
+  componentDidMount() {
+    // init devTools (so that will be visible in Chrome redux devtools tab):
+    devToolsStore && devToolsStore.init();
+  }
+
+  render() {
+    return (
+      <Router history={history}>
+        <Fragment>
+          <GlobalStyle />
+          <AuthProvider>
+            <ScrollToTop>
+              <Switch>
+                <Route exact path="/login" component={Login} />
+                {/* Application with main layout (could have multiple applications with different layouts) */}
+                <MainApp />
+                {/* logout: just redirects to login (App will take care of removing the token) */}
+                <LogoutRoute path="/logout" />
+              </Switch>
+            </ScrollToTop>
+          </AuthProvider>
+        </Fragment>
+      </Router>
+    );
+  }
+}
+
+export default Root;

front/src/components/backToTop/BackToTop.js

@@ -0,0 +1,130 @@
+// @flow
+/* eslint-disable no-undefined */
+
+// #region imports
+import React, { Component } from 'react';
+import BackToTopButton from './backToTopButton/BackToTopButton';
+import { Motion, spring, presets } from 'react-motion';
+// #endregion
+
+// #region flow types
+type Props = {
+  minScrollY: number,
+  scrollTo?: string,
+  onScrollDone?: () => any,
+};
+
+type State = {
+  windowScrollY: number,
+  showBackButton: boolean,
+  tickingScollObserve: boolean,
+};
+// #endregion
+
+class BackToTop extends Component<Props, State> {
+  static defaultProps = {
+    minScrollY: 120,
+    onScrollDone: () => {},
+  };
+
+  state = {
+    windowScrollY: 0,
+    showBackButton: false,
+    tickingScollObserve: false,
+  };
+
+  // #region lifecycle methods
+  componentDidMount() {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', this.handleWindowScroll);
+    }
+  }
+
+  componentWillUnmount() {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('scroll', this.handleWindowScroll);
+    }
+  }
+
+  render() {
+    const { showBackButton } = this.state;
+    return (
+      <Motion style={{ x: spring(showBackButton ? 0 : 120, presets.stiff) }}>
+        {({ x }) => (
+          <BackToTopButton
+            position={'bottom-right'}
+            onClick={this.handlesOnBackButtonClick}
+            motionStyle={{
+              WebkitTransform: `translate3d(${x}px, 0, 0)`,
+              transform: `translate3d(${x}px, 0, 0)`,
+            }}
+          />
+        )}
+      </Motion>
+    );
+  }
+  // #endregion
+
+  // #region on windows scroll callback
+  handleWindowScroll = () => {
+    if (window) {
+      const { windowScrollY, tickingScollObserve } = this.state;
+      const { minScrollY } = this.props;
+
+      /* eslint-disable no-undefined */
+      const currentWindowScrollY =
+        window.pageYOffset !== undefined
+          ? window.pageYOffset
+          : (
+              document.documentElement ||
+              document.body.parentNode ||
+              document.body
+            ).scrollTop;
+      /* eslint-enable no-undefined */
+
+      // scroll event fires to often, using window.requestAnimationFrame to limit computations
+      if (!tickingScollObserve) {
+        window.requestAnimationFrame(() => {
+          if (windowScrollY !== currentWindowScrollY) {
+            const shouldShowBackButton =
+              currentWindowScrollY >= minScrollY ? true : false;
+
+            this.setState({
+              windowScrollY: currentWindowScrollY,
+              showBackButton: shouldShowBackButton,
+            });
+          }
+          this.setState({ tickingScollObserve: false });
+        });
+      }
+
+      this.setState({ tickingScollObserve: true });
+    }
+  };
+  // #endregion
+
+  // #region on button click (smooth scroll)
+  handlesOnBackButtonClick = (event: SyntheticEvent<>) => {
+    if (event) {
+      event.preventDefault();
+    }
+    const { minScrollY } = this.props;
+    const { windowScrollY } = this.state;
+
+    if (window && windowScrollY && windowScrollY > minScrollY) {
+      // using here smoothscroll-polyfill
+      window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+      // smoothScroll.scrollTo(scrollTo, this.scrollDone);
+    }
+  };
+
+  scrollDone = () => {
+    const { onScrollDone } = this.props;
+    if (onScrollDone) {
+      onScrollDone();
+    }
+  };
+  // #endregion
+}
+
+export default BackToTop;

front/src/components/backToTop/__tests__/BackToTop.test.js

@@ -0,0 +1,26 @@
+// @flow
+
+// #region imports
+import React from 'react';
+import renderer from 'react-test-renderer'; // needed both for snpashot testing but also to prevent errors from enzyme
+import BackToTop from '../BackToTop';
+// #endregion
+
+describe('BackToTop component', () => {
+  it('renders as expected', () => {
+    const props = {
+      minScrollY: 10,
+      scrollTo: null,
+      onScrollDone: () => {},
+    };
+
+    const component = renderer
+      .create(
+        <div>
+          <BackToTop {...props} />
+        </div>,
+      )
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
+});

front/src/components/backToTop/__tests__/__snapshots__/BackToTop.test.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BackToTop component renders as expected 1`] = `
+<div>
+  <button
+    className="btn"
+    onClick={[Function]}
+    style={
+      Object {
+        "WebkitTransform": "translate3d(120px, 0, 0)",
+        "backgroundColor": "#4A4A4A",
+        "bottom": "40px",
+        "left": "",
+        "opacity": 0.5,
+        "position": "fixed",
+        "right": "-10px",
+        "transform": "translate3d(120px, 0, 0)",
+        "width": "100px",
+        "zIndex": 10,
+      }
+    }
+  >
+    <div
+      className="sc-bdVaJa eYqzQM"
+    >
+      <svg
+        fill="#F1F1F1"
+        height="24px"
+        viewBox="0 0 512 512"
+        width="24px"
+      >
+        <path
+          d="M256,213.7L256,213.7L256,213.7l174.2,167.2c4.3,4.2,11.4,4.1,15.8-0.2l30.6-29.9c4.4-4.3,4.5-11.3,0.2-15.5L264.1,131.1 c-2.2-2.2-5.2-3.2-8.1-3c-3-0.1-5.9,0.9-8.1,3L35.2,335.3c-4.3,4.2-4.2,11.2,0.2,15.5L66,380.7c4.4,4.3,11.5,4.4,15.8,0.2L256,213.7z"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;

front/src/components/backToTop/backToTopButton/BackToTopButton.js

@@ -0,0 +1,97 @@
+// @flow
+
+// #region imports
+import React from 'react';
+import cx from 'classnames';
+import UpIcon from './UpIcon';
+import WithRightMargin from './styled/WithRightMargin';
+// #endregion
+
+// #region flow types
+type Props = {
+  position: 'bottom-left' | 'bottom-right',
+  onClick: (event: SyntheticEvent<>) => any,
+  children: any,
+  motionStyle: any,
+  ...any,
+};
+// #endregion
+
+// #region constants
+const defaultBackGroundColor = '#4A4A4A';
+const sideOffset = '-10px';
+const bottomOffset = '40px';
+const defaultWidth = '100px';
+const defaultZindex = 10;
+const defaultOpacity = 0.5;
+const defaultStyle = {
+  position: 'fixed',
+  right: sideOffset,
+  left: '',
+  bottom: bottomOffset,
+  width: defaultWidth,
+  zIndex: defaultZindex,
+  opacity: defaultOpacity,
+  backgroundColor: defaultBackGroundColor,
+};
+// #endregion
+
+const BackToTopButton = ({
+  onClick,
+  position,
+  children,
+  motionStyle,
+}: Props) => {
+  const buttonStyle = setPosition(position, {
+    ...motionStyle,
+    ...defaultStyle,
+  });
+
+  return (
+    <button
+      style={buttonStyle}
+      className={cx({
+        btn: true,
+      })}
+      onClick={onClick}
+    >
+      {!children && (
+        <WithRightMargin>
+          <UpIcon color={'#F1F1F1'} />
+        </WithRightMargin>
+      )}
+      {!!children && children}
+    </button>
+  );
+};
+
+// #region statics
+BackToTopButton.defaultProps = {
+  position: 'bottom-right',
+};
+
+BackToTopButton.displayName = 'BackToTopButton';
+// #endregion
+
+// #region helpers
+function setPosition(position = 'bottom-right', refStyle = defaultStyle): any {
+  const style = { ...refStyle };
+
+  switch (position) {
+    case 'bottom-right':
+      style.right = sideOffset;
+      style.left = '';
+      return style;
+
+    case 'bottom-left':
+      style.right = '';
+      style.left = sideOffset;
+      return style;
+
+    default:
+      return refStyle;
+  }
+}
+// #endregion
+
+export default BackToTopButton;

front/src/components/backToTop/backToTopButton/UpIcon.js

@@ -0,0 +1,32 @@
+// @flow
+
+// #region imports
+import React from 'react';
+// #endregion
+
+// #region flow types
+type Props = {
+  color: string,
+};
+// #endregion
+
+const UpIcon = ({ color }: Props) => {
+  return (
+    <svg width="24px" height="24px" viewBox="0 0 512 512" fill={`${color}`}>
+      <path
+        d="M256,213.7L256,213.7L256,213.7l174.2,167.2c4.3,4.2,11.4,4.1,15.8-0.2l30.6-29.9c4.4-4.3,4.5-11.3,0.2-15.5L264.1,131.1
+      c-2.2-2.2-5.2-3.2-8.1-3c-3-0.1-5.9,0.9-8.1,3L35.2,335.3c-4.3,4.2-4.2,11.2,0.2,15.5L66,380.7c4.4,4.3,11.5,4.4,15.8,0.2L256,213.7z"
+      />
+    </svg>
+  );
+};
+
+// #region statics
+UpIcon.defaultProps = {
+  color: '#F1F1F1',
+};
+
+UpIcon.displayName = 'UpIcon';
+// #endregion
+
+export default UpIcon;