[Simple Homepage] Activity view - Recent Spaces + mobile support

src/core/apollo/generated/apollo-hooks.ts

@@ -3585,8 +3585,19 @@ export const MyMembershipsChildJourneyProfileFragmentDoc = gql`
   }
   ${VisualUriFragmentDoc}
 `;
-export const RecentJourneyProfileFragmentDoc = gql`
-  fragment RecentJourneyProfile on Profile {
+export const ShortAccountItemFragmentDoc = gql`
+  fragment ShortAccountItem on Profile {
+    id
+    displayName
+    url
+    avatar: visual(type: AVATAR) {
+      ...VisualUri
+    }
+  }
+  ${VisualUriFragmentDoc}
+`;
+export const RecentSpaceProfileFragmentDoc = gql`
+  fragment RecentSpaceProfile on Profile {
     id
     url
     displayName
@@ -22871,6 +22882,96 @@ export function refetchMyMembershipsQuery(variables?: SchemaTypes.MyMembershipsQ
   return { query: MyMembershipsDocument, variables: variables };
 }
 
+export const MyResourcesDocument = gql`
+  query MyResources($accountId: UUID!) {
+    lookup {
+      account(ID: $accountId) {
+        id
+        spaces {
+          id
+          level
+          profile {
+            ...ShortAccountItem
+            cardBanner: visual(type: CARD) {
+              ...VisualUri
+            }
+          }
+        }
+        virtualContributors {
+          id
+          profile {
+            ...ShortAccountItem
+          }
+        }
+        innovationPacks {
+          id
+          profile {
+            ...ShortAccountItem
+          }
+        }
+        innovationHubs {
+          id
+          profile {
+            ...ShortAccountItem
+            banner: visual(type: BANNER_WIDE) {
+              ...VisualUri
+            }
+          }
+          subdomain
+        }
+      }
+    }
+  }
+  ${ShortAccountItemFragmentDoc}
+  ${VisualUriFragmentDoc}
+`;
+
+/**
+ * __useMyResourcesQuery__
+ *
+ * To run a query within a React component, call `useMyResourcesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMyResourcesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMyResourcesQuery({
+ *   variables: {
+ *      accountId: // value for 'accountId'
+ *   },
+ * });
+ */
+export function useMyResourcesQuery(
+  baseOptions: Apollo.QueryHookOptions<SchemaTypes.MyResourcesQuery, SchemaTypes.MyResourcesQueryVariables>
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<SchemaTypes.MyResourcesQuery, SchemaTypes.MyResourcesQueryVariables>(
+    MyResourcesDocument,
+    options
+  );
+}
+
+export function useMyResourcesLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<SchemaTypes.MyResourcesQuery, SchemaTypes.MyResourcesQueryVariables>
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<SchemaTypes.MyResourcesQuery, SchemaTypes.MyResourcesQueryVariables>(
+    MyResourcesDocument,
+    options
+  );
+}
+
+export type MyResourcesQueryHookResult = ReturnType<typeof useMyResourcesQuery>;
+export type MyResourcesLazyQueryHookResult = ReturnType<typeof useMyResourcesLazyQuery>;
+export type MyResourcesQueryResult = Apollo.QueryResult<
+  SchemaTypes.MyResourcesQuery,
+  SchemaTypes.MyResourcesQueryVariables
+>;
+export function refetchMyResourcesQuery(variables: SchemaTypes.MyResourcesQueryVariables) {
+  return { query: MyResourcesDocument, variables: variables };
+}
+
 export const NewVirtualContributorMySpacesDocument = gql`
   query NewVirtualContributorMySpaces {
     me {
@@ -22980,77 +23081,21 @@ export function refetchNewVirtualContributorMySpacesQuery(
   return { query: NewVirtualContributorMySpacesDocument, variables: variables };
 }
 
-export const RecentJourneyDocument = gql`
-  query RecentJourney($spaceId: UUID!) {
-    lookup {
-      space(ID: $spaceId) {
-        id
-        profile {
-          ...RecentJourneyProfile
-        }
-      }
-    }
-  }
-  ${RecentJourneyProfileFragmentDoc}
-`;
-
-/**
- * __useRecentJourneyQuery__
- *
- * To run a query within a React component, call `useRecentJourneyQuery` and pass it any options that fit your needs.
- * When your component renders, `useRecentJourneyQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useRecentJourneyQuery({
- *   variables: {
- *      spaceId: // value for 'spaceId'
- *   },
- * });
- */
-export function useRecentJourneyQuery(
-  baseOptions: Apollo.QueryHookOptions<SchemaTypes.RecentJourneyQuery, SchemaTypes.RecentJourneyQueryVariables>
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useQuery<SchemaTypes.RecentJourneyQuery, SchemaTypes.RecentJourneyQueryVariables>(
-    RecentJourneyDocument,
-    options
-  );
-}
-
-export function useRecentJourneyLazyQuery(
-  baseOptions?: Apollo.LazyQueryHookOptions<SchemaTypes.RecentJourneyQuery, SchemaTypes.RecentJourneyQueryVariables>
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useLazyQuery<SchemaTypes.RecentJourneyQuery, SchemaTypes.RecentJourneyQueryVariables>(
-    RecentJourneyDocument,
-    options
-  );
-}
-
-export type RecentJourneyQueryHookResult = ReturnType<typeof useRecentJourneyQuery>;
-export type RecentJourneyLazyQueryHookResult = ReturnType<typeof useRecentJourneyLazyQuery>;
-export type RecentJourneyQueryResult = Apollo.QueryResult<
-  SchemaTypes.RecentJourneyQuery,
-  SchemaTypes.RecentJourneyQueryVariables
->;
-export function refetchRecentJourneyQuery(variables: SchemaTypes.RecentJourneyQueryVariables) {
-  return { query: RecentJourneyDocument, variables: variables };
-}
-
 export const RecentSpacesDocument = gql`
   query RecentSpaces($limit: Float) {
     me {
       mySpaces(limit: $limit) {
         space {
           id
+          profile {
+            ...RecentSpaceProfile
+          }
           __typename
         }
       }
     }
   }
+  ${RecentSpaceProfileFragmentDoc}
 `;
 
 /**

src/core/apollo/generated/graphql-schema.ts

@@ -30072,6 +30072,79 @@ export type MyMembershipsChildJourneyProfileFragment = {
   avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
 };
 
+export type MyResourcesQueryVariables = Exact<{
+  accountId: Scalars['UUID'];
+}>;
+
+export type MyResourcesQuery = {
+  __typename?: 'Query';
+  lookup: {
+    __typename?: 'LookupQueryResults';
+    account?:
+      | {
+          __typename?: 'Account';
+          id: string;
+          spaces: Array<{
+            __typename?: 'Space';
+            id: string;
+            level: SpaceLevel;
+            profile: {
+              __typename?: 'Profile';
+              id: string;
+              displayName: string;
+              url: string;
+              cardBanner?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+              avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+            };
+          }>;
+          virtualContributors: Array<{
+            __typename?: 'VirtualContributor';
+            id: string;
+            profile: {
+              __typename?: 'Profile';
+              id: string;
+              displayName: string;
+              url: string;
+              avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+            };
+          }>;
+          innovationPacks: Array<{
+            __typename?: 'InnovationPack';
+            id: string;
+            profile: {
+              __typename?: 'Profile';
+              id: string;
+              displayName: string;
+              url: string;
+              avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+            };
+          }>;
+          innovationHubs: Array<{
+            __typename?: 'InnovationHub';
+            id: string;
+            subdomain: string;
+            profile: {
+              __typename?: 'Profile';
+              id: string;
+              displayName: string;
+              url: string;
+              banner?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+              avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+            };
+          }>;
+        }
+      | undefined;
+  };
+};
+
+export type ShortAccountItemFragment = {
+  __typename?: 'Profile';
+  id: string;
+  displayName: string;
+  url: string;
+  avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+};
+
 export type NewVirtualContributorMySpacesQueryVariables = Exact<{ [key: string]: never }>;
 
 export type NewVirtualContributorMySpacesQuery = {
@@ -30137,50 +30210,39 @@ export type NewVirtualContributorMySpacesQuery = {
   };
 };
 
-export type RecentJourneyQueryVariables = Exact<{
-  spaceId: Scalars['UUID'];
+export type RecentSpacesQueryVariables = Exact<{
+  limit?: InputMaybe<Scalars['Float']>;
 }>;
 
-export type RecentJourneyQuery = {
+export type RecentSpacesQuery = {
   __typename?: 'Query';
-  lookup: {
-    __typename?: 'LookupQueryResults';
-    space?:
-      | {
-          __typename?: 'Space';
+  me: {
+    __typename?: 'MeQueryResults';
+    mySpaces: Array<{
+      __typename?: 'MySpaceResults';
+      space: {
+        __typename: 'Space';
+        id: string;
+        profile: {
+          __typename?: 'Profile';
           id: string;
-          profile: {
-            __typename?: 'Profile';
-            id: string;
-            url: string;
-            displayName: string;
-            cardBanner?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
-          };
-        }
-      | undefined;
+          url: string;
+          displayName: string;
+          cardBanner?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+        };
+      };
+    }>;
   };
 };
 
-export type RecentJourneyProfileFragment = {
+export type RecentSpaceProfileFragment = {
   __typename?: 'Profile';
   id: string;
   url: string;
   displayName: string;
   cardBanner?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
 };
 
-export type RecentSpacesQueryVariables = Exact<{
-  limit?: InputMaybe<Scalars['Float']>;
-}>;
-
-export type RecentSpacesQuery = {
-  __typename?: 'Query';
-  me: {
-    __typename?: 'MeQueryResults';
-    mySpaces: Array<{ __typename?: 'MySpaceResults'; space: { __typename: 'Space'; id: string } }>;
-  };
-};
-
 export type ChallengeExplorerPageQueryVariables = Exact<{ [key: string]: never }>;
 
 export type ChallengeExplorerPageQuery = {

src/core/i18n/en/translation.en.json

@@ -2247,10 +2247,7 @@
           "message": "<big>🚀 Click here to create your account and get started!</big> <small>Already a member? <signin>Sign in here</signin></small>"
         },
         "recentJourneys": {
-          "seeMore": {
-            "full": "Explore all your Spaces",
-            "short": "Explore all your Spaces"
-          }
+          "seeMore": "Explore all your Spaces"
         },
         "campaignBlock": {
           "createYourVCButton": "Create your Virtual Contributor!",

src/core/ui/card/ContributorCardHorizontal.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box } from '@mui/material';
-import Avatar from '../avatar/Avatar';
+import Avatar, { AvatarSize } from '../avatar/Avatar';
 import getLocationString, { Location } from '../location/getLocationString';
 import BadgeCardView from '../list/BadgeCardView';
 import GridItem from '../grid/GridItem';
@@ -29,6 +29,7 @@ export interface ContributorCardHorizontalProps {
   actions?: ReactNode;
   titleEndAmendment?: ReactNode;
   menuActions?: ReactNode;
+  size?: AvatarSize;
 }
 
 const ContributorCardHorizontal = ({
@@ -38,6 +39,7 @@ const ContributorCardHorizontal = ({
   actions,
   menuActions,
   titleEndAmendment,
+  size,
 }: ContributorCardHorizontalProps) => {
   const { t } = useTranslation();
 
@@ -72,6 +74,7 @@ const ContributorCardHorizontal = ({
                 src={profile?.avatar?.uri}
                 aria-label="User avatar"
                 alt={t('common.avatar-of', { user: profile?.displayName })}
+                size={size}
               >
                 {profile?.displayName?.[0]}
               </Avatar>