Migrate from create-react-app-typescript to official CRA

client/package.json

@@ -1,67 +1,77 @@
 {
-    "name": "client",
-    "version": "0.1.0",
-    "private": true,
-    "proxy": "http://localhost:3001",
-    "engines": {
-        "node": "10",
-        "yarn": "1.18.0"
-    },
-    "dependencies": {
-        "@nivo/bar": "^0.59.2",
-        "@nivo/line": "^0.59.3",
-        "@nivo/pie": "^0.59.1",
-        "babel-core": "^6.26.3",
-        "concurrently": "^4.0.1",
-        "firebase": "^7.5.2",
-        "less": "^3.8.1",
-        "less-plugin-clean-css": "^1.5.1",
-        "less-watch-compiler": "^1.12.1",
-        "moment": "^2.22.2",
-        "moment-timezone": "^0.5.21",
-        "react": "^16.8.0",
-        "react-datepicker": "1.3.0",
-        "react-dates": "^18.2.2",
-        "react-dom": "^16.8.0",
-        "react-ga": "^2.5.3",
-        "react-moment": "^0.8.2",
-        "react-numeric-input": "^2.2.3",
-        "react-router-dom": "^5.1.1",
-        "react-scripts": "1.1.5",
-        "react-scripts-ts": "2.17.0",
-        "rxfire": "^3.9.4",
-        "rxjs": "^6.5.3",
-        "semantic-ui-css": "^2.4.1",
-        "semantic-ui-react": "^0.88.1",
-        "tslint": "^5.11.0",
-        "tslint-react": "^3.2.0",
-        "yarn": "^1.10.1"
-    },
-    "scripts": {
-        "build": "react-scripts-ts build",
-        "build-less": "cd src/styles && less-watch-compiler ./ ./ index.less",
-        "deploy": "lessc --clean-css src/styles/index.less src/styles/index.min.css && yarn run build",
-        "eject": "react-scripts-ts eject",
-        "start": "concurrently \"yarn run build-less\" \"react-scripts-ts start\"",
-        "s": "yarn start",
-        "test": "react-scripts-ts test --env=jsdom"
-    },
-    "resolutions": {
-        "@types/react": "^16.8.4",
-        "@types/react-dom": "^16.8.4"
-    },
-    "devDependencies": {
-        "@types/jest": "^23.3.8",
-        "@types/lodash.flowright": "^3.5.4",
-        "@types/moment-timezone": "^0.5.9",
-        "@types/prop-types": "^15.5.6",
-        "@types/react": "^16.8.4",
-        "@types/react-datepicker": "^1.1.7",
-        "@types/react-dates": "^17.1.3",
-        "@types/react-dom": "^16.8.4",
-        "@types/react-numeric-input": "^2.2.3",
-        "@types/react-router": "^5.1.1",
-        "@types/react-router-dom": "^5.1.0",
-        "typescript": "^3.7.3"
-    }
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "proxy": "http://localhost:3001",
+  "dependencies": {
+    "@nivo/bar": "^0.59.2",
+    "@nivo/line": "^0.59.3",
+    "@nivo/pie": "^0.59.1",
+    "@types/node": "^12.12.15",
+    "babel-core": "^6.26.3",
+    "concurrently": "^4.0.1",
+    "firebase": "^7.5.2",
+    "less": "^3.8.1",
+    "less-plugin-clean-css": "^1.5.1",
+    "less-watch-compiler": "^1.12.1",
+    "moment": "^2.22.2",
+    "moment-timezone": "^0.5.21",
+    "react": "^16.8.0",
+    "react-datepicker": "1.3.0",
+    "react-dates": "^18.2.2",
+    "react-dom": "^16.8.0",
+    "react-ga": "^2.5.3",
+    "react-moment": "^0.8.2",
+    "react-numeric-input": "^2.2.3",
+    "react-router-dom": "^5.1.1",
+    "react-scripts": "^3.3.0",
+    "rxfire": "^3.9.4",
+    "rxjs": "^6.5.3",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^0.88.1",
+    "source-map-explorer": "^2.1.2",
+    "tslint": "^5.11.0",
+    "tslint-react": "^3.2.0",
+    "yarn": "^1.10.1"
+  },
+  "scripts": {
+    "build": "react-scripts build",
+    "build-less": "cd src/styles && less-watch-compiler ./ ./ index.less",
+    "deploy": "lessc --clean-css src/styles/index.less src/styles/index.min.css && yarn run build",
+    "eject": "react-scripts eject",
+    "start": "concurrently \"yarn run build-less\" \"react-scripts start\"",
+    "s": "yarn start",
+    "test": "react-scripts test --env=jsdom",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
+  },
+  "resolutions": {
+    "@types/react": "^16.8.4",
+    "@types/react-dom": "^16.8.4"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.23",
+    "@types/lodash.flowright": "^3.5.4",
+    "@types/moment-timezone": "^0.5.9",
+    "@types/prop-types": "^15.5.6",
+    "@types/react": "^16.9.16",
+    "@types/react-datepicker": "^1.1.7",
+    "@types/react-dates": "^17.1.3",
+    "@types/react-dom": "^16.9.4",
+    "@types/react-numeric-input": "^2.2.3",
+    "@types/react-router": "^5.1.1",
+    "@types/react-router-dom": "^5.1.0",
+    "typescript": "^3.7.3"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

client/src/components/App.tsx

@@ -15,7 +15,7 @@ import ProfessorPeopleView from './pages/ProfessorPeopleView';
 import { Analytics } from './includes/Analytics';
 import { Loader } from 'semantic-ui-react';
 import { userUpload } from '../firebasefunctions';
-import { useMyCourseUser } from 'src/firehooks';
+import { useMyCourseUser } from '../firehooks';
 
 ReactGA.initialize('UA-123790900-1');
 
@@ -42,7 +42,8 @@ const PrivateRoute = ({ component, requireProfessor, ...rest }: any) => {
     const courseId = requireProfessor ? rest.computedMatch.params.courseId : undefined;
 
     const [isLoggedIn, setIsLoggedIn] = React.useState(0);
-    const courseUser = courseId && useMyCourseUser(courseId);
+    const cu = useMyCourseUser(courseId);
+    const courseUser = courseId && cu;
 
     auth.onAuthStateChanged((user) => {
         if (user) {

client/src/components/includes/AddQuestion.tsx

@@ -5,7 +5,7 @@ import { Icon } from 'semantic-ui-react';
 
 import SelectedTags from '../includes/SelectedTags';
 import SessionAlertModal from './SessionAlertModal';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { collectionData, firestore, auth } from '../../firebase';
 import * as firebase from 'firebase';
@@ -23,13 +23,13 @@ class AddQuestion extends React.Component {
      * 50 - contents in question field - unlocks submit button
      * 60 - Warning modal (replaces question modal) - toggles after submit if n minutes are left in queue
      */
-    props: {
+    props!: {
         session: FireSession,
         course: FireCourse,
         mobileBreakpoint: number
     };
 
-    state: {
+    state!: {
         location: string,
         question: string,
         selectedTags: number[],
@@ -168,7 +168,7 @@ class AddQuestion extends React.Component {
             );
         }
 
-        var questionCharsLeft = this.props.course.charLimit - this.state.question.length;
+        let questionCharsLeft = this.props.course.charLimit - this.state.question.length;
 
         return (
             <div className="QuestionView" onKeyDown={(e) => this.handleKeyPressDown(e)} >

client/src/components/includes/Analytics.tsx

@@ -11,7 +11,7 @@ interface AnalyticsProps {
 }
 
 export class Analytics extends React.Component {
-    props: AnalyticsProps;
+    props!: AnalyticsProps;
 
     constructor(props: AnalyticsProps) {
         super(props);

client/src/components/includes/CalendarDateItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 class CalendarDateItem extends React.PureComponent {
-    props: {
+    props!: {
         index: number,
         active: boolean,
         day: string,

client/src/components/includes/CalendarDaySelect.tsx

@@ -11,20 +11,20 @@ const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
 
 class CalendarDaySelect extends React.Component {
 
-    props: {
+    props!: {
         callback: Function,
     };
 
-    state: {
+    state!: {
         selectedWeekEpoch: number,
         active: number
     };
 
     constructor(props: {}) {
         super(props);
-        var week = new Date(); // now
+        let week = new Date(); // now
         week.setHours(0, 0, 0, 0); // beginning of today (00:00:00.000)
-        var daysSinceMonday = ((week.getDay() - 1) + 7) % 7;
+        let daysSinceMonday = ((week.getDay() - 1) + 7) % 7;
         week.setTime(week.getTime() - daysSinceMonday * ONE_DAY); // beginning of this week's Monday
         this.state = {
             selectedWeekEpoch: week.getTime(),

client/src/components/includes/CalendarHeader.tsx

@@ -4,21 +4,21 @@ import { Icon } from 'semantic-ui-react';
 
 import { collectionData, firestore, loggedIn$ } from '../../firebase';
 import { docData } from 'rxfire/firestore';
-import { combineLatest } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { logOut } from '../../firebasefunctions';
 
 const QMeLogo = require('../../media/QLogo2.svg');
 const chevron = require('../../media/chevron.svg'); // Replace with dropdown cheveron
 
 class CalendarHeader extends React.Component {
-    props: {
+    props!: {
         currentCourseCode: string;
         role?: string;
         avatar?: string;
     };
 
-    state: {
+    state!: {
         showMenu: boolean;
         showCourses: boolean;
         courses: FireCourse[];
@@ -37,14 +37,14 @@ class CalendarHeader extends React.Component {
                         .collection('courseUsers')
                         .where('userId', '==', firestore.doc('users/' + user.uid)),
                     'courseUserId'
-                )
+                ) as Observable<FireCourseUser[]>
             )
         );
 
         // Get courses that the user is enrolled in
-        let courses$ = courseUsers$.pipe(
-            switchMap(courseUsers =>
-                combineLatest(...courseUsers.map((courseUser: FireCourseUser) =>
+        let courses$: Observable<FireCourse[]> = courseUsers$.pipe(
+            switchMap((courseUsers: FireCourseUser[]) =>
+                combineLatest(...courseUsers.map(courseUser =>
                     docData(firestore.doc(courseUser.courseId.path), 'courseId'))
                 )
             )

client/src/components/includes/CalendarSessionCard.tsx

@@ -20,7 +20,7 @@ const CalendarSessionCard = (props: {
 
     const tas: FireUser[] = []; // session.sessionTasBySessionId.nodes;
 
-    var timeDesc = '';
+    let timeDesc = '';
     return (
         <div className={(props.active && 'active') + ' CalendarSessionCard'} onClick={handleOnClick}>
             {props.includeBookmark && <div className="Bookmark" />}

client/src/components/includes/CalendarSessions.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { groupBy } from 'lodash';
 
 import CalendarSessionCard from './CalendarSessionCard';
-import { useQuery } from 'src/firehooks';
-import { firestore } from 'src/firebase';
+import { useQuery } from '../../firehooks';
+import { firestore } from '../../firebase';
 
 const CalendarSessions = (props: {
     activeSession?: FireSession;

client/src/components/includes/CalendarView.tsx

@@ -6,14 +6,14 @@ import CalendarDaySelect from './CalendarDaySelect';
 import CalendarSessions from './CalendarSessions';
 
 class CalendarView extends React.Component {
-    props: {
+    props!: {
         session?: FireSession,
         sessionCallback: (sessionId: string) => void,
         course?: FireCourse,
         courseUser?: FireCourseUser
     };
 
-    state: {
+    state!: {
         selectedDateEpoch: number,
         userId?: string,
     };
@@ -28,7 +28,7 @@ class CalendarView extends React.Component {
     }
 
     render() {
-        // var selectedDate = new Date(this.state.selectedDateEpoch);
+        // let selectedDate = new Date(this.state.selectedDateEpoch);
 
         return (
             <aside className="CalendarView">

client/src/components/includes/CalendarWeekSelect.tsx

@@ -8,25 +8,29 @@ class CalendarWeekSelect extends React.Component {
     monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
-    props: {
+    props!: {
         handleClick?: Function,
         selectedWeekEpoch?: number,
     };
 
-    state: {
+    state!: {
         selectedWeekEpoch: number
     };
 
-    constructor(props: {}) {
+    constructor(props: {
+        handleClick?: Function,
+        selectedWeekEpoch?: number,
+    }) {
         super(props);
-        if (this.props.selectedWeekEpoch) {
+        console.log(props);
+        if (props.selectedWeekEpoch) {
             this.state = {
-                selectedWeekEpoch: this.props.selectedWeekEpoch,
+                selectedWeekEpoch: props.selectedWeekEpoch,
             };
         } else {
-            var week = new Date();
+            let week = new Date();
             week.setHours(0, 0, 0, 0);
-            var daysSinceMonday = ((week.getDay() - 1) + 7) % 7;
+            let daysSinceMonday = ((week.getDay() - 1) + 7) % 7;
             week.setTime(week.getTime() - daysSinceMonday * ONE_DAY); // beginning of this week's Monday
             this.state = {
                 selectedWeekEpoch: week.getTime()
@@ -36,8 +40,8 @@ class CalendarWeekSelect extends React.Component {
     }
 
     // getWeekText(epoch: number): string {
-    //     var now = new Date(epoch);
-    //     var weekText = '';
+    //     let now = new Date(epoch);
+    //     let weekText = '';
     //     weekText += now.getDate();
     //     weekText += ' - ';
     //     now.setTime(now.getTime() +
@@ -47,12 +51,12 @@ class CalendarWeekSelect extends React.Component {
     // }
 
     getMonth(epoch: number): string {
-        var now = new Date(epoch);
+        let now = new Date(epoch);
         return this.monthNames[now.getMonth()];
     }
 
     getDay(epoch: number): number {
-        var now = new Date(epoch);
+        let now = new Date(epoch);
         return now.getDate();
     }