add support for custom default avatars (#1409)

* add support for custom default avatars in registration

* refactor and sovereignVenueId usage for avatars

* improve loading indicator condition

* pass venueId to profilepicture to remove query logic

* add debt for sovereign venue id hook

* refactor and quality improvement

Author: denisdimitrov

src/components/molecules/ProfilePictureInput/ProfilePictureInput.tsx

@@ -1,10 +1,14 @@
-import React, { useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useFirebase } from "react-redux-firebase";
+import { useAsync } from "react-use";
 import { UserInfo } from "firebase/app";
 import { FirebaseStorage } from "@firebase/storage-types";
 
+import { fetchSovereignVenueId } from "api/sovereignVenue";
+
 import {
   ACCEPTED_IMAGE_TYPES,
+  DEFAULT_AVATARS,
   MAX_AVATAR_IMAGE_FILE_SIZE_BYTES,
 } from "settings";
 
@@ -14,7 +18,8 @@ import "./ProfilePictureInput.scss";
 
 type Reference = ReturnType<FirebaseStorage["ref"]>;
 
-interface PropsType {
+interface ProfilePictureInputProps {
+  venueId: string;
   setValue: (inputName: string, value: string, rerender: boolean) => void;
   user: UserInfo;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -24,14 +29,8 @@ interface PropsType {
   register: any;
 }
 
-const sparkleAvatars = [
-  "default-profile-pic-1.png",
-  "default-profile-pic-2.png",
-  "default-profile-pic-3.png",
-  "default-profile-pic-4.png",
-];
-
-const ProfilePictureInput: React.FunctionComponent<PropsType> = ({
+const ProfilePictureInput: React.FunctionComponent<ProfilePictureInputProps> = ({
+  venueId,
   setValue,
   user,
   errors,
@@ -43,6 +42,26 @@ const ProfilePictureInput: React.FunctionComponent<PropsType> = ({
   const firebase = useFirebase();
   const uploadRef = useRef<HTMLInputElement>(null);
 
+  // @debt Replace fetchSovereignVenueId with useSovereignVenueId, when the hook is refactored to accept venueId as a param.
+  const {
+    value: sovereignVenueId,
+    loading: isLoadingSovereignVenueId,
+  } = useAsync(async () => await fetchSovereignVenueId(venueId));
+
+  const {
+    value: customAvatars,
+    loading: isLoadingCustomAvatars,
+  } = useAsync(async () => {
+    const storageRef = firebase.storage().ref();
+    const list = await storageRef
+      .child(`/assets/avatars/${sovereignVenueId}`)
+      .listAll();
+    const avatars: string[] = await Promise.all(
+      list.items.map((item) => item.getDownloadURL())
+    );
+    return avatars;
+  }, [sovereignVenueId]);
+
   const uploadPicture = async (profilePictureRef: Reference, file: File) => {
     setIsPictureUploading(true);
     const uploadedProfilePicture = await profilePictureRef.put(file);
@@ -75,9 +94,36 @@ const ProfilePictureInput: React.FunctionComponent<PropsType> = ({
     setValue("pictureUrl", pictureUrlRef, true);
   };
 
-  const uploadDefaultAvatar = async (avatar: string) => {
-    setValue("pictureUrl", process.env.PUBLIC_URL + `/avatars/${avatar}`, true);
-  };
+  const uploadDefaultAvatar = useCallback(
+    async (avatar: string) => {
+      setValue("pictureUrl", avatar, true);
+    },
+    [setValue]
+  );
+
+  const isLoading =
+    (isLoadingSovereignVenueId || isLoadingCustomAvatars) &&
+    (customAvatars !== undefined || error !== undefined);
+
+  const defaultAvatars = customAvatars?.length
+    ? customAvatars
+    : DEFAULT_AVATARS;
+
+  const avatarImages = useMemo(() => {
+    return defaultAvatars.map((avatar, index) => (
+      <div
+        key={`${avatar}-${index}`}
+        className="profile-picture-preview-container"
+        onClick={() => uploadDefaultAvatar(avatar)}
+      >
+        <img
+          src={avatar}
+          className="profile-icon profile-picture-preview"
+          alt={`default avatar ${index}`}
+        />
+      </div>
+    ));
+  }, [defaultAvatars, uploadDefaultAvatar]);
 
   return (
     <div className="profile-picture-upload-form">
@@ -110,21 +156,7 @@ const ProfilePictureInput: React.FunctionComponent<PropsType> = ({
       {error && <small>Error uploading: {error}</small>}
       <small>Or pick one from our Sparkle profile pics</small>
       <div className="default-avatars-container">
-        {sparkleAvatars.map((avatar, index) => {
-          return (
-            <div
-              key={`${avatar}-${index}`}
-              className="profile-picture-preview-container"
-              onClick={() => uploadDefaultAvatar(avatar)}
-            >
-              <img
-                src={`/avatars/${avatar}`}
-                className="profile-icon profile-picture-preview"
-                alt="your profile"
-              />
-            </div>
-          );
-        })}
+        {isLoading ? <div>Loading...</div> : avatarImages}
       </div>
       <input
         name="pictureUrl"

src/components/organisms/EditProfileModal/EditProfileModal.tsx

@@ -1,16 +1,23 @@
 import React, { useEffect } from "react";
 import { Modal } from "react-bootstrap";
 import { useForm } from "react-hook-form";
-import "./EditProfileModal.scss";
+
+import { DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
+
+import { QuestionType } from "types/Question";
+
+import { currentVenueSelectorData } from "utils/selectors";
+
+import { useUser } from "hooks/useUser";
+import { useSelector } from "hooks/useSelector";
+import { useVenueId } from "hooks/useVenueId";
+
 import { ProfileFormData } from "pages/Account/Profile";
 import { QuestionsFormData } from "pages/Account/Questions";
 import { updateUserProfile } from "pages/Account/helpers";
-import { QuestionType } from "types/Question";
 import ProfilePictureInput from "components/molecules/ProfilePictureInput";
-import { DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
-import { useUser } from "hooks/useUser";
-import { useSelector } from "hooks/useSelector";
-import { currentVenueSelectorData } from "utils/selectors";
+
+import "./EditProfileModal.scss";
 
 interface PropsType {
   show: boolean;
@@ -21,6 +28,7 @@ const EditProfileModal: React.FunctionComponent<PropsType> = ({
   show,
   onHide,
 }) => {
+  const venueId = useVenueId();
   const { user, profile } = useUser();
   const profileQuestions = useSelector(
     (state) => currentVenueSelectorData(state)?.profile_questions
@@ -87,8 +95,9 @@ const EditProfileModal: React.FunctionComponent<PropsType> = ({
                 less
               </span>
             )}
-            {user && (
+            {user && venueId && (
               <ProfilePictureInput
+                venueId={venueId}
                 setValue={setValue}
                 user={user}
                 errors={errors}

src/components/organisms/ProfileModal/EditProfileForm/EditProfileForm.tsx

@@ -1,15 +1,22 @@
 import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import "./EditProfileForm.scss";
+
+import { DEFAULT_PROFILE_IMAGE, DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
+
+import { QuestionType } from "types/Question";
+
+import { currentVenueSelectorData } from "utils/selectors";
+
+import { useUser } from "hooks/useUser";
+import { useSelector } from "hooks/useSelector";
+import { useVenueId } from "hooks/useVenueId";
+
 import { ProfileFormData } from "pages/Account/Profile";
 import { QuestionsFormData } from "pages/Account/Questions";
 import { updateUserProfile } from "pages/Account/helpers";
-import { QuestionType } from "types/Question";
 import ProfilePictureInput from "components/molecules/ProfilePictureInput";
-import { useUser } from "hooks/useUser";
-import { DEFAULT_PROFILE_IMAGE, DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
-import { useSelector } from "hooks/useSelector";
-import { currentVenueSelectorData } from "utils/selectors";
+
+import "./EditProfileForm.scss";
 
 interface PropsType {
   setIsEditMode: (value: boolean) => void;
@@ -18,6 +25,7 @@ interface PropsType {
 const EditProfileForm: React.FunctionComponent<PropsType> = ({
   setIsEditMode,
 }) => {
+  const venueId = useVenueId();
   const { user, profile } = useUser();
   const profileQuestions = useSelector(
     (state) => currentVenueSelectorData(state)?.profile_questions
@@ -82,8 +90,9 @@ const EditProfileForm: React.FunctionComponent<PropsType> = ({
               less
             </span>
           )}
-          {user && (
+          {user && venueId && (
             <ProfilePictureInput
+              venueId={venueId}
               setValue={setValue}
               user={user}
               errors={errors}

src/pages/Account/Profile.tsx

@@ -1,16 +1,24 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 import { useHistory } from "react-router-dom";
-import { updateUserProfile } from "./helpers";
 import "firebase/storage";
-import "./Account.scss";
-import ProfilePictureInput from "components/molecules/ProfilePictureInput";
-import { RouterLocation } from "types/RouterLocation";
-import { useUser } from "hooks/useUser";
+
 import { IS_BURN } from "secrets";
-import getQueryParameters from "utils/getQueryParameters";
+
 import { DEFAULT_VENUE, DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
+
+import { RouterLocation } from "types/RouterLocation";
+
+import getQueryParameters from "utils/getQueryParameters";
+
 import { useVenueId } from "hooks/useVenueId";
+import { useUser } from "hooks/useUser";
+
+import { updateUserProfile } from "./helpers";
+
+import ProfilePictureInput from "components/molecules/ProfilePictureInput";
+
+import "./Account.scss";
 
 export interface ProfileFormData {
   partyName: string;
@@ -90,6 +98,7 @@ const Profile: React.FunctionComponent<PropsType> = ({ location }) => {
             )}
             {user && (
               <ProfilePictureInput
+                venueId={venueId}
                 setValue={setValue}
                 user={user}
                 errors={errors}

src/settings.ts

@@ -558,6 +558,13 @@ export const RANDOM_AVATARS = [
   "avatar-12.png",
 ];
 
+export const DEFAULT_AVATARS = [
+  "/avatars/default-profile-pic-1.png",
+  "/avatars/default-profile-pic-2.png",
+  "/avatars/default-profile-pic-3.png",
+  "/avatars/default-profile-pic-4.png",
+];
+
 export const REACTION_TIMEOUT = 5000; // time in ms
 export const SHOW_EMOJI_IN_REACTION_PAGE = true;