Production Merge (#35)

* chore(project setup): setp linting and git hooks
[starts #171427560]

* chore(project setup): setp linting and git hooks

[starts #171427560]

* chore(project setup): update readme file

* chore(project setup): setup app folder structure (#3)

[finishes #171426236]

* chore(project setup): setup application routing (#4)

[finishes #171426234]

* Build the landing page  (#8)

* chore(landing page): create the navbar (#5)

[starts #171425807]

* chore(landing page): build the hero section (#6)

[starts #171425807]

* chore(landing page): build the books section (#7)

[starts #171425807]

* feature(landing page): build out the landing page

[delivers #171425807]

* feature(about page): build out the about us page (#9)

[delivers #171425831]

* feature(about page): build out the store page (#10)

[delivers #171425827]

* feature(login page): build out the login-page (#11)

[delivers #171426003]

* feature(login page): implement user login logic (#12)

[delivers #171426003]

* feature(login page): redirect to user profile page on successful login (#13)

[delivers #171426003]

* feature(login page): users can signup (#14)

[delivers #171425864]

* feature(users management): admin users can view the admin dashboard (#15)

[delivers #171514291]

* feature(users management): admin users can view all users

[delivers #171425964]

* feature(users management): admin users can update user accounts (#17)

[finishes #171427782]

* feature(users management): admin users can delete users (#18)

[accepts #171427786]

* feature(users management): admin users can export users to csv (#19)

[delivers #171426057]

* feature(users management): admin users can view all products (#20)

[delivers #171426061]

* feature(users management): admin users can edit products (#21)

[delivers #171426109]
[delivers #171426088]

* feature(users management): admin users can delete a product (#22)

[delivers #171426066]

* feature(products management): admin users can add a new product (#23)

[delivers #171426190]

* feature(orders management): admin users can view all orders (#24)

[delivers #171426127]

* feature(orders management): admin users can view edit an order (#25)

[delivers #171426185]

* feature(orders management): admin users can delete an order (#26)

[delivers #171426199]

* feature(store): fetch products from redux (#27)

* feature(dashboard): implement multilingual support (#28)

[delivers #171425840]

* feature(dashboard): implement pagination support for all the application (#29)

[delivers #171552899]

* feature(dashboard): implement filters on all records (#30)

[delivers #171556925]

* feature(dashboard): implement mobile responsiveness (#31)

[delivers #171564589]

* feature(codebase): clean ups, change the component name (#32)

* feature(routes): handle the 500 error page (#33)

[delivers #171483863]

* feature(readme): update the readme.md file (#34)

[delivers #171597620]

.commitlintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+	extends: ['@commitlint/config-conventional'],
+	rules: {
+		'body-leading-blank': [1, 'always'],
+		'footer-leading-blank': [1, 'always'],
+		'header-max-length': [2, 'always', 72],
+		'subject-case': [
+			2,
+			'never',
+			['sentence-case', 'start-case']
+		],
+		'subject-empty': [2, 'never'],
+		'subject-full-stop': [2, 'never', '.'],
+		'type-case': [2, 'always', 'lower-case'],
+		'type-empty': [2, 'never'],
+		'type-enum': [
+			2,
+			'always',
+			[ 'chore', 'feature', 'bug' ]
+		]
+	}
+};

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,27 @@
+#### What does this PR do?
+
+N/A
+
+#### Description of Task to be completed?
+
+N/A
+
+#### How should this be manually tested?
+
+N/A
+
+#### Any background context you want to provide?
+
+N/A
+
+#### What are the relevant PT stories?
+
+[#171425807](https://www.pivotaltracker.com/story/show/171425807)
+
+#### Screenshots (if appropriate)
+
+N/A
+
+#### Questions (If appropriate):
+
+N/A

README.md

@@ -1,4 +1,11 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project is hosted and served with [Netlify](https://active-learning.netlify.com/)
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/e37a97d1-aa9c-4d0d-ae1e-ec54ad86544c/deploy-status)](https://app.netlify.com/sites/active-learning/deploys)
+
+### Relevant Links
+
+- [x] Project Management - [Pivotal Tracker](https://www.pivotaltracker.com/n/projects/2435848)
+- [x] Repository - [Github](https://github.com/igbominadeveloper/active-learning-frontend)
 
 ## Available Scripts
 
@@ -12,11 +19,6 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br />
 You will also see any lint errors in the console.
 
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
 ### `yarn build`
 
 Builds the app for production to the `build` folder.<br />
@@ -26,19 +28,3 @@ The build is minified and the filenames include the hashes.<br />
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).

package.json

@@ -8,22 +8,50 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
+    "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.7",
+    "@types/react-router-dom": "^5.1.3",
+    "node-sass": "^4.13.1",
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.12.0",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
+    "react-toastify": "^5.5.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^0.88.2",
     "typescript": "~3.7.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}' --fix"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "*.+(js|jsx)": [
+      "eslint --fix"
+    ],
+    "*.+(json|css|md)": [
+      "prettier --write"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -35,5 +63,14 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^8.3.4",
+    "@types/redux-logger": "^3.0.7",
+    "husky": "^4.2.3",
+    "lint-staged": "^10.0.7",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-logger": "^3.0.6"
   }
 }

public/index.html

@@ -24,11 +24,18 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Active Learning</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
+    <script type="text/javascript">
+      function googleTranslateElementInit() {
+        new google.translate.TranslateElement({pageLanguage: 'en'}, 'app');
+      }
+      </script>
+      <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/App.tsx

@@ -1,26 +1,27 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
+import React, { Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+import Homepage from './pages/Homepage';
+import LoginPage from './pages/Login';
+import RegisterPage from './pages/Register';
+
+
+toast.configure({
+  autoClose: 3000,
+  draggable: false,
+});
+
+const App = () => (
+  <Suspense fallback={<div>Loading....</div>}>
+    <Switch>
+      <Route exact path="/login" component={LoginPage} />
+      <Route exact path="/register" component={RegisterPage} />
+      <Route path="/" component={Homepage} />
+    </Switch>
+  </Suspense>
+);
+
+export default App;