fix(calls): add currentUser to the widget

packages/plugin-calls-ui/src/components/Widget.tsx

@@ -5,24 +5,27 @@ import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { NotifButton } from '@erxes/ui-notifications/src/components/styles';
 import WidgetPopover from './WidgetPopover';
+import { type } from 'os';
+import { IUser } from '@erxes/ui/src/auth/types';
 
-class Widget extends React.Component<{ currentUser }> {
-  render() {
-    return (
-      <OverlayTrigger
-        trigger="click"
-        rootClose={true}
-        placement="bottom"
-        overlay={<WidgetPopover autoOpenTab="Keyboard" />}
-      >
-        <NotifButton>
-          <Tip text={__('Call')} placement="bottom">
-            <Icon icon="phone" size={20} />
-          </Tip>
-        </NotifButton>
-      </OverlayTrigger>
-    );
-  }
-}
+type Props = {
+  currentUser: IUser;
+};
+const Widget = (props: Props) => {
+  return (
+    <OverlayTrigger
+      trigger="click"
+      rootClose={true}
+      placement="bottom"
+      overlay={<WidgetPopover autoOpenTab="Keyboard" />}
+    >
+      <NotifButton>
+        <Tip text={__('Call')} placement="bottom">
+          <Icon icon="phone" size={20} />
+        </Tip>
+      </NotifButton>
+    </OverlayTrigger>
+  );
+};
 
 export default Widget;

packages/plugin-calls-ui/src/configs.js

@@ -6,43 +6,43 @@ module.exports = {
     './routes': './src/routes.tsx',
     './call': './src/containers/Widget.tsx',
     './incomin-call': './src/containers/IncomingCall.tsx',
-    "./inboxIntegrationForm": "./src/components/IntegrationForm.tsx",
-    "./integrationEditForm": "./src/components/IntegrationEditForm.tsx",
+    './inboxIntegrationForm': './src/components/IntegrationForm.tsx',
+    './integrationEditForm': './src/components/IntegrationEditForm.tsx',
   },
   routes: {
     url: 'http://localhost:3017/remoteEntry.js',
     scope: 'calls',
-    module: './routes'
+    module: './routes',
   },
-  menus:[
+  menus: [
     {
-      text: "Calls",
-      url: "/calls",
-      icon: "icon-outgoing-call",
-      location: "topNavigation",
-      scope: "calls",
-      component: "./call",
+      text: 'Calls',
+      url: '/calls',
+      icon: 'icon-outgoing-call',
+      location: 'topNavigation',
+      scope: 'calls',
+      component: './call',
     },
     {
-      text: "Incoming calls",
-      icon: "icon-outgoing-call",
-      location: "topNavigation",
-      scope: "calls",
-      component: "./incomin-call",
-    }
+      text: 'Incoming calls',
+      icon: 'icon-outgoing-call',
+      location: 'topNavigation',
+      scope: 'calls',
+      component: './incomin-call',
+    },
   ],
 
-  inboxIntegrationForm: "./inboxIntegrationForm",
-  invoiceDetailRightSection: "./invoiceDetailRightSection",
-  integrationEditForm: "./integrationEditForm",
+  inboxIntegrationForm: './inboxIntegrationForm',
+  invoiceDetailRightSection: './invoiceDetailRightSection',
+  integrationEditForm: './integrationEditForm',
   inboxIntegrations: [
     {
-      name: "Grand stream",
-      description: "Configure Grand stream device",
+      name: 'Grand stream',
+      description: 'Configure Grand stream device',
       isAvailable: true,
-      kind: "calls",
-      logo: "/images/integrations/grandstream.png",
-      createModal: "grandstream",
+      kind: 'calls',
+      logo: '/images/integrations/grandstream.png',
+      createModal: 'grandstream',
     },
   ],
 };

packages/plugin-calls-ui/src/containers/IncomingCall.tsx

@@ -3,27 +3,34 @@ import IncomingCall from '../components/IncomingCall';
 import { subscriptions } from '../graphql';
 import { useSubscription, gql } from '@apollo/client';
 import { IUser } from '@erxes/ui/src/auth/types';
+import withCurrentUser from '@erxes/ui/src/auth/containers/withCurrentUser';
+import { Spinner } from '@erxes/ui/src/components';
 
 type Props = {
   currentUser: IUser;
 };
 
 const IncomingCallContainer = (props: Props) => {
-  // apply subscription to get incoming call
   const { currentUser } = props;
   const { data, loading } = useSubscription(
     gql(subscriptions.phoneCallReceived),
     {
       variables: {
-        userId: currentUser._id
+        userId: currentUser ? currentUser._id : ''
       },
       skip: !currentUser
     }
   );
 
+  if (loading) {
+    return <Spinner />;
+  }
+
   const callData = data && data.phoneCallReceived;
 
   return <IncomingCall callData={callData} />;
 };
 
-export default IncomingCallContainer;
+const WithCurrentUser = withCurrentUser(IncomingCallContainer);
+
+export default (props: Props) => <WithCurrentUser {...props} />;

packages/plugin-calls-ui/src/routes.tsx

@@ -1,5 +1,5 @@
 import asyncComponent from '@erxes/ui/src/components/AsyncComponent';
-import withCurrentUser from '@erxes/ui/src/auth/containers/withCurrentUser';
+
 import queryString from 'query-string';
 import React from 'react';
 import { Route } from 'react-router-dom';
@@ -8,20 +8,33 @@ const Widget = asyncComponent(() =>
   import(/* webpackChunkName: "Widget - Calls" */ './containers/Widget')
 );
 
-const calls = ({ location, history, currentUser }) => {
+const IncomingCall = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "IncomingCall - Calls" */ './containers/IncomingCall'
+  )
+);
+
+const widget = ({ location, history, currentUser }) => {
   const queryParams = queryString.parse(location.search);
   const { type } = queryParams;
 
   return <Widget typeId={type} history={history} currentUser={currentUser} />;
 };
 
-const routes = ({ currentUser }) => {
+const incomingCall = ({ currentUser }) => {
+  return <IncomingCall currentUser={currentUser} />;
+};
+
+const routes = () => {
   return (
-    <Route
-      path="/calls/"
-      component={props => calls({ ...props, currentUser })}
-    />
+    <>
+      <Route path="/calls/" component={props => widget({ ...props })} />
+      <Route
+        path="/incomingcalls/"
+        component={props => incomingCall({ ...props })}
+      />
+    </>
   );
 };
 
-export default withCurrentUser(routes);
+export default routes;