Merge pull request #311 from oslabs-beta/master

Reactime 19 release!

Author: minzo-kim

.babelrc

@@ -1,6 +1,4 @@
 {
-  "presets": [
-    "airbnb"
-  ],
+  "presets": ["airbnb", "@babel/preset-typescript"],
   "plugins": ["@emotion"]
-}
+}

.eslintrc

@@ -3,10 +3,12 @@
     "airbnb",
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:testing-library/react", // added in for RTL tests
+    "plugin:jest-dom/recommended" // added in for RTL tests
   ],
   "root": true,
-  "plugins": ["jest", "react", "react-hooks", "@typescript-eslint"],
+  "plugins": ["jest", "react", "react-hooks", "@typescript-eslint", "testing-library", "jest-dom"],
   "rules": {
     "arrow-parens": [2, "as-needed"],
     "import/no-unresolved": "off",

README.md

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Row from "./Row";
-import { BoardText, BoardContent, Scoreboard, Player } from "../types/types";
+import { BoardContent, Scoreboard, Player } from "../types/types";
 
 type BoardState = {
   board: BoardContent;
@@ -11,7 +11,7 @@ type BoardState = {
 };
 
 class Board extends Component<{}, BoardState> {
-  constructor(props: any) {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       board: this.newBoard(),
@@ -25,7 +25,7 @@ class Board extends Component<{}, BoardState> {
     this.handleBoxClick = this.handleBoxClick.bind(this);
   }
 
-  componentDidUpdate() {
+  componentDidUpdate():void {
     this.checkForWinner();
   }
 
@@ -127,7 +127,7 @@ class Board extends Component<{}, BoardState> {
     this.setState({ board: boardCopy, currentPlayer: newPlayer });
   }
 
-  render() {
+  render(): JSX.Element {
     const rows: Array<JSX.Element> = [];
     for (let i = 0; i < 3; i++) {
       rows.push(
@@ -139,7 +139,7 @@ class Board extends Component<{}, BoardState> {
         />
       );
     }
-    const { X, O }: Scoreboard = this.state.scoreboard;
+    // const { X, O }: Scoreboard = this.state.scoreboard;
 
     return (
       <div className="board">

assets/frontend-diagram.png

@@ -7,7 +7,7 @@ type BoxProps = {
   handleBoxClick: (row: number, column: number) => void;
 };
 
-const Box = (props: BoxProps) => {
+const Box = (props: BoxProps): JSX.Element => {
   return (
     <button
       className="box"

assets/v19/Overview.gif

@@ -1,6 +1,6 @@
 import Increment from './Increment';
 
-export default function Buttons() {
+export default function Buttons(): JSX.Element {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
     buttons.push(<Increment key={i} />);

assets/v19/history.gif

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-export default function Increment() {
+export default function Increment(): JSX.Element {
   const [count, setCount] = useState(0);
 
   return (

assets/v19/map.gif

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-export default function Navbar() {
+export default function Navbar(): JSX.Element {
   return (
     <div className='nav'>
       <Link className='link' href='/'>

assets/v19/performance.gif

@@ -0,0 +1,6 @@
+import "../../styles/style.css";
+import React from "react"
+
+export default function MyApp({ Component, pageProps }): JSX.Element {
+  return <Component {...pageProps} />;
+}

assets/v19/tree-and-diff.gif

@@ -1,7 +1,7 @@
 import Buttons from "../../components/Buttons";
 import Navbar from "../../components/navbar";
 
-export default function ButtonsPage() {
+export default function ButtonsPage(): JSX.Element {
   return (
     <div>
       <Navbar />

demo-app-next/src/components/Board.tsx

@@ -1,6 +1,7 @@
 import Navbar from "../components/navbar";
+import React from "react"
 
-export default function Home() {
+export default function Home():JSX.Element {
   return (
     <div>
       <Navbar />

demo-app-next/src/components/Box.tsx

@@ -1,7 +1,7 @@
 import Board from '../../components/Board';
 import Navbar from '../../components/navbar';
 
-export default function BoardPage() {
+export default function BoardPage():JSX.Element {
   return (
     <div>
       <Navbar />

demo-app-next/src/components/Buttons.tsx

@@ -31,6 +31,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
-    "ts-node": "^10.4.0"
+    "ts-node": "^10.4.0",
+    "use-immer": "^0.9.0"
   }
 }

demo-app-next/src/components/Increment.tsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import Row from './Row';
-import { BoardText, BoardContent, Scoreboard, Player } from './../../types';
+import { BoardContent, Scoreboard, Player } from './../../types';
+//Took away BoardText from import 
 
+//thinking about changing this to an interface
 type BoardState = {
   board: BoardContent;
   currentPlayer: Player;
@@ -10,8 +12,9 @@ type BoardState = {
   scoreboard: Scoreboard;
 };
 
+//changed props to unknown instead of any
 class Board extends Component<{}, BoardState> {
-  constructor(props: any) {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       board: this.newBoard(),
@@ -25,7 +28,8 @@ class Board extends Component<{}, BoardState> {
     this.handleBoxClick = this.handleBoxClick.bind(this);
   }
 
-  componentDidUpdate() {
+  //added void
+  componentDidUpdate(): void {
     this.checkForWinner();
   }
 
@@ -111,14 +115,15 @@ class Board extends Component<{}, BoardState> {
     this.setState({ board: boardCopy, currentPlayer: newPlayer });
   }
 
-  render() {
+  //added type for render
+  render(): JSX.Element {
     const rows: Array<JSX.Element> = [];
     for (let i = 0; i < 3; i++) {
       rows.push(
         <Row key={i} row={i} handleBoxClick={this.handleBoxClick} values={this.state.board[i]} />,
       );
     }
-    const { X, O }: Scoreboard = this.state.scoreboard;
+    // const { X, O }: Scoreboard = this.state.scoreboard;
 
     return (
       <div className='board'>

demo-app-next/src/components/navbar.js renamed to demo-app-next/src/components/navbar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import { BoardText } from '../../types';
 
 type BoxProps = {
@@ -8,11 +8,13 @@ type BoxProps = {
   handleBoxClick: (row: number, column: number) => void;
 };
 
-const Box = (props: BoxProps) => {
+const Box = (props: BoxProps) : JSX.Element => {
   return (
+    <>
     <button className='box' onClick={(e) => props.handleBoxClick(props.row, props.column)}>
       {props.value}
     </button>
+    </>
   );
 };
 

demo-app-next/src/pages/_app.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Increment from './Increment';
 
-function Buttons() {
+function Buttons(): JSX.Element {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
     buttons.push(<Increment key={i} />);

demo-app-next/src/pages/_app.tsx

@@ -0,0 +1,61 @@
+import React, {useState, createContext} from 'react';
+import IncrementWithMoreHooks from './IncrementWithMoreHooks';
+
+/**
+ * This component as well as IncrementWithMoreHooks were made to show where data for different 
+ * hooks show up in the react fiber tree.
+ */
+
+/** 
+ * This file is a JSX file, not a TSX file, on purpose. The code won't be converted to common JS
+ * before being bundled by webpack. There were some errors that weren't showing up for the other 
+ * Increment.tsx file based on how webpack uglifies ES6 files. Maintaining this as a JSX file
+ * will help check for these types of issues.
+ */
+
+/**
+ * How Reactime extracts useState data and what would have to be done 
+ * to extract useContext and useReducer data:
+ * 
+ * When extracting a functional component's useState data from the fiber tree in the backend of 
+ * Reactime, said data is stored on said component's fiber tree node at its memoizedState property, 
+ * which is a linked list with each node holding data for each useState invocation (some but 
+ * not all other hooks also store nodes with data here). Each useState memoizedState node includes
+ * the variable (e.g. user) and its corresponding dispatch function (e.g. setUser). This dispatch
+ * function is required to use Reactime's timeJump feature.
+ * 
+ * useContext data is stored on the property "dependencies", and only the data passed into the
+ * value attritibute of the 'context'.Provider element will be there. For tripContext.Provider,
+ * we pass down "trip" without "setTrip", so we won't have access to the 'trip' dispatch function 
+ * in the "IncrementWithMoreHooks" component, meaning Reactime's timeJump won't work without 
+ * finding the 'trip' dispatch function by coming into this component where useState was invoked and
+ * storing it in the appropriate place. This is easy enough for useState variables, but useContext 
+ * is commonly used with useReducer which is an entirely different beast. 
+ * 
+ * I advise solving the puzzle of making useReducer work with the timeJump functionality before 
+ * integrating other hooks. Look at time jumping in the Redux dev tools chrome extension for 
+ * inspiration, because you essentially need to recreate that within Reactime. 
+ */
+
+// userInCreateContext is different from 'user' to see where this variable name showed up in the AST
+export const userContext = createContext({ userInCreateContext: 'null', setUser: undefined });
+export const tripContext = createContext({ trip: 'null', setTrip: undefined });
+
+const ButtonsWithMoreHooks = () => {
+  const [user, setUser] = useState('null');
+  const userValue = { user, setUser };
+  const [trip, setTrip ] = useState('Hawaii');
+  const tripValue = { trip };
+
+  return (
+    <div className='buttons' key='increment container'>
+      <userContext.Provider value={userValue} key="userContext Provider">
+        <tripContext.Provider value={tripValue} key="tripContext Provider">
+          <IncrementWithMoreHooks key={'IncrementWithMoreHooks'} />
+        </tripContext.Provider>
+      </userContext.Provider>
+    </div>
+  );
+}
+
+export default ButtonsWithMoreHooks;

demo-app-next/src/pages/buttons/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function Home() {
+function Home(): JSX.Element {
   return (
     <div className='about'>
       <h1>Lorem Ipsum</h1>

demo-app-next/src/pages/index.js renamed to demo-app-next/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-function Increment() {
+function Increment(): JSX.Element {
   const [count, setCount] = useState(0);
   return (
     <div>