chore(): update profile avatar in topbar (#1058)

* chore(): update profile avatar in topbar * chore(): add globalChannel
AKASHAorg · Apr 8, 2021 · 207b116 · 207b116
1 parent 9e0e3e7
commit 207b116
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 4 deletions.
diff --git a/apps/akasha/src/components/app-routes.tsx b/apps/akasha/src/components/app-routes.tsx
@@ -37,6 +37,7 @@ const AppRoutes: React.FC<RootComponentProps & AppRoutesProps> = props => {
     ipfsService: sdkModules.commons.ipfsService,
     onError: errorActions.createError,
     rxjsOperators: props.rxjsOperators,
+    globalChannel: props.globalChannel,
   });
 
   React.useEffect(() => {

diff --git a/apps/akasha/src/components/post-page/post-page.tsx b/apps/akasha/src/components/post-page/post-page.tsx
@@ -108,6 +108,7 @@ const PostPage: React.FC<IPostPage & RootComponentProps> = props => {
     ipfsService: props.sdkModules.commons.ipfsService,
     onError: errorActions.createError,
     rxjsOperators: props.rxjsOperators,
+    globalChannel: props.globalChannel,
   });
 
   React.useEffect(() => {

diff --git a/apps/akasha/src/widgets/posts-profile-card-widget/profile-card-widget.tsx b/apps/akasha/src/widgets/posts-profile-card-widget/profile-card-widget.tsx
@@ -22,6 +22,7 @@ const ProfileCardWidget: React.FC<RootComponentProps> = props => {
     ipfsService: props.sdkModules.commons.ipfsService,
     profileService: props.sdkModules.profiles.profileService,
     postsService: props.sdkModules.posts,
+    globalChannel: props.globalChannel,
   });
 
   const [loginState] = useLoginState({

diff --git a/apps/moderation/src/components/content-card/content-card.tsx b/apps/moderation/src/components/content-card/content-card.tsx
@@ -47,6 +47,7 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
     },
     ipfsService: props.sdkModules.commons.ipfsService,
     profileService: props.sdkModules.profiles.profileService,
+    globalChannel: props.globalChannel,
   });
 
   const [reporterProfile, reporterProfileActions] = useProfile({
@@ -55,6 +56,7 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
     },
     ipfsService: props.sdkModules.commons.ipfsService,
     profileService: props.sdkModules.profiles.profileService,
+    globalChannel: props.globalChannel,
   });
 
   const [moderatorProfile, moderatorProfileActions] = useProfile({
@@ -63,6 +65,7 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
     },
     ipfsService: props.sdkModules.commons.ipfsService,
     profileService: props.sdkModules.profiles.profileService,
+    globalChannel: props.globalChannel,
   });
 
   React.useEffect(() => {
@@ -135,6 +138,7 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
           singleSpa={props.singleSpa}
           sdkModules={props.sdkModules}
           handleButtonClick={props.handleButtonClick}
+          globalChannel={props.globalChannel}
         />
       </MainAreaCardBox>
     </Box>

diff --git a/apps/moderation/src/components/content-card/content.tsx b/apps/moderation/src/components/content-card/content.tsx
@@ -84,6 +84,7 @@ const Content: React.FC<IContentProps> = props => {
           forLabel={props.forLabel}
           logger={props.logger}
           sdkModules={props.sdkModules}
+          globalChannel={props.globalChannel}
         />
       )}
       <Box

diff --git a/apps/moderation/src/components/content-list.tsx b/apps/moderation/src/components/content-list.tsx
@@ -18,6 +18,7 @@ interface IContentListProps {
   logger: any;
   singleSpa: any;
   sdkModules: any;
+  globalChannel: any;
 }
 
 interface IBaseItem {
@@ -266,6 +267,7 @@ const ContentList: React.FC<IContentListProps> = props => {
                 reportedDateTime={pendingItem.entryDate}
                 makeADecisionLabel={t('Make a Decision')}
                 handleButtonClick={handleButtonClick}
+                globalChannel={props.globalChannel}
               />
             ))
           : renderNotFound('pending'))}
@@ -309,6 +311,7 @@ const ContentList: React.FC<IContentListProps> = props => {
                   evaluationDateTime={moderatedItem.evaluationDate}
                   reviewDecisionLabel={t('Review decision')}
                   handleButtonClick={handleButtonClick}
+                  globalChannel={props.globalChannel}
                 />
               ))
           : renderNotFound('moderated'))}

diff --git a/apps/moderation/src/components/explanations-box-entry.tsx b/apps/moderation/src/components/explanations-box-entry.tsx
@@ -10,6 +10,7 @@ export interface IExplanationsBoxEntryProps {
   forLabel: string;
   logger: any;
   sdkModules: any;
+  globalChannel: any;
 }
 
 const ExplanationsCardEntry: React.FC<IExplanationsBoxEntryProps> = props => {
@@ -21,6 +22,7 @@ const ExplanationsCardEntry: React.FC<IExplanationsBoxEntryProps> = props => {
     },
     ipfsService: props.sdkModules.commons.ipfsService,
     profileService: props.sdkModules.profiles.profileService,
+    globalChannel: props.globalChannel,
   });
 
   React.useEffect(() => {

diff --git a/apps/moderation/src/components/explanations-box.tsx b/apps/moderation/src/components/explanations-box.tsx
@@ -48,6 +48,7 @@ const ExplanationsCard: React.FC<IExplanationsBoxProps> = props => {
               forLabel={forLabel}
               logger={logger}
               sdkModules={sdkModules}
+              globalChannel={props.globalChannel}
             />
           ))}
         </Box>

diff --git a/apps/moderation/src/interfaces/content.ts b/apps/moderation/src/interfaces/content.ts
@@ -36,5 +36,6 @@ export interface IContentProps {
   logger: any;
   singleSpa: any;
   sdkModules: any;
+  globalChannel: any;
   handleButtonClick: (param1: string, param2: string) => void;
 }
diff --git a/ui/hooks/src/use-profile.ts b/ui/hooks/src/use-profile.ts
@@ -14,7 +14,10 @@ import { getMediaUrl } from './utils/media-utils';
 type voidFunc<T = object> = (arg: T) => void;
 
 export interface UseProfileActions {
-  getProfileData: voidFunc<{ pubKey?: string | null; ethAddress?: string | null }>;
+  getProfileData: (
+    payload: { pubKey?: string | null; ethAddress?: string | null },
+    disableLoadingIndicator?: boolean,
+  ) => void;
   getEntryAuthor: voidFunc<{ entryId: string }>;
   resetProfileData: () => void;
   optimisticUpdate: (data: any) => void;
@@ -42,6 +45,7 @@ export interface UseProfileProps {
   postsService?: any;
   ensService?: any;
   rxjsOperators?: any;
+  globalChannel: any;
 }
 
 export interface ProfileUpdateStatus {
@@ -60,7 +64,7 @@ export interface ProfileUpdateStatus {
 export const useProfile = (
   props: UseProfileProps,
 ): [Partial<IProfileData & { isLoading: boolean }>, UseProfileActions, ProfileUpdateStatus] => {
-  const { onError, ipfsService, profileService, postsService } = props;
+  const { onError, ipfsService, profileService, postsService, globalChannel } = props;
   const [profile, setProfile] = React.useState<Partial<IProfileData & { isLoading: boolean }>>({
     isLoading: true,
   });
@@ -74,10 +78,31 @@ export const useProfile = (
     notAllowed: false,
   });
 
+  React.useEffect(() => {
+    if (globalChannel && props.rxjsOperators) {
+      globalChannel
+        .pipe(
+          props.rxjsOperators.filter((payload: any) => {
+            return (
+              payload.channelInfo.method === 'makeDefaultProvider' &&
+              payload.channelInfo.servicePath.includes('PROFILE_STORE')
+            );
+          }),
+        )
+        .subscribe(() => {
+          if (profile.pubKey) {
+            actions.getProfileData({ pubKey: profile.pubKey }, true);
+          }
+        });
+    }
+  }, [profile]);
+
   const actions: UseProfileActions = {
-    getProfileData(payload) {
+    getProfileData(payload, disableLoadingIndicator) {
       try {
-        setProfile({ isLoading: true });
+        if (!disableLoadingIndicator) {
+          setProfile({ isLoading: true });
+        }
         const ipfsGatewayCall = ipfsService.getSettings({});
         const getProfileCall = profileService.getProfile(payload);
         const obs = forkJoin([ipfsGatewayCall, getProfileCall]);

diff --git a/ui/plugins/profile/src/components/routes/index.tsx b/ui/plugins/profile/src/components/routes/index.tsx
@@ -30,6 +30,7 @@ const Routes: React.FC<RootComponentProps> = props => {
     ipfsService: props.sdkModules.commons.ipfsService,
     onError: errorActions.createError,
     rxjsOperators: props.rxjsOperators,
+    globalChannel: props.globalChannel,
   });
 
   const [reportModalOpen, setReportModalOpen] = React.useState(false);

diff --git a/ui/plugins/profile/src/components/routes/profile-page.tsx b/ui/plugins/profile/src/components/routes/profile-page.tsx
@@ -60,6 +60,7 @@ const ProfilePage = (props: ProfilePageProps) => {
     profileService: props.sdkModules.profiles.profileService,
     ensService: props.sdkModules.registry.ens,
     rxjsOperators: props.rxjsOperators,
+    globalChannel: props.globalChannel,
   });
 
   const [postsState, postsActions] = usePosts({

diff --git a/ui/plugins/search/src/components/routes/index.tsx b/ui/plugins/search/src/components/routes/index.tsx
@@ -25,6 +25,7 @@ const Routes: React.FC<RootComponentProps> = props => {
   const [loginProfile] = useProfile({
     profileService: props.sdkModules.profiles.profileService,
     ipfsService: props.sdkModules.commons.ipfsService,
+    globalChannel: props.globalChannel,
   });
 
   const [modalState, modalStateActions] = useModalState({

diff --git a/ui/widgets/top-bar/src/components/topbar-component.tsx b/ui/widgets/top-bar/src/components/topbar-component.tsx
@@ -87,6 +87,8 @@ const TopbarComponent = (props: TopBarProps) => {
     onError: err => logger.error(err),
     profileService: props.sdkModules.profiles.profileService,
     ipfsService: props.sdkModules.commons.ipfsService,
+    globalChannel: props.globalChannel,
+    rxjsOperators: props.rxjsOperators,
   });
 
   const [notificationsState, notificationActions] = useNotifications({