From f304d42dcf86c380cd80dd50b67f387b4761fefd Mon Sep 17 00:00:00 2001 From: "Carina.Akaia.io" Date: Tue, 4 Jun 2024 19:01:38 +0400 Subject: [PATCH] Adjust naming (#60) --- src/app/_components/AllProjects.tsx | 30 ++++++----- src/app/_components/UserDropdown.tsx | 8 +-- src/app/_store/models.ts | 10 ++-- src/common/contracts/social/index.ts | 2 +- src/common/lib/images.ts | 4 +- ...{fetchProfileImages.ts => socialImages.ts} | 10 ++-- .../profile/components/ProfileBanner.tsx | 7 ++- src/modules/profile/constants.ts | 10 ++-- src/modules/profile/models.ts | 53 +++++++++---------- src/modules/profile/utils/index.ts | 7 +-- src/modules/project/components/Card.tsx | 19 +++---- 11 files changed, 88 insertions(+), 72 deletions(-) rename src/modules/core/services/{fetchProfileImages.ts => socialImages.ts} (73%) diff --git a/src/app/_components/AllProjects.tsx b/src/app/_components/AllProjects.tsx index a2c26053..5f74afc5 100644 --- a/src/app/_components/AllProjects.tsx +++ b/src/app/_components/AllProjects.tsx @@ -9,7 +9,7 @@ import Filter, { Group } from "@/common/ui/components/Filter"; import InfiniteScroll from "@/common/ui/components/InfiniteScroll"; import SearchBar from "@/common/ui/components/SearchBar"; import SortSelect from "@/common/ui/components/SortSelect"; -import { UserState } from "@/modules/profile/models"; +import { Profile } from "@/modules/profile/models"; import Card from "../../modules/project/components/Card"; import { categories, statuses } from "../../modules/project/constants"; @@ -76,20 +76,20 @@ const AllProjects = () => { } }; - const registrationsProfile = useTypedSelector((state) => state.users); + const registrationsProfile = useTypedSelector((state) => state.profiles); // handle search & filter useEffect(() => { // Search - const handleSearch = (registration: Registration, user: UserState) => { + const handleSearch = (registration: Registration, profile: Profile) => { if (search === "") return true; const { registrant_id: registrantId } = registration; - const { profile, tags, team } = user || {}; + const { socialData, tags, team } = profile || {}; // registration fields to search in const fields = [ registrantId, - profile?.description, - profile?.name, + socialData?.description, + socialData?.name, tags?.join(" "), team?.join(" "), ]; @@ -104,8 +104,8 @@ const AllProjects = () => { return statusFilter.includes(registration.status); }; // Filter by registration category - const handleCategory = (user: UserState) => { - const tags = user.tags || []; + const handleCategory = (profile: Profile) => { + const tags = profile.tags || []; if (categoryFilter.length === 0) return true; return categoryFilter.some((tag: string) => tags.includes(tag)); @@ -113,18 +113,24 @@ const AllProjects = () => { if (search || categoryFilter.length || statusFilter.length) { const filteredRegistrations = registrations.filter((registration) => { - const user = registrationsProfile[registration.registrant_id] || {}; + const profile = registrationsProfile[registration.registrant_id] || {}; return ( - handleSearch(registration, user) && - handleCategory(user) && + handleSearch(registration, profile) && + handleCategory(profile) && handleStatus(registration) ); }); setFilteredRegistrations(filteredRegistrations); } - }, [search, categoryFilter, statusFilter, registrations]); + }, [ + search, + categoryFilter, + statusFilter, + registrations, + registrationsProfile, + ]); // Fetch Registrations useEffect(() => { diff --git a/src/app/_components/UserDropdown.tsx b/src/app/_components/UserDropdown.tsx index e612675b..5506b30b 100644 --- a/src/app/_components/UserDropdown.tsx +++ b/src/app/_components/UserDropdown.tsx @@ -20,8 +20,8 @@ import { Skeleton } from "@/common/ui/components/skeleton"; import useWallet from "@/modules/auth/hooks/useWallet"; import { statusesIcons } from "@/modules/core/constants"; import useRegistration from "@/modules/core/hooks/useRegistration"; -import { fetchProfileImages } from "@/modules/core/services/fetchProfileImages"; -import { DEFAULT_USER } from "@/modules/profile/constants"; +import { fetchSocialImages } from "@/modules/core/services/socialImages"; +import { PROFILE_DEFAULTS } from "@/modules/profile/constants"; import { updateAccountId, updateNadabotVerification, @@ -46,7 +46,7 @@ const UserDropdown = () => { useEffect(() => { const fetchProfileImage = async () => { - const { image, profile } = await fetchProfileImages({ + const { image, profile } = await fetchSocialImages({ accountId, }); setProfileImg(image); @@ -83,7 +83,7 @@ const UserDropdown = () => { width={size} height={size} onError={() => { - setProfileImg(DEFAULT_USER.profileImages.image); + setProfileImg(PROFILE_DEFAULTS.socialImages.image); }} className="rounded-full shadow-[0px_0px_0px_1px_rgba(199,199,199,0.22)_inset]" alt="profile-image" diff --git a/src/app/_store/models.ts b/src/app/_store/models.ts index 5b45237d..cecfe0ae 100644 --- a/src/app/_store/models.ts +++ b/src/app/_store/models.ts @@ -1,12 +1,16 @@ import { Models } from "@rematch/core"; import { auth } from "@/modules/auth/state"; -import { navModel, usersModel } from "@/modules/profile/models"; +import { navModel, profilesModel } from "@/modules/profile/models"; export interface RootModel extends Models { auth: typeof auth; - users: typeof usersModel; + profiles: typeof profilesModel; nav: typeof navModel; } -export const models: RootModel = { auth, users: usersModel, nav: navModel }; +export const models: RootModel = { + auth, + profiles: profilesModel, + nav: navModel, +}; diff --git a/src/common/contracts/social/index.ts b/src/common/contracts/social/index.ts index e55b1f7b..980f485e 100644 --- a/src/common/contracts/social/index.ts +++ b/src/common/contracts/social/index.ts @@ -112,7 +112,7 @@ type NEARSocialGetResponse = { * Get User Profile Info from NEAR Social DB * @returns */ -export const getUserProfile = async (input: { accountId: string }) => { +export const getSocialProfile = async (input: { accountId: string }) => { const response = await nearSocialDbContractApi.view< NEARSocialUserProfileInput, NEARSocialGetResponse diff --git a/src/common/lib/images.ts b/src/common/lib/images.ts index b2bb3173..0d4540ce 100644 --- a/src/common/lib/images.ts +++ b/src/common/lib/images.ts @@ -1,5 +1,5 @@ import { naxiosInstance } from "@/common/contracts/index"; -import { Image, getUserProfile } from "@/common/contracts/social"; +import { Image, getSocialProfile } from "@/common/contracts/social"; type Props = { accountId?: string; @@ -41,7 +41,7 @@ export const getImage = async ({ try { if (!socialImage && accountId) { - const profile = await getUserProfile({ accountId }); + const profile = await getSocialProfile({ accountId }); if (!profile) return console.log("error fetching social profile"); socialImage = profile[type || "image"]; diff --git a/src/modules/core/services/fetchProfileImages.ts b/src/modules/core/services/socialImages.ts similarity index 73% rename from src/modules/core/services/fetchProfileImages.ts rename to src/modules/core/services/socialImages.ts index 41bd921d..fc1384a7 100644 --- a/src/modules/core/services/fetchProfileImages.ts +++ b/src/modules/core/services/socialImages.ts @@ -1,11 +1,11 @@ import { NEARSocialUserProfile, - getUserProfile, + getSocialProfile, } from "@/common/contracts/social"; import { getImage } from "@/common/lib/images"; type Props = { - profile?: NEARSocialUserProfile; + socialData?: NEARSocialUserProfile; accountId: string; }; @@ -14,11 +14,11 @@ type Props = { * @param * @returns */ -export const fetchProfileImages = async ({ profile, accountId }: Props) => { - let currentProfile = profile; +export const fetchSocialImages = async ({ socialData, accountId }: Props) => { + let currentProfile = socialData; if (!currentProfile) { - currentProfile = await getUserProfile({ accountId }); + currentProfile = await getSocialProfile({ accountId }); } const image = getImage({ diff --git a/src/modules/profile/components/ProfileBanner.tsx b/src/modules/profile/components/ProfileBanner.tsx index 0d8e7d85..13aff6f3 100644 --- a/src/modules/profile/components/ProfileBanner.tsx +++ b/src/modules/profile/components/ProfileBanner.tsx @@ -13,7 +13,7 @@ import { import { Skeleton } from "@/common/ui/components/skeleton"; import useIsHuman from "@/modules/core/hooks/useIsHuman"; import useRegistration from "@/modules/core/hooks/useRegistration"; -import { fetchProfileImages } from "@/modules/core/services/fetchProfileImages"; +import { fetchSocialImages } from "@/modules/core/services/socialImages"; import { projectStatusIcons } from "@/modules/project/components/ProjectStatusIcons"; import FollowStats from "./FollowStats"; @@ -37,7 +37,10 @@ const ProfileBanner = (props: Props) => { useEffect(() => { (async () => { - const imagesData = await fetchProfileImages({ profile, accountId }); + const imagesData = await fetchSocialImages({ + socialData: profile, + accountId, + }); setProfileImages({ image: imagesData.image, diff --git a/src/modules/profile/constants.ts b/src/modules/profile/constants.ts index ba9f5529..dfab0d6d 100644 --- a/src/modules/profile/constants.ts +++ b/src/modules/profile/constants.ts @@ -1,8 +1,12 @@ -export const DEFAULT_USER = { - profile: {}, +import { Profile } from "./models"; + +export const PROFILE_DEFAULTS: Profile = { + socialData: {}, tags: [], + team: [], totalAmountNear: "", - profileImages: { + + socialImages: { image: "/assets/images/profile-image.png", backgroundImage: "/assets/images/profile-banner.png", }, diff --git a/src/modules/profile/models.ts b/src/modules/profile/models.ts index 0009bae7..5bc13cda 100644 --- a/src/modules/profile/models.ts +++ b/src/modules/profile/models.ts @@ -6,33 +6,35 @@ import { PayoutDetailed } from "@/common/contracts/potlock/interfaces/pot.interf import { getDonationsForProject } from "@/common/contracts/potlock/pot"; import { NEARSocialUserProfile, - getUserProfile, + getSocialProfile, } from "@/common/contracts/social"; import { yoctosToUsdWithFallback } from "@/common/lib"; -import { fetchProfileImages } from "../core/services/fetchProfileImages"; +import { fetchSocialImages } from "../core/services/socialImages"; import { getTagsFromSocialProfileData, getTeamMembersFromProfile, getTotalAmountNear, } from "../project/utils"; -export type UserState = { - profile: NEARSocialUserProfile; +export type Profile = { + socialData: NEARSocialUserProfile; tags: string[]; team: string[]; totalAmountNear: string; - profileImages: { + + socialImages: { image: string; backgroundImage: string; }; }; -type Users = Record; -export const usersModel = createModel()({ - state: {} as Users, +type ProfileIndex = Record; + +export const profilesModel = createModel()({ + state: {} as ProfileIndex, reducers: { - update(state, payload: Users) { + update(state, payload: ProfileIndex) { return { ...state, ...payload, @@ -40,7 +42,7 @@ export const usersModel = createModel()({ }, }, effects: { - async loadUser({ + async loadProfile({ projectId, potId, payoutDetails, @@ -49,12 +51,12 @@ export const usersModel = createModel()({ potId?: string; payoutDetails?: PayoutDetailed; }) { - const profile = await getUserProfile({ + const socialData = await getSocialProfile({ accountId: projectId, }); - const profileImagesPromise = fetchProfileImages({ - profile, + const socialImagesResponse = fetchSocialImages({ + socialData, accountId: projectId, }); @@ -70,8 +72,8 @@ export const usersModel = createModel()({ }) : Promise.resolve([]); - const [profileImages, donations] = await Promise.all([ - profileImagesPromise, + const [socialImages, donations] = await Promise.all([ + socialImagesResponse, donationsPromise, ]); @@ -79,20 +81,15 @@ export const usersModel = createModel()({ getTotalAmountNear(donations, potId, payoutDetails), ); - const tags = getTagsFromSocialProfileData(profile || {}); - const team = getTeamMembersFromProfile(profile); - - const user = { - [projectId]: { - profile: profile ?? {}, - tags, - team, - totalAmountNear, - profileImages, - }, + const profile: Profile = { + socialData: socialData ?? {}, + tags: getTagsFromSocialProfileData(socialData || {}), + team: getTeamMembersFromProfile(socialData), + totalAmountNear, + socialImages, }; - this.update(user); + this.update({ [projectId]: profile }); }, }, }); @@ -123,7 +120,7 @@ const updateList = (list: string[], item: string): string[] => { export const navModel = createModel()({ state: { - // TODO: add is registery admin + // TODO: add is registry admin accountId: "", isNadabotVerified: false, actAsDao: { diff --git a/src/modules/profile/utils/index.ts b/src/modules/profile/utils/index.ts index d04f0af1..fe931eea 100644 --- a/src/modules/profile/utils/index.ts +++ b/src/modules/profile/utils/index.ts @@ -1,9 +1,10 @@ import { dispatch, useTypedSelector } from "@/app/_store"; -import { DEFAULT_USER } from "../constants"; +import { PROFILE_DEFAULTS } from "../constants"; +import { Profile } from "../models"; -export const useUser = (projectId: string) => - useTypedSelector((state) => state.users[projectId] || DEFAULT_USER); +export const useProfile = (projectId: string): Profile => + useTypedSelector((state) => state.profiles[projectId] || PROFILE_DEFAULTS); export const toggleDao = (toggle: boolean) => dispatch.nav.update({ diff --git a/src/modules/project/components/Card.tsx b/src/modules/project/components/Card.tsx index 61c2e2be..726c117b 100644 --- a/src/modules/project/components/Card.tsx +++ b/src/modules/project/components/Card.tsx @@ -7,7 +7,7 @@ import { dispatch } from "@/app/_store"; import { PayoutDetailed } from "@/common/contracts/potlock/interfaces/pot.interfaces"; import { _address, yoctosToNear } from "@/common/lib"; import { Button } from "@/common/ui/components/button"; -import { useUser } from "@/modules/profile/utils"; +import { useProfile } from "@/modules/profile/utils"; import CardSkeleton from "./CardSkeleton"; @@ -26,13 +26,14 @@ const Card = ({ }) => { const allowDonate = _allowDonate === undefined ? true : _allowDonate; - const { profile, profileImages, tags, totalAmountNear } = useUser(projectId); + const { socialData, socialImages, tags, totalAmountNear } = + useProfile(projectId); const [isLoading, setIsLoading] = useState(true); useEffect(() => { - dispatch.users - .loadUser({ + dispatch.profiles + .loadProfile({ projectId, payoutDetails, potId, @@ -45,7 +46,7 @@ const Card = ({ }, [projectId, payoutDetails, potId]); return ( - + {isLoading ? ( ) : ( @@ -60,7 +61,7 @@ const Card = ({ // loading="lazy" className="object-cover transition-transform duration-500 ease-in-out group-hover:scale-110" alt="background-image" - src={profileImages.backgroundImage} + src={socialImages.backgroundImage} /> @@ -73,7 +74,7 @@ const Card = ({ loading="lazy" className="rounded-full bg-white object-cover shadow-[0px_0px_0px_3px_#FFF,0px_0px_0px_1px_rgba(199,199,199,0.22)_inset]" alt="profile-image" - src={profileImages.image} + src={socialImages.image} /> @@ -82,7 +83,7 @@ const Card = ({ className="w-full text-base font-semibold text-[#2e2e2e]" data-testid="project-card-title" > - {_address(profile?.name || "", 30) || _address(projectId, 30)} + {_address(socialData?.name || "", 30) || _address(projectId, 30)} {/* Description */} @@ -90,7 +91,7 @@ const Card = ({ className="text-base font-normal text-[#2e2e2e]" data-testid="project-card-description" > - {_address(profile.description || "", MAX_DESCRIPTION_LENGTH)} + {_address(socialData.description || "", MAX_DESCRIPTION_LENGTH)} {/* Tags */}