Added Factions, refactored to use it. Readbility styling Working on #12

package.json

@@ -8,7 +8,8 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "1.1.4",
-    "react-select": "^2.0.0"
+    "react-select": "^2.0.0",
+    "react-tabs": "^2.2.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Expac.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 //import rewardsCont from '../rewardsobj';
-import Rewards from './rewards';
+import Faction from './Faction';
 const bestFriends = [1273, 1275, 1276, 1277, 1278, 1279, 1280, 1281, 1282, 1283, 1975, 1358]; //IDs for NPCs that have "Friend" levels rather than reputations
 const friendLevels = ["Stranger","Acquantaince", "Buddy", "Friend", "Good Friend", "Best Friend"];
 const repTitles = ["Hated", "Hostile", "Unfriendly", "Neutral", "Friendly", "Honored", "Revered", "Exalted"]; // Reputation levels
@@ -46,11 +46,7 @@ class Expac extends Component {
             </h2>
             <div className={`child ${isHidden ? "hidden" : ""}`}>
             {reps.map((rep) => (
-                <div key={rep.name} className="rep">
-                <h3>{rep.name}</h3>
-                <p>{this.repLevel(rep)}</p>
-                <Rewards rep={rep.id} />
-                </div>
+                <Faction rep={rep} key={rep.name} />
             ))}
             </div>
             </div>

src/components/Faction.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+//import rewardsCont from '../rewardsobj';
+import Rewards from './Rewards';
+const bestFriends = [1273, 1275, 1276, 1277, 1278, 1279, 1280, 1281, 1282, 1283, 1975, 1358]; //IDs for NPCs that have "Friend" levels rather than reputations
+const friendLevels = ["Stranger","Acquantaince", "Buddy", "Friend", "Good Friend", "Best Friend"];
+const repTitles = ["Hated", "Hostile", "Unfriendly", "Neutral", "Friendly", "Honored", "Revered", "Exalted"]; // Reputation levels
+//Rep 1204 should be in cata not mists
+
+
+class Faction extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isHidden: true
+        }
+        this.repLevel = this.repLevel.bind(this);
+        this.showHidden = this.showHidden.bind(this);
+    }
+
+    repLevel(rep) {
+        if(bestFriends.includes(rep.id)) {
+            return friendLevels[rep.standing];
+        } else {
+            return repTitles[rep.standing];
+        }
+    }
+
+    showHidden(e) {
+        this.setState((prevState => ({
+            isHidden: !prevState.isHidden
+        })))
+    }
+
+    render() {
+        let rep = this.props.rep;
+        let isHidden = this.state.isHidden;
+        return (
+                <div key={rep.name} className="rep">
+                <div onClick={this.showHidden} className="repName">
+                    <h3>{rep.name}</h3>
+                    <p>{this.repLevel(rep)}</p>
+                    <i className={`fas fa-caret-${isHidden ? "down" : "up"}`}></i>
+                </div>
+                <div className={`rewards ${isHidden ? "hidden" : ""}`}>
+                <Rewards rep={rep.id} />
+                </div>
+                </div>
+            )
+    }
+}
+
+export default Faction;

src/components/rewards.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import rewardsCont from '../rewardsobj';
 
 class Rewards extends Component {
@@ -10,33 +11,52 @@ class Rewards extends Component {
 
     render() {
         const rep = this.props.rep;
-        let rewardsCompleted = [];
+        let tabTitles = [];
+        let tabPanelComplete = [];
         if(rewardsCont[rep]) {
             let levels = Object.keys(rewardsCont[rep]); //Number of Rep levels that have rewards in them
             let items; // Number of items in a level
-            //console.log("First level: ",rewardsCont[rep][levels[0]]);
-            //console.log("Number of item: ",Object.keys(rewardsCont[rep][levels[0]]));
             for(var i = 0; i<levels.length;i++){
-                //console.log("In the loop");
-                rewardsCompleted.push(<h4 key={levels[i]}>{levels[i]}</h4>);
-                //console.log(levels[i]);
+                let rewardsCompleted = [];
+                tabTitles.push(<Tab key={levels[i]}>{levels[i]}</Tab>);
                 items = Object.keys(rewardsCont[rep][levels[i]]);
-                //console.log(items);
                 for(var j = 0;j<items.length;j++) {
                     var name = rewardsCont[rep][levels[i]][j].name;
                     if(rewardsCont[rep][levels[i]][j].id) {
-                        rewardsCompleted.push(<a href={["//www.wowhead.com/item=",rewardsCont[rep][levels[i]][j].id].join('')} key={rewardsCont[rep][levels[i]][j].id}>{name}</a>," ");
+                        rewardsCompleted.push(<a href={["//www.wowhead.com/item=",rewardsCont[rep][levels[i]][j].id].join('')} key={rewardsCont[rep][levels[i]][j].id}>{name}</a>);
                     } else {
                         let nameKey = name.replace(/ +/g, "");
                         rewardsCompleted.push(<p key={nameKey}>{name}</p>)
                     }
+                    rewardsCompleted.push(<br key={i+j}/>);
                 }
-                //console.log(rewardsCompleted)
+                tabPanelComplete.push(<TabPanel key={levels[i]}>{rewardsCompleted}</TabPanel>);
             }
-            return (<div className="rewards"><h3>Rewards</h3>{rewardsCompleted}</div>);
+            return (
+                <Tabs>
+                    <TabList>
+                        <Tab>Rewards</Tab>
+                    </TabList>
+                    <TabPanel>
+                        <Tabs>
+                            <TabList>
+                                {tabTitles}
+                            </TabList>
+                            {tabPanelComplete}
+                        </Tabs>
+                    </TabPanel>
+                </Tabs>
+            );
         } else {
             return (
-            null
+                <Tabs>
+                    <TabList>
+                        <Tab>Rewards</Tab>
+                    </TabList>
+                    <TabPanel>
+                        <p>No Rewards Exist! If this is an error, let me know!</p>
+                    </TabPanel>
+                </Tabs>
             )
         }
     }

src/index.css

@@ -88,8 +88,11 @@ input[type=checkbox] {
     border-radius: 5px;
 }
 
-.expac i {
+.fas {
     color: #474747;
+}
+
+.expac>i {
     margin-left: 10px;
 }
 
@@ -149,17 +152,78 @@ progress[value]::-webkit-progress-value {
     justify-content: space-around;
     width: 80%;
     margin: auto;
+    margin-top: -1px;
+    padding: 0 5px;
     flex-wrap: wrap;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+
 }
 
 .rep>.rewards {
     width: 100%;
+    /* border-right: 1px solid grey;
+    border-left: 1px solid grey; */
+    border-radius: 5px;
+}
+
+.react-tabs {
+    border-radius: 5px 5px 0 0;
+}
+
+.react-tabs .react-tabs {
+    border: 0;
+}
+
+.react-tabs__tab-list {
+    border-bottom: 1px solid #aaa;
+    border-radius: 5px 5px 0 0;
+    margin: 0;
+    padding-top: 10px;
+}
+
+.react-tabs .react-tabs .react-tabs__tab-list {
+    border-radius: 0;
+}
+
+.react-tabs__tab {
+    display: inline-block;
+    border: 1px solid grey;
+    border-radius: 5px 5px 0 0;
+    border-bottom: none;
+    bottom: -1px;
+    position: relative;
+    list-style: none;
+    padding: 6px 12px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-panel--selected .react-tabs__tab-panel--selected {
+    padding: 10px 0;
+    min-height: 40px;
 }
 
 .rep>* {
     width: 28%;
 }
 
+.repName {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.repName>p {
+    margin-left: auto;
+    margin-right: 10px;
+    margin-top: 1.4em;
+}
+
+.repName>i {
+    margin-top: 1.4em;
+}
+
 .hidden {
     display: none;
 }