fixed send notif delegate issue

[mishramonalisha76]

Pull Request Template

Ticket Number

• Ticket Number

Description

• Problem/Feature:

Type of Change

• Bug fix
• New feature
• Code refactor
• Documentation update
• Other (please describe):

Checklist

• Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • Quick PR label added
• Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • DO NOT Merge PR label added

Frontend Guidelines

• Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• No errors in the build terminal
• Engineer has tested the changes on their local environment
• Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Explain the previous behavior

• After: What's changed now

Additional Context

Review & Approvals

• Self-review completed
• Code review by at least one other engineer
• Documentation updates if applicable

Notes

[github-actions]

• There is a typo in the import statement, useNavigate should be imported from 'react-router-dom'.
• There is a typo in the variable name nagivate, it should be navigate.
• The condition inside useEffect to navigate should check for the presence of alaisDetails instead of !alaisDetails.
• There is a typo in the CSS property width="-webkit-fill-available", it should be width="100%".
• In the css prop of the <Box> component, the css template literal is not being used for any styling, it can be removed.
• In the condition userPushSDKInstance?.readmode(), readmode() seems to contain a typo, it should be readMode() or readmode.

import { FC, useEffect, useState } from 'react';
import { css } from 'styled-components';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom'; // Correct import

import { Box, Text } from 'blocks';
import { SendNotificationForm } from './components/SendNotificationForm';
import UnlockProfileWrapper, { UNLOCK_PROFILE_TYPE } from 'components/chat/unlockProfile/UnlockProfileWrapper';

import { UserStoreType } from 'types';
import { useGetAliasInfo, useGetChannelDetails } from 'queries';
import { useAccount } from 'hooks';
import { aliasChainIdToChainName } from 'helpers/UtilityHelper';
import { ALIAS_CHAIN } from '@pushprotocol/restapi/src/lib/config';

//add formik
//add condition for /send URL

const SendNotification: FC = () => {
  const [isAuthModalVisible, setIsAuthModalVisible] = useState(true);
  const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user);
  const { account, chainId } = useAccount();
  const { data: channelDetails } = useGetChannelDetails(account);
  const { data: aliasDetails } = useGetAliasInfo({
    alias: account,
    aliasChain: aliasChainIdToChainName[chainId as keyof typeof aliasChainIdToChainName] as ALIAS_CHAIN,
  });
  const { delegatees } = useSelector((state: any) => state.admin);
  const navigate = useNavigate(); // Corrected variable name

  useEffect(() => {
    if (!channelDetails && !delegatees?.length && !aliasDetails) navigate('/channels'); // Corrected condition
  }, [channelDetails]);

  return (
    <Box
      padding={{ dp: 'spacing-lg', ml: 'spacing-sm' }}
      display="flex"
      flexDirection="column"
      gap={{ dp: 'spacing-xl', ml: 'spacing-md' }}
      alignSelf="center"
      width={{ dp: '648px', ml: '357px' }}
      //this has to be responsive
      borderRadius="radius-lg"
      alignItems="center"
      backgroundColor="surface-primary"
      margin={{ dp: 'spacing-lg', ml: 'spacing-sm' }}
    >
      <Text
        color="text-primary"
        variant="h3-semibold"
        display={{ dp: 'block', ml: 'none' }}
      >
        Send Notification
      </Text>
      <Text
        color="text-primary"
        variant="h5-semibold"
        display={{ dp: 'none', ml: 'block' }}
      >
        Send Notification
      </Text>
      <Box width="100%">
        <SendNotificationForm channelDetails={channelDetails} />
      </Box>
      {isAuthModalVisible && userPushSDKInstance && userPushSDKInstance?.readMode() && ( // Corrected method name
        <Box
          display="flex"
          justifyContent="center"
          width="100%" // Corrected width value
          alignItems="center"
        >
          <UnlockProfileWrapper
            type={UNLOCK_PROFILE_TYPE.MODAL}
            showConnectModal={true}
            onClose={() => setIsAuthModalVisible(false)}
            description="Unlock your profile to proceed."
          />
        </Box>
      )}
    </Box>
  );
};

export { SendNotification };

All looks good.

[github-actions]

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-08-22 08:38 UTC

[github-actions]

In SendNotification.tsx:

1. There is a typo in the variable name "nagivate", it should be "navigate".

2. In the conditional rendering of the Text component, there is a typo in "Send Notification" which should be wrapped in curly braces.

3. The logic inside the useEffect hook related to navigation seems correct. No issues found there.

4. The CSS declaration within the Box component seems fine.

5. The condition for displaying the UnlockProfileWrapper seems to be checking for the existence of userPushSDKInstance instead of checking its method "readmode". This might lead to a runtime error. You should check if userPushSDKInstance is not null before trying to access its methods.

6. The semantic issue is the variable "nagivate" should be corrected to "navigate" for better clarity.

In Navigation.tsx:

1. There is a missing closing parenthesis in the useEffect hook before the condition for onActiveNetwork.

2. The logic within the useEffect hook for setting navigation setup seems reasonable.

3. There are missing closing parentheses in the returnTransformedList function calls; these should be fixed.

4. The syntax for the usage of Object.assign in constructing navList should be corrected. Each Object.assign should end with a comma.

5. There are a few missing closing parentheses and semicolons within the code; you should ensure the syntax is correct to avoid any errors.

Overall, the logic and structure seem fine, but there are multiple typos and syntax errors that need to be corrected.

[github-actions]

File: src/modules/sendNotification/SendNotification.form.ts

• There are missing closing brackets for the test functions in the yup schema.
• In the getFormInitialValues function, the closing bracket after assigning the value for ctaLink is missing.

After rectifying the above issues, the code should look like this:

import { NotificationType } from '@pushprotocol/restapi';
import * as yup from 'yup';

import { SelectOption } from 'blocks/select/Select';
import { getRequiredFieldMessage } from 'common';
import { appConfig } from 'config';

export const getValidationSchema = (isSubsetRecipientPresent: boolean) => {
  return yup.object().shape({
    channelAddress: yup.string().required(getRequiredFieldMessage('Delegate')),
    chainId: yup.string().required(getRequiredFieldMessage('Chain')),
    type: yup.string().required(getRequiredFieldMessage('Type')),
    body: yup.string().required(getRequiredFieldMessage('Description')),
    setting: yup.string().required(getRequiredFieldMessage('Setting')),
    recipient: yup.string().test('recipient', getRequiredFieldMessage('Recipient'), function (value) {
      return (
        (this.parent.type !== 'SUBSET' || isSubsetRecipientPresent) && (this.parent.type !== 'TARGETTED' || !!value)
      );
    }),
    title: yup.string().test('title', getRequiredFieldMessage('Title'), function (value) {
      return !this.parent.titleChecked || !!value;
    }),
    mediaUrl: yup.string().test('mediaUrl', getRequiredFieldMessage('Media URL'), function (value) {
      return !this.parent.mediaUrlChecked || !!value;
    }),
    ctaLink: yup.string().test('ctaLink', getRequiredFieldMessage('CTA Link'), function (value) {
      return !this.parent.ctaLinkChecked || !!value;
    }),
  });
};

export const getFormInitialValues = (delegateesOptions: SelectOption[], aliasChainOptions: SelectOption[]) => {
  return {
    channelAddress: delegateesOptions[0]?.value || '',
    chainId: aliasChainOptions[0]?.value || appConfig.coreContractChain.toString(),
    type: 'BROADCAST' as NotificationType,
    recipient: '',
    titleChecked: false,
    mediaUrlChecked: false,
    ctaLinkChecked: false,
    title: '',
    body: '',
    setting: '0',
    mediaUrl: '',
    ctaLink: '',
  };
};

File: src/modules/sendNotification/SendNotification.tsx

All looks good.

File: src/modules/sendNotification/SendNotification.utils.tsx

• The getChannelDelegatesOptions function is missing a closing bracket at the end of the function.
• There are typos in the variable names: settingsOptions and defaultOption (these should be camelCased)

After the corrections, the code should look like this:

import { NotificationType } from '@pushprotocol/restapi';

import { Box } from 'blocks';
import { appConfig } from 'config';
import { convertAddrCaipToAddress, convertAddressToAddrCaip } from 'helpers/CaipHelper';
import { ChannelSetting } from 'helpers/channel/types';
import { ChannelDetails } from 'queries';

export const getChannelChainList = (channelDetails: ChannelDetails, account: string, onCoreNetwork: boolean) => {
  const aliases =
    channelDetails?.aliases
      ?.filter((alias) => alias.is_alias_verified && convertAddrCaipToAddress(alias.alias_address) === account)
      ?.map((alias) => parseInt(alias.alias_blockchain_id)) || [];
  if (onCoreNetwork) return [...aliases, appConfig.coreContractChain];
  else return aliases;
};

export const getChannelDelegatesOptions = (delegatees: [ChannelDetails]) => {
  if (delegatees && delegatees.length) {
    return delegatees?.map((channel) => ({
      icon: (
        <Box
          width="24px"
          height="24px"
          borderRadius="radius-xxs"
          overflow="hidden"
        >
          <img
            width="100%"
            height="100%"
            src={channel?.iconV2}
            alt={channel?.name}
          />
        </Box>
      ),
      label: channel?.name,
      value: channel?.channel,
    }));
  }
  return [];
};

export const getChannelSettingsOptions = (channelDetails: ChannelDetails) => {
  let settingsOptions = [];
  const defaultOption = { label: 'Default', value: '0' };
  if (channelDetails) {
    settingsOptions =
      JSON.parse(channelDetails?.channel_settings)?.map((settings: ChannelSetting, index: number) => ({
        label: settings?.description,
        value: (index + 1).toString(),
      })) || [];
  }
  return [...settingsOptions, defaultOption];
};

File: src/modules/sendNotification/components/SendNotificationForm.tsx

All looks good.

File: src/structure/Navigation.tsx

All looks good.

[github-actions]

File: src/modules/sendNotification/SendNotification.form.ts

1. In the recipient test function, the logic should be updated to use strict equality (===) instead of truthy/falsy checks:

recipient: yup.string().test('recipient', getRequiredFieldMessage('Recipient'), function (value) {
  return (
    (this.parent.type !== 'SUBSET' || isSubsetRecipientPresent) && (this.parent.type !== 'TARGETTED' || value !== '')
  );
}),

2. In the title test function, there is a missing closing parenthesis:

title: yup.string().test('title', getRequiredFieldMessage('Title'), function (value) {
  return !this.parent.titleChecked || value !== '';
}),

3. In the mediaUrl test function, there is a missing closing parenthesis:

mediaUrl: yup.string().test('mediaUrl', getRequiredFieldMessage('Media URL'), function (value) {
  return !this.parent.mediaUrlChecked || value !== '';
}),

4. In the ctaLink test function, there is a missing closing parenthesis:

ctaLink: yup.string().test('ctaLink', getRequiredFieldMessage('CTA Link'), function (value) {
  return !this.parent.ctaLinkChecked || value !== '';
}),

File: src/modules/sendNotification/SendNotification.tsx

5. The comment //this has to be responsive is not a valid JavaScript comment and should be enclosed in a block comment /* comment */.

6. In the line width="-webkit-fill-available", the use of -webkit-fill-available for width may have limited browser support and could cause cross-browser compatibility issues. It's recommended to use more widely supported CSS properties.

All looks good.

[github-actions]

File: src/modules/sendNotification/SendNotification.form.ts

1. In the getValidationSchema function, there are missing closing parenthesis for the test functions for title, mediaUrl, and ctaLink.

Updated code:

return yup.object().shape({
    channelAddress: yup.string().required(getRequiredFieldMessage('Delegate')),
    chainId: yup.string().required(getRequiredFieldMessage('Chain')),
    type: yup.string().required(getRequiredFieldMessage('Type')),
    body: yup.string().required(getRequiredFieldMessage('Description')),
    setting: yup.string().required(getRequiredFieldMessage('Setting')),
    recipient: yup.string().test('recipient', getRequiredFieldMessage('Recipient'), function (value) {
      return (
        (this.parent.type !== 'SUBSET' || isSubsetRecipientPresent) && (this.parent.type !== 'TARGETTED' || !!value)
      );
    }),
    title: yup.string().test('title', getRequiredFieldMessage('Title'), function (value) {
      return !this.parent.titleChecked || !!value;
    }),
    mediaUrl: yup.string().test('mediaUrl', getRequiredFieldMessage('Media URL'), function (value) {
      return !this.parent.mediaUrlChecked || !!value;
    }),
    ctaLink: yup.string().test('ctaLink', getRequiredFieldMessage('CTA Link'), function (value) {
      return !this.parent.ctaLinkChecked || !!value;
    }),
});

2. In the getValidationSchema function, there is a missing closing curly brace at the end of the function.

Updated code:

});

All looks good.