Preferences - Connect Services Page

pages/accountLists/[accountListId]/settings/integrations/index.page.tsx

@@ -2,29 +2,31 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GetServerSideProps } from 'next';
 import { getToken } from 'next-auth/jwt';
+import { useRouter } from 'next/router';
 import { suggestArticles } from 'src/lib/helpScout';
 import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup';
-import { TheKeyAccordian } from 'src/components/Settings/integrations/Key/TheKeyAccordian';
-import { OrganizationAccordian } from 'src/components/Settings/integrations/Organization/OrganizationAccordian';
-import { GoogleAccordian } from 'src/components/Settings/integrations/Google/GoogleAccordian';
-import { MailchimpAccordian } from 'src/components/Settings/integrations/Mailchimp/MailchimpAccordian';
-import { PrayerlettersAccordian } from 'src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian';
-import { ChalklineAccordian } from 'src/components/Settings/integrations/Chalkline/ChalklineAccordian';
+import { TheKeyAccordion } from 'src/components/Settings/integrations/Key/TheKeyAccordion';
+import { OrganizationAccordion } from 'src/components/Settings/integrations/Organization/OrganizationAccordion';
+import { GoogleAccordion } from 'src/components/Settings/integrations/Google/GoogleAccordion';
+import { MailchimpAccordion } from 'src/components/Settings/integrations/Mailchimp/MailchimpAccordion';
+import { PrayerlettersAccordion } from 'src/components/Settings/integrations/Prayerletters/PrayerlettersAccordion';
+import { ChalklineAccordion } from 'src/components/Settings/integrations/Chalkline/ChalklineAccordion';
 import { SettingsWrapper } from '../wrapper';
-import { IntegrationsContextProvider } from './integrationsContext';
+import { IntegrationsContextProvider } from './IntegrationsContext';
 
 interface Props {
   apiToken: string;
-  selectedTab: string;
 }
 
-const Integrations = ({ apiToken, selectedTab }: Props): ReactElement => {
+const Integrations = ({ apiToken }: Props): ReactElement => {
   const { t } = useTranslation();
-  const [expandedPanel, setExpandedPanel] = useState('');
+  const { query } = useRouter();
+  const [expandedPanel, setExpandedPanel] = useState(
+    (query?.selectedTab as string) || '',
+  );
 
   useEffect(() => {
     suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS');
-    setExpandedPanel(selectedTab);
   }, []);
 
   const handleAccordionChange = (panel: string) => {
@@ -39,29 +41,29 @@ const Integrations = ({ apiToken, selectedTab }: Props): ReactElement => {
     >
       <IntegrationsContextProvider apiToken={apiToken}>
         <AccordionGroup title="">
-          <TheKeyAccordian
+          <TheKeyAccordion
             handleAccordionChange={handleAccordionChange}
             expandedPanel={expandedPanel}
           />
-          <OrganizationAccordian
+          <OrganizationAccordion
             handleAccordionChange={handleAccordionChange}
             expandedPanel={expandedPanel}
           />
         </AccordionGroup>
         <AccordionGroup title={t('External Services')}>
-          <GoogleAccordian
+          <GoogleAccordion
             handleAccordionChange={handleAccordionChange}
             expandedPanel={expandedPanel}
           />
-          <MailchimpAccordian
+          <MailchimpAccordion
             handleAccordionChange={handleAccordionChange}
             expandedPanel={expandedPanel}
           />
-          <PrayerlettersAccordian
+          <PrayerlettersAccordion
             handleAccordionChange={handleAccordionChange}
             expandedPanel={expandedPanel}
           />
-          <ChalklineAccordian
+          <ChalklineAccordion
             handleAccordionChange={handleAccordionChange}
             expandedPanel={expandedPanel}
           />
@@ -71,22 +73,16 @@ const Integrations = ({ apiToken, selectedTab }: Props): ReactElement => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async ({
-  query,
-  req,
-}) => {
+export const getServerSideProps: GetServerSideProps = async ({ req }) => {
   const jwtToken = (await getToken({
     req,
     secret: process.env.JWT_SECRET as string,
   })) as { apiToken: string } | null;
-
   const apiToken = jwtToken?.apiToken;
-  const selectedTab = query?.selectedTab ?? '';
 
   return {
     props: {
       apiToken,
-      selectedTab,
     },
   };
 };

pages/accountLists/[accountListId]/settings/wrapper.tsx

@@ -30,7 +30,7 @@ export const SettingsWrapper: React.FC<SettingsWrapperProps> = ({
   children,
 }) => {
   const { appName } = useGetAppSettings();
-  const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
+  const [isNavListOpen, setNavListOpen] = useState(false);
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };

pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/createGoogleIntegration.graphql

@@ -7,7 +7,7 @@ extend type Mutation {
 input CreateGoogleIntegrationInput {
   googleAccountId: ID!
   googleIntegration: GoogleAccountIntegrationInput
-  accountListID: String!
+  accountListId: String!
 }
 
 input GoogleAccountIntegrationInput {

pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/datahandler.ts

@@ -44,7 +44,7 @@ export const CreateGoogleIntegration = (
   data: CreateGoogleIntegrationResponse,
 ): CreateGoogleIntegrationAttributesCamel => {
   const attributes = {} as Omit<CreateGoogleIntegrationAttributesCamel, 'id'>;
-  Object.keys(data.attributes).map((key) => {
+  Object.keys(data.attributes).forEach((key) => {
     attributes[snakeToCamel(key)] = data.attributes[key];
   });
 

pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/resolvers.ts

@@ -4,13 +4,13 @@ const CreateGoogleIntegrationResolvers: Resolvers = {
   Mutation: {
     createGoogleIntegration: async (
       _source,
-      { input: { googleAccountId, googleIntegration, accountListID } },
+      { input: { googleAccountId, googleIntegration, accountListId } },
       { dataSources },
     ) => {
       return dataSources.mpdxRestApi.createGoogleIntegration(
         googleAccountId,
         googleIntegration,
-        accountListID,
+        accountListId,
       );
     },
   },

pages/api/Schema/Settings/Preferences/Intergrations/Google/googleAccountIntegrations/datahandler.ts

@@ -0,0 +1,53 @@
+import { snakeToCamel } from 'src/lib/snakeToCamel';
+
+export interface GoogleAccountIntegrationsResponse {
+  id: string;
+  type: string;
+  attributes: Omit<GoogleAccountIntegrationAttributes, 'id'>;
+  relationships: relationships;
+}
+type relationships = {
+  account_list: object[];
+  google_account: object[];
+};
+export interface GoogleAccountIntegrationAttributes {
+  calendar_id: string;
+  calendar_integration: boolean;
+  calendar_integrations: string[];
+  calendar_name: string;
+  calendars: calendars[];
+  created_at: string;
+  updated_at: string;
+  id: string;
+  updated_in_db_at: string;
+}
+interface GoogleAccountIntegrationAttributesCamel {
+  calendarId: string;
+  calendarIntegration: boolean;
+  calendarIntegrations: string[];
+  calendarName: string;
+  calendars: calendars[];
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  updatedInDbAt: string;
+}
+type calendars = {
+  id: string;
+  name: string;
+};
+
+export const GoogleAccountIntegrations = (
+  data: GoogleAccountIntegrationsResponse[],
+): GoogleAccountIntegrationAttributesCamel[] => {
+  return data.map((integrations) => {
+    const attributes = {} as Omit<
+      GoogleAccountIntegrationAttributesCamel,
+      'id'
+    >;
+    Object.keys(integrations.attributes).forEach((key) => {
+      attributes[snakeToCamel(key)] = integrations.attributes[key];
+    });
+    return { id: integrations.id, ...attributes };
+  }, []);
+};

pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql → pages/api/Schema/Settings/Preferences/Intergrations/Google/googleAccountIntegrations/googleAccountIntegrations.graphql

@@ -1,10 +1,10 @@
 extend type Query {
-  getGoogleAccountIntegrations(
-    input: GetGoogleAccountIntegrationsInput!
+  googleAccountIntegrations(
+    input: GoogleAccountIntegrationsInput!
   ): [GoogleAccountIntegration]!
 }
 
-input GetGoogleAccountIntegrationsInput {
+input GoogleAccountIntegrationsInput {
   googleAccountId: ID!
   accountListId: ID!
 }

pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers.ts → pages/api/Schema/Settings/Preferences/Intergrations/Google/googleAccountIntegrations/resolvers.ts

@@ -1,18 +1,18 @@
 import { Resolvers } from '../../../../../../graphql-rest.page.generated';
 
-const GetGoogleAccountIntegrationsResolvers: Resolvers = {
+const GoogleAccountIntegrationsResolvers: Resolvers = {
   Query: {
-    getGoogleAccountIntegrations: async (
+    googleAccountIntegrations: async (
       _source,
       { input: { googleAccountId, accountListId } },
       { dataSources },
     ) => {
-      return dataSources.mpdxRestApi.getGoogleAccountIntegrations(
+      return dataSources.mpdxRestApi.googleAccountIntegrations(
         googleAccountId,
         accountListId,
       );
     },
   },
 };
 
-export { GetGoogleAccountIntegrationsResolvers };
+export { GoogleAccountIntegrationsResolvers };

pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts → pages/api/Schema/Settings/Preferences/Intergrations/Google/googleAccounts/datahandler.ts

@@ -1,7 +1,7 @@
 import { snakeToCamel } from 'src/lib/snakeToCamel';
 
-export interface GetGoogleAccountsResponse {
-  attributes: Omit<GetGoogleAccountAttributes, 'id'>;
+export interface GoogleAccountsResponse {
+  attributes: Omit<GoogleAccountAttributes, 'id'>;
   id: string;
   relationships: {
     contact_groups: {
@@ -11,7 +11,7 @@ export interface GetGoogleAccountsResponse {
   type: string;
 }
 
-export interface GetGoogleAccountAttributes {
+export interface GoogleAccountAttributes {
   id: string;
   created_at: string;
   email: string;
@@ -25,7 +25,7 @@ export interface GetGoogleAccountAttributes {
   updated_in_db_at: string;
 }
 
-interface GetGoogleAccountAttributesCamel {
+interface GoogleAccountAttributesCamel {
   id: string;
   createdAt: string;
   email: string;
@@ -39,15 +39,15 @@ interface GetGoogleAccountAttributesCamel {
   updatedInDbAt: string;
 }
 
-export const GetGoogleAccounts = (
-  data: GetGoogleAccountsResponse[],
-): GetGoogleAccountAttributesCamel[] => {
-  return data.reduce((prev: GetGoogleAccountAttributesCamel[], current) => {
-    const attributes = {} as Omit<GetGoogleAccountAttributesCamel, 'id'>;
-    Object.keys(current.attributes).map((key) => {
-      attributes[snakeToCamel(key)] = current.attributes[key];
+export const GoogleAccounts = (
+  data: GoogleAccountsResponse[],
+): GoogleAccountAttributesCamel[] => {
+  return data.map((accounts) => {
+    const attributes = {} as Omit<GoogleAccountAttributesCamel, 'id'>;
+    Object.keys(accounts.attributes).map((key) => {
+      attributes[snakeToCamel(key)] = accounts.attributes[key];
     });
 
-    return prev.concat([{ id: current.id, ...attributes }]);
+    return { id: accounts.id, ...attributes };
   }, []);
 };

pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql → pages/api/Schema/Settings/Preferences/Intergrations/Google/googleAccounts/googleAccounts.graphql

@@ -1,5 +1,5 @@
 extend type Query {
-  getGoogleAccounts: [GoogleAccountAttributes]!
+  googleAccounts: [GoogleAccountAttributes]!
 }
 
 type GoogleAccountAttributes {

pages/api/Schema/Settings/Preferences/Intergrations/Google/googleAccounts/resolvers.ts

@@ -0,0 +1,11 @@
+import { Resolvers } from '../../../../../../graphql-rest.page.generated';
+
+const GoogleAccountsResolvers: Resolvers = {
+  Query: {
+    googleAccounts: async (_source, {}, { dataSources }) => {
+      return dataSources.mpdxRestApi.googleAccounts();
+    },
+  },
+};
+
+export { GoogleAccountsResolvers };

pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts

@@ -47,7 +47,7 @@ export const UpdateGoogleIntegration = (
     GetGoogleAccountIntegrationAttributesCamel,
     'id'
   >;
-  Object.keys(data.attributes).map((key) => {
+  Object.keys(data.attributes).forEach((key) => {
     attributes[snakeToCamel(key)] = data.attributes[key];
   });