render avatar image

madisonjordan · Jul 3, 2023 · c7ffaf8 · c7ffaf8
1 parent 39dc2f3
commit c7ffaf8
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 5 deletions.
diff --git a/backend-flask/sql/users/show.sql b/backend-flask/sql/users/show.sql
@@ -3,6 +3,7 @@ SELECT
     SELECT
       users.uuid,
       users.handle,
+      users.cognito_user_id as cognito_user_uuid,
       users.display_name,
       users.bio,
       (

diff --git a/frontend-react-js/src/components/ProfileAvatar.js b/frontend-react-js/src/components/ProfileAvatar.js
@@ -1,7 +1,7 @@
 import './ProfileAvatar.css';
 
 export default function ProfileAvatar(props) {
-  const backgroundImage = `url("https://assets.kapingkaping.cloud/avatars/processed/data.jpg")`;
+  const backgroundImage = `url("https://assets.kapingkaping.cloud/avatars/${props.id}.jpg")`;
   const styles = {
     backgroundImage: backgroundImage,
     backgroundSize: 'cover',

diff --git a/frontend-react-js/src/components/ProfileForm.js b/frontend-react-js/src/components/ProfileForm.js
@@ -1,7 +1,7 @@
 import './ProfileForm.css';
 import React from "react";
 import process from 'process';
-import {getAccessToken} from '../lib/CheckAuth';
+import {getAccessToken} from 'lib/CheckAuth';
 
 export default function ProfileForm(props) {
   const [bio, setBio] = React.useState('');

diff --git a/frontend-react-js/src/components/ProfileHeading.js b/frontend-react-js/src/components/ProfileHeading.js
@@ -1,6 +1,6 @@
 import './ProfileHeading.css';
-import EditProfileButton from '../components/EditProfileButton';
-import ProfileAvatar from '../components/ProfileAvatar'
+import EditProfileButton from 'components/EditProfileButton';
+import ProfileAvatar from 'components/ProfileAvatar'
 
 export default function ProfileHeading(props) {
   const backgroundImage = 'url("https://assets.kapingkaping.cloud/banners/banner.jpg")';

diff --git a/frontend-react-js/src/components/ProfileInfo.js b/frontend-react-js/src/components/ProfileInfo.js
@@ -1,5 +1,6 @@
 import './ProfileInfo.css';
 import {ReactComponent as ElipsesIcon} from './svg/elipses.svg';
+import ProfileAvatar from 'components/ProfileAvatar';
 import React from "react";
 
 import { Auth } from 'aws-amplify';
@@ -35,7 +36,7 @@ export default function ProfileInfo(props) {
         <button onClick={signOut}>Sign Out</button> 
       </div>
       <div className="profile-info" onClick={click_pop}>
-        <div className="profile-avatar"></div>
+        <ProfileAvatar id={props.user.cognito_user_uuid}/>
         <div className="profile-desc">
           <div className="profile-display-name">{props.user.display_name || "My Name" }</div>
           <div className="profile-username">@{props.user.handle || "handle"}</div>

diff --git a/frontend-react-js/src/lib/CheckAuth.js b/frontend-react-js/src/lib/CheckAuth.js
@@ -12,6 +12,7 @@ export const checkAuth = async (setUser) => {
     return Auth.currentAuthenticatedUser()
   }).then((cognito_user) => {
       setUser({
+        cognito_user_uuid: cognito_user.attributes.sub,
         display_name: cognito_user.attributes.name,
         handle: cognito_user.attributes.preferred_username
       })