From 63d25662b95b62dcfbe8e4a9626634a9e349d1bf Mon Sep 17 00:00:00 2001 From: NickJ202 Date: Sun, 15 Sep 2024 15:14:00 -0400 Subject: [PATCH] profile asset removal --- .../organisms/AssetsTable/AssetsTable.tsx | 89 ++++++++++++++++++- .../organisms/AssetsTable/styles.ts | 35 ++++++++ src/helpers/config.ts | 6 +- src/helpers/language.ts | 2 + src/helpers/themes.ts | 2 +- src/views/Landing/Profile/Profile.tsx | 2 +- .../UploadSteps/UploadStepsProgress/styles.ts | 8 +- src/views/Upload/index.tsx | 2 +- 8 files changed, 134 insertions(+), 12 deletions(-) diff --git a/src/components/organisms/AssetsTable/AssetsTable.tsx b/src/components/organisms/AssetsTable/AssetsTable.tsx index b3acf05..58e6662 100644 --- a/src/components/organisms/AssetsTable/AssetsTable.tsx +++ b/src/components/organisms/AssetsTable/AssetsTable.tsx @@ -3,11 +3,14 @@ import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { ReactSVG } from 'react-svg'; +import { messageResult } from 'api'; import { getAssetIdsByUser, getGQLData } from 'gql'; import { Button } from 'components/atoms/Button'; import { Checkbox } from 'components/atoms/Checkbox'; +import { IconButton } from 'components/atoms/IconButton'; import { Loader } from 'components/atoms/Loader'; +import { Notification } from 'components/atoms/Notification'; import { Table } from 'components/molecules/Table'; import { ASSETS, GATEWAYS, PAGINATORS, REDIRECTS, STORAGE, TAGS, URLS } from 'helpers/config'; import { AlignType, CursorEnum, GQLNodeResponseType, GroupIndexType } from 'helpers/types'; @@ -16,10 +19,72 @@ import { useArweaveProvider } from 'providers/ArweaveProvider'; import { useLanguageProvider } from 'providers/LanguageProvider'; import { RootState } from 'store'; import * as uploadActions from 'store/upload/actions'; +import { CloseHandler } from 'wrappers/CloseHandler'; import * as S from './styles'; -export default function AssetsTable(props: { useIdAction: boolean }) { +function AssetDropdown(props: { id: string; title: string; handleToggleUpdate: () => void }) { + const arProvider = useArweaveProvider(); + + const languageProvider = useLanguageProvider(); + const language = languageProvider.object[languageProvider.current]; + + const [open, setOpen] = React.useState(false); + + const [loading, setLoading] = React.useState(false); + const [response, setResponse] = React.useState(null); + + async function handleRemoveAsset() { + if (arProvider.walletAddress && arProvider.profile && arProvider.profile.id) { + setLoading(true); + try { + await messageResult({ + processId: arProvider.profile.id, + wallet: arProvider.wallet, + action: 'Eval', + tags: [], + data: `table.remove(Assets, (function() for i, v in ipairs(Assets) do if v.Id == '${props.id}' then return i end end end)())`, + useRawData: true, + }); + + setResponse(`${language.assetRemoved}!`); + setOpen(false); + + await new Promise((resolve) => setTimeout(resolve, 1000)); + props.handleToggleUpdate(); + } catch (e: any) { + console.error(e); + setResponse(language.errorOccurred); + } + setLoading(false); + } + } + + return ( + <> + setOpen(false)}> + + setOpen(!open)} + dimensions={{ wrapper: 27.5, icon: 18.5 }} + /> + {open && ( + + + {response ? response : loading ? `${language.loading}...` : language.removeAsset} + + + )} + + + {response && setResponse(null)} />} + + ); +} + +export default function AssetsTable(props: { useIdAction: boolean; useActions: boolean }) { const navigate = useNavigate(); const dispatch = useDispatch(); @@ -41,6 +106,8 @@ export default function AssetsTable(props: { useIdAction: boolean }) { const [currentTableCursor, setCurrentTableCursor] = React.useState(null); const [currentRecords, setCurrentRecords] = React.useState(null); + const [toggleUpdate, setToggleUpdate] = React.useState(false); + const lastRecordIndex = 1 * recordsPerPage; const firstRecordIndex = lastRecordIndex - recordsPerPage; @@ -94,7 +161,7 @@ export default function AssetsTable(props: { useIdAction: boolean }) { } } })(); - }, [arProvider.walletAddress, uploadReducer.uploadActive]); + }, [arProvider.walletAddress, uploadReducer.uploadActive, toggleUpdate]); React.useEffect(() => { (async function () { @@ -197,6 +264,14 @@ export default function AssetsTable(props: { useIdAction: boolean }) { }; } + if (props.useActions) { + header.actions = { + width: '15%', + align: 'center' as AlignType, + display: language.actions, + }; + } + return header; } @@ -228,6 +303,16 @@ export default function AssetsTable(props: { useIdAction: boolean }) { ); } + if (props.useActions) { + data.actions = ( + setToggleUpdate(!toggleUpdate)} + /> + ); + } + return { data: data, active: false, diff --git a/src/components/organisms/AssetsTable/styles.ts b/src/components/organisms/AssetsTable/styles.ts index bbfe595..89f208d 100644 --- a/src/components/organisms/AssetsTable/styles.ts +++ b/src/components/organisms/AssetsTable/styles.ts @@ -105,3 +105,38 @@ export const EmptyLogo = styled.div` border-radius: 50%; } `; + +export const DWrapper = styled.div` + height: fit-content; + width: fit-content; + position: relative; + margin: 5px auto 0 auto; +`; + +export const DDropdown = styled.ul<{ open: boolean }>` + width: 225px; + padding: 10px 0; + display: ${(props) => (props.open ? 'block' : 'none')}; + position: absolute; + top: 26.5px; + right: 15%; + z-index: 1; +`; + +export const LI = styled.li<{ disabled: boolean }>` + pointer-events: ${(props) => (props.disabled ? 'none' : 'default')}; + text-align: center; + height: 32.5px; + display: flex; + align-items: center; + cursor: pointer; + color: ${(props) => (props.disabled ? props.theme.colors.font.alt1 : props.theme.colors.font.primary)}; + font-size: ${(props) => props.theme.typography.size.xSmall}; + font-weight: ${(props) => props.theme.typography.weight.bold}; + background: ${(props) => (props.disabled ? props.theme.colors.container.primary.active : 'transparent')}; + padding: 0 15px; + &:hover { + background: ${(props) => + props.disabled ? props.theme.colors.container.primary.active : props.theme.colors.container.primary.active}; + } +`; diff --git a/src/helpers/config.ts b/src/helpers/config.ts index 8da5be3..458611b 100644 --- a/src/helpers/config.ts +++ b/src/helpers/config.ts @@ -327,9 +327,9 @@ export const CURRENCIES = { export const REDIRECTS = { bazar: { - asset: (id: string) => `https://ao-bazar.arweave.net/#/asset/${id}`, - collection: (id: string) => `https://ao-bazar.arweave.net/#/collection/${id}`, - profile: (id: string) => `https://ao-bazar.arweave.net/#/profile/${id}`, + asset: (id: string) => `https://bazar.arweave.net/#/asset/${id}`, + collection: (id: string) => `https://bazar.arweave.net/#/collection/${id}`, + profile: (id: string) => `https://bazar.arweave.net/#/profile/${id}`, }, udl: 'https://udlicense.arweave.net/', arconnect: `https://arconnect.io`, diff --git a/src/helpers/language.ts b/src/helpers/language.ts index b377988..386a76e 100644 --- a/src/helpers/language.ts +++ b/src/helpers/language.ts @@ -10,6 +10,7 @@ export const language = { amount: `Amount`, arBalance: `AR Balance`, arweaveAppUploadBlocked: `Arweave.app is not supported for upload`, + assetRemoved: `Asset removed`, assets: `Assets`, assetsCreated: `Assets created`, assetsCreatedInfo: `Your assets have been created. You will now be able to view them from your profile.`, @@ -206,6 +207,7 @@ export const language = { readDocs: `Read docs`, recipient: `Recipient`, remove: `Remove`, + removeAsset: `Remove asset`, removeAvatar: `Remove avatar`, removeBanner: `Remove banner`, removeFile: `Remove file`, diff --git a/src/helpers/themes.ts b/src/helpers/themes.ts index 702e4cc..4cec9be 100644 --- a/src/helpers/themes.ts +++ b/src/helpers/themes.ts @@ -221,7 +221,7 @@ export const theme = (currentTheme: any): DefaultTheme => ({ }, }, indicator: { - active: currentTheme.primary2, + primary: currentTheme.primary2, }, link: { color: currentTheme.neutralA1, diff --git a/src/views/Landing/Profile/Profile.tsx b/src/views/Landing/Profile/Profile.tsx index fa0d447..3aa491c 100644 --- a/src/views/Landing/Profile/Profile.tsx +++ b/src/views/Landing/Profile/Profile.tsx @@ -145,7 +145,7 @@ export default function Profile(props: { address: string }) { {fullProfile && fullProfile.id ? ( <> - + diff --git a/src/views/Upload/UploadSteps/UploadStepsProgress/styles.ts b/src/views/Upload/UploadSteps/UploadStepsProgress/styles.ts index 6bec53b..b5f1665 100644 --- a/src/views/Upload/UploadSteps/UploadStepsProgress/styles.ts +++ b/src/views/Upload/UploadSteps/UploadStepsProgress/styles.ts @@ -26,7 +26,7 @@ export const Step = styled.div<{ active: boolean; completed: boolean }>` position: relative; span { color: ${(props) => - props.active || props.completed ? props.theme.colors.indicator.active : props.theme.colors.font.alt1}; + props.active || props.completed ? props.theme.colors.indicator.primary : props.theme.colors.font.alt1}; font-size: ${(props) => props.theme.typography.size.xSmall}; font-weight: ${(props) => props.theme.typography.weight.bold}; display: block; @@ -39,10 +39,10 @@ export const SIndicator = styled.div<{ active: boolean; completed: boolean }>` height: 20px; width: 20px; background: ${(props) => - props.completed ? props.theme.colors.indicator.active : props.theme.colors.container.primary.background}; + props.completed ? props.theme.colors.indicator.primary : props.theme.colors.container.primary.background}; border: 2.5px solid ${(props) => - props.active || props.completed ? props.theme.colors.indicator.active : props.theme.colors.border.alt3}; + props.active || props.completed ? props.theme.colors.indicator.primary : props.theme.colors.border.alt3}; border-radius: 50%; display: flex; justify-content: center; @@ -58,5 +58,5 @@ export const Line = styled.div<{ completed: boolean }>` height: 2.5px; width: 50%; border-top: 2.5px solid - ${(props) => (props.completed ? props.theme.colors.indicator.active : props.theme.colors.border.alt3)}; + ${(props) => (props.completed ? props.theme.colors.indicator.primary : props.theme.colors.border.alt3)}; `; diff --git a/src/views/Upload/index.tsx b/src/views/Upload/index.tsx index 6e2c26c..e1d577a 100644 --- a/src/views/Upload/index.tsx +++ b/src/views/Upload/index.tsx @@ -588,7 +588,7 @@ export default function Upload() { {uploadReducer.uploadType === 'collection' && ( - + )}