chore: 👉 typescript I (#802)

.prettierrc.json

@@ -2,5 +2,6 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "quoteProps": "as-needed"
 }

.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
-  stories: ['../src/**/*.stories.@(js|mdx|json)'],
+  stories: ['../src/**/*.stories.@(js|mdx|json|tsx)'],
   addons: ['@storybook/preset-create-react-app', '@storybook/addon-essentials'],
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
 };

CONTRIBUTING.md

@@ -2,13 +2,21 @@ Thank you so much for your willing to help! We and the community appreciate you
 
 We're using (from certain point, at least) the following tools. Please make sure you're using them too.
 
+## Typescript
+
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+
+We still have some `.js` files but please don't add more.
+For files with JSX syntax, use `.tsx` files, otherwise, use `.ts`.
+
 ## Styled Components 💅
 
 [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
- - We need to migrate some of the existing code).
+We need to migrate some of the existing code.
+
 Please don't use css in any other kind (global, css modules etc.)
 Currently, we don't have common styled-components (components that can be used in more than one component).
-If there is a case for this, consult us and we'll decide to gather.
+If there is a case for this, consult us and we'll decide together.
 
 
 ## Storybook 📖
@@ -26,6 +34,6 @@ We're using [cypress](https://www.cypress.io/). The tests are not blocker but pl
 
 We all are contributing our time to the community and that's great. In the other hand, we want to deliver the product to our users.
 When you ask for a task, please add to the comment, your time estimation and try to make it.
-If you see that you can't make it, please let us know so we could assign it to someone else. 
+If you see that you can't make it, please let us know so we could assign it to someone else.
 
-Don't hesitate to ask [Mosh](https://mentors.codingcoach.io/?name=Mosh+Feuchtwanger) or [Crysfel](https://mentors.codingcoach.io/?name=Crysfel+Villa) anything and we will do our best to help you.
+Don't hesitate to ask [Mosh](https://coding-coach.slack.com/team/UFL4N8ETE), [Crysfel](https://coding-coach.slack.com/team/UCQ9GL8UB) or [Brent](UHZHPRDFD) anything and we will do our best to help you.

README.md

@@ -4,6 +4,7 @@
 ![create-react-app supported](https://img.shields.io/badge/CRA-supported-green.svg)
 [![storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://mentors.codingcoach.io/sb/)
 [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
 
 
 ## Support Us

cypress.json

@@ -2,5 +2,6 @@
   "baseUrl": "http://localhost:3000",
   "videoUploadOnPasses": false,
   "defaultCommandTimeout": 60000,
-  "responseTimeout": 60000
+  "responseTimeout": 60000,
+  "supportFile": "cypress/support/index.ts"
 }

cypress/builders/response.ts

@@ -0,0 +1,9 @@
+export const withSuccess = <T>(data?: T) => ({
+  success: true,
+  data,
+});
+
+export const withError = (errors: string[]) => ({
+  success: false,
+  errors,
+});

cypress/builders/users/current/get.ts

@@ -0,0 +1,28 @@
+import { User } from '../../../../src/types/models';
+
+const defaults: User = {
+  _id: '1',
+  title: 'One of the best',
+  name: 'Brent M Clark',
+  email: '[email protected]',
+  roles: ['Mentor'],
+  avatar:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtBAMAAADINP+pAAAAG1BMVEXMzMyWlpa+vr6xsbG3t7fFxcWqqqqjo6OcnJzvcxCxAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAANElEQVQ4jWNgGAUjGDCZpcBJZMBsgiCRgat5M4OJAohEBYlCigzhYBINGCcD1YPIUTCsAADs9gb4p4yG2QAAAABJRU5ErkJggg==',
+  spokenLanguages: ['en', 'he'],
+  country: 'US',
+  tags: ['cypress', 'react', 'typescript'],
+  available: false,
+  channels: [
+    {
+      id: '[email protected]',
+      type: 'email',
+    },
+  ],
+};
+
+export const userBuilder = (user: Partial<User> = {}) => {
+  return {
+    ...defaults,
+    ...user,
+  };
+};

cypress/integration/login.spec.js

@@ -1,9 +1,11 @@
+import { withSuccess } from '../builders/response';
+import { userBuilder } from '../builders/users/current/get';
 const { cy } = global;
 
 describe('login', () => {
   it('should be able to login a user', () => {
     cy.login();
-    cy.intercept('GET', '/users/current', { fixture: 'users/current/get' });
+    cy.intercept('GET', '/users/current', withSuccess(userBuilder()));
     cy.intercept('GET', '/mentors?limit=*', { fixture: 'mentors/get' });
     cy.visit('/');
     cy.getByTestId('user-avatar')

cypress/integration/me/edit-profile.spec.ts

@@ -0,0 +1,64 @@
+import { User } from '../../../src/types/models';
+import { withSuccess } from '../../builders/response';
+import { userBuilder } from '../../builders/users/current/get';
+
+const driverFactory = () => {
+  let user: Partial<User> = {};
+
+  return {
+    given: {
+      user: (_user: Partial<User>) => {
+        user = _user;
+      },
+    },
+    init() {
+      cy.intercept('GET', '/users/current', withSuccess(userBuilder(user)));
+      cy.intercept('PUT', '/users/1', withSuccess());
+      cy.login();
+      cy.visit('/me');
+      openEditModal();
+    },
+  };
+};
+
+const openEditModal = () => {
+  cy.get('button')
+    .should('have.text', 'Edit')
+    .click();
+};
+
+describe('Me / edit profile', () => {
+  let driver: ReturnType<typeof driverFactory>;
+
+  beforeEach(() => {
+    driver = driverFactory();
+  });
+
+  it('should form has the user details', () => {
+    driver.init();
+    cy.get('input[name="name"]').should('have.value', 'Brent M Clark');
+  });
+
+  it('should show validation message when missing required fields', () => {
+    driver.given.user({ title: '' });
+    driver.init();
+
+    cy.contains('button', 'Save').click();
+
+    cy.get('div').should(
+      'include.text',
+      'The following fields is missing or invalid'
+    );
+  });
+
+  it('should show success toast upon successful submit', () => {
+    driver.init();
+
+    cy.contains('button', 'Save').click();
+
+    cy.get('.Toastify').should(
+      'include.text',
+      'Your details updated successfully'
+    );
+  });
+});

cypress/integration/me/home.spec.ts

@@ -0,0 +1,25 @@
+import { withSuccess } from '../../builders/response';
+import { userBuilder } from '../../builders/users/current/get';
+
+describe('Me / home', () => {
+  before(() => {
+    cy.intercept('GET', '/users/current', withSuccess(userBuilder()));
+    cy.login();
+    cy.visit('/me');
+  });
+
+  describe('Avatar', () => {
+    it('should present user avatar', () => {
+      cy.get(`img[alt="[email protected]"]`);
+    });
+  });
+
+  describe('Details', () => {
+    it('should present user details', () => {
+      cy.getByTestId('email-label').should(
+        'have.text',
+        '[email protected]'
+      );
+    });
+  });
+});

cypress/integration/mentors.js

@@ -1,10 +1,13 @@
+import { withSuccess } from '../builders/response';
+import { userBuilder } from '../builders/users/current/get';
+
 const { before, cy } = global;
 
 describe('Mentor Filtering', () => {
   before(() => {
     cy.login();
     cy.server({ urlMatchingOptions: { matchBase: false, dot: true } });
-    cy.intercept('GET', '/users/current', { fixture: 'users/current/get' });
+    cy.intercept('GET', '/users/current', withSuccess(userBuilder()));
     cy.intercept('GET', '/mentors?limit=*', { fixture: 'mentors/get' });
     cy.visit('/');
   });

cypress/integration/mentorship-requests.spec.js

@@ -1,11 +1,14 @@
 /* eslint-disable no-undef */
-import userData from '../fixtures/users/current/get.json';
+import { userBuilder } from '../builders/users/current/get';
+import { withSuccess } from '../builders/response';
+
 import reqData from '../fixtures/mentorship-requests/get.json';
 import { STATUS } from '../../src/helpers/mentorship';
 
 const { cy } = global;
 
-const { data: user } = userData;
+const response = withSuccess(userBuilder());
+const { data: user } = response;
 const { data: requests } = reqData;
 const reqType = {
   approved: requests.find(({ status }) => status === STATUS.approved),
@@ -18,7 +21,7 @@ const regex = ({ mentee: { id } }) => new RegExp(`User ${id}`);
 describe('Mentorship Requests', () => {
   before(function() {
     cy.login();
-    cy.intercept('GET', '/users/current', { fixture: 'users/current/get' });
+    cy.intercept('GET', '/users/current', withSuccess(user));
     cy.intercept('GET', `/mentorships/${user._id}/requests`, {
       fixture: 'mentorship-requests/get',
     });

cypress/support/index.js → cypress/support/index.ts

@@ -1,9 +1,18 @@
+/// <reference types="cypress" />
+
 import './commands';
 import '@testing-library/cypress/add-commands';
 
-let polyfill;
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(): Chainable<Element>;
+      getByTestId(testId: string): Chainable<Element>;
+    }
+  }
+}
 
-const { before, cy, Cypress } = global;
+let polyfill: string;
 
 // Polyfill window.fetch because there is no native support from Cypress yet
 // Adapted from: https://github.com/cypress-io/cypress/issues/95#issuecomment-517594737
@@ -15,6 +24,7 @@ before(() => {
 
 // use `Cypress` instead of `cy` so this persists across all tests
 Cypress.on('window:before:load', win => {
+  /* tslint:disable-next-line */
   delete win.fetch;
   win.eval(polyfill);
 });

cypress/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "isolatedModules": true,
+    // be explicit about types included
+    // to avoid clashing with Jest types
+    "types": ["cypress"]
+  },
+  "include": [
+    "../node_modules/cypress",
+    "./**/*.ts",
+    "../src/types/models.d.ts"
+  ]
+}

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@sentry/browser": "^5.6.3",
     "auth0-js": "^9.13.2",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "express": "^4.17.1",
     "inquirer-autocomplete-prompt": "^1.0.1",
     "inquirer-checkbox-plus-prompt": "^1.0.1",
@@ -43,6 +43,7 @@
     "prettier:fix": "prettier \"**/*.{json,js}\" --write",
     "cy:run": "concurrently -kill-others --success first \"yarn storybook\" \"cypress run\"",
     "cy:open": "concurrently -kill-others --success first \"yarn storybook\" \"cypress open\"",
+    "cy:open:tests": "concurrently -kill-others --success first \"BROWSER=none yarn start | cypress open\" \"cypress open\"",
     "test:e2e": "is-ci \"test:e2e:run\" \"test:e2e:dev\"",
     "test:e2e:run": "start-server-and-test start http://localhost:3000 cy:run",
     "test:e2e:dev": "start-server-and-test start http://localhost:3000 cy:open",
@@ -52,7 +53,8 @@
   "eslintConfig": {
     "extends": "react-app",
     "rules": {
-      "import/no-anonymous-default-export": "off"
+      "import/no-anonymous-default-export": "off",
+      "no-console": "warn"
     }
   },
   "browserslist": [
@@ -69,7 +71,14 @@
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.3",
+    "@types/classnames": "^2.3.1",
+    "@types/jest": "^26.0.23",
+    "@types/lodash": "^4.14.170",
+    "@types/node": "^15.12.2",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.7",
     "@types/react-router-dom": "^5.1.4",
+    "@types/react-select": "^4.0.15",
     "@types/styled-components": "^5.1.0",
     "ajv": "^6.10.2",
     "concurrently": "^5.3.0",
@@ -88,7 +97,8 @@
     "object-path": "^0.11.5",
     "ora": "^3.4.0",
     "prettier": "^1.18.2",
-    "start-server-and-test": "^1.10.0"
+    "start-server-and-test": "^1.10.0",
+    "typescript": "^4.3.2"
   },
   "license": "MIT",
   "resolutions": {

src/Me/Header/Header.test.js → src/Me/Header/Header.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import Header from './Header';
 

src/Me/Main.js → src/Me/Main.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
+import { FC } from 'react';
 import styled from 'styled-components/macro';
 import { desktop, mobile } from './styles/shared/devices';
 import { mobileNavHeight } from './Navigation/Navbar';
+import { useUser } from '../context/userContext/UserContext';
 
-const Main = ({ children }) => {
+const Main: FC = ({ children }) => {
+  const { currentUser } = useUser();
+  if (!currentUser) {
+    return null;
+  }
   return <Content>{children}</Content>;
 };