silly stupidly overcomplicated friend list decomplicated and now almo…

…st done. too much detail? not enough? life story next
Pumpkin-Cap · Aug 31, 2021 · 439ab8f · 439ab8f
1 parent e7dd9de
commit 439ab8f
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 105 deletions.
diff --git a/client/components/Home.js b/client/components/Home.js
@@ -29,7 +29,7 @@ export class Home extends React.Component {
       levelCategory = "Arrays";
       levelNumber = nextLevel - 9;
     }
-    else if (nextLevel <= 16){
+    else if (nextLevel <= 17){
       levelCategory = "Objects";
       levelNumber = nextLevel - 14;
     }

diff --git a/client/components/ListLevels.js b/client/components/ListLevels.js
@@ -26,7 +26,6 @@ class ListLevels extends React.Component {
   }
 
   handleMouseOver(event){
-    console.log(event.target.id)
     this.setState({levelPrompt: event.target.id});
   }
 

diff --git a/client/components/Navbar.js b/client/components/Navbar.js
@@ -35,8 +35,8 @@ const Navbar = ({handleClick, isLoggedIn, userId}) => (
       ) : (
         <div className="navLinks">
           {/* The navbar will show these links before you log in */}
-          <Login />
-          <Signup />
+          <button className="nav-button"><Login /></button>
+          <button className="nav-button"><Signup /></button>
           {/* <Link to="/login">Login</Link>
           <Link to="/signup">Sign Up</Link> */}
         </div>

diff --git a/client/components/Profile.js b/client/components/Profile.js
@@ -13,12 +13,14 @@ class Profile extends React.Component {
         super(props)
         this.state = {
             verified: false,
-            rank: 'Cadet'
+            rank: 'Cadet',
+            friendList: 'active'
         }
 
         this.setVerified = this.setVerified.bind(this);
         this.setRank = this.setRank.bind(this);
         this.grabUserAndFriends = this.grabUserAndFriends.bind(this);
+        this.hideFriends = this.hideFriends.bind(this);
     }
 
     componentDidMount() {
@@ -32,6 +34,7 @@ class Profile extends React.Component {
         else if (completedLevels <= 9){ this.setRank('Private'); }
         else if (completedLevels <= 14){ this.setRank('Specialist'); }
         else if (completedLevels <= 16){ this.setRank('Code Cracker'); }
+        else { this.setRank('Senior Level Programmer')}
     }
 
     async grabUserAndFriends(userId){
@@ -47,32 +50,47 @@ class Profile extends React.Component {
         this.setState({ rank: currentRank });
     }
 
+    hideFriends(){
+        if (this.state.friendList === 'active') { this.setState({friendList: 'hidden'}); }
+        else { this.setState({friendList: 'active'});}
+    }
+
     render() {
         let completedLevels = 0
         if (this.props.user.levels && this.props.user.id) (completedLevels = this.props.user.levels.length)
-
         const { verified } = this.state;
-        const { levels } = this.props.user;
+        const { levels, friends } = this.props.user;
         const allLevels = this.props.levels;
 
         return (
 
             <Anime duration={6000} opacity={[0,1]}>
                 <div id="profileContainer">
-                    <h1>{this.props.user.username}</h1>
-                    {(this.props.auth.id === this.props.user.id) && (verified ? <EditProfile setVerified={this.setVerified} /> : <VerifyPassword setVerified={this.setVerified} />) }
-                    {(this.props.auth.id !== this.props.user.id) && (<button>Add Friend</button>)}
-                    <h4 style={{display: "flex", flexDirection: "column", justifyContent: "center"}}>
-                        <div style={{display: "flex", justifyContent: "center"}}>Next Level:</div>
-                        {this.props.levels[completedLevels] &&
-                        <div id="profile-level-link"><Link to={`/level/${completedLevels+1}`}>
-                            <div style={{display: "flex", justifyContent: "center"}}>{Array.isArray(levels) && allLevels[levels.length + 1].category}</div>
-                            <div style={{display: "flex", justifyContent: "center"}}>{Array.isArray(levels) && allLevels[levels.length].name}</div>
-                        </Link></div>}
-                    </h4>
-                    <div style={{fontSize: "x-large", marginBottom: "10px"}}>Completion: {completedLevels / this.props.levels.length * 100} %</div>
-                    <div style={{fontSize: "large", marginBottom: "20px", fontWeight: "bolder", border: "groove", padding: "3px"}}>Rank: {this.state.rank}</div>
-                    {completedLevels !== 0 && <div style={{marginBottom: "10px"}}>Levels Completed:</div>}
+                  <div id="top-profileContainer">
+                    <div id="top-profileContainer-leftSection">
+                        <button className="friends-button" onClick={this.hideFriends}>{this.state.friendList === "active" ? 'Hide Friends' : 'Show Friends'}</button>
+                    </div>
+                    <div id="top-profileContainer-mainSection">
+                        <h1>{this.props.user.username}</h1>
+                        {(this.props.auth.id === this.props.user.id) && (verified ? <EditProfile setVerified={this.setVerified} /> : <VerifyPassword setVerified={this.setVerified} />) }
+                        {(this.props.auth.id !== this.props.user.id) && (<button>Add Friend</button>)}
+                        <h4 style={{display: "flex", flexDirection: "column", justifyContent: "center"}}>
+                            <div style={{display: "flex", justifyContent: "center"}}>Next Level:</div>
+                            {this.props.levels[completedLevels] &&
+                            <div id="profile-level-link"><Link to={`/level/${completedLevels+1}`}>
+                                <div style={{display: "flex", justifyContent: "center"}}>{Array.isArray(levels) && allLevels[levels.length + 1].category}</div>
+                                <div style={{display: "flex", justifyContent: "center"}}>{Array.isArray(levels) && allLevels[levels.length].name}</div>
+                            </Link></div>}
+                        </h4>
+                        <div style={{fontSize: "x-large", marginBottom: "10px"}}>Completion: {completedLevels / this.props.levels.length * 100} %</div>
+                        <div style={{fontSize: "large", marginBottom: "20px", fontWeight: "bolder", border: "groove", padding: "3px"}}>Rank: {this.state.rank}</div>
+                    </div>
+                  <div id="top-profileContainer-rightSection">
+                    {this.state.friendList === 'active' ? (Array.isArray(friends) && friends.length > 0  ? (<div id="friend-list">{friends.map((element) =>(<div key={element.id}>{element.username}</div>))}</div>) : (<div id="friend-list">You have no friends! How sad. But you can add some by searching for users and visiting their profiles.</div>)) : (<div id="ghost-friend-list"></div>)}
+
+                  </div>
+                </div>
+                    {completedLevels !== 0 && <div style={{marginBottom: "10px", display: "flex", justifyContent: "center"}}>Levels Completed:</div>}
                     <div id="profile-completed-levels">
                         <div className="profile-completed-level"><div className="profile-completed-title">Control Flow</div>
                         {Array.isArray(levels) && (levels.filter(element => element.category === 'Control Flow').map((element) =>(<div key={element.id}>{element.name}</div>)))}</div>