feature(requests-table):Implement requests table [Finishes #171380698]

.babelrc

@@ -1,4 +1,12 @@
 {
-    "presets": ["@babel/preset-env","@babel/preset-react"],
-    "plugins": ["transform-class-properties"]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "transform-class-properties",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-regenerator",
+    "@babel/plugin-transform-runtime"
+  ]
 }

.codeclimate.yml

@@ -0,0 +1,10 @@
+version: "2"
+checks:
+  method-lines:
+    config:
+      threshold: 40
+  method-complexity:
+    config:
+      threshold: 6
+exclude_patterns:
+- "**/__tests__/"

.env.example

@@ -1,2 +1,8 @@
 #TO RUN THE SERVER
-PORT= #ADD PORT NUMBER HERE
+REACT_APP_PORT= #APP PORT_NUMBER GOES HERE
+
+# API BASE URL
+REACT_APP_API_URL= #BACKEND API BASE URL eg: https://bft-nmd-stag.herokuapp.com/api
+
+# TESTING TOKEN
+REACT_APP_SOME_TOKEN= # JWT_TOKEN eg: eyJhbGciO....

.eslintrc.json

@@ -33,6 +33,9 @@
         }
     ],
     "react/no-array-index-key": 0,
-    "jsx-a11y/anchor-is-valid": 0
+    "jsx-a11y/anchor-is-valid": 0,
+    "no-shadow": 0,
+    "no-nested-ternary": 0,
+    "react/jsx-props-no-spreading": 0
     }
 }

jest.config.js

@@ -7,6 +7,7 @@ module.exports = {
     '!src/entry/server.js',
     '!src/utils/customMessages.js',
     '!webpack.config.js',
+    '!src/assets/**',
   ],
   coverageDirectory: 'coverage',
   coveragePathIgnorePatterns: ['/node_modules/', '/__tests__'],

package.json

@@ -34,14 +34,19 @@
   "homepage": "https://github.com/Stackup-Rwanda/stackup2-barefoot-frontend#readme",
   "dependencies": {
     "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/polyfill": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.9.4",
     "@material-ui/core": "^4.10.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.55",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-links": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
     "@testing-library/react": "^10.0.4",
+    "axios": "^0.19.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
@@ -59,29 +64,35 @@
     "jest": "^26.0.1",
     "jest-html-reporters": "^1.2.1",
     "jest-transform-stub": "^2.0.0",
+    "less-loader": "^6.1.0",
     "mini-css-extract-plugin": "^0.9.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-loader-spinner": "^3.1.14",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
+    "react-slick": "^0.26.1",
     "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^2.3.0",
+    "slick-carousel": "^1.8.1",
     "style-loader": "^1.2.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   },
   "devDependencies": {
+    "dotenv-webpack": "^1.8.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^2.5.1",
+    "moxios": "^0.4.0",
     "node-sass": "^4.14.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2"

src/__tests__/data/data.js

@@ -0,0 +1,32 @@
+const requests = {
+  tripRequests: [
+    {
+      id: 1,
+      trips: [
+        {
+          travelDate: '2020-09-15',
+          travelFrom: 'Kigali',
+          travelTo: 'Durban',
+        },
+      ],
+      travelReason: 'Africa Tech Summit',
+      accommodation: true,
+      status: 'pending',
+    },
+    {
+      id: 2,
+      trips: [
+        {
+          travelDate: '2020-09-10',
+          travelFrom: 'Kigali',
+          travelTo: 'Dubai',
+        },
+      ],
+      travelReason: 'Africa Tech Summit',
+      accommodation: true,
+      status: 'pending',
+    },
+  ],
+};
+
+export default requests;

src/assets/styles/sass/index.scss

@@ -43,10 +43,28 @@ body {
   align-items: center;
 }
 
+.brand-link {
+  font-size: 18pt;
+  font-weight: 700;
+  text-decoration: none !important;
+
+  &:hover {
+    text-decoration: none !important;
+  }
+
+  &:focus {
+    text-decoration: none !important;
+  }
+}
+
 .brand-barefoot {
   color: $secondary;
 }
 
+.brand-nomad {
+  color: $background-light;
+}
+
 .navlink-signup {
   margin-left: 16px !important;
 }
@@ -137,21 +155,41 @@ body {
 }
 
 .testimony-item {
-  display: flex;
+  display: flex !important;
   flex-direction: row;
   justify-content: center;
   align-items: center;
 }
 
+.slick-arrow {
+  display: none !important;
+}
+
 .testimony-reviewer {
-  background: url(../../images/reviewer.svg);
   background-position: center;
-  background-repeat: no-repeat;
+  background-repeat: no-repeat !important;
   background-size: cover;
   width: 298px;
   min-height: 485px;
 }
 
+.musk {
+  background: url(../../images/reviewer.svg);
+}
+
+.dorsey {
+  background: url(../../images/dorsey.svg);
+}
+
+.mastermind {
+  display: none;
+}
+
+.mastermind-content {
+  min-height: 485px;
+  justify-content: center !important;
+}
+
 .testimony-content {
   display: flex;
   flex-direction: column;
@@ -169,6 +207,10 @@ body {
   font-size: 14pt;
 }
 
+.testimony-description {
+  margin-left: 2px;
+}
+
 .testimony-author {
   font-size: 10pt;
 }
@@ -290,6 +332,19 @@ body {
 }
 
 @media (max-width: 575.98px) {
+  .brand-link {
+    font-size: 16pt;
+    font-weight: 700;
+    text-decoration: none !important;
+    &:hover {
+      text-decoration: none !important;
+    }
+
+    &:focus {
+      text-decoration: none !important;
+    }
+  }
+
   .description-wrapper {
     width: 100%;
     margin-left: 0;
@@ -303,12 +358,24 @@ body {
     flex-direction: column;
   }
 
+  .slick-list {
+    padding: 0 !important;
+  }
+
+  .slick-active {
+    width: 360px !important;
+  }
+
   .testimony-content {
     flex-direction: column;
     justify-content: center;
     margin: 24px 0 24px 0;
   }
 
+  .testimony-description {
+    font-size: 12pt;
+  }
+
   .socials {
     width: 50%;
   }

src/components/CustomCard/__tests__/CustomCard.test.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { createMount } from '@material-ui/core/test-utils';
+import Link from '@material-ui/core/Link';
+import { cleanup } from '@testing-library/react';
+import CustomCard from '../CustomCard';
+
+const title = 'Our Company';
+const items = ['Careers', 'About', 'Vision'];
+
+describe('<CustomCard />', () => {
+  afterEach(() => cleanup);
+
+  it('Should match the CustomCard snapshot', () => {
+    const component = createMount()(
+      <CustomCard title={title} items={items} />,
+    );
+
+    expect(component.html).toMatchSnapshot();
+    expect(component.find(Link)).toHaveLength(3);
+  });
+});

src/components/CustomCard/__tests__/__snapshots__/CustomCard.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CustomCard /> Should match the CustomCard snapshot 1`] = `[Function]`;