ch(sidebar): design sidebar of project

- design top side
- design left side
- design right side
- add style
- add icons
- test sidebar component
- responsive page
- add toggle menu
- [Finish 170529662]

package.json

@@ -43,14 +43,13 @@
     "jest-html-reporters": "^1.2.1",
     "jsonwebtoken": "^8.5.1",
     "maxios": "^1.0.4",
-    "moxios": "^0.4.0",
     "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "query-string": "^6.9.0",
-    "react-facebook-login": "^4.1.1",
-    "react-google-login": "^5.0.7",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-facebook-login": "^4.1.1",
+    "react-google-login": "^5.0.7",
     "react-hot-loader": "^4.12.18",
     "react-loader-spinner": "^3.1.5",
     "react-redux": "^7.1.3",
@@ -63,7 +62,6 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0",
     "sass-loader": "^8.0.0",
     "serve": "^11.2.0",
     "sinon": "^8.0.2",
@@ -88,9 +86,11 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "fetch-mock": "^8.3.1",
     "file-loader": "^5.0.2",
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^6.0.0",
+    "moxios": "^0.4.0",
     "node-sass": "^4.13.0",
     "prettier": "^1.19.1",
     "react-hot-loader": "^4.12.18",

src/App.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import dotenv from 'dotenv';
+import axios from 'axios';
 import resetPasswordView from './containers/user/password/resetPassword';
 import forgotPasswordView from './views/forgotPasswordView';
 import store from './redux/store';
@@ -9,8 +11,14 @@ import VerifyEmail from './views/auth/VerifyEmail';
 import Signin from './containers/user/signin/signin';
 import Notfound from './NotFound';
 import SocialLogin from './containers/user/social/SocialAuthLogin';
-import Dashboard from './views/Dashboard/index';
-import './assets/css/App.scss';
+import './assets/css/style.scss';
+
+import TempA from './views/temp/TempA';
+import TempB from './views/temp/TempB';
+
+dotenv.config();
+
+axios.defaults.BASE_URL = process.env.BASE_URL;
 
 const App = () => (
   <Provider store={store}>
@@ -19,16 +27,18 @@ const App = () => (
         <Switch>
           <Route path="/signin" exact component={Signin} />
           <Route path="/social/auth/success" exact component={SocialLogin} />
-          <Route path="/dashboard" exact component={Dashboard} />
           <Route path="/dashboard" exact component={VerifyEmail} />
           <Route path="/signup" exact component={Signup} />
           <Route path="/reset-password" exact component={resetPasswordView} />
           <Route path="/forgot-password" exact component={forgotPasswordView} />
+          <Route path="/dashboard" exact component={VerifyEmail} />
+          <Route path="/tempA" exact component={TempA} />
+          <Route path="/tempB" exact component={TempB} />
           <Route component={Notfound} />
         </Switch>
       </div>
     </Router>
   </Provider>
-)
+);
 
 export default App;

src/__mocks__/fileMock.js

@@ -27,5 +27,99 @@ const mockData = {
     type: 'ACTION_FAIL_ERRORS',
     payload: 'I am error',
   },
+  sidebarProps: {
+    click: jest.fn(),
+    backdropClickHandler: jest.fn(),
+    drawerToggleClickHandler: jest.fn(),
+    drawerClickHandler: jest.fn(),
+    mapStateToProps: jest.fn(),
+    mapDispatchToProps: jest.fn(),
+    show: true,
+    sideDrawerOpen: true,
+    image: 'image.jpg',
+    firstName: 'John',
+    lastName: 'Doe',
+    profile: {
+      viewProfile: {
+        profile: 'data profile',
+      },
+    },
+    profileError: 'profileError',
+    state: {
+      viewProfile: {
+        profile: 'data',
+      },
+      profileError: 'error',
+      sideDrawerOpen: 'function',
+      children: 'children component',
+    },
+    prevProps: {
+      profile: {
+        data: {
+          imageURL: 'Iamge.jpeg',
+          user: {
+            firstName: 'John',
+            lastName: 'Doe',
+          },
+        },
+      },
+    },
+    UNSAFE_componentWillReceiveProps: jest.fn(),
+    getCurrentUserinfo: jest.fn(),
+  },
+  userProfileMockData: {
+    spinnerStatusAction: (data) => {
+      return {
+        type: 'SPINNER_STATUS',
+        spinner: data,
+      };
+    },
+    successfulyProfileReducer: (data) => {
+      return {
+        type: 'FETCH_PROFILE_SUCCESS',
+        payload: data,
+      };
+    },
+    failedProfileReducer: (data) => {
+      return {
+        type: 'FETCH_PROFILE_ERROR',
+        payload: data,
+      };
+    },
+    successResponse: {
+      profileInformation: {
+        data: {
+          firstName: 'John',
+          lastName: 'Doe',
+          img: 'dummy.image',
+        },
+      },
+    },
+    errorResponse: {
+      error: {
+        response: {
+          data: {
+            info: 'No profile',
+          },
+        },
+      },
+    },
+    fetchUsersSuccessAction: (profileInformation) => {
+      return {
+        type: 'FETCH_PROFILE_SUCCESS',
+        payload: profileInformation.data,
+      };
+    },
+    fetchUsersFailure: (error) => {
+      return {
+        type: 'FETCH_PROFILE_ERROR',
+        payload: error.response.data,
+      };
+    },
+    userProfileMocData: {
+      getProfile: jest.fn(),
+      updateSpinnerStatus: jest.fn(),
+    },
+  },
 };
 export default mockData;

src/__tests__/__snapshots__/sidebar.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expect SideDrawer to render Expect side drawer nav to render without problem 1`] = `ShallowWrapper {}`;
+
+exports[`Expect TopRightSide to render Expect TopRightSide to render without problem 1`] = `ShallowWrapper {}`;