migration

Author: MacKentoch

front/src/components/privateRoute/PrivateRoute.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router';
+
+// #region types
+type Props = {
+  component: any;
+  checkUserIsConnected: () => { isAuthenticated: boolean };
+} & RouteComponentProps;
+// #endregion
+
+function PrivateRoute(props: Props) {
+  const { component: InnerComponent, ...rest } = props;
+  const { location, checkUserIsConnected } = props;
+
+  const { isAuthenticated = false } = !!window && checkUserIsConnected();
+
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        isAuthenticated ? (
+          <InnerComponent {...props} />
+        ) : (
+          <Redirect to={{ pathname: '/login', state: { from: location } }} />
+        )
+      }
+    />
+  );
+}
+
+PrivateRoute.displayName = 'PrivateRoute';
+
+export default PrivateRoute;

front/src/components/privateRoute/PrivateRoute.tsx

@@ -1,18 +1,13 @@
-// @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 { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { Router, Switch } from 'react-router';
 import { Route } from 'react-router';
 import createHistory from 'history/createHashHistory';
 import PrivateRoute from '../PrivateRoute';
-// #endregion
 
 // #region constants
 const history = createHistory();
-const Home = p => {
+const Home = (p: any) => {
   p.history.push('/protected');
   return <p>home</p>;
 };
@@ -24,21 +19,19 @@ describe('PrivateRoute component', () => {
       checkIsAuthenticated: () => true,
     };
 
-    const component = renderer
-      .create(
-        <Router history={history}>
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <PrivateRoute
-              {...props}
-              path="/protected"
-              component={() => <p>private</p>}
-            />
-            <Route exact path="/login" component={() => <p>login</p>} />
-          </Switch>
-        </Router>,
-      )
-      .toJSON();
+    const component = shallow(
+      <Router history={history}>
+        <Switch>
+          <Route exact path="/" component={Home} />
+          <PrivateRoute
+            {...props}
+            path="/protected"
+            component={() => <p>private</p>}
+          />
+          <Route exact path="/login" component={() => <p>login</p>} />
+        </Switch>
+      </Router>,
+    );
     expect(component).toMatchSnapshot();
   });
 

front/src/components/privateRoute/__tests__/PrivateRoute.test.js renamed to front/src/components/privateRoute/__tests__/PrivateRoute.test.tsx

@@ -1,9 +1,5 @@
-// @flow
-
-// #region imports
 import { compose } from 'redux';
 import PrivateRoute from './PrivateRoute';
 import withAuth from '../../contexts/auth/consumerHOC';
-// #endregion
 
 export default compose(withAuth())(PrivateRoute);