Can display players and enemys teams in TeamPreview.js

src/App.js

@@ -14,7 +14,8 @@ import Search from './components/Search';
 import CharacterBlock from './components/CharacterBlock';
 // import SearchResults from './components/SearchResults';
 // import TeamReview from './components/TeamReview';
-import battle from './components/battle';
+// import battle from './components/battle';
+import TeamPreview from './components/TeamPreview';
 // import Results from './components/Results';
 
 // GLOBAL VARIABLES
@@ -73,7 +74,6 @@ class App extends Component {
     // FIREBASE
     // Add event listener to tell us if the database has anything on load and when everything changes
     dbRef.on('value', (snapshot) => {
-      console.log(snapshot.val());
     });
   }
 
@@ -178,8 +178,8 @@ class App extends Component {
           <Route path="/search" render={(props) => (<Search {...props} />)} />
           {/* Route to touch the SearchResults component/page  */}
           {/* <Route path="/SearchResults" component={SearchResults} /> */}
-          {/* Route to touch the TeamReview component/page  */}
-          {/* <Route path="/TeamReview" component={TeamReview} /> */}
+          {/* Route to touch the TeamPreview component/page  */}
+          <Route path="/teampreview" render={(props) => (<TeamPreview {...props} playerTeam={this.state.team} />)} />
           {/* Route to touch the Battle component/page  */}
           {/* <Route path="/battle" component={battle} /> */}
           {/* Route to touch the Results component/page  */}

src/components/TeamPreview.js

@@ -3,56 +3,90 @@ import { BrowserRouter as Router, Link } from "react-router-dom";
 import firebase from "firebase";
 
 
-let playerTeam = this.props.team.characters;
+
+let enemyTeams = [];
+const dbRef = firebase.database().ref('/teams');
+
+
 class TeamPreview extends Component {
     constructor(){
         super();
         this.state = {
-
+            fightingEnemyTeam: null
         }
     }
     componentDidMount(){
-        this.dbRef = firebase.database().ref();
 
-        this.dbRef.once("value", (snapshot) => {
+        let teamNumRef;
             //get total number of teams in database
-        });
+
+            dbRef.once('value', (snapshot) => {
+                console.log(snapshot.val());
+
+                //create an array of all the teams in the database
+                let dbEnemyTeams = snapshot.val();
+                for(let team in dbEnemyTeams){
+
+                    enemyTeams.push(dbEnemyTeams[team]);
+                }
+                console.log(enemyTeams);
+
+                // genereate a random number and get a random team
+                let enemyNum = Math.floor(Math.random() * enemyTeams.length);
+                // if the randomly generated team is the players team
+                if(enemyTeams[enemyNum].teamName === this.props.playerTeam.teamName){
+                    //remove it and get a new one
+                    let playersTeam = enemyTeams.splice([enemyNum, 1]);
+                    console.log('removes players team');
+
+                    enemyNum = Math.floor(Math.random() * enemyTeams.length);
+                }
+
+                this.setState({
+                    fightingEnemyTeam: enemyTeams[enemyNum]
+                })
+            });
+
+
     }
-    startBattle(){
+
+    startBattle = () => {
 
     }
     render(){
+
         return(
             <div className="teamPreview">
                 <section className="playerTeam">
-                    <h2>{this.props.team.name}</h2>
-                    {playerTeam.map((char) =>{
+                    <h2>{this.props.playerTeam.teamName}</h2>
+                    {this.props.playerTeam.teamMember.map((char) =>{
                         return(
                             <div className="characterBlock player">
-                                <img src={char.image.url} alt={`${char.name} Snapshot`} />
+                                <img src={char.img} alt={`${char.name} Snapshot`} />
                                 <h3>{char.name}</h3>
                             </div>
                         )
                     })}
                 </section>
+                {this.state.fightingEnemyTeam === null ? null :
                 <section className="enemyTeam">
-                    {/* <h2>enemy team name</h2> */}
-                    {enemyTeam.map((char) => {
-                        return(
+                    <h2>{this.state.fightingEnemyTeam.teamName}</h2>
+                    {this.state.fightingEnemyTeam.teamMember.map((char) => {
+                        return (
                             <div className="characterBlock enemy">
-                                <img src={char.image.url} alt={`${char.name} Snapshot`} />
+                                <img src={char.img} alt={`${char.name} Snapshot`} />
                                 <h3>{char.name}</h3>
                             </div>
                         )
                     })}
                 </section>
+                }
                 <section className="teamButtons">
-                    <Link to="/">
-                        <button onClick={}>Back To Team Roster</button>
+                    <Link to="/teampreview">
+                        <button>Back To Team Roster</button>
                     </Link>
                     <button onClick={this.startBattle}>Start Battle</button>
                 </section>
-                <Route path="/"  component={}/>
             </div>
         )
     }

src/components/TeamSelect.js

@@ -29,7 +29,7 @@ class TeamSelect extends Component {
                 <div className="teamSelectButtonsContainer">
                     <button onClick={this.props.saveTeamToDB} className="saveTeamButton button">Save Team</button>
 
-                    <Link to="/battle"><button className="goBattleButton button">Go Battle</button></Link>
+                    <Link to="/teampreview"><button className="goBattleButton button">Go Battle</button></Link>
 
                     <p className="teamWinRatio"></p>
                     {}

src/components/battle.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import firebase from 'firebase';
+
+class Battle extends Component{
+    render(){
+        return(
+            <section className=''>
+
+
+            </section>
+        )
+    }
+}
+
+export default Battle;