Issues #11 - Upgrade packages

package.json

@@ -21,15 +21,15 @@
     "autobind-decorator": "2.1.0",
     "bootstrap": "4.3.1",
     "classnames": "2.2.6",
-    "jquery": "3.3.1",
+    "jquery": "3.4.1",
     "mobx": "5.0.3",
     "mobx-react": "5.2.3",
     "moment": "2.22.2",
     "node-sass": "4.10.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "4.3.1",
-    "react-scripts": "2.1.8",
+    "react-scripts": "3.0.1",
     "reactstrap": "6.3.1",
     "typescript": "3.3.3333",
     "validator": "10.4.0",

public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <meta name="__NEW_RELIC_SCRIPT__">
+
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import RoutingContainer from "./module/routing/container/routing-container";
+import "bootstrap";
 
 class App extends Component {
 	public render() {

src/module/authentication/component/activate-account-component.tsx

@@ -8,9 +8,6 @@ interface IActivateAccountComponentProps {
 
 @observer
 export default class ActivateAccountComponent extends React.Component<IActivateAccountComponentProps> {
-	constructor(props: IActivateAccountComponentProps) {
-		super(props);
-	}
 
 	public renderActivationSuccessful()  {
 		return (

src/module/authentication/component/login-component.tsx

@@ -63,7 +63,7 @@ export default class LoginComponent extends React.Component<ILoginComponentProps
 						Application Log In!
 					</div>
 					<div className="d-flex justify-content-center">
-						<img src={logo} />
+						<img src={logo} alt="Application Logo" />
 					</div>
 					<form onSubmit={this.onSubmit}>
 

src/module/common/component/nav-component.tsx

@@ -10,7 +10,8 @@ export default class NavComponent extends React.Component<any> {
 
 	public render() {
 		return (
-			<nav className="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
+			<nav className="navbar navbar-toggleable-md fixed-top navbar-expand-md navbar-light bg-light">
+				<a className="navbar-brand" href="/">Full Stack Starter Kit!</a>
 				<button
 					className="navbar-toggler navbar-toggler-right hidden-lg-up"
 					type="button"
@@ -22,15 +23,14 @@ export default class NavComponent extends React.Component<any> {
 				>
 					<span className="navbar-toggler-icon" />
 				</button>
-				<a className="navbar-brand" href="#">Full Stack Starter Kit!</a>
 
-				<div className="navbar-collapse" id="navbarsExampleDefault">
+				<div className="collapse navbar-collapse" id="navbarsExampleDefault">
 					<ul className="navbar-nav mr-auto">
 						<li className="nav-item active">
-							<a className="nav-link" href="#">To-do List<span className="sr-only">(current)</span></a>
+							<a className="nav-link" href="/">To-do List<span className="sr-only">(current)</span></a>
 						</li>
 						<li className="nav-item">
-							<a className="nav-link" href="#">Settings</a>
+							<a className="nav-link" href="/">Settings</a>
 						</li>
 					</ul>
 					<form className="form-inline mt-2 mt-md-0">

src/module/todo/component/todo-item-component.tsx

@@ -49,7 +49,7 @@ export default class TodoItemComponent extends React.Component<ITodoItemComponen
 	private renderTodoForm() {
 		return (
 			<form className="form-row" onSubmit={this.submitTodoForm}>
-				<div className="col-10">
+				<div className="col-md-10">
 					<FormInput
 						inputClass="form-control"
 						type="text"
@@ -60,14 +60,14 @@ export default class TodoItemComponent extends React.Component<ITodoItemComponen
 						onChange={this.props.updateField(this.props.todoIndex)}
 					/>
 				</div>
-				<div className="col-1">
+				<div className="col-md-1 col-6 text-center">
 					<button
 						className="btn btn-primary btn-sm"
 						type="submit"
 					>Save
 					</button>
 				</div>
-				<div className="col-1">
+				<div className="col-md-1 col-6 text-center">
 					<button
 						className="btn btn-outline-secondary btn-sm"
 						onClick={this.cancelUpdateTodo}
@@ -81,7 +81,7 @@ export default class TodoItemComponent extends React.Component<ITodoItemComponen
 	private renderTodoItem() {
 		return (
 			<div className="form-row">
-				<div className="col-10">
+				<div className="col-md-10">
 					<div className="form-check">
 						<input
 							className="form-check-input"
@@ -95,14 +95,14 @@ export default class TodoItemComponent extends React.Component<ITodoItemComponen
 						</label>
 					</div>
 				</div>
-				<div className="col-1">
+				<div className="col-md-1 col-6 text-center">
 					<button
 						className="btn btn-outline-primary btn-sm"
 						onClick={this.enableEditing}
 					>Update
 					</button>
 				</div>
-				<div className="col-1">
+				<div className="col-md-1 col-6 text-center">
 					<button
 						className="btn btn-link btn-sm"
 						onClick={this.deleteTodo}

src/module/todo/container/todo-container.tsx

@@ -25,16 +25,13 @@ export default class TodoContainer extends React.Component<any> {
 		};
 
 		const cardStyle = {
-				width: "50rem",
 				marginTop: "80px",
-				marginRight: "auto",
-				marginLeft: "auto",
-				zIndex: 1040,
 		};
 
 		return (
+			<div>
+			<NavComponent history={this.props.history} />
 			<div className="container">
-				<NavComponent history={this.props.history} />
 					<div className="card" style={cardStyle}>
 						<h2 className="card-header">To-Do List</h2>
 						<ul className="list-group list-group-flush">
@@ -53,6 +50,7 @@ export default class TodoContainer extends React.Component<any> {
 						</ul>
 					</div>
 			</div>
+			</div>
 		);
 	}
 
@@ -75,7 +73,7 @@ export default class TodoContainer extends React.Component<any> {
 		// component. We may reuse the todo component in another place and not want
 		// a speedbump to confirm deletion.  This way we can include any usage specific
 		// behavior here, before accessing the store.
-		if (confirm("Delete this item?")) {
+		if (window.confirm("Delete this item?")) {
 			TodoStore.saveAndDeleteTodo(todo);
 		}
 	}