Converting to TypeScript

assets/package.json

@@ -1,22 +1,36 @@
 {
-  "name": "marvin-2.0",
+  "name": "aws-bookstore-demo-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/jest": "^23.3.10",
+    "@types/node": "^10.12.12",
+    "@types/react": "^16.7.12",
+    "@types/react-bootstrap": "^0.32.15",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-router-bootstrap": "^0.24.5",
+    "@types/react-router-dom": "^4.3.1",
     "aws-amplify": "^1.0.10",
     "bootstrap": "^3.3.7",
     "react": "^16.5.0",
     "react-bootstrap": "^0.32.4",
     "react-dom": "^16.5.0",
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "1.1.5"
+    "react-scripts": "^2.1.0",
+    "typescript": "^3.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "devDependencies": {}
+  "devDependencies": {},
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

assets/src/App.js → assets/src/App.tsx

@@ -4,12 +4,21 @@ import { LinkContainer } from "react-router-bootstrap";
 import { Link, withRouter } from "react-router-dom";
 import { Nav, Navbar, NavItem } from "react-bootstrap";
 import "./App.css";
-import Routes from "./Routes";
+import { Routes } from "./Routes";
 
 const bookstoreIcon = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMzNS4wOCAzMzUuMDc5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMzUuMDggMzM1LjA3OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zMTEuMTc1LDExNS43NzVjLTEuMzU1LTEwLjE4Ni0xLjU0Ni0yNy43Myw3LjkxNS0zMy42MjFjMC4xNjktMC4xMDgsMC4yOTUtMC4yNjQsMC40NDMtMC4zOTggICAgYzcuNzM1LTIuNDc0LDEzLjA4OC01Ljk0Niw4Ljg4Ni0xMC42MThsLTExNC4xMDItMzQuMzhMMjkuNTYsNjIuNDQ1YzAsMC0yMS4xNTcsMy4wMjQtMTkuMjY3LDM1Ljg5NCAgICBjMS4wMjYsMTcuODksNi42MzcsMjYuNjc2LDExLjU0NCwzMWwtMTUuMTYxLDQuNTY5Yy00LjIwOCw0LjY3MiwxLjE0NCw4LjE0NSw4Ljg4LDEwLjYxNWMwLjE0NywwLjEzOCwwLjI3MSwwLjI5MywwLjQ0MywwLjQwMSAgICBjOS40NTUsNS44OTYsOS4yNzMsMjMuNDM4LDcuOTEzLDMzLjYyNmMtMzMuOTY3LDkuNjQ1LTIxLjc3NCwxMi43ODgtMjEuNzc0LDEyLjc4OGw3LjQ1MSwxLjgwMyAgICBjLTUuMjQxLDQuNzM2LTEwLjQ0NiwxMy43MTctOS40NzEsMzAuNzVjMS44OTEsMzIuODY0LDE5LjI2OSwzNS4xMzIsMTkuMjY5LDM1LjEzMmwxMjAuOTA0LDM5LjI5OGwxODIuNDktNDQuMjAyICAgIGMwLDAsMTIuMTk3LTMuMTQ4LTIxLjc3OS0xMi43OTRjLTEuMzY2LTEwLjE3Mi0xLjU1Ni0yNy43MTIsNy45MjEtMzMuNjIzYzAuMTc0LTAuMTA1LDAuMzAxLTAuMjY0LDAuNDQyLTAuMzk2ICAgIGM3LjczNi0yLjQ3NCwxMy4wODQtNS45NDMsOC44ODEtMTAuNjE1bC03LjkzMi0yLjM5NWM1LjI5LTMuMTksMTMuMjM2LTExLjUyNywxNC40ODEtMzMuMTgzICAgIGMwLjg1OS0xNC44OTYtMy4wMjctMjMuNjItNy41MjUtMjguNzU2bDE1LjY3OC0zLjc5NEMzMzIuOTQ5LDEyOC41NjksMzQ1LjE0NiwxMjUuNDIxLDMxMS4xNzUsMTE1Ljc3NXogTTE1OC41MzMsMTE1LjM1NCAgICBsMzAuNjg4LTYuMzA3bDEwMy43MDgtMjEuMzEybDE1LjQ1MS0zLjE3OGMtNC45MzcsOS4wMzYtNC43MywyMS40MDItMy45MTMsMjkuMzVjMC4xNzksMS43OTgsMC4zODUsMy40NCwwLjU4NSw0LjY4OCAgICBMMjg4LjE0LDEyMi44bC0xMzAuODk3LDMyLjU2M0wxNTguNTMzLDExNS4zNTR6IE0yNi43MSwxNDcuMzM3bDE1LjQ0OSwzLjE3OGw5OS41OTcsMjAuNDc0bDguNzAxLDEuNzgybDAsMGwwLDBsMjYuMDkzLDUuMzYzICAgIGwxLjI4Nyw0MC4wMUw0My4zMDMsMTg0LjY3M2wtMTMuMjYzLTMuMjk2YzAuMTk1LTEuMjUsMC40MDEtMi44OSwwLjU4OC00LjY5M0MzMS40NCwxNjguNzQyLDMxLjY1MSwxNTYuMzczLDI2LjcxLDE0Ny4zMzd6ICAgICBNMjAuNzA4LDk2Ljc1N2MtMC4xODctOC43NDMsMS4zNzEtMTUuMDY2LDQuNTItMTguMjhjMi4wMDQtMi4wNTIsNC4zNjktMi40NzksNS45OTEtMi40NzljMC44NTcsMCwxLjQ3NCwwLjExOSwxLjUxNiwwLjExOSAgICBsNzkuNjA3LDI1Ljk1M2wzOS43MTcsMTIuOTQ5bC0xLjMwMyw0MC4yODlMMzkuMzM0LDEyNC4wN2wtNS44OC0xLjY0N2MtMC4yMTYtMC4wNjEtMC41MDktMC4xMDMtMC43MzUtMC4xMTMgICAgQzMyLjI2LDEyMi4yNzcsMjEuMjQ0LDEyMS4yNjMsMjAuNzA4LDk2Ljc1N3ogTTE0MC41NzksMjgwLjg2NkwyMy4yOCwyNDcuOThjLTAuMjE3LTAuMDYzLTAuNTA3LTAuMTA1LTAuNzMzLTAuMTE2ICAgIGMtMC40NjctMC4wMzEtMTEuNDg4LTEuMDQ0LTEyLjAyMS0yNS41NDRjLTAuMTktOC43NTQsMS4zNzYtMTUuMDcxLDQuNTE5LTE4LjI4OGMyLjAwOS0yLjA1Miw0LjM3NS0yLjQ3OSw1Ljk5NC0yLjQ3OSAgICBjMC44NTksMCwxLjQ3NCwwLjExNSwxLjUxOSwwLjExNWMwLDAsMC4wMDUsMCwwLDBsMTE5LjMxNiwzOC45MDhMMTQwLjU3OSwyODAuODY2eiBNMjk0LjI4NCwyMzkuNDU5ICAgIGMwLjE4NSwxLjgwNCwwLjM5MSwzLjQ0MywwLjU5MSw0LjY5M2wtMTQ3LjgxMiwzNi43NzFsMS4yOTItNDAuMDFsMzEuNjAxLTYuNDk3bDQuNjY3LDEuMTI5bDE3LjQ5Mi01LjY4NWw4MC42MzEtMTYuNTY5ICAgIGwxNS40NTctMy4xOEMyOTMuMjYxLDIxOS4xNDYsMjkzLjQ2NiwyMzEuNTE3LDI5NC4yODQsMjM5LjQ1OXogTTMwMi40MjYsMTg1LjA4NGMtMC4yNjksMC4wMDYtMC41MzgsMC4wNDItMC43OTEsMC4xMjIgICAgbC0xMS4xNDgsMy4xMjFsLTEwNi4xNDgsMjkuNzY0bC0xLjI5OC00MC4yODlsMzQuODI2LTExLjM1OWw4NC4zMjctMjcuNTAxYzAuMDExLTAuMDA1LDQuNDM2LTAuOTg4LDcuNjg0LDIuMzE1ICAgIGMzLjE0NCwzLjIxNCw0LjcwNCw5LjUzNyw0LjUyLDE4LjI4QzMxMy44NDgsMTg0LjAzNSwzMDIuODI3LDE4NS4wNTMsMzAyLjQyNiwxODUuMDg0eiIgZmlsbD0iI2Y2OTgyNyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=";
 
-class App extends Component {
-  constructor(props) {
+interface AppProps {
+  history: any;
+}
+
+interface AppState {
+  isAuthenticated: boolean;
+  isAuthenticating: boolean;
+}
+
+class App extends Component<AppProps, AppState> {
+  constructor(props: AppProps) {
     super(props);
 
     this.state = {
@@ -35,11 +44,11 @@ class App extends Component {
     this.setState({ isAuthenticating: false });
   }
 
-  userHasAuthenticated = authenticated => {
+  userHasAuthenticated = (authenticated: boolean) => {
     this.setState({ isAuthenticated: authenticated });
   }
 
-  handleLogout = async (event) => {
+  handleLogout = async () => {
     await Auth.signOut();
 
     this.userHasAuthenticated(false);
@@ -100,10 +109,10 @@ class App extends Component {
             </Nav>
           </Navbar.Collapse>
         </Navbar>
-        <Routes childProps={childProps} />
+        <Routes isAuthenticated={childProps.isAuthenticated} userHasAuthenticated={childProps.userHasAuthenticated} />
       </div>
     );
   }
 }
 
-export default withRouter(App);
+export default withRouter(App as any);

assets/src/Routes.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import Checkout from "./modules/checkout/Checkout";
+import CheckoutConfirm from "./modules/checkout/CheckoutConfirm";
+import Home from "./modules/signup/Home";
+import Login from "./modules/signup/Login";
+import NotFound from "./modules/notFound/NotFound";
+import Signup from "./modules/signup/Signup";
+import CategoryView from "./modules/category/CategoryView";
+import ShoppingCart from "./modules/cart/ShoppingCart";
+import PastPurchases from "./modules/pastPurchases/PastPurchases";
+import BestSellers from "./modules/bestSellers/BestSellers";
+import SearchView from "./modules/search/SearchView";
+import PropsRoute from "./common/PropsRoute";
+
+interface RouteProps {
+  isAuthenticated: boolean;
+  userHasAuthenticated: (authenticated: boolean) => void;
+}
+
+export const Routes: React.SFC<RouteProps> = (childProps) =>
+  <Switch>
+    <PropsRoute path="/" exact component={Home} props={childProps} />
+    <PropsRoute path="/login" exact component={Login} props={childProps} />
+    <PropsRoute path="/signup" exact component={Signup} props={childProps} />
+    <Route path="/best" exact component={BestSellers} />
+    <Route path="/cart" exact component={ShoppingCart} />
+    <Route path="/category/:id" exact component={CategoryView} />
+    <Route path="/past" exact component={PastPurchases} />
+    <Route path="/checkout" exact component={Checkout} />
+    <Route path="/checkout-confirm" exact component={CheckoutConfirm} />
+    <Route path="/search/:id" exact component={SearchView} />
+    <Route component={NotFound} />
+  </Switch>;

assets/src/common/AddToCart.js → assets/src/common/AddToCart.tsx

@@ -3,8 +3,19 @@ import { API } from 'aws-amplify';
 import { Redirect } from 'react-router';
 import { Glyphicon } from 'react-bootstrap';
 
-class AddToCart extends React.Component {
-  constructor(props) {
+interface AddToCartProps {
+  bookId: string;
+  price: number;
+  variant?: string;
+}
+
+interface AddToCartState {
+  loading: boolean;
+  toCart: boolean;
+}
+
+class AddToCart extends React.Component<AddToCartProps, AddToCartState> {
+  constructor(props: AddToCartProps) {
     super(props);
 
     this.state = {
@@ -15,7 +26,7 @@ class AddToCart extends React.Component {
 
   onAddToCart = async () => {
     this.setState({ loading: true });
-    const bookInCart = await API.get("cart", `/cart/${this.props.bookId}`);
+    const bookInCart = await API.get("cart", `/cart/${this.props.bookId}`, null);
 
     // if the book already exists in the cart, increase the quantity
     if (bookInCart) {

assets/src/common/AppliedRoute.js → assets/src/common/PropsRoute.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
+//@ts-ignore
 export default ({ component: C, props: cProps, ...rest }) =>
   <Route {...rest} render={props => <C {...props} {...cProps} />} />;

assets/src/common/friendRecommendations/FriendRecommendations.js → assets/src/common/friendRecommendations/FriendRecommendations.tsx

@@ -2,8 +2,16 @@ import { API } from 'aws-amplify';
 import React from 'react';
 import { FriendThumb } from './FriendThumb';
 
-class FriendRecommendations extends React.Component {
-  constructor(props) {
+interface FriendRecommendationsProps {
+  bookId: string;
+}
+
+interface FriendRecommendationsState {
+  friends: any[];
+}
+
+class FriendRecommendations extends React.Component<FriendRecommendationsProps, FriendRecommendationsState> {
+  constructor(props: FriendRecommendationsProps) {
     super(props);
 
     this.state = {
@@ -12,7 +20,7 @@ class FriendRecommendations extends React.Component {
   }
 
   getFriends = () => {
-    return API.get("recommendations", `/recommendations/${this.props.bookId}`);
+    return API.get("recommendations", `/recommendations/${this.props.bookId}`, null);
   }
 
   async componentDidMount() {
@@ -36,7 +44,7 @@ class FriendRecommendations extends React.Component {
       <div>
         <div>Friends who bought this book</div>
         <p>
-          {friends.slice(0, 3).map(friend => <FriendThumb key={friend} />)}
+          {friends.slice(0, 3).map((friend: any) => <FriendThumb key={friend} />)}
           {numFriendsPurchased > 3 && <span className="orange">{` +${numFriendsPurchased - 3} ${(numFriendsPurchased - 3) > 1 ? "others" : "other"}`}</span>}
         </p>
       </div>

assets/src/common/friendRecommendations/FriendThumb.js → assets/src/common/friendRecommendations/FriendThumb.tsx

@@ -10,7 +10,9 @@ import Sarah from "../../images/avatars/Sarah.png";
 
 const friends = [Brenda, Erin, Jacob, Jeff, Jennifer, John, Sarah];
 
-export class FriendThumb extends React.Component {
+interface FriendThumbProps {}
+
+export class FriendThumb extends React.Component<FriendThumbProps> {
   render() {
     const randomFriend = friends[Math.floor(Math.random() * friends.length)];
     return (

assets/src/common/starRating/StarRating.js → assets/src/common/starRating/StarRating.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Glyphicon } from 'react-bootstrap';
 import "./starRating.css";
 
-class StarRating extends React.Component {
+interface StarRatingProps {
+  stars: number
+}
+
+class StarRating extends React.Component<StarRatingProps> {
   render() { 
     return (
       <span>             

assets/src/modules/bestSellers/BestSellerProductRow.js → assets/src/modules/bestSellers/BestSellerProductRow.tsx

@@ -6,12 +6,30 @@ import FriendRecommendations from "../../common/friendRecommendations/FriendReco
 import StarRating from "../../common/starRating/StarRating";
 import "../../common/styles/productRow.css";
 
-export class ProductRow extends React.Component {
-  constructor(props) {
+interface ProductRowProps {
+  bookId: string;
+}
+
+export interface Book {
+  id: string;
+  cover: string;
+  price: number;
+  category: string;
+  name: string;
+  rating: number;
+  author: string;
+}
+
+interface ProductRowState {
+  book: Book | undefined;
+}
+
+export class ProductRow extends React.Component<ProductRowProps, ProductRowState> {
+  constructor(props: ProductRowProps) {
     super(props);
 
     this.state = {
-      book: null,
+      book: undefined,
     };
   }
 
@@ -25,7 +43,7 @@ export class ProductRow extends React.Component {
   }
 
   getBook() {
-    return API.get("books", `/books/${this.props.bookId}`);
+    return API.get("books", `/books/${this.props.bookId}`, null);
   }
 
   render() {

assets/src/modules/bestSellers/BestSellers.js → assets/src/modules/bestSellers/BestSellers.tsx

@@ -5,8 +5,15 @@ import BestSellerProductRow from "./BestSellerProductRow";
 import { CategoryNavBar } from "../category/categoryNavBar/CategoryNavBar";
 import { SearchBar } from "../search/searchBar/SearchBar";
 
-export default class BestSellers extends React.Component {
-  constructor(props) {
+interface BestSellersProps {}
+
+interface BestSellersState {
+  isLoading: boolean;
+  books: { bookId: any; }[];
+}
+
+export default class BestSellers extends React.Component<BestSellersProps, BestSellersState> {
+  constructor(props: BestSellersProps) {
     super(props);
 
     this.state = {
@@ -18,7 +25,7 @@ export default class BestSellers extends React.Component {
   async componentDidMount() {
     try {
       const books = [];
-      const bestSellers = await API.get("bestsellers", "/bestsellers");
+      const bestSellers = await API.get("bestsellers", "/bestsellers", null);
 
       // Map the elasticache results to a book object
       for (var i = 0; i < bestSellers.length; i++) {