diff --git a/extensions/apps/extensions/src/components/pages/extension-publish-page/create-app-mutation-cache.ts b/extensions/apps/extensions/src/components/pages/extension-publish-page/create-app-mutation-cache.ts new file mode 100644 index 000000000..02d7c5a0f --- /dev/null +++ b/extensions/apps/extensions/src/components/pages/extension-publish-page/create-app-mutation-cache.ts @@ -0,0 +1,56 @@ +import { + CreateAppMutation, + GetAppsByPublisherDidQuery, +} from '@akashaorg/typings/lib/sdk/graphql-operation-types-new'; +import { SortOrder } from '@akashaorg/typings/lib/sdk/graphql-types-new'; +import { GetAppsByPublisherDidDocument } from '@akashaorg/ui-awf-hooks/lib/generated/apollo'; +import { selectApps } from '@akashaorg/ui-awf-hooks/lib/selectors/get-apps-by-publisher-did-query'; +import { ApolloCache } from '@apollo/client'; + +interface IUpdateCache { + cache: ApolloCache; + authenticatedDID: string; + document: CreateAppMutation['setAkashaApp']['document']; +} + +export async function createAppMutationCache({ cache, authenticatedDID, document }: IUpdateCache) { + const variables = { + id: authenticatedDID, + first: 10, + sorting: { createdAt: SortOrder.Desc }, + }; + const query = cache.readQuery({ + query: GetAppsByPublisherDidDocument, + variables, + }); + const apps = selectApps(query); + const updatedApps = [ + { + ...document, + logoImage: null, + coverImage: null, + gallery: null, + meta: null, + links: [], + createdAt: new Date().toISOString(), + }, + ...apps, + ]; + + cache.writeQuery({ + query: GetAppsByPublisherDidDocument, + variables, + data: { + node: { + ...query.node, + akashaAppList: { + ...('akashaAppList' in query.node && query.node?.akashaAppList), + edges: updatedApps.map(app => ({ + node: app, + cursor: '', + })), + }, + }, + }, + }); +} diff --git a/extensions/apps/extensions/src/components/pages/extension-publish-page.tsx b/extensions/apps/extensions/src/components/pages/extension-publish-page/index.tsx similarity index 96% rename from extensions/apps/extensions/src/components/pages/extension-publish-page.tsx rename to extensions/apps/extensions/src/components/pages/extension-publish-page/index.tsx index ff691589e..a0f755628 100644 --- a/extensions/apps/extensions/src/components/pages/extension-publish-page.tsx +++ b/extensions/apps/extensions/src/components/pages/extension-publish-page/index.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useMemo, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from '@tanstack/react-router'; -import appRoutes, { SUBMIT_EXTENSION } from '../../routes'; import Stack from '@akashaorg/design-system-core/lib/components/Stack'; import Text from '@akashaorg/design-system-core/lib/components/Text'; import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader'; @@ -17,14 +16,16 @@ import { useRootComponentProps, } from '@akashaorg/ui-awf-hooks'; import { Extension, NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui'; -import { DRAFT_EXTENSIONS, DRAFT_RELEASES, MAX_CONTRIBUTORS_DISPLAY } from '../../constants'; import getSDK from '@akashaorg/core-sdk'; import { useCreateAppMutation, useGetAppsByPublisherDidQuery, } from '@akashaorg/ui-awf-hooks/lib/generated'; -import { SubmitType } from '../app-routes'; import { selectAkashaApp } from '@akashaorg/ui-awf-hooks/lib/selectors/get-apps-by-publisher-did-query'; +import { SubmitType } from '../../app-routes'; +import appRoutes, { SUBMIT_EXTENSION } from '../../../routes'; +import { DRAFT_EXTENSIONS, DRAFT_RELEASES, MAX_CONTRIBUTORS_DISPLAY } from '../../../constants'; +import { createAppMutationCache } from './create-app-mutation-cache'; type ExtensionPublishPageProps = { extensionId: string; @@ -80,6 +81,16 @@ export const ExtensionPublishPage: React.FC = ({ exte const [createAppMutation, { loading: loadingAppMutation }] = useCreateAppMutation({ context: { source: sdk.current.services.gql.contextSources.composeDB }, + update: ( + cache, + { + data: { + setAkashaApp: { document }, + }, + }, + ) => { + createAppMutationCache({ cache, authenticatedDID, document }); + }, onCompleted: data => { // after the extension has been published to the ceramic model // search for it in the list of local draft extensions and diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx index 9e7b49772..9ebab4a16 100644 --- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx +++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx @@ -118,7 +118,7 @@ export const ReleasesPage = (props: ReleasesPageProps) => { /> )} - {releases && ( + {releases && releases.length > 0 && ( = ({ } }; + const iconType = useMemo(() => extensionData?.applicationType, [extensionData]); + + if (!showElement()) return null; + return ( - <> - {showElement() && ( - - - - - - - - {extensionData?.name} - + + + + + + + + {extensionData?.name} + - {extensionData?.applicationType && ( - - } - /> - - )} - - - {extensionData?.description || extensionData?.displayName} - - + + + )} - - - {showMenu && ( - , - variant: 'primary', - greyBg: true, - iconOnly: true, - 'aria-label': 'settings', - }} - items={menuItems( - getExtensionStatus( - extensionData?.localDraft, - appStreamData?.edges[0]?.node?.status, - ), - )} - customStyle="w-max z-99" - /> + {extensionData?.description || extensionData?.displayName} + + + + + + {showMenu && ( + , + variant: 'primary', + greyBg: true, + iconOnly: true, + 'aria-label': 'settings', + }} + items={menuItems( + getExtensionStatus( + extensionData?.localDraft, + appStreamData?.edges[0]?.node?.status, + ), )} - - - - {getExtensionStatus( - extensionData?.localDraft, - appStreamData?.edges[0]?.node?.status, - )} - - - + customStyle="w-max z-99" + /> + )} + + + + {getExtensionStatus(extensionData?.localDraft, appStreamData?.edges[0]?.node?.status)} + - {showDivider && } - )} - + + {showDivider && } + ); }; diff --git a/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx b/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx index aa50a77df..bb5f48923 100644 --- a/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx +++ b/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx @@ -12,7 +12,6 @@ import { import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-awf-hooks/lib/generated/apollo'; import { EventTypes, - Extension, ExtensionStatus, NotificationEvents, NotificationTypes, @@ -94,7 +93,6 @@ export const MyExtensionsPage: React.FC = () => { error, loading, fetchMore, - refetch, } = useGetAppsByPublisherDidQuery({ variables: { id: authenticatedDID, @@ -151,9 +149,6 @@ export const MyExtensionsPage: React.FC = () => { next: (eventInfo: UIEventData) => { if (eventInfo.event === EventTypes.RefetchMyExtensions) { getDraftExtensions(); - refetch({ - id: authenticatedDID, - }); } }, }); @@ -163,12 +158,7 @@ export const MyExtensionsPage: React.FC = () => { eventsSub.unsubscribe(); } }; - }, [authenticatedDID, getDraftExtensions, refetch]); - - const allMyExtensions = useMemo( - () => [...draftExtensions, ...appElements], - [draftExtensions, appElements], - ); + }, [authenticatedDID, getDraftExtensions]); const handleConnectButtonClick = () => { navigateTo?.({ @@ -181,6 +171,11 @@ export const MyExtensionsPage: React.FC = () => { }); }; + const allMyExtensions = useMemo( + () => [...draftExtensions, ...appElements], + [draftExtensions, appElements], + ); + if (!authenticatedDID) { return ( = () => { const extensionData = allMyExtensions[itemIndex]; return ( = () => { const sdk = getSDK(); @@ -22,6 +23,18 @@ const Component: React.FC = () => { const { modalData } = useModalData(); const [updateApp, updateAppQuery] = useUpdateAppMutation({ context: { source: sdk.services.gql.contextSources.composeDB }, + update: ( + cache, + { + data: { + updateAkashaApp: { + document: { id }, + }, + }, + }, + ) => { + updateAppMutationCache({ cache, authenticatedDID, removedAppId: id }); + }, }); const { uiEvents } = useRootComponentProps(); const { diff --git a/extensions/apps/extensions/src/extensions/remove-extension-confirmation/update-app-mutation-cache.ts b/extensions/apps/extensions/src/extensions/remove-extension-confirmation/update-app-mutation-cache.ts new file mode 100644 index 000000000..bab197c95 --- /dev/null +++ b/extensions/apps/extensions/src/extensions/remove-extension-confirmation/update-app-mutation-cache.ts @@ -0,0 +1,45 @@ +import { GetAppsByPublisherDidQuery } from '@akashaorg/typings/lib/sdk/graphql-operation-types-new'; +import { SortOrder } from '@akashaorg/typings/lib/sdk/graphql-types-new'; +import { GetAppsByPublisherDidDocument } from '@akashaorg/ui-awf-hooks/lib/generated/apollo'; +import { selectApps } from '@akashaorg/ui-awf-hooks/lib/selectors/get-apps-by-publisher-did-query'; +import { ApolloCache } from '@apollo/client'; + +interface IUpdateCache { + cache: ApolloCache; + authenticatedDID: string; + removedAppId: string; +} + +export async function updateAppMutationCache({ + cache, + authenticatedDID, + removedAppId, +}: IUpdateCache) { + const variables = { + id: authenticatedDID, + first: 10, + sorting: { createdAt: SortOrder.Desc }, + }; + const query = cache.readQuery({ + query: GetAppsByPublisherDidDocument, + variables, + }); + const apps = selectApps(query); + const newEdges = apps + .filter(app => app.id !== removedAppId) + .map(app => ({ node: app, cursor: '' })); + cache.writeQuery({ + query: GetAppsByPublisherDidDocument, + variables, + data: { + node: { + ...query.node, + akashaAppList: { + // ...apps, + edges: newEdges, + pageInfo: null, + }, + }, + }, + }); +} diff --git a/libs/design-system-components/src/components/AppInfo/header.tsx b/libs/design-system-components/src/components/AppInfo/header.tsx index 268b32934..0808667d8 100644 --- a/libs/design-system-components/src/components/AppInfo/header.tsx +++ b/libs/design-system-components/src/components/AppInfo/header.tsx @@ -109,12 +109,7 @@ export const AppInfoHeader: React.FC = props => { )} - } - color={{ light: 'secondaryLight', dark: 'secondaryDark' }} - solid={true} - /> + {extensionTypeLabel} diff --git a/libs/design-system-components/src/components/AppList/index.tsx b/libs/design-system-components/src/components/AppList/index.tsx index 36d7d308d..dae9faac3 100644 --- a/libs/design-system-components/src/components/AppList/index.tsx +++ b/libs/design-system-components/src/components/AppList/index.tsx @@ -2,7 +2,6 @@ import React, { ReactNode } from 'react'; import DynamicInfiniteScroll, { DynamicInfiniteScrollProps } from '../DynamicInfiniteScroll'; import Divider from '@akashaorg/design-system-core/lib/components/Divider'; import ExtensionIcon from '@akashaorg/design-system-core/lib/components/ExtensionIcon'; -import Icon from '@akashaorg/design-system-core/lib/components/Icon'; import Stack from '@akashaorg/design-system-core/lib/components/Stack'; import Text from '@akashaorg/design-system-core/lib/components/Text'; import AppAvatar from '@akashaorg/design-system-core/lib/components/AppAvatar'; @@ -73,12 +72,7 @@ const AppList: React.FC = ({ justify="center" align="center" > - } - /> + )} diff --git a/libs/design-system-components/src/components/ExtensionReviewAndPublish/index.tsx b/libs/design-system-components/src/components/ExtensionReviewAndPublish/index.tsx index abe9c9f39..7f3853ef0 100644 --- a/libs/design-system-components/src/components/ExtensionReviewAndPublish/index.tsx +++ b/libs/design-system-components/src/components/ExtensionReviewAndPublish/index.tsx @@ -155,12 +155,7 @@ const ExtensionReviewAndPublish: React.FC = prop background={{ light: 'tertiaryLight', dark: 'tertiaryDark' }} customStyle="w-fit self-end" > - } - color={{ light: 'secondaryLight', dark: 'secondaryDark' }} - solid={true} - /> + {extensionData?.applicationType} diff --git a/libs/design-system-core/src/components/ExtensionIcon/index.tsx b/libs/design-system-core/src/components/ExtensionIcon/index.tsx index f7eb5c77e..0d3708fe3 100644 --- a/libs/design-system-core/src/components/ExtensionIcon/index.tsx +++ b/libs/design-system-core/src/components/ExtensionIcon/index.tsx @@ -1,26 +1,46 @@ import React from 'react'; import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new'; -import { Plugin, Widget } from '../Icon/akasha-icons'; import { Squares2X2Icon } from '@heroicons/react/24/outline'; +import Icon, { IconProps } from '../Icon'; +import { Plugin, Widget } from '../Icon/akasha-icons'; -export type ExtensionIconProps = { +export type ExtensionIconProps = IconProps & { type: AkashaAppApplicationType; defaultIcon?: React.ReactElement; }; const ExtensionIcon: React.FC = props => { - const { type, defaultIcon = } = props; + const { + size = 'sm', + solid = false, + accentColor = true, + type, + defaultIcon = , + } = props; + + const getIconByType = (_type: AkashaAppApplicationType) => { + switch (_type) { + case AkashaAppApplicationType.App: + return ; + case AkashaAppApplicationType.Plugin: + return ; + case AkashaAppApplicationType.Widget: + return ; + default: + return defaultIcon; + } + }; - switch (type) { - case AkashaAppApplicationType.App: - return ; - case AkashaAppApplicationType.Plugin: - return ; - case AkashaAppApplicationType.Widget: - return ; - default: - return defaultIcon; - } + return ( + + ); }; export default ExtensionIcon; diff --git a/libs/design-system-core/src/components/Icon/akasha-icons/plugin.tsx b/libs/design-system-core/src/components/Icon/akasha-icons/plugin.tsx index 0518660fa..f9365ee9f 100644 --- a/libs/design-system-core/src/components/Icon/akasha-icons/plugin.tsx +++ b/libs/design-system-core/src/components/Icon/akasha-icons/plugin.tsx @@ -13,7 +13,6 @@ const Plugin = (props: React.SVGProps) => ( fillRule="evenodd" clipRule="evenodd" d="M7.42188 1.9375C6.8806 1.9375 6.57813 2.28957 6.57813 2.57031C6.57813 2.67701 6.61439 2.78223 6.6881 2.87904C6.82158 3.05434 7 3.32934 7 3.6739C7 4.11113 6.64095 4.46988 6.19643 4.45708C5.57265 4.43911 4.95403 4.40031 4.34126 4.34133C4.4136 5.09301 4.45557 5.85349 4.46596 6.62151C4.47198 7.06627 4.11129 7.42182 3.67395 7.42188L3.6739 6.99945V7.42188C3.32934 7.42188 3.05434 7.24345 2.87904 7.10997L3.13461 6.77432L2.87904 7.10997C2.78223 7.03626 2.67701 7 2.57031 7C2.28957 7 1.9375 7.30247 1.9375 7.84375C1.9375 8.38503 2.28957 8.6875 2.57031 8.6875C2.67701 8.6875 2.78223 8.65124 2.87904 8.57753C3.05434 8.44405 3.32934 8.26563 3.6739 8.26563C4.08967 8.26563 4.42484 8.61728 4.39387 9.03857C4.33316 9.86455 4.23585 10.6804 4.10354 11.4846C4.77692 11.5576 5.4579 11.6054 6.14553 11.6271C6.12896 11.5743 6.09104 11.5033 6.01686 11.4058C5.84208 11.1763 5.73444 10.8944 5.73444 10.586C5.73444 9.70173 6.56525 9.1094 7.42194 9.1094C8.27863 9.1094 9.10944 9.70173 9.10944 10.586C9.10944 10.8944 9.0018 11.1763 8.82702 11.4058C8.77048 11.4801 8.73501 11.539 8.714 11.5862C9.58672 11.5307 10.4479 11.4331 11.2956 11.2954C11.4103 10.5896 11.4971 9.87438 11.5551 9.15099C11.5137 9.17262 11.4646 9.20415 11.4059 9.24885L11.1503 8.9132L11.4059 9.24885C11.1763 9.42364 10.8944 9.53128 10.586 9.53128C9.70177 9.53128 9.10944 8.70047 9.10944 7.84378C9.10944 6.98708 9.70177 6.15628 10.586 6.15628C10.8944 6.15628 11.1763 6.26391 11.4059 6.4387C11.5098 6.5178 11.5837 6.55566 11.6374 6.57038C11.6242 5.73822 11.5728 4.91543 11.4849 4.10371C10.5495 4.25759 9.59821 4.36413 8.63365 4.4208C8.2009 4.44623 7.84375 4.1003 7.84375 3.6739C7.84375 3.32934 8.02217 3.05434 8.15565 2.87904L8.4913 3.13461L8.15565 2.87904C8.22936 2.78223 8.26563 2.67701 8.26563 2.57031C8.26563 2.28957 7.96315 1.9375 7.42188 1.9375ZM3.62137 6.57026C3.60716 5.67368 3.54858 4.788 3.44773 3.9153C3.43294 3.78734 3.47742 3.65964 3.56851 3.56856C3.65959 3.47748 3.78729 3.433 3.91525 3.44779C4.64987 3.53269 5.39368 3.58765 6.14545 3.61141C6.12886 3.55862 6.09095 3.48757 6.0168 3.39018C5.84201 3.16063 5.73438 2.87874 5.73438 2.57031C5.73438 1.68608 6.56518 1.09375 7.42188 1.09375C8.27857 1.09375 9.10938 1.68608 9.10938 2.57031C9.10938 2.87874 9.00174 3.16063 8.82695 3.39018C8.77043 3.46442 8.73496 3.52336 8.71394 3.57057C9.75237 3.50451 10.7745 3.37883 11.7769 3.19695C11.8909 3.17626 12.0085 3.2034 12.1019 3.272C12.1953 3.34061 12.2564 3.44463 12.2708 3.55964C12.3966 4.5644 12.468 5.58596 12.482 6.6212C12.488 7.06617 12.1271 7.4219 11.6896 7.4219C11.345 7.4219 11.07 7.24348 10.8947 7.11C10.7979 7.03629 10.6927 7.00003 10.586 7.00003C10.3053 7.00003 9.95319 7.3025 9.95319 7.84378C9.95319 8.38505 10.3053 8.68753 10.586 8.68753C10.6927 8.68753 10.7979 8.65127 10.8947 8.57755C11.07 8.44408 11.345 8.26565 11.6896 8.26565C12.1056 8.26565 12.4409 8.61748 12.4099 9.03896C12.3429 9.95029 12.2313 10.8493 12.0774 11.7339C12.0469 11.9093 11.9095 12.0466 11.7341 12.0772C10.7186 12.2539 9.68408 12.3748 8.63375 12.4365C8.201 12.4619 7.84381 12.116 7.84381 11.6896C7.84381 11.345 8.02224 11.07 8.15572 10.8947C8.22943 10.7979 8.26569 10.6927 8.26569 10.586C8.26569 10.3052 7.96322 9.95315 7.42194 9.95315C6.88066 9.95315 6.57819 10.3052 6.57819 10.586C6.57819 10.6927 6.61445 10.7979 6.68816 10.8947C6.82164 11.07 7.00006 11.345 7.00006 11.6896C7.00006 12.1268 6.64101 12.4856 6.19645 12.4728C5.30628 12.4472 4.42663 12.3791 3.55947 12.2705C3.44446 12.2561 3.34044 12.195 3.27183 12.1016C3.20323 12.0082 3.17609 11.8906 3.19678 11.7766C3.35308 10.9153 3.46787 10.0394 3.539 9.15116C3.49774 9.17278 3.44872 9.20426 3.39018 9.24883L3.13461 8.91318L3.39018 9.24883C3.16063 9.42361 2.87874 9.53125 2.57031 9.53125C1.68608 9.53125 1.09375 8.70044 1.09375 7.84375C1.09375 6.98706 1.68608 6.15625 2.57031 6.15625C2.87874 6.15625 3.16063 6.26389 3.39018 6.43867C3.49383 6.5176 3.56766 6.55547 3.62137 6.57026Z" - fill="currentColor" /> ); diff --git a/libs/design-system-core/src/components/Icon/akasha-icons/widget.tsx b/libs/design-system-core/src/components/Icon/akasha-icons/widget.tsx index 455a37327..6db5ce176 100644 --- a/libs/design-system-core/src/components/Icon/akasha-icons/widget.tsx +++ b/libs/design-system-core/src/components/Icon/akasha-icons/widget.tsx @@ -13,7 +13,6 @@ const Widget = (props: React.SVGProps) => ( fillRule="evenodd" clipRule="evenodd" d="M0.75 3.5625C0.75 3.04473 1.16973 2.625 1.6875 2.625H4.6875C5.20527 2.625 5.625 3.04473 5.625 3.5625V5.4375C5.625 5.95527 5.20527 6.375 4.6875 6.375H1.6875C1.16973 6.375 0.75 5.95527 0.75 5.4375V3.5625ZM1.6875 3.375C1.58395 3.375 1.5 3.45895 1.5 3.5625V5.4375C1.5 5.54105 1.58395 5.625 1.6875 5.625H4.6875C4.79105 5.625 4.875 5.54105 4.875 5.4375V3.5625C4.875 3.45895 4.79105 3.375 4.6875 3.375H1.6875ZM6.75 4.3125C6.75 3.79473 7.16973 3.375 7.6875 3.375H10.3125C10.8303 3.375 11.25 3.79473 11.25 4.3125V8.4375C11.25 8.95527 10.8303 9.375 10.3125 9.375H7.6875C7.16973 9.375 6.75 8.95527 6.75 8.4375V4.3125ZM7.6875 4.125C7.58395 4.125 7.5 4.20895 7.5 4.3125V8.4375C7.5 8.54105 7.58395 8.625 7.6875 8.625H10.3125C10.4161 8.625 10.5 8.54105 10.5 8.4375V4.3125C10.5 4.20895 10.4161 4.125 10.3125 4.125H7.6875ZM1.5 8.0625C1.5 7.54473 1.91973 7.125 2.4375 7.125H5.0625C5.58027 7.125 6 7.54473 6 8.0625V9.1875C6 9.70527 5.58027 10.125 5.0625 10.125H2.4375C1.91973 10.125 1.5 9.70527 1.5 9.1875V8.0625ZM2.4375 7.875C2.33395 7.875 2.25 7.95895 2.25 8.0625V9.1875C2.25 9.29105 2.33395 9.375 2.4375 9.375H5.0625C5.16605 9.375 5.25 9.29105 5.25 9.1875V8.0625C5.25 7.95895 5.16605 7.875 5.0625 7.875H2.4375Z" - fill="currentColor" /> );