From 4a7843b0b40707f94828c9dce18f54d8eb821ae2 Mon Sep 17 00:00:00 2001
From: rotimi-best <best@classroomio.com>
Date: Sat, 11 Sep 2021 22:15:15 +0300
Subject: [PATCH] Add avatar to people page

---
 .../Course/components/People/types.ts         |  1 +
 src/routes/courses/[id]/people.svelte         | 25 +++++++++++++------
 src/routes/profile/[id].svelte                | 11 +++++++-
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/Course/components/People/types.ts b/src/components/Course/components/People/types.ts
index 8b82d543..0791158f 100644
--- a/src/components/Course/components/People/types.ts
+++ b/src/components/Course/components/People/types.ts
@@ -3,6 +3,7 @@ export interface Profile {
   fullname: string;
   username: string;
   email: string;
+  avatar_url?: string;
 }
 
 export interface Person {
diff --git a/src/routes/courses/[id]/people.svelte b/src/routes/courses/[id]/people.svelte
index 24365719..f9bf4ed9 100644
--- a/src/routes/courses/[id]/people.svelte
+++ b/src/routes/courses/[id]/people.svelte
@@ -14,6 +14,7 @@
   import { onMount } from 'svelte';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
   import Delete24 from 'carbon-icons-svelte/lib/Delete24';
+  import Avatar from '../../../components/Avatar/index.svelte';
   import PageNav from '../../../components/PageNav/index.svelte';
   import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
   import TextField from '../../../components/Form/TextField.svelte';
@@ -165,14 +166,22 @@
           {/if}
           <!-- <span class="flex-grow" /> -->
           {#if person.profile}
-            <div class="break-all w-2/4 mx-2">
-              <p class="text-lg">{person.profile.fullname}</p>
-              <a
-                href="mailto:{person.profile.email}"
-                class="text-md text-blue-600"
-              >
-                {person.profile.email}
-              </a>
+            <div class="w-2/4 mx-2 flex items-center">
+              <Avatar
+                src={person.profile.avatar_url}
+                name={person.profile.fullname}
+              />
+              <div class="ml-2 break-all">
+                <p class="text-lg">{person.profile.fullname}</p>
+                {#if !isStudent}
+                  <a
+                    href="mailto:{person.profile.email}"
+                    class="text-md text-blue-600"
+                  >
+                    {person.profile.email}
+                  </a>
+                {/if}
+              </div>
             </div>
           {:else}
             <div class="break-all w-2/4 mx-2">
diff --git a/src/routes/profile/[id].svelte b/src/routes/profile/[id].svelte
index 65b19be7..178f4cc0 100644
--- a/src/routes/profile/[id].svelte
+++ b/src/routes/profile/[id].svelte
@@ -74,6 +74,7 @@
             .getPublicUrl(filename);
 
           updates.avatar_url = publicURL;
+          currentProfile.avatar_url = publicURL;
         }
         avatar = undefined;
       }
@@ -104,8 +105,16 @@
     }
   }
 
+  $: isDirty =
+    avatar ||
+    initialValueOfUserName !== currentProfile.username ||
+    initialValueOfFullName !== currentProfile.fullname;
   $: isOwner = $profile.id === profileId;
   $: getProfile(profileId);
+
+  $: if (avatar) {
+    updateProfile();
+  }
 </script>
 
 <svelte:head>
@@ -149,7 +158,7 @@
           isDisabled={true}
         />
 
-        {#if avatar || initialValueOfUserName !== currentProfile.username || initialValueOfFullName !== currentProfile.fullname}
+        {#if isDirty}
           <PrimaryButton
             label={loading ? 'Updating...' : 'Update profile'}
             onClick={updateProfile}