Fix: My extensions list

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<unknown>;
+  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<GetAppsByPublisherDidQuery>({
+    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<GetAppsByPublisherDidQuery>({
+    query: GetAppsByPublisherDidDocument,
+    variables,
+    data: {
+      node: {
+        ...query.node,
+        akashaAppList: {
+          ...('akashaAppList' in query.node && query.node?.akashaAppList),
+          edges: updatedApps.map(app => ({
+            node: app,
+            cursor: '',
+          })),
+        },
+      },
+    },
+  });
+}

extensions/apps/extensions/src/components/pages/extension-publish-page.tsx → 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<ExtensionPublishPageProps> = ({ 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

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 && (
             <DynamicInfiniteScroll
               count={releases.length}
               overScan={5}

extensions/apps/extensions/src/components/pages/my-extensions/extension-element.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
 import getSDK from '@akashaorg/core-sdk';
 import ExtensionIcon from '@akashaorg/design-system-core/lib/components/ExtensionIcon';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import AppAvatar from '@akashaorg/design-system-core/lib/components/AppAvatar';
-import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import Divider from '@akashaorg/design-system-core/lib/components/Divider';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Menu from '@akashaorg/design-system-core/lib/components/Menu';
@@ -188,91 +187,83 @@ export const ExtensionElement: React.FC<ExtensionElement> = ({
     }
   };
 
+  const iconType = useMemo(() => extensionData?.applicationType, [extensionData]);
+
+  if (!showElement()) return null;
+
   return (
-    <>
-      {showElement() && (
-        <Stack spacing="gap-y-4">
-          <Stack direction="row" justify="between" spacing="gap-x-8" fullWidth>
-            <Stack direction="row" spacing="gap-x-3" customStyle="max-h-[60px] w-[60%]">
-              <AppAvatar
-                appType={extensionData?.applicationType}
-                avatar={transformSource(extensionData?.logoImage)}
-                extensionId={extensionData?.id}
-              />
-              <Stack direction="column" justify="between" customStyle="w-0 min-w-full">
-                <Stack direction="row" spacing="gap-2">
-                  <Text variant="button-sm" truncate>
-                    {extensionData?.name}
-                  </Text>
+    <Stack spacing="gap-y-4">
+      <Stack direction="row" justify="between" spacing="gap-x-8" fullWidth>
+        <Stack direction="row" spacing="gap-x-3" customStyle="max-h-[60px] w-[60%]">
+          <AppAvatar
+            appType={extensionData?.applicationType}
+            avatar={transformSource(extensionData?.logoImage)}
+            extensionId={extensionData?.id}
+          />
+          <Stack direction="column" justify="between" customStyle="w-0 min-w-full">
+            <Stack direction="row" spacing="gap-2">
+              <Text variant="button-sm" truncate>
+                {extensionData?.name}
+              </Text>
 
-                  {extensionData?.applicationType && (
-                    <Stack
-                      customStyle="w-[18px] h-[18px] rounded-full shrink-0"
-                      background={{ light: 'tertiaryLight', dark: 'tertiaryDark' }}
-                      justify="center"
-                      align="center"
-                    >
-                      <Icon
-                        color={{ light: 'white', dark: 'white' }}
-                        size={'xs'}
-                        solid
-                        icon={<ExtensionIcon type={extensionData?.applicationType} />}
-                      />
-                    </Stack>
-                  )}
-                </Stack>
-                <Text
-                  variant="footnotes2"
-                  weight="normal"
-                  color={{ light: 'grey4', dark: 'grey7' }}
-                  truncate
+              {extensionData?.applicationType && (
+                <Stack
+                  customStyle="w-[18px] h-[18px] rounded-full shrink-0"
+                  background={{ light: 'tertiaryLight', dark: 'tertiaryDark' }}
+                  justify="center"
+                  align="center"
                 >
-                  {extensionData?.description || extensionData?.displayName}
-                </Text>
-              </Stack>
+                  <ExtensionIcon size="xs" type={iconType} />
+                </Stack>
+              )}
             </Stack>
-
-            <Stack
-              direction="column"
-              justify={showMenu ? 'between' : 'end'}
-              align="end"
-              customStyle="shrink-0"
-              padding={showMenu ? 'p-0' : 'pr-4'}
+            <Text
+              variant="footnotes2"
+              weight="normal"
+              color={{ light: 'grey4', dark: 'grey7' }}
+              truncate
             >
-              {showMenu && (
-                <Menu
-                  anchor={{
-                    icon: <EllipsisHorizontalIcon />,
-                    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}
+            </Text>
+          </Stack>
+        </Stack>
+
+        <Stack
+          direction="column"
+          justify={showMenu ? 'between' : 'end'}
+          align="end"
+          customStyle="shrink-0"
+          padding={showMenu ? 'p-0' : 'pr-4'}
+        >
+          {showMenu && (
+            <Menu
+              anchor={{
+                icon: <EllipsisHorizontalIcon />,
+                variant: 'primary',
+                greyBg: true,
+                iconOnly: true,
+                'aria-label': 'settings',
+              }}
+              items={menuItems(
+                getExtensionStatus(
+                  extensionData?.localDraft,
+                  appStreamData?.edges[0]?.node?.status,
+                ),
               )}
-              <Stack direction="row" align="center" spacing="gap-x-1.5">
-                <Stack
-                  customStyle={`w-2 h-2 rounded-full ${getStatusIndicatorStyle(extensionData?.localDraft, appStreamData?.edges[0]?.node?.status)}`}
-                />
-                <Text variant="footnotes2" weight="normal">
-                  {getExtensionStatus(
-                    extensionData?.localDraft,
-                    appStreamData?.edges[0]?.node?.status,
-                  )}
-                </Text>
-              </Stack>
-            </Stack>
+              customStyle="w-max z-99"
+            />
+          )}
+          <Stack direction="row" align="center" spacing="gap-x-1.5">
+            <Stack
+              customStyle={`w-2 h-2 rounded-full ${getStatusIndicatorStyle(extensionData?.localDraft, appStreamData?.edges[0]?.node?.status)}`}
+            />
+            <Text variant="footnotes2" weight="normal">
+              {getExtensionStatus(extensionData?.localDraft, appStreamData?.edges[0]?.node?.status)}
+            </Text>
           </Stack>
-          {showDivider && <Divider />}
         </Stack>
-      )}
-    </>
+      </Stack>
+      {showDivider && <Divider />}
+    </Stack>
   );
 };

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<unknown> = () => {
     error,
     loading,
     fetchMore,
-    refetch,
   } = useGetAppsByPublisherDidQuery({
     variables: {
       id: authenticatedDID,
@@ -151,9 +149,6 @@ export const MyExtensionsPage: React.FC<unknown> = () => {
         next: (eventInfo: UIEventData) => {
           if (eventInfo.event === EventTypes.RefetchMyExtensions) {
             getDraftExtensions();
-            refetch({
-              id: authenticatedDID,
-            });
           }
         },
       });
@@ -163,12 +158,7 @@ export const MyExtensionsPage: React.FC<unknown> = () => {
         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<unknown> = () => {
     });
   };
 
+  const allMyExtensions = useMemo(
+    () => [...draftExtensions, ...appElements],
+    [draftExtensions, appElements],
+  );
+
   if (!authenticatedDID) {
     return (
       <ErrorLoader
@@ -267,7 +262,7 @@ export const MyExtensionsPage: React.FC<unknown> = () => {
               const extensionData = allMyExtensions[itemIndex];
               return (
                 <ExtensionElement
-                  extensionData={extensionData as Extension}
+                  extensionData={extensionData}
                   showDivider={itemIndex < allMyExtensions.length - 1}
                   filter={selectedStatus}
                   filterShowAllOptionValue={extensionStatusMenuItems[0]}

extensions/apps/extensions/src/extensions/remove-extension-confirmation/index.tsx

@@ -15,13 +15,26 @@ import { useUpdateAppMutation } from '@akashaorg/ui-awf-hooks/lib/generated/apol
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import getSDK from '@akashaorg/core-sdk';
 import { DRAFT_EXTENSIONS, DRAFT_RELEASES } from '../../constants';
+import { updateAppMutationCache } from './update-app-mutation-cache';
 
 const Component: React.FC<IRootExtensionProps> = () => {
   const sdk = getSDK();
   const { t } = useTranslation();
   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 {