From 6e10b5be7116e127496b11dd8e88371d82654aa5 Mon Sep 17 00:00:00 2001 From: NickJ202 Date: Tue, 30 Jul 2024 10:10:03 -0400 Subject: [PATCH] set profile image from profile assets --- src/api/assets.ts | 1 + src/assets/actions.svg | 1 + .../atoms/IconButton/IconButton.tsx | 1 + .../organisms/AssetsTable/AssetsTable.tsx | 126 ++++++++++++++---- .../organisms/AssetsTable/styles.ts | 52 ++++++++ src/components/organisms/AssetsTable/types.ts | 1 + src/helpers/config.ts | 2 + src/helpers/language.ts | 1 + src/helpers/themes.ts | 2 +- src/helpers/types.ts | 1 + .../Profile/ProfileAssets/ProfileAssets.tsx | 8 +- 11 files changed, 169 insertions(+), 27 deletions(-) create mode 100644 src/assets/actions.svg diff --git a/src/api/assets.ts b/src/api/assets.ts index 52efef4..5d1dcee 100644 --- a/src/api/assets.ts +++ b/src/api/assets.ts @@ -206,6 +206,7 @@ export function structureAssets(gqlResponse: DefaultGQLResponseType): AssetType[ implementation: getTagValue(element.node.tags, TAGS.keys.implements), collectionId: getTagValue(element.node.tags, TAGS.keys.collectionId), collectionName: getTagValue(element.node.tags, TAGS.keys.collectionName), + contentType: getTagValue(element.node.tags, TAGS.keys.contentType), }, }); }); diff --git a/src/assets/actions.svg b/src/assets/actions.svg new file mode 100644 index 0000000..00d9a26 --- /dev/null +++ b/src/assets/actions.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/atoms/IconButton/IconButton.tsx b/src/components/atoms/IconButton/IconButton.tsx index c7c4e02..b0e8c2e 100644 --- a/src/components/atoms/IconButton/IconButton.tsx +++ b/src/components/atoms/IconButton/IconButton.tsx @@ -34,6 +34,7 @@ export default function IconButton(props: IProps) { function handlePress(e: any) { e.preventDefault(); + e.stopPropagation(); props.handlePress(); } diff --git a/src/components/organisms/AssetsTable/AssetsTable.tsx b/src/components/organisms/AssetsTable/AssetsTable.tsx index 92d4353..1421091 100644 --- a/src/components/organisms/AssetsTable/AssetsTable.tsx +++ b/src/components/organisms/AssetsTable/AssetsTable.tsx @@ -1,17 +1,19 @@ import React from 'react'; import { Link, useNavigate } from 'react-router-dom'; -import { getAssetIdGroups, getAssetsByIds } from 'api'; +import { getAssetIdGroups, getAssetsByIds, messageResult } from 'api'; import * as GS from 'app/styles'; import { Button } from 'components/atoms/Button'; import { CurrencyLine } from 'components/atoms/CurrencyLine'; import { IconButton } from 'components/atoms/IconButton'; +import { Notification } from 'components/atoms/Notification'; import { Select } from 'components/atoms/Select'; import { ASSET_SORT_OPTIONS, ASSETS, PAGINATORS, STYLING, URLS } from 'helpers/config'; -import { AssetDetailType, AssetSortType, IdGroupType, SelectOptionType } from 'helpers/types'; +import { AssetDetailType, AssetSortType, IdGroupType, NotificationType, SelectOptionType } from 'helpers/types'; import { isFirefox, sortOrders } from 'helpers/utils'; import * as windowUtils from 'helpers/window'; +import { useArweaveProvider } from 'providers/ArweaveProvider'; import { useLanguageProvider } from 'providers/LanguageProvider'; import { AssetData } from '../AssetData'; @@ -22,6 +24,8 @@ import { IProps } from './types'; export default function AssetsTable(props: IProps) { const navigate = useNavigate(); + const arProvider = useArweaveProvider(); + const languageProvider = useLanguageProvider(); const language = languageProvider.object[languageProvider.current]; @@ -40,6 +44,9 @@ export default function AssetsTable(props: IProps) { const [desktop, setDesktop] = React.useState(windowUtils.checkWindowCutoff(parseInt(STYLING.cutoffs.initial))); const [scrolling, setScrolling] = React.useState(false); + const [profileLoading, setProfileLoading] = React.useState(false); + const [profileResponse, setProfileResponse] = React.useState(null); + function handleWindowResize() { if (windowUtils.checkWindowCutoff(parseInt(STYLING.cutoffs.initial))) { setDesktop(true); @@ -173,6 +180,52 @@ export default function AssetsTable(props: IProps) { ); } + async function handleProfileActionPress(e: any, asset: AssetDetailType) { + if (arProvider.profile && arProvider.profile.id && asset.data && asset.data.id) { + e.preventDefault(); + e.stopPropagation(); + + setProfileLoading(true); + try { + const data: any = { + DisplayName: arProvider.profile.displayName, + UserName: arProvider.profile.username, + Description: arProvider.profile.bio, + CoverImage: arProvider.profile.banner, + ProfileImage: asset.data.id, + }; + + let updateResponse = await messageResult({ + processId: arProvider.profile.id, + action: 'Update-Profile', + tags: null, + data: data, + wallet: arProvider.wallet, + }); + if (updateResponse && updateResponse['Profile-Success']) { + arProvider.setToggleProfileUpdate(!arProvider.toggleProfileUpdate); + setProfileResponse({ + message: `${language.profileUpdated}!`, + status: 'success', + }); + } else { + console.log(updateResponse); + setProfileResponse({ + message: language.errorUpdatingProfile, + status: 'warning', + }); + } + } catch (e: any) { + console.error(e); + setProfileResponse({ + message: language.errorUpdatingProfile, + status: 'warning', + }); + } + setProfileLoading(false); + } + } + function getData() { if ((assetsLoading || props.loadingIds) && viewType) { let Wrapper: any; @@ -265,31 +318,54 @@ export default function AssetsTable(props: IProps) { ); case 'grid': return ( - - {assets.map((asset: AssetDetailType, index: number) => { - const redirect = `${URLS.asset}${asset.data.id}`; - return ( - - - - - - - + <> + + {assets.map((asset: AssetDetailType, index: number) => { + const redirect = `${URLS.asset}${asset.data.id}`; + return ( + - -

{asset.data.title}

- + + + {props.setProfileAction && + asset.data.contentType && + asset.data.contentType.includes('image') && ( + + + + )} + - -

{asset.data.description || asset.data.title}

- - {getListing(asset)} - - - ); - })} - + + + +

{asset.data.title}

+ + + +

{asset.data.description || asset.data.title}

+ + {getListing(asset)} + + + ); + })} + + {profileResponse && ( + setProfileResponse(null)} + /> + )} + ); } } else { diff --git a/src/components/organisms/AssetsTable/styles.ts b/src/components/organisms/AssetsTable/styles.ts index cfd6f24..b02be99 100644 --- a/src/components/organisms/AssetsTable/styles.ts +++ b/src/components/organisms/AssetsTable/styles.ts @@ -68,6 +68,54 @@ export const AssetGridElement = styled.div` position: relative; `; +export const AssetGridDataActionWrapper = styled.div` + position: absolute; + z-index: 1; + top: 15px; + right: 15px; + display: none; + button { + background: ${(props) => props.theme.colors.button.primary.background}; + border: 1px solid ${(props) => props.theme.colors.button.primary.border}; + padding: 1.5px 7.5px 2.5px 7.5px; + border-radius: ${STYLING.dimensions.radius.alt2}; + &:hover { + background: ${(props) => props.theme.colors.button.primary.active.background}; + border: 1px solid ${(props) => props.theme.colors.button.primary.active.border}; + span { + color: ${(props) => props.theme.colors.button.primary.active.color} !important; + } + } + &:focus { + background: ${(props) => props.theme.colors.button.primary.active.background}; + border: 1px solid ${(props) => props.theme.colors.button.primary.active.border}; + span { + color: ${(props) => props.theme.colors.button.primary.active.color} !important; + } + } + &:disabled { + background: ${(props) => props.theme.colors.button.primary.disabled.background}; + border: 1px solid ${(props) => props.theme.colors.button.primary.disabled.border}; + span { + color: ${(props) => props.theme.colors.button.primary.disabled.color} !important; + } + svg { + color: ${(props) => props.theme.colors.button.primary.disabled.color} !important; + } + } + + span { + width: fit-content; + text-overflow: ellipsis; + overflow: hidden; + font-family: ${(props) => props.theme.typography.family.primary} !important; + font-size: ${(props) => props.theme.typography.size.xxSmall} !important; + font-weight: ${(props) => props.theme.typography.weight.bold} !important; + color: ${(props) => props.theme.colors.button.primary.color} !important; + } + } +`; + export const AssetGridDataWrapper = styled.div<{ disabled: boolean }>` height: 400px; width: 100%; @@ -97,6 +145,10 @@ export const AssetGridDataWrapper = styled.div<{ disabled: boolean }>` &:hover { cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; + + ${AssetGridDataActionWrapper} { + display: block; + } } `; diff --git a/src/components/organisms/AssetsTable/types.ts b/src/components/organisms/AssetsTable/types.ts index 2ed87e1..4ed0aa9 100644 --- a/src/components/organisms/AssetsTable/types.ts +++ b/src/components/organisms/AssetsTable/types.ts @@ -3,4 +3,5 @@ export interface IProps { loadingIds?: boolean; type: 'list' | 'grid'; pageCount?: number; + setProfileAction?: boolean; } diff --git a/src/helpers/config.ts b/src/helpers/config.ts index 59e0f4e..4f5b107 100644 --- a/src/helpers/config.ts +++ b/src/helpers/config.ts @@ -1,3 +1,4 @@ +import actions from 'assets/actions.svg'; import activity from 'assets/activity.svg'; import ar from 'assets/ar.svg'; import arconnect from 'assets/arconnect-wallet-logo.png'; @@ -100,6 +101,7 @@ export const APP = { }; export const ASSETS = { + actions, activity, ar, arconnect, diff --git a/src/helpers/language.ts b/src/helpers/language.ts index f1f60db..8e25ec1 100644 --- a/src/helpers/language.ts +++ b/src/helpers/language.ts @@ -106,6 +106,7 @@ export const language = { save: `Save`, sell: `Sell`, seller: `Seller`, + setProfilePicture: `Set as profile picture`, streak: `Streak`, streaks: `Streaks`, streakCountdown1: `You have approximately`, diff --git a/src/helpers/themes.ts b/src/helpers/themes.ts index d14a508..73d10d2 100644 --- a/src/helpers/themes.ts +++ b/src/helpers/themes.ts @@ -138,7 +138,7 @@ export const theme = (currentTheme: any): DefaultTheme => ({ disabled: { background: currentTheme.neutral4, border: currentTheme.neutral5, - color: currentTheme.neutral5, + color: currentTheme.neutralA5, }, }, alt2: { diff --git a/src/helpers/types.ts b/src/helpers/types.ts index 112c906..3c8a5e8 100644 --- a/src/helpers/types.ts +++ b/src/helpers/types.ts @@ -75,6 +75,7 @@ export type AssetType = { implementation: string | null; collectionId?: string | null; collectionName?: string | null; + contentType?: string | null; }; }; diff --git a/src/views/Profile/ProfileAssets/ProfileAssets.tsx b/src/views/Profile/ProfileAssets/ProfileAssets.tsx index e22c41d..02ab5f5 100644 --- a/src/views/Profile/ProfileAssets/ProfileAssets.tsx +++ b/src/views/Profile/ProfileAssets/ProfileAssets.tsx @@ -21,7 +21,13 @@ const ProfileAssets = React.memo((props: IProps) => { return props.address ? ( - + ) : null; });