Add prettier-config, use connect

.gitignore

@@ -22,3 +22,6 @@ yarn-error.log*
 
 /.firebase
 firebase-debug.log
+
+.idea
+.vscode

package.json

@@ -1,15 +1,17 @@
 {
-  "name": "test",
+  "name": "animal-kingdom",
   "version": "0.1.0",
   "private": true,
+  "prettier": "@blockstack/prettier-config",
   "dependencies": {
-    "blockstack": "^19.3.0",
+    "@blockstack/connect": "^2.3.1",
+    "blockstack": "^21.0.0",
     "bootstrap": "^4.4.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "3.0.1",
-    "typescript": "^3.7.2"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
+    "typescript": "^3.8.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -31,5 +33,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@blockstack/prettier-config": "^0.0.6"
   }
 }

src/App.css

@@ -9,7 +9,7 @@ body {
 }
 
 .btn-primary {
-  color: #FFFFFF;
+  color: #ffffff;
   background-color: rgb(33, 31, 109) !important;
   border: 0 !important;
 }
@@ -19,7 +19,8 @@ body {
   border: 0;
 }
 
-.btn-primary.disabled, .btn-primary:disabled {
+.btn-primary.disabled,
+.btn-primary:disabled {
   opacity: 0.5;
   background-color: rgb(135, 172, 196);
 }

src/App.js

@@ -1,41 +1,33 @@
-import React, { Component } from 'react'
-import './App.css'
-import { UserSession } from 'blockstack'
+import React, { Component } from 'react';
+import './App.css';
+import { UserSession } from 'blockstack';
 
-import Landing from './Landing'
-import SignedIn from './SignedIn'
+import Landing from './Landing';
+import SignedIn from './SignedIn';
 
 class App extends Component {
-
   constructor() {
-    super()
-    this.userSession = new UserSession()
+    super();
+    this.userSession = new UserSession();
   }
 
   componentWillMount() {
-    const session = this.userSession
-    if(!session.isUserSignedIn() && session.isSignInPending()) {
-      session.handlePendingSignIn()
-      .then((userData) => {
-        if(!userData.username) {
-          throw new Error('This app requires a username.')
+    const session = this.userSession;
+    if (!session.isUserSignedIn() && session.isSignInPending()) {
+      session.handlePendingSignIn().then(userData => {
+        if (!userData.username) {
+          throw new Error('This app requires a username.');
         }
-        window.location = `/kingdom/${userData.username}`
-      })
+        window.location = `/kingdom/${userData.username}`;
+      });
     }
   }
 
   render() {
     return (
-      <main role="main">
-          {this.userSession.isUserSignedIn() ?
-            <SignedIn />
-          :
-            <Landing />
-          }
-      </main>
+      <main role="main">{this.userSession.isUserSignedIn() ? <SignedIn /> : <Landing />}</main>
     );
   }
 }
 
-export default App
+export default App;

src/Card.js

@@ -1,28 +1,25 @@
-import React, { Component } from 'react'
-import './Card.css'
-
+import React, { Component } from 'react';
+import './Card.css';
 
 class Card extends Component {
-
   render() {
-    const selected = this.props.selected
-    const path = this.props.path
-    const item = this.props.item
-    const select = this.props.select
+    const selected = this.props.selected;
+    const path = this.props.path;
+    const item = this.props.item;
+    const select = this.props.select;
     return (
-      <div
-        className={`card ${selected ? 'border-primary' : ''}`}
-        onClick={(e) => select(e, item)}
-      >
-      <img className="card-img-top" src={`${path}${item.id}.jpg`} alt={item.name} />
-      <div className="card-body">
-        <h4 className="card-title">{item.name}</h4>
-        <p className="card-text">{item.superpower}</p>
-        <button className='btn btn-primary btn-block' disabled={selected}>{ selected ? 'Selected' : 'Select' }</button>
+      <div className={`card ${selected ? 'border-primary' : ''}`} onClick={e => select(e, item)}>
+        <img className="card-img-top" src={`${path}${item.id}.jpg`} alt={item.name} />
+        <div className="card-body">
+          <h4 className="card-title">{item.name}</h4>
+          <p className="card-text">{item.superpower}</p>
+          <button className="btn btn-primary btn-block" disabled={selected}>
+            {selected ? 'Selected' : 'Select'}
+          </button>
+        </div>
       </div>
-    </div>
-    )
+    );
   }
 }
 
-export default Card
+export default Card;

src/EditMe.css

@@ -3,12 +3,12 @@
 }
 
 .EditMe .card-deck .card:hover {
-  box-shadow:   rgba(33, 31, 109, 0.5) 0px 8px 8px;
+  box-shadow: rgba(33, 31, 109, 0.5) 0px 8px 8px;
 }
 
 .EditMe .border-primary {
   border-color: rgb(33, 31, 109) !important;
-  box-shadow:   rgba(33, 31, 109, 0.5) 0px 4px 4px;
+  box-shadow: rgba(33, 31, 109, 0.5) 0px 4px 4px;
 }
 
 .EditMe .card-img-top {

src/EditMe.js

@@ -1,93 +1,100 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import './EditMe.css'
-import Card from './Card'
-import { ANIMALS, TERRITORIES, ME_FILENAME } from './constants'
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import './EditMe.css';
+import Card from './Card';
+import { ANIMALS, TERRITORIES } from './constants';
 
 class EditMe extends Component {
-
   constructor(props) {
-    super(props)
-    this.selectAnimal = this.selectAnimal.bind(this)
-    this.selectTerritory = this.selectTerritory.bind(this)
+    super(props);
+    this.selectAnimal = this.selectAnimal.bind(this);
+    this.selectTerritory = this.selectTerritory.bind(this);
 
     this.state = {
       selectedAnimal: false,
-      selectedTerritory: false
-    }
-
-    this.loadMe = this.loadMe.bind(this)
+      selectedTerritory: false,
+    };
 
+    this.loadMe = this.loadMe.bind(this);
   }
 
   componentWillMount() {
-    this.loadMe()
+    this.loadMe();
   }
 
   loadMe() {
-    if(this.props.me) {
-        this.setState({selectedAnimal: true, selectedTerritory: true})
-      } else {
-        this.setState({selectedAnimal: false, selectedTerritory: false})
-      }
+    if (this.props.me) {
+      this.setState({ selectedAnimal: true, selectedTerritory: true });
+    } else {
+      this.setState({ selectedAnimal: false, selectedTerritory: false });
+    }
   }
-
 
   selectAnimal(e, animal) {
-    e.preventDefault()
-    this.setState({selectedAnimal: true})
-    this.props.saveMe(Object.assign({}, this.props.me, { animal }))
+    e.preventDefault();
+    this.setState({ selectedAnimal: true });
+    this.props.saveMe(Object.assign({}, this.props.me, { animal }));
   }
 
   selectTerritory(e, territory) {
-    e.preventDefault()
-    this.setState({selectedTerritory: true})
-    this.props.saveMe(Object.assign({}, this.props.me, { territory }))
+    e.preventDefault();
+    this.setState({ selectedTerritory: true });
+    this.props.saveMe(Object.assign({}, this.props.me, { territory }));
   }
 
-
   render() {
-    const me = this.props.me
-    let myAnimal = null
-    let myTerritory = null
+    const me = this.props.me;
+    let myAnimal = null;
+    let myTerritory = null;
     if (me) {
-      myAnimal = this.props.me.animal
-      myTerritory = this.props.me.territory
+      myAnimal = this.props.me.animal;
+      myTerritory = this.props.me.territory;
     }
-    const selectedAnimal = this.state.selectedAnimal 
-    const selectedTerritory = this.state.selectedTerritory
-    const completed = selectedAnimal && selectedTerritory
-    const username = this.props.username
+    const selectedAnimal = this.state.selectedAnimal;
+    const selectedTerritory = this.state.selectedTerritory;
+    const completed = selectedAnimal && selectedTerritory;
+    const username = this.props.username;
 
     return (
       <div className="EditMe container">
-      <h2>Your animal persona</h2>
-      <p>You are the ruler of your kingdom! Pick your animal persona and its home!</p>
+        <h2>Your animal persona</h2>
+        <p>You are the ruler of your kingdom! Pick your animal persona and its home!</p>
         <h3>Select your animal</h3>
         <div className="row card-deck">
-        { ANIMALS.map((animal, index) => {
-          const selected = myAnimal && myAnimal.id === animal.id
-          return (
-            <Card path='/animals/' key={index} item={animal} select={this.selectAnimal} selected={selected} />
-                )
-          })
-        }
+          {ANIMALS.map((animal, index) => {
+            const selected = myAnimal && myAnimal.id === animal.id;
+            return (
+              <Card
+                path="/animals/"
+                key={index}
+                item={animal}
+                select={this.selectAnimal}
+                selected={selected}
+              />
+            );
+          })}
         </div>
         <h3 className="select-territory">Select your territory</h3>
         <div className="card-deck">
-        { TERRITORIES.map((territory, index) => {
-          const selected = myTerritory && myTerritory.id === territory.id
-          return (
-            <Card path='/territories/' key={index} item={territory} select={this.selectTerritory} selected={selected} />
-                )
-          })
-        }
+          {TERRITORIES.map((territory, index) => {
+            const selected = myTerritory && myTerritory.id === territory.id;
+            return (
+              <Card
+                path="/territories/"
+                key={index}
+                item={territory}
+                select={this.selectTerritory}
+                selected={selected}
+              />
+            );
+          })}
         </div>
         <div className="container row">
           <div className="col-lg-12 done">
             <p>
-              <Link to={completed?`/kingdom/${username}`:`/me`} 
-                    className="btn btn-primary">Done</Link>
+              <Link to={completed ? `/kingdom/${username}` : `/me`} className="btn btn-primary">
+                Done
+              </Link>
             </p>
           </div>
         </div>
@@ -96,5 +103,4 @@ class EditMe extends Component {
   }
 }
 
-
-export default EditMe
+export default EditMe;

src/Kingdom.css

@@ -6,14 +6,14 @@ img.rounded-circle {
   height: 300px;
   width: 300px;
   margin: 30px;
-  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
 }
 
 .territory {
   background: no-repeat;
   background-size: cover;
   margin-top: -2rem;
-  margin-bottom:  2rem;
+  margin-bottom: 2rem;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;