From 52d3b87790fbc594b2cdbcf764633094bc512476 Mon Sep 17 00:00:00 2001
From: Isabelle Liu <ieliu214@gmail.com>
Date: Sat, 27 Aug 2022 16:50:12 -0700
Subject: [PATCH] fixed profile picture! put in placeholder for initials

---
 client/src/components/NavBar.js    | 46 ++++++++++++++++++++++++------
 client/src/components/Profile.js   | 12 +++++++-
 client/src/stylesheets/NavBar.css  | 15 ++++++++++
 client/src/stylesheets/Profile.css | 15 ++++++++++
 4 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
index da689562..fbf0c0fc 100644
--- a/client/src/components/NavBar.js
+++ b/client/src/components/NavBar.js
@@ -4,19 +4,41 @@ import '../stylesheets/NavBar.css';
 import { getAnovaToken, removeAnovaToken, removeGoogleToken } from '../utils/utils';
 import { NavLink } from 'react-router-dom';
 import { GoogleLogout } from 'react-google-login';
+import { handleErrors } from '../utils/helpers';
+import { Modal, Input, Row, Col, Avatar } from 'antd';
+import * as decode from 'jwt-decode';
 
 const logo = require('../stylesheets/logo.png');
 
 const NavBar = props => {
+
   const { match } = props;
 
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [selectedKeys, setSelectedKeys] = useState([]);
 
+  const [username, setUsername] = useState('');
+
   const clientId =
     '128601698558-80ae6kq3v7p8iuknfpkqu6bsfg05vgra.apps.googleusercontent.com';
 
   useEffect(() => {
+    const tok = localStorage.getItem('anovaToken');
+    const d_tok = decode(tok);
+    var { id } = decode(getAnovaToken());
+    var get_url = '/api/v1/profile/';
+    var id_str = id.toString();
+    fetch(get_url + id_str + '?uid=' + d_tok.id)
+      .then(handleErrors)
+      .then(profile => {
+        setUsername(profile[0].name);
+      })
+      .catch(() =>
+        Modal.error({
+          title: 'Unable to get profile.',
+          centered: true,
+        }),
+      );
     if (match.path === '/SiteLessons' || match.path === '/') {
       setSelectedKeys('lessons');
     } else if (match.path === '/Roster') {
@@ -38,7 +60,10 @@ const NavBar = props => {
     removeAnovaToken();
     removeGoogleToken();
   };
-
+  const getInitials = () => {
+    const nameArray = username.split(" ");
+    return (username)? nameArray[0][0] + nameArray[1][0] : "Student"
+  }
   if (getAnovaToken() === null) {
     return <div></div>;
   } else {
@@ -69,14 +94,17 @@ const NavBar = props => {
             <Menu mode="horizontal" selectedKeys={selectedKeys}>
               <Menu.SubMenu
                 className="menuItem"
-                title={
-                  <img
-                    src={'https://image.flaticon.com/icons/png/128/1141/1141771.png'}
-                    className="profile-logo"
-                    alt={'Profile'}
-                  />
-                }
-              >
+                  title={
+                    // <img
+                    //   src={'https://image.flaticon.com/icons/png/128/1141/1141771.png'}
+                    //   className="profile-logo"
+                    //   alt={'Profile'}
+                    // />
+                    <div className = "circleNav">  
+                      <p className = "circletextNav"> {getInitials()} </p>
+                    </div>
+                  }
+                >
                 <Menu.Item className="menuItem" key="profile">
                   <NavLink to="/Profile">Profile</NavLink>
                 </Menu.Item>
diff --git a/client/src/components/Profile.js b/client/src/components/Profile.js
index 8c1d34c4..552bda40 100644
--- a/client/src/components/Profile.js
+++ b/client/src/components/Profile.js
@@ -64,13 +64,23 @@ const Profile = () => {
   const showModal = bool => {
     setShowEdit(bool);
   };
+  
+  const getInitials = () => {
+    const nameArray = username.split(" ");
+    return (username)? nameArray[0][0] + nameArray[1][0] : "Student"
+  }
 
   return (
     <div className="profileContainer">
       <div className="profileBox">
         <div className="profileBody">
           <div className="profileLeft">
-            <Avatar id="profileImage" src={profileimage} />
+            {/* <Avatar id="profileImage" src={} /> */}
+            <div className="circle"> 
+              <p className="circletext">
+                {getInitials()} 
+              </p>
+            </div>
             <p id="username" className="profileName">
               {username}
             </p>
diff --git a/client/src/stylesheets/NavBar.css b/client/src/stylesheets/NavBar.css
index c6db6ba0..c91c81d4 100644
--- a/client/src/stylesheets/NavBar.css
+++ b/client/src/stylesheets/NavBar.css
@@ -118,3 +118,18 @@
     padding: 10px 20px;
   }
 }
+
+.circleNav {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  background-color: rgb(144, 211, 200);
+  border-radius: 50%;
+}
+
+.circletextNav {
+  margin: auto;
+  font-style: normal;
+  font-size: 15px;
+  color: white;
+}
diff --git a/client/src/stylesheets/Profile.css b/client/src/stylesheets/Profile.css
index 4da0c2c7..383be871 100644
--- a/client/src/stylesheets/Profile.css
+++ b/client/src/stylesheets/Profile.css
@@ -131,5 +131,20 @@
   color: #000000;
 }
 
+.circle {
+  display: flex;
+  width: 100px;
+  height: 100px;
+  background-color: rgb(144, 211, 200);
+  border-radius: 50%;
+}
+
+.circletext {
+  margin: auto;
+  font-style: normal;
+  font-size: 30px;
+  color: white;
+}
+