Merge pull request #874 from Ignitus/develop

Master > Develop
Ignitus · Jul 11, 2020 · 46250ee · 46250ee
2 parents 86d51a1 + 3f7e192
commit 46250ee
Show file tree

Hide file tree

Showing 106 changed files with 3,939 additions and 4,041 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,15 +1,13 @@
-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'],
+export const 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'],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,8 +42,8 @@
     "@types/eslint": "^6.1.8",
     "@types/jest": "^25.1.3",
     "@types/node": "^13.7.4",
-    "@types/react-dom": "^16.8.2",
     "@types/react": "16.9.23",
+    "@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",
@@ -56,8 +56,10 @@
     "eslint": "6.8.0",
     "eslint-config-airbnb": "18.1.0",
     "eslint-config-airbnb-typescript": "7.2.1",
+    "eslint-config-prettier": "6.11.0",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "2.5.1",
     "husky": "^1.0.0-rc.13",
@@ -67,8 +69,6 @@
     "jest-localstorage-mock": "^2.2.0",
     "prettier": "1.17.0",
     "sw-precache": "^5.2.1",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-prettier": "3.1.3",
     "typescript": "^3.1.6"
   },
   "jest": {

diff --git a/src/ignitus-AboutPage/ignitus-Team/Components/index.tsx b/src/ignitus-AboutPage/ignitus-Team/Components/index.tsx
@@ -33,7 +33,7 @@ export const Team = withErrorBoundary(
   }: TeamPropType) => {
     useEffect(() => {
       getContributorsData();
-    }, []);
+    }, [getContributorsData]);
 
     if (isFetching) {
       return <S.Loader />;

diff --git a/src/ignitus-Authentication/ignitus-CommonLoginInterface/sagas.ts b/src/ignitus-Authentication/ignitus-CommonLoginInterface/sagas.ts
@@ -9,6 +9,7 @@ function* signIn(action) {
   const { email, password, userType } = action;
   try {
     const data = yield call(api.signIn, email, password, userType);
+    console.log('success', data);
     if (!data.data.data) {
       /* eslint-disable no-throw-literal */
       throw { ...data };
@@ -18,7 +19,7 @@ function* signIn(action) {
       yield put(a.logInResponse(data.data));
     }
   } catch (e) {
-    yield put(a.logInResponse(e.data));
+    yield put(a.logInResponse(e.response.data));
   }
 }
 

diff --git a/src/ignitus-Authentication/ignitus-ProfessorSignUp/Components/index.tsx b/src/ignitus-Authentication/ignitus-ProfessorSignUp/Components/index.tsx
@@ -14,7 +14,7 @@ export const SignUp: React.FC<Props> = withErrorBoundary(
 
     const { email, password, confirmPassword } = state;
 
-    useEffect(() => () => clearPreviousSignUp(), []);
+    useEffect(() => () => clearPreviousSignUp(), [clearPreviousSignUp]);
 
     const handleSubmit = e => {
       e.preventDefault();

diff --git a/...thentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.tsx b/...thentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.tsx
@@ -18,10 +18,6 @@ export const EmailConfirmationFlow: FunctionComponent = withErrorBoundary(
   () => (
     <T.WelcomeContainer>
       <T.TopSection>
-        <T.Progress
-          src="https://storage.googleapis.com/ignitus_assets/ig-assets/progressSix.png"
-          alt="progress-bar"
-        />
         <C.NewsletterImage src={newsletter} alt="newsletter" />
         <C.TopMiddleSection>
           <Heading2>Your email has been confirmed.</Heading2>

diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.tsx b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.tsx
@@ -2,24 +2,18 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { FunctionComponent } from 'react';
-import { Link } from 'react-router-dom';
 import newsletter from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/newsletterIcon.png';
 import {
   Paragraph,
   Heading2,
   withErrorBoundary,
-  Button,
 } from '../../../../ignitus-Shared';
 import * as T from '../../ignitus-WelcomeFlow/Styles/style';
 import * as C from '../Styles/style';
 
 export const EmailFlow: FunctionComponent = withErrorBoundary(() => (
   <T.WelcomeContainer>
     <T.TopSection>
-      <T.Progress
-        src="https://storage.googleapis.com/ignitus_assets/ig-assets/progressFive.png"
-        alt="progress-bar"
-      />
       <C.NewsletterImage src={newsletter} alt="newsletter" />
       <Heading2>Let’s confirm your email.</Heading2>
       <Paragraph>
@@ -31,18 +25,5 @@ export const EmailFlow: FunctionComponent = withErrorBoundary(() => (
         Click the link we sent to [email protected] to confirm you email.
       </Paragraph>
     </T.TopSection>
-    <T.BottomSection>
-      <C.ButtonContainer>
-        <Button size="large" category="primary">
-          <Link to="/flow/emailConfirmationFlow">Email confirmed</Link>
-        </Button>
-        <Button size="large" category="white">
-          <Link to="/">I don’t see the email</Link>
-        </Button>
-      </C.ButtonContainer>
-      <Paragraph>
-        <Link to="/">I don’t want to confirm my email yet.</Link>
-      </Paragraph>
-    </T.BottomSection>
   </T.WelcomeContainer>
 ));
diff --git a/...gnitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Components/index.tsx b/...gnitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Components/index.tsx
@@ -3,11 +3,9 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { FunctionComponent } from 'react';
-import { Link } from 'react-router-dom';
 import {
   Paragraph,
   Heading1,
-  RoundedButton,
   DefaultCheckbox,
   withErrorBoundary,
 } from '../../../../ignitus-Shared';
@@ -17,10 +15,6 @@ import * as C from '../Styles/style';
 export const InterestFlow: FunctionComponent = withErrorBoundary(() => (
   <T.WelcomeContainer>
     <T.TopSection>
-      <T.Progress
-        src="https://storage.googleapis.com/ignitus_assets/ig-assets/progressTwo.png"
-        alt="progress-bar"
-      />
       <Heading1>What are you interested in?</Heading1>
       <Paragraph>This will customize your experience.</Paragraph>
       <Paragraph>
@@ -52,14 +46,5 @@ export const InterestFlow: FunctionComponent = withErrorBoundary(() => (
         />
       </C.RightSection>
     </T.MiddleSection>
-    <T.BottomSection>
-      <RoundedButton size="large" category="primary">
-        <Link to="/flow/emailFlow">Save & Continue</Link>
-      </RoundedButton>
-      <Paragraph>
-        Skip for now
-        {' >> '}
-      </Paragraph>
-    </T.BottomSection>
   </T.WelcomeContainer>
 ));
diff --git a/...nitus-Authentication/ignitus-StudentSignUpFlow/ignitus-StudentSignUp/Components/index.tsx b/...nitus-Authentication/ignitus-StudentSignUpFlow/ignitus-StudentSignUp/Components/index.tsx
@@ -13,7 +13,7 @@ export const Signup: FunctionComponent<Props> = withErrorBoundary(
     const [state, setState] = useState(SignupStatePayload);
     const { email, password, confirmPassword } = state;
 
-    useEffect(() => () => clearPreviousSignUp(), []);
+    useEffect(() => () => clearPreviousSignUp(), [clearPreviousSignUp]);
 
     const handleSubmit = e => {
       e.preventDefault();

diff --git a/...ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-WelcomeFlow/Components/index.tsx b/...ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-WelcomeFlow/Components/index.tsx
@@ -1,10 +1,8 @@
 /* eslint-disable import/extensions */
 import React, { FunctionComponent } from 'react';
-import { Link } from 'react-router-dom';
 import {
   Paragraph,
   Heading1,
-  RoundedButton,
   DefaultDropdown,
   withErrorBoundary,
 } from '../../../../ignitus-Shared';
@@ -13,10 +11,6 @@ import * as T from '../Styles/style';
 export const WelcomeFlow: FunctionComponent = withErrorBoundary(() => (
   <T.WelcomeContainer>
     <T.TopSection>
-      <T.Progress
-        src="https://storage.googleapis.com/ignitus_assets/ig-assets/progressOne.png"
-        alt="progress-bar"
-      />
       <Heading1>Welcome, Sophia</Heading1>
       <Paragraph>
         Let’s start with your profile. This will get you successful on Ignitus
@@ -59,14 +53,5 @@ export const WelcomeFlow: FunctionComponent = withErrorBoundary(() => (
         />
       </T.RightSection>
     </T.MiddleSection>
-    <T.BottomSection>
-      <RoundedButton size="large" category="primary">
-        <Link to="/flow/interestFlow">Save & Continue</Link>
-      </RoundedButton>
-      <Paragraph>
-        Skip for now
-        {' >> '}
-      </Paragraph>
-    </T.BottomSection>
   </T.WelcomeContainer>
 ));
diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-WelcomeFlow/Styles/style.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-WelcomeFlow/Styles/style.ts
@@ -28,10 +28,6 @@ export const MiddleSection = styled.div`
   flex-wrap: wrap;
 `;
 
-export const BottomSection = styled(flexibleColDiv)`
-  margin-top: 2rem;
-`;
-
 export const LeftSection = styled(flexibleColDiv)`
   ${minimumWidthQuery[2]} {
     margin-right: none;

diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/index.tsx b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/index.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable import/extensions */
+import React, { FunctionComponent, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { InterestFlow } from './ignitus-InterestFlow/Components';
+import { WelcomeFlow } from './ignitus-WelcomeFlow/Components';
+import { EmailFlow } from './ignitus-EmailFlow/Components';
+import { EmailConfirmationFlow } from './ignitus-EmailConfirmationFlow/Components';
+import {
+  withErrorBoundary,
+  RoundedButton,
+  Paragraph,
+  Button,
+} from '../../ignitus-Shared';
+import { Progress } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Progress/Components/Progress';
+
+import * as T from './style';
+
+export const StudentSignUpFlow: FunctionComponent = withErrorBoundary(() => {
+  const [current, updateCurrent] = useState(1);
+  const steps = 4;
+
+  const next = () =>
+    current === steps + 1 ? null : updateCurrent(current + 1);
+
+  return (
+    <T.Container>
+      <Progress steps={steps} current={current} />
+
+      {current && current === 1 && <WelcomeFlow />}
+      {current && current === 2 && <InterestFlow />}
+      {current && current === 3 && (
+        <React.Fragment>
+          <EmailFlow />
+          <T.BottomSection>
+            <T.ButtonContainer>
+              <Button size="large" category="primary" onClick={next}>
+                Email confirmed
+              </Button>
+              <Button size="large" category="white">
+                <Link to="/">I don’t see the email</Link>
+              </Button>
+            </T.ButtonContainer>
+            <Paragraph>
+              <Link to="/">I don’t want to confirm my email yet.</Link>
+            </Paragraph>
+          </T.BottomSection>
+        </React.Fragment>
+      )}
+      {current && current === 4 && <EmailConfirmationFlow />}
+
+      {current !== 3 && current !== 4 && (
+        <T.BottomSection>
+          <RoundedButton size="large" category="primary" onClick={next}>
+            Save & Continue
+          </RoundedButton>
+          <Paragraph>
+            Skip for now
+            {' >> '}
+          </Paragraph>
+        </T.BottomSection>
+      )}
+    </T.Container>
+  );
+});
diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/style.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/style.ts
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import {
+  flexibleColDiv,
+  BottomRow,
+} from '../../ignitus-Shared/ignitus-DesignSystem/shared';
+
+export const Container = styled(flexibleColDiv)`
+  background: white;
+  margin-top: 4rem;
+  padding: 2rem;
+`;
+
+export const BottomSection = styled(flexibleColDiv)`
+  margin-top: 2rem;
+`;
+
+export const NewsletterImage = styled.img``;
+
+export const ButtonContainer = styled(BottomRow)``;
diff --git a/src/ignitus-Dashboard/ignitus-DashboardHeader/Components/index.tsx b/src/ignitus-Dashboard/ignitus-DashboardHeader/Components/index.tsx
@@ -1,19 +1,32 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react';
+import React, { useState } from 'react';
 
-import { Redirect } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { withErrorBoundary, AppIcon, useToggle } from '../../../ignitus-Shared';
 import * as N from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/styles';
+import { Overlay } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Overlay/Components';
+
+const OVERLAY_DURATION = 600;
 
 export const DashBoardNavigation: React.FC = withErrorBoundary(
-  ({ logUserOut }: any) => {
+  withRouter(({ logUserOut, history }: any) => {
+    const [visibleLogoutOverlay, setVisibleLogoutOverlay] = useState(false);
+    const [isExpanded, toogleIsExpanded] = useToggle(false);
+
     const logout = () => {
       logUserOut();
       localStorage.clear();
-      return <Redirect to="/" />;
+      history.push('/');
+    };
+
+    const onClickLogout = () => {
+      setVisibleLogoutOverlay(true);
+
+      setTimeout(() => {
+        logout();
+      }, OVERLAY_DURATION);
     };
 
-    const [isExpanded, toogleIsExpanded] = useToggle(false);
     const userInformation: string | null = localStorage.getItem('data');
     let userEmail: string = '';
     let userType: string = '';
@@ -47,17 +60,26 @@ export const DashBoardNavigation: React.FC = withErrorBoundary(
             <N.NavigationLink to="#">{userEmail}</N.NavigationLink>
           </N.NavigationLinkItem>
 
-          <N.NavigationLinkItem onClick={logout}>
+          <N.NavigationLinkItem onClick={onClickLogout}>
             <N.NavigationLink to="#">Logout</N.NavigationLink>
           </N.NavigationLinkItem>
         </N.NavigationLinks>
 
+        {visibleLogoutOverlay && (
+          <N.Fullscreen>
+            <Overlay
+              primaryText="You are now logged out."
+              secondaryText="See you soon!"
+            />
+          </N.Fullscreen>
+        )}
+
         <N.Burger
           onClick={toogleIsExpanded}
           name={AppIcon.KeyBoardArrowRight}
           isExpanded={isExpanded}
         />
       </N.Navigation>
     );
-  },
+  }),
 );