set profile image from profile assets

permaweb · Jul 30, 2024 · 6e10b5b · 6e10b5b
1 parent cb8fd9e
commit 6e10b5b
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 27 deletions.
diff --git 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
diff --git 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
@@ -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<boolean>(false);
 
+	const [profileLoading, setProfileLoading] = React.useState<boolean>(false);
+	const [profileResponse, setProfileResponse] = React.useState<NotificationType | null>(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 (
-							<S.AssetsGridWrapper>
-								{assets.map((asset: AssetDetailType, index: number) => {
-									const redirect = `${URLS.asset}${asset.data.id}`;
-									return (
-										<S.AssetGridElement key={index} className={'fade-in'}>
-											<Link to={redirect}>
-												<S.AssetGridDataWrapper disabled={false}>
-													<AssetData asset={asset} scrolling={scrolling} autoLoad />
-												</S.AssetGridDataWrapper>
-											</Link>
-											<S.AssetGridInfoWrapper>
+							<>
+								<S.AssetsGridWrapper>
+									{assets.map((asset: AssetDetailType, index: number) => {
+										const redirect = `${URLS.asset}${asset.data.id}`;
+										return (
+											<S.AssetGridElement key={index} className={'fade-in'}>
 												<Link to={redirect}>
-													<S.Title>
-														<p>{asset.data.title}</p>
-													</S.Title>
+													<S.AssetGridDataWrapper disabled={false}>
+														<AssetData asset={asset} scrolling={scrolling} autoLoad />
+														{props.setProfileAction &&
+															asset.data.contentType &&
+															asset.data.contentType.includes('image') && (
+																<S.AssetGridDataActionWrapper>
+																	<button
+																		onClick={(e: any) => handleProfileActionPress(e, asset)}
+																		disabled={profileLoading}
+																	>
+																		<span>
+																			{profileLoading ? `${language.loading}...` : language.setProfilePicture}
+																		</span>
+																	</button>
+																</S.AssetGridDataActionWrapper>
+															)}
+													</S.AssetGridDataWrapper>
 												</Link>
-												<S.Description>
-													<p>{asset.data.description || asset.data.title}</p>
-												</S.Description>
-												<S.Listings>{getListing(asset)}</S.Listings>
-											</S.AssetGridInfoWrapper>
-										</S.AssetGridElement>
-									);
-								})}
-							</S.AssetsGridWrapper>
+												<S.AssetGridInfoWrapper>
+													<Link to={redirect}>
+														<S.Title>
+															<p>{asset.data.title}</p>
+														</S.Title>
+													</Link>
+													<S.Description>
+														<p>{asset.data.description || asset.data.title}</p>
+													</S.Description>
+													<S.Listings>{getListing(asset)}</S.Listings>
+												</S.AssetGridInfoWrapper>
+											</S.AssetGridElement>
+										);
+									})}
+								</S.AssetsGridWrapper>
+								{profileResponse && (
+									<Notification
+										message={profileResponse.message}
+										type={profileResponse.status}
+										callback={() => setProfileResponse(null)}
+									/>
+								)}
+							</>
 						);
 				}
 			} else {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,7 +21,13 @@ const ProfileAssets = React.memo((props: IProps) => {
 
 	return props.address ? (
 		<S.Wrapper>
-			<AssetsTable ids={assetIds} loadingIds={!assetIds} type={'grid'} pageCount={PAGINATORS.profile.assets} />
+			<AssetsTable
+				ids={assetIds}
+				loadingIds={!assetIds}
+				type={'grid'}
+				pageCount={PAGINATORS.profile.assets}
+				setProfileAction={true}
+			/>
 		</S.Wrapper>
 	) : null;
 });