[Build, Compiler, Refactor] Upgrade typescript and add optional-chaining and nullish-coalescing

.gitignore

@@ -10,6 +10,7 @@ tests/reports
 mattermost-webapp.iml
 .vscode/
 junit.xml
+coverage
 
 # disable folders generated by Cypress
 e2e/node_modules

babel.config.js

@@ -30,6 +30,8 @@ const config = {
  '@babel/proposal-object-rest-spread',
  'react-hot-loader/babel',
  'babel-plugin-typescript-to-proptypes',
+ '@babel/plugin-proposal-optional-chaining',
+ '@babel/plugin-proposal-nullish-coalescing-operator'
  ],
 };
 

package.json

@@ -65,15 +65,17 @@
  "reselect": "4.0.0",
  "semver": "6.3.0",
  "superagent": "5.1.0",
- "typescript": "3.6.4",
+ "typescript": "3.7.4",
  "xregexp": "4.2.4",
  "zen-observable": "0.8.14"
  },
  "devDependencies": {
  "@babel/cli": "7.6.4",
  "@babel/core": "7.6.4",
  "@babel/plugin-proposal-class-properties": "7.5.5",
+ "@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",
  "@babel/plugin-proposal-object-rest-spread": "7.6.2",
+ "@babel/plugin-proposal-optional-chaining": "7.7.5",
  "@babel/plugin-syntax-dynamic-import": "7.2.0",
  "@babel/preset-env": "7.6.3",
  "@babel/preset-react": "7.6.3",

utils/youtube.js

@@ -4,32 +4,32 @@
 export const ytRegex = /(?:http|https):\/\/(?:www\.|m\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&?]*)/;
 
 export function handleYoutubeTime(link) {
- const timeRegex = /[\\?&](t|start|time_continue)=([0-9]+h)?([0-9]+m)?([0-9]+s?)/;
+ const timeRegex = /[\\?&](t|time|start|time_continue)=([0-9]+h)?([0-9]+m)?([0-9]+s?)/;
 
  const time = link.match(timeRegex);
- if (!time || !time[0]) {
+ if (!time?.[0]) {
  return '';
  }
 
- const hours = time[2] ? time[2].match(/([0-9]+)h/) : null;
- const minutes = time[3] ? time[3].match(/([0-9]+)m/) : null;
- const seconds = time[4] ? time[4].match(/([0-9]+)s?/) : null;
+ const hours = time[2]?.match(/([0-9]+)h/) ?? null;
+ const minutes = time[3]?.match(/([0-9]+)m/) ?? null;
+ const seconds = time[4]?.match(/([0-9]+)s?/) ?? null;
 
- let ticks = 0;
+ let startSeconds = 0;
 
- if (hours && hours[1]) {
- ticks += parseInt(hours[1], 10) * 3600;
+ if (hours?.[1]) {
+ startSeconds += parseInt(hours[1], 10) * 3600;
  }
 
- if (minutes && minutes[1]) {
- ticks += parseInt(minutes[1], 10) * 60;
+ if (minutes?.[1]) {
+ startSeconds += parseInt(minutes[1], 10) * 60;
  }
 
- if (seconds && seconds[1]) {
- ticks += parseInt(seconds[1], 10);
+ if (seconds?.[1]) {
+ startSeconds += parseInt(seconds[1], 10);
  }
 
- return '&start=' + ticks.toString();
+ return `&start=${startSeconds}`;
 }
 
 export function getVideoId(link) {
@@ -39,4 +39,4 @@ export function getVideoId(link) {
  }
 
  return match[1];
-}
+}

utils/youtube.test.js

@@ -5,7 +5,7 @@ import {handleYoutubeTime} from 'utils/youtube';
 
 describe('Utils.YOUTUBE', () => {
  test('should correctly parse youtube start time formats', () => {
- for (const youtube of [
+ for (const {link, time} of [
  {
  link: 'https://www.youtube.com/watch?time_continue=490&v=xqCoNej8Zxo',
  time: '&start=490',
@@ -18,8 +18,28 @@ describe('Utils.YOUTUBE', () => {
  link: 'https://www.youtube.com/watch?t=490&v=xqCoNej8Zxo',
  time: '&start=490',
  },
+ {
+ link: 'https://www.youtube.com/watch?time=490&v=xqCoNej8Zxo',
+ time: '&start=490',
+ },
+ {
+ link: 'https://www.youtube.com/watch?time=8m10s&v=xqCoNej8Zxo',
+ time: '&start=490',
+ },
+ {
+ link: 'https://www.youtube.com/watch?time=1h8m10s&v=xqCoNej8Zxo',
+ time: '&start=4090',
+ },
+ {
+ link: 'https://www.youtube.com/watch?v=xqCoNej8Zxo',
+ time: '',
+ },
+ {
+ link: 'https://www.youtube.com/watch?time=&v=xqCoNej8Zxo',
+ time: '',
+ },
  ]) {
- expect(handleYoutubeTime(youtube.link)).toEqual(youtube.time);
+ expect(handleYoutubeTime(link)).toEqual(time);
  }
  });
-});
+});