Merge pull request #17 from oslabs-beta/samtran/feature

Samtran/feature

Author: llam722

src/app/components/Tutorial.tsx

@@ -1,15 +1,17 @@
 /* eslint-disable react/sort-comp */
 /* eslint-disable lines-between-class-members */
 /* eslint-disable react/static-property-placement */
-//@ts-nocheck
+
 import * as React from 'react';
 import { Component } from 'react';
-import { Steps } from 'intro.js-react';
 import 'intro.js/introjs.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
 
+//Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. 
+const { Steps } = require('intro.js-react');
+
 interface tutorialProps {
   dispatch: (object) => void;
   currentTabInApp: string;
@@ -22,14 +24,21 @@ interface tutorialState {
 // This is the tutorial displayed when the "How to use" button is clicked
 // This needs to be a class component to be compatible with updateStepElement from intro.js
 export default class Tutorial extends React.Component<tutorialProps, tutorialState> {
-  constructor(props:tutorialProps) {
+  constructor(props: tutorialProps) {
     super(props);
     this.state = {
       stepsEnabled: false,
     };
   }
 
-  public props: tutorialProps;
+  //tutorial class needs these public variables to be a valid class component for ts when rendered in buttonscontainer.tsx
+  public context: any;
+  public setState: any;
+  public forceUpdate: any;
+  public props: any;
+  public state: any;
+  public refs: any;
+
   render(): JSX.Element {
     const { currentTabInApp, dispatch } = this.props;
 

src/app/containers/ButtonsContainer.tsx

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -12,6 +10,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { importSnapshots, toggleMode, toggleSplit } from '../actions/actions';
 import { useStoreContext } from '../store';
+
 import Tutorial from '../components/Tutorial';
 
 function exportHandler(snapshots: []) {
@@ -35,15 +34,18 @@ function importHandler(dispatch: (a: unknown) => void) {
   const fileUpload = document.createElement('input');
   fileUpload.setAttribute('type', 'file');
 
-  fileUpload.onchange = (e) => {
+  fileUpload.onchange = (e: Event) => {
     const reader = new FileReader();
     reader.onload = () => {
       const test = reader.result.toString();
       return dispatch(importSnapshots(JSON.parse(test)));
     };
-    if (e.target.hasOwnProperty('files')) {
-      const eventFiles: unknown = e.target;
-      reader.readAsText(eventFiles.files[0]);
+    const eventFiles = e.target as HTMLInputElement;
+    if (eventFiles?.hasOwnProperty('files')) {
+      // const eventFiles = target as HTMLInputElement;
+      if (eventFiles) {
+        reader.readAsText(eventFiles.files[0]);
+      }
     }
   };
 

src/app/containers/MainContainer.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable max-len */
-// @ts-nocheck
 import React, { useEffect, useState } from 'react';
-import Split from 'react-split';
 import ActionContainer from './ActionContainer';
 import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
@@ -19,6 +17,9 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
+//Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. 
+const Split = require('react-split');
+
 function MainContainer(): JSX.Element {
   const [store, dispatch] = useStoreContext();
   const {

src/backend/__tests__/linkFiber.test.tsx

@@ -6,8 +6,8 @@
 /* eslint-disable import/order */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/jsx-filename-extension */
-//@ts-nocheck
-import React, { Component } from 'react';
+import { string } from 'prop-types';
+import React, { useState } from 'react';
 import { render } from 'react-dom';
 import linkFiberStart from '../linkFiber';
 
@@ -24,17 +24,17 @@ let snapShot;
 let browser;
 let page;
 
-class App extends Component{
-  state: { foo: string; };
-  constructor(props) {
-    super(props);
-    this.state = { foo: 'bar' };
-  }
-
-  render() {
-    const { foo } = this.state;
-    return <div>{foo}</div>;
-  }
+interface fooState {
+  foo: string,
+  setFoo?: (string) => void
+}
+function App(): JSX.Element {
+  const [fooState, setFooState] = useState({
+    foo: 'bar',
+  });
+  return (
+    <div>{fooState}</div>
+  );
 }
 
 xdescribe('unit test for linkFiber', () => {