Use new profilePictureUrl field instead of Slack avatar URL

app/events/[slug]/page.tsx

@@ -18,6 +18,7 @@ import {
 import { getProjectById, type Project } from "~/src/data/project";
 import { getUserProfile, type UserProfile } from "~/src/data/user-profile";
 import { Route } from "~/src/routing";
+import { defaultAvatarUrl } from "~/src/utils";
 
 type Params = {
   slug: string;
@@ -113,7 +114,7 @@ const EventSidebar = ({
       <SidebarSection title="Kontakt">
         <ImageLabel
           link={Route.toProfile({ id: owner.id })}
-          imageUrl={owner.avatarUrl}
+          imageUrl={owner.profilePictureUrl ?? defaultAvatarUrl}
           label={owner.name}
         />
       </SidebarSection>

app/opportunities/[slug]/page.tsx

@@ -13,6 +13,7 @@ import { getAllProjects, type Project } from "~/src/data/project";
 import { getAlternativeOpenRoles } from "~/src/data/queries";
 import { getUserProfile, type UserProfile } from "~/src/data/user-profile";
 import { Route } from "~/src/routing";
+import { defaultAvatarUrl } from "~/src/utils";
 
 type Params = {
   slug: string;
@@ -97,7 +98,7 @@ const RoleSidebar = ({
     <SidebarSection title="Kontaktní osoba">
       <ImageLabel
         link={Route.toProfile({ id: owner.id })}
-        imageUrl={owner.avatarUrl}
+        imageUrl={owner.profilePictureUrl ?? defaultAvatarUrl}
         label={owner.name}
       />
     </SidebarSection>

app/people/[id]/page.tsx

@@ -13,6 +13,7 @@ import {
 } from "~/src/data/team-engagement";
 import { getUserProfile, type UserProfile } from "~/src/data/user-profile";
 import { Route } from "~/src/routing";
+import { defaultAvatarUrl } from "~/src/utils";
 
 import { ContactRows } from "./ContactInfo";
 import { InfoRow } from "./InfoRow";
@@ -197,7 +198,7 @@ const ProjectSection = ({ engagements }: EngagementProps) => {
 const Avatar = ({ profile }: ProfileProps) => (
   <div className="relative mx-auto aspect-square w-[200px]">
     <Image
-      src={profile.avatarUrl}
+      src={profile.profilePictureUrl ?? defaultAvatarUrl}
       className="aspect-square rounded-full bg-pebble object-cover object-top"
       width={200}
       height={200}

app/projects/[slug]/ProjectTeamSection.tsx

@@ -26,7 +26,7 @@ export const ProjectTeamSection = ({
                 profile={{
                   id: e.userId,
                   name: e.userName,
-                  avatarUrl: e.userAvatarUrl ?? defaultAvatarUrl,
+                  profilePictureUrl: e.profilePictureUrl ?? defaultAvatarUrl,
                 }}
               />
             ))}

app/projects/[slug]/page.tsx

@@ -23,7 +23,7 @@ import {
 } from "~/src/data/team-engagement";
 import { getAllPlaylistVideos } from "~/src/data/youtube";
 import { Route } from "~/src/routing";
-import { shuffleInPlace } from "~/src/utils";
+import { defaultAvatarUrl, shuffleInPlace } from "~/src/utils";
 
 import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
 
@@ -245,7 +245,7 @@ const ProjectSidebar = ({
         <ImageLabel
           key={c.id}
           link={Route.toProfile({ id: c.userId })}
-          imageUrl={c.userAvatarUrl}
+          imageUrl={c.profilePictureUrl ?? defaultAvatarUrl}
           label={c.userName}
           faded={c.inactive}
         />

components/UserProfileCard.tsx

@@ -7,9 +7,10 @@ import clsx from "clsx";
 import { CeskoDigital } from "~/components/icons/generic";
 import { type UserProfile } from "~/src/data/user-profile";
 import { Route } from "~/src/routing";
+import { defaultAvatarUrl } from "~/src/utils";
 
 export type Props = {
-  profile: Pick<UserProfile, "name" | "avatarUrl" | "id"> &
+  profile: Pick<UserProfile, "name" | "profilePictureUrl" | "id"> &
     Partial<Pick<UserProfile, "roles">>;
   label?: ReactNode;
 };
@@ -26,7 +27,7 @@ export const UserProfileCard = ({ profile, label }: Props) => (
     <div className="shrink-0">
       <div className="relative mx-auto w-[80px]">
         <Image
-          src={profile.avatarUrl}
+          src={profile.profilePictureUrl ?? defaultAvatarUrl}
           className={clsx(
             "shrink-0 rounded-full bg-gray shadow",
             // This fixes the appearance of non-square images

components/districts/districts.ts

@@ -5,7 +5,7 @@ import sourceData from "./districts.json";
 /** Map member is a subset of user profile containing just the necessary fields */
 export type MapMember = Pick<
   UserProfile,
-  "name" | "slackId" | "slackAvatarUrl" | "slackProfileUrl"
+  "name" | "slackId" | "slackProfileUrl"
 >;
 
 /** Map model is a map where the keys are district names and the values are lists of users in given district */

src/data/auth.ts

@@ -54,7 +54,7 @@ const decodeUser = record({
   email: string,
   emailVerified: optionalAsNull(date),
   name: optionalAsNull(string),
-  image: field("slackAvatarUrl", relationToZeroOrOne),
+  image: field("profilePictureUrl", relationToZeroOrOne),
 });
 
 const encodeUser = (user: Partial<User>): Partial<UserTableSchema> => ({

src/data/team-engagement.ts

@@ -15,7 +15,6 @@ import {
   takeFirst,
   withDefault,
 } from "~/src/decoding";
-import { defaultAvatarUrl } from "~/src/utils";
 
 import { appBase, unwrapRecords } from "./airtable";
 
@@ -38,10 +37,7 @@ export const decodeTeamEngagement = record({
   projectId: field("project", relationToOne),
   userId: relationToOne,
   userName: relationToOne,
-  userAvatarUrl: field(
-    "userAvatarUrl",
-    withDefault(relationToZeroOrOne, defaultAvatarUrl),
-  ),
+  profilePictureUrl: relationToZeroOrOne,
   projectRole: optional(string),
   projectName: relationToOne,
   projectSlug: relationToOne,

src/data/user-profile.test.ts

@@ -1,5 +1,3 @@
-import { defaultAvatarUrl } from "~/src/utils";
-
 import {
   compareNames,
   decodeUserProfile,
@@ -29,8 +27,7 @@ test("Decode user with no skills", () => {
     slackUserRelationId: undefined,
     slackId: "slack-id",
     state: "confirmed",
-    slackAvatarUrl: undefined,
-    avatarUrl: defaultAvatarUrl,
+    profilePictureUrl: undefined,
     slackProfileUrl: undefined,
     featureFlags: [],
     notificationFlags: [],
@@ -70,8 +67,7 @@ test("Decode Slack Users relation", () => {
     slackUserRelationId: undefined,
     slackId: "slack-id",
     state: "confirmed",
-    slackAvatarUrl: undefined,
-    avatarUrl: defaultAvatarUrl,
+    profilePictureUrl: undefined,
     slackProfileUrl: undefined,
     featureFlags: [],
     notificationFlags: ["receiveNewRoleNotifications"],
@@ -108,8 +104,7 @@ test("Decode Slack Users relation", () => {
     slackUserRelationId: "someDatabaseId",
     slackId: "slack-id",
     state: "confirmed",
-    slackAvatarUrl: undefined,
-    avatarUrl: defaultAvatarUrl,
+    profilePictureUrl: undefined,
     slackProfileUrl: undefined,
     featureFlags: [],
     notificationFlags: [],

src/data/user-profile.ts

@@ -16,7 +16,7 @@ import {
   withDefault,
 } from "~/src/decoding";
 import { decodeFlags } from "~/src/flags";
-import { defaultAvatarUrl, normalizeEmailAddress } from "~/src/utils";
+import { normalizeEmailAddress } from "~/src/utils";
 
 import { unwrapRecord, unwrapRecords, usersBase } from "./airtable";
 
@@ -57,7 +57,7 @@ export interface Schema extends FieldSet {
   slackUser: ReadonlyArray<string>;
   slackId: ReadonlyArray<string>;
   slackProfileUrl: string;
-  slackAvatarUrl: string;
+  profilePictureUrl: string;
   notificationFlags: ReadonlyArray<string>;
   privacyFlags: ReadonlyArray<string>;
   featureFlags: ReadonlyArray<string>;
@@ -98,11 +98,7 @@ export const decodeUserProfile = record({
   slackUserRelationId: field("slackUser", relationToZeroOrOne),
   slackId: relationToZeroOrOne,
   slackProfileUrl: relationToZeroOrOne,
-  slackAvatarUrl: relationToZeroOrOne,
-  avatarUrl: field(
-    "slackAvatarUrl",
-    withDefault(relationToZeroOrOne, defaultAvatarUrl),
-  ),
+  profilePictureUrl: optional(string),
   state: union("unconfirmed", "confirmed"),
   featureFlags: decodeFlags(union(...featureFlags)),
   notificationFlags: decodeFlags(union(...notificationFlags)),
@@ -128,6 +124,7 @@ export function encodeUserProfile(
     occupation: profile.occupation,
     organizationName: profile.organizationName,
     profileUrl: profile.profileUrl,
+    profilePictureUrl: profile.profilePictureUrl,
     state: profile.state,
     notificationFlags: profile.notificationFlags,
     privacyFlags: profile.privacyFlags,
@@ -211,6 +208,7 @@ export async function updateUserProfile(
       | "bio"
       | "occupation"
       | "profileUrl"
+      | "profilePictureUrl"
       | "organizationName"
     >
   >,