Adding Plugin Logic to the Talawa Mobile Web App

package.json

@@ -37,6 +37,7 @@
     "flag-icons": "^6.6.6",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.6",
+    "graphql-ws": "^5.14.0",
     "i18next": "^21.8.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.1",

src/Constant/constant.ts

@@ -2,3 +2,5 @@ export const AUTH_TOKEN = '';
 export const BACKEND_URL = process.env.REACT_APP_TALAWA_URL;
 export const RECAPTCHA_SITE_KEY = process.env.REACT_APP_RECAPTCHA_SITE_KEY;
 export const REACT_APP_USE_RECAPTCHA = process.env.REACT_APP_USE_RECAPTCHA;
+export const REACT_APP_BACKEND_WEBSOCKET_URL: string =
+  process.env.REACT_APP_BACKEND_WEBSOCKET_URL || '';

src/GraphQl/Mutations/mutations.ts

@@ -622,3 +622,14 @@ export const UNLIKE_COMMENT = gql`
     }
   }
 `;
+//Plugin WebSocket listner
+export const PLUGIN_SUBSCRIPTION = gql`
+  subscription onPluginUpdate {
+    onPluginUpdate {
+      pluginName
+      _id
+      pluginDesc
+      uninstalledOrgs
+    }
+  }
+`;

src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx

@@ -8,16 +8,24 @@
 import PermIdentityIcon from '@mui/icons-material/PermIdentity';
 import LanguageIcon from '@mui/icons-material/Language';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from '@apollo/client';
+import { useQuery, useSubscription } from '@apollo/client';
 import { USER_ORGANIZATION_CONNECTION } from 'GraphQl/Queries/Queries';
 import getOrganizationId from 'utils/getOrganizationId';
 import type { DropDirection } from 'react-bootstrap/esm/DropdownContext';
 import { Link, useHistory } from 'react-router-dom';
-
+import { PLUGIN_SUBSCRIPTION } from 'GraphQl/Mutations/mutations';
 interface InterfaceNavbarProps {
   currentPage: string | null;
 }
 
+type Plugin = {
+  pluginName: string;
+
+  alias: string;
+  link: string;
+  translated: string;
+  view: boolean;
+};
 function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
   const { t } = useTranslation('translation', {
     keyPrefix: 'userNavbar',
@@ -54,11 +62,76 @@
   }, [data]);
 
   const homeLink = `/user/organization/id=${organizationId}`;
-  const peopleLink = `/user/people/id=${organizationId}`;
-  const eventsLink = `/user/events/id=${organizationId}`;
-  const chatLink = `/user/chat/id=${organizationId}`;
-  const donationLink = `/user/donate/id=${organizationId}`;
+  let plugins: Plugin[] = [
+    {
+      pluginName: 'People',
+      alias: 'people',
+      link: `/user/people/id=${organizationId}`,
+      translated: t('people'),
+      view: true,
+    },
+    {
+      pluginName: 'Events',
+      alias: 'events',
+      link: `/user/events/id=${organizationId}`,
+      translated: t('events'),
+      view: true,
+    },
+    {
+      pluginName: 'Donation',
+      alias: 'donate',
+      link: `/user/donate/id=${organizationId}`,
+      translated: t('donate'),
+      view: true,
+    },
+    {
+      pluginName: 'Chats',
+      alias: 'chat',
+      link: `/user/chat/id=${organizationId}`,
+      translated: t('chat'),
+      view: true,
+    },
+  ];
+  if (localStorage.getItem('talawaPlugins')) {
+    const talawaPlugins: string = localStorage.getItem('talawaPlugins') || '{}';
+    plugins = JSON.parse(talawaPlugins);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: updatedPluginData, loading: _loadingSub } = useSubscription(
+    PLUGIN_SUBSCRIPTION
+    // { variables: {  } }
+  );
+  function getPluginIndex(pluginName: string, pluginsArray: Plugin[]): number {
+    for (let i = 0; i < pluginsArray.length; i++) {
+      if (pluginsArray[i].pluginName === pluginName) {
+        return i; // Return the index of the matching object
+      }
+    }
+    return -1; // Return -1 if not found
+  }
+
+  if (updatedPluginData != undefined) {
+    console.log('Update received');
+    console.log(updatedPluginData.onPluginUpdate.pluginName);
 
+    const pluginName = updatedPluginData.onPluginUpdate.pluginName;
+    const uninstalledOrgs = updatedPluginData.onPluginUpdate.uninstalledOrgs;
+    const pluginIndexToRemove = getPluginIndex(pluginName, plugins);
+    if (uninstalledOrgs.includes(organizationId)) {
+      if (pluginIndexToRemove != -1) {
+        plugins[pluginIndexToRemove].view = false;
+        localStorage.setItem('talawaPlugins', JSON.stringify(plugins));
+        console.log(`Plugin ${pluginName} has been removed.`);
+      } else {
+        console.log(`Plugin ${pluginName} is not present.`);
+      }
+    } else {
+      if (pluginIndexToRemove != -1) {
+        plugins[pluginIndexToRemove].view = true;
+        localStorage.setItem('talawaPlugins', JSON.stringify(plugins));
+      }
+    }
+  }
   return (
     <Navbar expand={'md'} variant="dark" className={`${styles.colorPrimary}`}>
       <Container fluid>
@@ -88,30 +161,19 @@
               >
                 {t('home')}
               </Nav.Link>
-              <Nav.Link
-                active={props.currentPage === 'events'}
-                onClick={(): void => history.push(eventsLink)}
-              >
-                {t('events')}
-              </Nav.Link>
-              <Nav.Link
-                active={props.currentPage === 'people'}
-                onClick={(): void => history.push(peopleLink)}
-              >
-                {t('people')}
-              </Nav.Link>
-              <Nav.Link
-                active={props.currentPage === 'chat'}
-                onClick={(): void => history.push(chatLink)}
-              >
-                {t('chat')}
-              </Nav.Link>
-              <Nav.Link
-                active={props.currentPage === 'donate'}
-                onClick={(): void => history.push(donationLink)}
-              >
-                {t('donate')}
-              </Nav.Link>
+
+              {plugins.map(
+                (plugin, idx) =>
+                  plugin.view && (
+                    <Nav.Link
+                      active={props.currentPage == plugin.alias}
+                      onClick={(): void => history.push(plugin.link)}
+                      key={idx}
+                    >
+                      {plugin.translated}
+                    </Nav.Link>
+                  )
+              )}
             </Nav>
             <Navbar.Collapse className="justify-content-end">
               <Dropdown data-testid="languageDropdown" drop={dropDirection}>

src/index.tsx

@@ -6,9 +6,12 @@ import {
   ApolloClient,
   ApolloProvider,
   InMemoryCache,
-  ApolloLink,
   HttpLink,
+  split,
 } from '@apollo/client';
+import { getMainDefinition } from '@apollo/client/utilities';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { createClient } from 'graphql-ws';
 import { onError } from '@apollo/link-error';
 import './assets/css/app.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
@@ -23,7 +26,10 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import App from './App';
 import { store } from './state/store';
 import './utils/i18n';
-import { BACKEND_URL } from 'Constant/constant';
+import {
+  BACKEND_URL,
+  REACT_APP_BACKEND_WEBSOCKET_URL,
+} from 'Constant/constant';
 
 onError(({ graphQLErrors }) => {
   if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message));
@@ -36,11 +42,32 @@ const httpLink = new HttpLink({
   },
 });
 
+// if didnt work use /subscriptions
+const wsLink = new GraphQLWsLink(
+  createClient({
+    url: REACT_APP_BACKEND_WEBSOCKET_URL,
+  })
+);
+// The split function takes three parameters:
+//
+// * A function that's called for each operation to execute
+// * The Link to use for an operation if the function returns a "truthy" value
+// * The Link to use for an operation if the function returns a "falsy" value
+const splitLink = split(
+  ({ query }) => {
+    const definition = getMainDefinition(query);
+    return (
+      definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+    );
+  },
+  wsLink,
+  httpLink
+);
 const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
   cache: new InMemoryCache(),
-  link: ApolloLink.from([httpLink]),
+  link: splitLink,
 });
-
 const fallbackLoader = <div className="loader"></div>;
 
 ReactDOM.render(

src/screens/UserPortal/Organizations/Organizations.tsx

@@ -21,7 +21,6 @@ interface InterfaceOrganizationCardProps {
   image: string;
   description: string;
 }
-
 export default function organizations(): JSX.Element {
   const { t } = useTranslation('translation', {
     keyPrefix: 'userOrganizations',
@@ -160,6 +159,7 @@ export default function organizations(): JSX.Element {
               </Dropdown.Menu>
             </Dropdown>
           </div>
+
           <div
             className={`d-flex flex-column justify-content-between ${styles.content}`}
           >