Refactor: widgets (#2259)

AKASHAorg · May 6, 2024 · 694a95a · 694a95a
1 parent 5648e80
commit 694a95a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 12 deletions.
diff --git a/ui/apps/profile/src/components/follow-profile-button/index.tsx b/ui/apps/profile/src/components/follow-profile-button/index.tsx
@@ -39,12 +39,13 @@ const FollowProfileButton: React.FC<FollowProfileButtonProps> = props => {
 
   const sdk = getSDK();
 
-  const sendSuccessNotification = (profileName: string) => {
+  const sendSuccessNotification = (profileName: string, following: boolean) => {
     uiEvents.next({
       event: NotificationEvents.ShowNotification,
       data: {
         type: NotificationTypes.Success,
-        message: t('You are now following {{name}}', {
+        message: t('{{message}} {{name}}', {
+          message: following ? 'You are now following' : 'You are no longer following',
           name: profileName,
         }),
       },
@@ -54,7 +55,7 @@ const FollowProfileButton: React.FC<FollowProfileButtonProps> = props => {
   const onCompleted = (followId: string, isFollowing: boolean, profileName: string) => {
     setFollowing(isFollowing);
     setFollowDocumentId(followId);
-    if (iconOnly && isFollowing) sendSuccessNotification(profileName);
+    if (iconOnly) sendSuccessNotification(profileName, isFollowing);
   };
 
   const [createFollowMutation, { loading: createFollowLoading }] = useCreateFollowMutation({

diff --git a/ui/design-system-components/src/components/Loaders/mini-profile-widget-loader.tsx b/ui/design-system-components/src/components/Loaders/mini-profile-widget-loader.tsx
@@ -27,7 +27,11 @@ const MiniProfileWidgetLoader: React.FC = () => {
         <Stack direction="row" justify="center" align="center" spacing="gap-x-2" fullWidth>
           <TextLine width="w-2/6" height="h-5" animated />
           <Text variant="subtitle2" color={{ light: 'grey4', dark: 'grey6' }}>
-            |
+            •
+          </Text>
+          <TextLine width="w-2/6" height="h-5" animated />
+          <Text variant="subtitle2" color={{ light: 'grey4', dark: 'grey6' }}>
+            •
           </Text>
           <TextLine width="w-2/6" height="h-5" animated />
         </Stack>

diff --git a/ui/design-system-components/src/components/ProfileMiniCard/index.tsx b/ui/design-system-components/src/components/ProfileMiniCard/index.tsx
@@ -16,7 +16,7 @@ export type ProfileMiniCardProps = {
   followersLabel?: string;
   followingLabel?: string;
   statsLoading: boolean;
-  stats: { followers: number; beams: number };
+  stats: { followers: number; following: number; beams: number };
   transformSource: (src: Image) => Image;
   handleClick?: () => void;
   footerExt?: React.ReactNode;
@@ -29,8 +29,9 @@ const ProfileMiniCard: React.FC<ProfileMiniCardProps> = props => {
     authenticatedDID,
     beamsLabel,
     followersLabel,
+    followingLabel,
     statsLoading,
-    stats: { followers, beams },
+    stats: { followers, following, beams },
     transformSource,
     handleClick,
     footerExt,
@@ -73,12 +74,16 @@ const ProfileMiniCard: React.FC<ProfileMiniCardProps> = props => {
             <DidField did={profileData.did.id} isValid={true} copiable={false} />
           )}
         </Stack>
-        <Stack direction="row" spacing="gap-x-3" align="center" justify="center">
+        <Stack direction="row" spacing="gap-x-2" align="center" justify="center">
           {statsLoading ? (
             <>
               <TextLine width="w-14" height="h-5" animated />
               <Text variant="subtitle2" color={{ light: 'secondaryLight', dark: 'secondaryDark' }}>
-                |
+                •
+              </Text>
+              <TextLine width="w-14" height="h-5" animated />
+              <Text variant="subtitle2" color={{ light: 'secondaryLight', dark: 'secondaryDark' }}>
+                •
               </Text>
               <TextLine width="w-14" height="h-5" animated />
             </>
@@ -88,11 +93,17 @@ const ProfileMiniCard: React.FC<ProfileMiniCardProps> = props => {
                 {beams} {beamsLabel}
               </Text>
               <Text variant="subtitle2" color={{ light: 'secondaryLight', dark: 'secondaryDark' }}>
-                |
+                •
               </Text>
               <Text variant="subtitle2">
                 {followers} {followersLabel}
               </Text>
+              <Text variant="subtitle2" color={{ light: 'secondaryLight', dark: 'secondaryDark' }}>
+                •
+              </Text>
+              <Text variant="subtitle2">
+                {following} {followingLabel}
+              </Text>
             </>
           )}
         </Stack>

diff --git a/ui/lib/extensions/src/react/widget.tsx b/ui/lib/extensions/src/react/widget.tsx
@@ -46,7 +46,7 @@ export const Widget: React.FC<WidgetExtensionProps> = props => {
     };
 
     resolveConfigs().catch();
-  }, [widgets, onError]);
+  }, [widgets, onError, logger]);
 
   const handleParcelError = React.useCallback(
     (widget, index: number) => err => {

diff --git a/ui/widgets/mini-profile/src/mini-profile-widget.tsx b/ui/widgets/mini-profile/src/mini-profile-widget.tsx
@@ -91,6 +91,7 @@ const ProfileCardWidget: React.FC<ProfileCardWidgetProps> = props => {
 
   const beams = stats?.totalBeams ?? 0;
   const followers = stats?.totalFollowers ?? 0;
+  const following = stats?.totalFollowing ?? 0;
 
   return (
     <ErrorBoundary
@@ -112,7 +113,7 @@ const ProfileCardWidget: React.FC<ProfileCardWidgetProps> = props => {
                 followingLabel={t('Following')}
                 followersLabel={followers === 1 ? t('Follower') : t('Followers')}
                 statsLoading={statsLoading}
-                stats={{ followers, beams }}
+                stats={{ followers, following, beams }}
                 transformSource={transformSource}
                 handleClick={handleCardClick}
                 footerExt={

diff --git a/ui/widgets/my-apps/src/my-apps-widget.tsx b/ui/widgets/my-apps/src/my-apps-widget.tsx
@@ -96,7 +96,7 @@ const ICWidget: React.FC<unknown> = () => {
       }}
       logger={logger}
     >
-      <Card padding="pb-4">
+      <Card margin="mb-4" padding="pb-4">
         <Stack padding="pl-4 pt-4 pb-6">
           <Text weight="bold" variant="body1">
             {t('My Apps')}