Merge pull request #604 from Ignitus/develop

Release to Master ☘️.

* Folder restructuring.  Issue: #579, PR: #602 
* Service worker fixes ★. 
* Common LogIn/SignUp UI. ★ Issue: #477, #565. PR: #548.
* Navigator UI Added. Issue: #559, PR: #593 🚀
* UI for Error Boundary. Issue: #578, PR: #598  🎉

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  jest: {
+    verbose: true,
+    transform: {
+      '^.+\\.js$': 'babel-jest',
+      '^.+\\.(css|scss|less)$': 'jest-css-modules',
+    },
+    transformIgnorePatterns: ['/node_modules/'],
+    globals: {
+      NODE_ENV: 'test',
+    },
+    moduleFileExtensions: ['js', 'jsx'],
+    moduleDirectories: ['src'],
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ignitus-client-side-development",
-  "version": "3.0.0",
+  "version": "5.0.0",
   "private": true,
   "engines": {
     "node": "8.16.2"
@@ -16,6 +16,7 @@
     "@emotion/core": "^10.0.22",
     "@emotion/styled": "^10.0.23",
     "@sentry/browser": "^5.10.1",
+    "@types/react": "16.9.23",
     "axios": "^0.18.0",
     "bootstrap": "^4.3.1",
     "codecov": "^3.3.0",
@@ -33,12 +34,12 @@
     "react-redux": "^7.0.2",
     "react-router-dom": "^4.4.0-beta.6",
     "react-router-hash-link": "^1.2.0",
-    "react-scripts": "^3.3.0",
+    "react-scripts": "^3.2.0",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.0",
     "reselect": "^4.0.0",
-    "typescript": "^3.8.2"
+    "typescript": "^3.1.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -55,8 +56,7 @@
     "@types/jest": "^25.1.3",
     "@types/lodash": "^4.14.149",
     "@types/node": "^13.7.4",
-    "@types/react": "^16.9.22",
-    "@types/react-dom": "^16.9.5",
+    "@types/react-dom": "^16.8.2",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "5.1.3",
     "@types/redux-logger": "3.0.7",

src/App.tsx

@@ -1,7 +1,6 @@
-
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import { withErrorBoundary } from './ignitus-Internals';
+import { withErrorBoundary } from './ignitus-Shared/Components/errorBoundary';
 import { ProtectedRoutes } from './ignitus-Routes/protectedRoutes';
 // eslint-disable-next-line import/named
 import { PublicRoutes } from './ignitus-Routes/publicRoutes';

src/ignitus-About/Components/About.tsx

@@ -1,10 +1,10 @@
 import React, {Fragment} from 'react';
 import Team from '../../ignitus-Team';
 import CoreTeam from '../../ignitus-CoreTeam';
-import {withErrorBoundary} from '../../ignitus-Internals';
+import {withErrorBoundary} from '../../ignitus-Shared/Components/errorBoundary';
 import * as t from '../constants';
 import * as S from '../Styles';
-import * as T from '../../ignitus-Helpers/emotion-Styles/shared';
+import * as T from '../../ignitus-Shared/Components/emotionStyles/shared';
 
 const About = () => (
   <Fragment>

src/ignitus-About/Styles/index.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import * as T from '../../ignitus-Helpers/emotion-Styles/shared';
-import * as F from '../../ignitus-Helpers/emotion-Styles/font';
+import * as T from '../../ignitus-Shared/Components/emotionStyles/shared';
+import * as F from '../../ignitus-Shared/Components/emotionStyles/font';
 
 const breakpoints: number[] = [576, 768, 992, 1200];
 const mq: string[] = breakpoints.map(bp => `@media (min-width: ${bp}px)`);

src/ignitus-Api/constants.ts

@@ -4,9 +4,9 @@ export const TESTIMONIAL_URL = `${BASE_URL}/testimonials`;
 export const STUDENT_SIGN_UP = `${BASE_URL}/register/student`;
 export const STUDENT_SIGN_IN = `${BASE_URL}/login`;
 
-export const FRONTEND_CONTRIBUTOR_API = 'https://api.github.com/repos/Ignitus/Ignitus-Client-Side-Development/contributors?per_page=14';
+export const FRONTEND_CONTRIBUTOR_API = 'https://api.github.com/repos/Ignitus/Ignitus-Client-Side-Development/contributors?per_page=7';
 
-export const BACKEND_CONTRIBUTOR_API = 'https://api.github.com/repos/Ignitus/Ignitus-rest-api/contributors';
+export const BACKEND_CONTRIBUTOR_API = 'https://api.github.com/repos/Ignitus/Ignitus-rest-api/contributors?per_page=7';
 
 export const CONTRIBUTORS_STORE = 'contributors';
 export const TESTIMONIALS_STORE = 'testimonials';

src/ignitus-Authentication/ignitus-Common-Auth-Student-Prof/Components/commonLoginRegister.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withErrorBoundary } from '../../../ignitus-Shared/Components/errorBoundary';
+import * as t from './constants';
+import '../Styles/style.scss';
+
+interface Props {
+  title: string;
+  studentRoute: string;
+  professorRoute: string;
+}
+
+function commonLoginRegister(props: Props): React.ComponentType {
+  const {title, studentRoute, professorRoute} = props;
+
+  const SignInPage = () => (
+    <div className="col-lg-12 col-sm-12 col-md-12 col-12 container-bg">
+      <div className="p-0 p-sm-5 pt-5">
+        <div className="col-lg-7 col-md-8 col-sm-12 col-12 mt-5 box-container">
+          <div className="login-signup m-top">
+            <h3>{title}</h3>
+            <p> Who are you? </p>
+          </div>
+          <div className="row mt-5">
+            <div className="col-lg-5 col-md-5 ml-lg-5 ml-md-4 col-sm-5 col p-0 h-50 common-auth-ui-css">
+              <p className="mb-5 text-center common-ui-text">Student</p>
+              <Link to={studentRoute}>
+                <img
+                  alt="Student auth"
+                  className="img-fluid"
+                  src={t.studentAuth}
+                />
+              </Link>
+            </div>
+            <div className="col-lg-5 col-md-5 ml-lg-4 ml-md-4 col-sm-5 ml-sm-4 col p-0 common-auth-ui-css">
+              <p className="mb-5 text-center common-ui-text">Professor</p>
+              <Link to={professorRoute}>
+                <img
+                  alt="Professor auth"
+                  className="img-fluid"
+                  src={t.professorAuth}
+                />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return withErrorBoundary(SignInPage);
+}
+
+export const CommonLoginUI = commonLoginRegister({
+  title: 'Sign In',
+  studentRoute: '/login/student',
+  professorRoute: '/login/professor',
+});
+
+export const CommonSignUpUI = commonLoginRegister({
+  title: 'Sign Up',
+  studentRoute: '/signup/student',
+  professorRoute: '/signup/professor',
+});

src/ignitus-Authentication/ignitus-Common-Auth-Student-Prof/Components/constants.ts

@@ -0,0 +1,2 @@
+export const studentAuth: string = 'https://storage.googleapis.com/ignitus_assets/ig-assets/Assets_studentAuth.svg';
+export const professorAuth: string = 'https://storage.googleapis.com/ignitus_assets/ig-assets/Assets_professorAuth.svg';

src/ignitus-Authentication/ignitus-Common-Auth-Student-Prof/Components/createSignInPage.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withErrorBoundary } from '../../../ignitus-Shared/Components/errorBoundary';
+import * as t from './constants';
+import '../Styles/style.scss';
+
+interface Props {
+  title: string;
+  studentRoute: string;
+  professorRoute: string;
+}
+
+function commonLoginRegister(props: Props): React.ComponentType {
+  const {title, studentRoute, professorRoute} = props;
+
+  const SignInPage = () => (
+    <div className="col-lg-12 col-sm-12 col-md-12 col-12 container-bg">
+      <div className="p-5">
+        <div className="col-lg-7 col-md-8 col-sm-12 col-8 box-container">
+          <div className="login-signup m-top">
+            <h3>{title}</h3>
+            <p> Who are you? </p>
+          </div>
+          <div className="row mt-4">
+            <div className=" col-lg-5 col-md-5 ml-lg-5 ml-md-4 col-sm-5 p-0 common-auth-ui-css">
+              <p className="mb-5 text-center common-ui-text">Student</p>
+              <Link to={studentRoute}>
+                <img
+                  alt="Student auth"
+                  className="img-fluid"
+                  src={t.studentAuth}
+                />
+              </Link>
+            </div>
+            <div className="col-lg-5 col-md-5 ml-lg-4  ml-md-4 col-sm-5 ml-sm-4 p-0 common-auth-ui-css">
+              <p className="mb-5 text-center common-ui-text">Professor</p>
+              <Link to={professorRoute}>
+                <img
+                  alt="Professor auth"
+                  className="img-fluid"
+                  src={t.professorAuth}
+                />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return withErrorBoundary(SignInPage);
+}
+
+export const CommonLoginUI = commonLoginRegister({
+  title: 'Sign In',
+  studentRoute: '/login/student',
+  professorRoute: '/login/professor',
+});
+
+export const CommonSignUpUI = commonLoginRegister({
+  title: 'Sign Up',
+  studentRoute: '/signup/student',
+  professorRoute: '/signup/professor',
+});

src/ignitus-Common-Auth-Student-Prof/Styles/style.scss → src/ignitus-Authentication/ignitus-Common-Auth-Student-Prof/Styles/style.scss

@@ -1,5 +1,5 @@
 // import ignitus token variables
-@import "./src/shared/styles/ignitus-components-common";
+@import "./src/ignitus-Shared/styles/ignitus-components-common";
 
 $background-color: #fac76f;
 $white-color: #ffffff;

src/ignitus-ProfessorLogin/Components/login.js → src/ignitus-Authentication/ignitus-ProfessorLogin/Components/login.js

@@ -1,26 +1,23 @@
+/* eslint-disable react/jsx-filename-extension */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
 import React, { useState } from 'react';
-import { withErrorBoundary } from '../../ignitus-Internals';
-import { statePayload } from '../../shared/Components/Login/Constants';
-import SharedLogin from '../../shared/Components/Login/Login';
+import { withErrorBoundary } from '../../../ignitus-Shared/Components/errorBoundary';
+import { statePayload } from '../../../ignitus-Shared/Components/Login/Constants';
+import SharedLogin from '../../../ignitus-Shared/Components/Login/Login';
 
-const Login = ({ logInRequest, professorLogInData }) => {
-  // dummy values
-  logInRequest = () => {};
-  professorLogInData = {
+const Login = () => {
+  // Dummy Implementation.
+  const professorLogInData = {
     isFetching: false,
     message: '',
     success: false,
   };
-  // remove above dummy values once implemented
-
   const [state, setState] = useState(statePayload);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    // professor login logic here
   };
 
   return (

src/ignitus-Authentication/ignitus-ProfessorLogin/Styles/style.scss

@@ -0,0 +1,3 @@
+// import ignitus token variables
+@import './src/ignitus-Shared/styles/ignitus-components-common';
+

src/ignitus-ProfessorSignUp/Components/Signup.js → src/ignitus-Authentication/ignitus-ProfessorSignUp/Components/Signup.js

@@ -1,9 +1,10 @@
+/* eslint-disable react/jsx-filename-extension */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import { Link } from 'react-router-dom';
 import * as t from './Constants';
-import { withErrorBoundary } from '../../ignitus-Internals';
+import { withErrorBoundary } from '../../../ignitus-Shared/Components/errorBoundary';
 import '../Styles/style.scss';
 
 class Signup extends React.Component {
@@ -26,7 +27,7 @@ class Signup extends React.Component {
                 <p>Help providing opportunities for your students</p>
                 <p>
                   <Link to="/signup/student" className="text-center linkform">
-                  {' '}
+                    {' '}
                     I am a Student
                   </Link>
                 </p>

src/ignitus-Authentication/ignitus-ProfessorSignUp/Styles/style.scss

@@ -0,0 +1,3 @@
+// import ignitus token variables
+@import './src/ignitus-Shared/styles/ignitus-components-common';
+

src/ignitus-StudentLogin/Components/Login.js → src/ignitus-Authentication/ignitus-StudentLogin/Components/Login.js

@@ -4,9 +4,9 @@
 import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
-import { withErrorBoundary } from '../../ignitus-Internals';
-import SharedLogin from '../../shared/Components/Login/Login';
-import { statePayload } from '../../shared/Components/Login/Constants';
+import { withErrorBoundary } from '../../../ignitus-Shared/Components/errorBoundary';
+import SharedLogin from '../../../ignitus-Shared/Components/Login/Login';
+import { statePayload } from '../../../ignitus-Shared/Components/Login/Constants';
 
 const Login = ({ logInRequest, studentLoginData }) => {
   const [state, setState] = useState(statePayload);

src/ignitus-Authentication/ignitus-StudentLogin/Styles/style.scss

@@ -0,0 +1,2 @@
+// import ignitus token variables
+@import './src/ignitus-Shared/styles/ignitus-components-common';

src/ignitus-Authentication/ignitus-StudentLogin/constants.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const NAME = 'studentLoginReducer';

src/ignitus-StudentLogin/sagas.js → src/ignitus-Authentication/ignitus-StudentLogin/sagas.js

@@ -1,7 +1,7 @@
 import { effects } from 'redux-saga';
 import * as t from './actionTypes';
 import * as a from './actions';
-import * as api from '../ignitus-Api';
+import * as api from '../../ignitus-Api';
 
 const {
  call, put, takeLatest, all,

src/ignitus-StudentSignUp/Components/Signup.js → src/ignitus-Authentication/ignitus-StudentSignUp/Components/Signup.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import loader from '../../ignitus-Assets/Images/loader2.gif';
+import loader from '../../../ignitus-Assets/Images/loader2.gif';
 import * as t from './Constants';
-import { withErrorBoundary } from '../../ignitus-Internals';
+import { withErrorBoundary } from '../../../ignitus-Shared/Components/errorBoundary';
 
 import '../Styles/style.scss';
 

src/ignitus-Authentication/ignitus-StudentSignUp/Styles/style.scss

@@ -0,0 +1,2 @@
+@import './src/ignitus-Shared/styles/ignitus-components-common';
+

src/ignitus-Authentication/ignitus-StudentSignUp/constants.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const NAME = 'studentSignUpReducer';

src/ignitus-StudentSignUp/sagas.js → src/ignitus-Authentication/ignitus-StudentSignUp/sagas.js

@@ -3,7 +3,7 @@
 import { effects } from 'redux-saga';
 import * as t from './actionTypes';
 import * as a from './actions';
-import * as api from '../ignitus-Api';
+import * as api from '../../ignitus-Api';
 
 const {
   call, put, takeLatest, all,