Merge pull request #3162 from glific/code-formatting

fixes for code formatting

Author: akanshaaa19

src/assets/images/icons/SideDrawer/KnowledgeBaseIcon.tsx

@@ -1,12 +1,5 @@
 const SvgComponent = ({ color }: { color: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    width="18"
-    height="18"
-    viewBox="0,0,256,256"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="18" height="18" viewBox="0,0,256,256">
     <g fill={color}>
       <g transform="scale(9.84615,9.84615)">
         <path d="M7,0c-2.20312,0 -4,1.79688 -4,4v18c0,2.20313 1.79688,4 4,4h12c2.20313,0 4,-1.79687 4,-4v-14c0,-1.0625 -0.97266,-2.07031 -2.71875,-3.78125c-0.24219,-0.23828 -0.50391,-0.50391 -0.75,-0.75c-0.24609,-0.24609 -0.51172,-0.47656 -0.75,-0.71875c-1.71094,-1.74609 -2.71875,-2.75 -3.78125,-2.75zM7,2h7.28125c0.72266,0.18359 0.71875,1.05078 0.71875,1.9375v3.0625c0,0.55078 0.44922,1 1,1h3c0.99609,0 2,0.00391 2,1v13c0,1.10547 -0.89453,2 -2,2h-12c-1.10547,0 -2,-0.89453 -2,-2v-18c0,-1.10547 0.89453,-2 2,-2zM7.8125,10c-0.55078,0.05078 -0.95703,0.54297 -0.90625,1.09375c0.05078,0.55078 0.54297,0.95703 1.09375,0.90625h10c0.35938,0.00391 0.69531,-0.18359 0.87891,-0.49609c0.17969,-0.3125 0.17969,-0.69531 0,-1.00781c-0.18359,-0.3125 -0.51953,-0.5 -0.87891,-0.49609h-10c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM7.8125,14c-0.55078,0.05078 -0.95703,0.54297 -0.90625,1.09375c0.05078,0.55078 0.54297,0.95703 1.09375,0.90625h8c0.35938,0.00391 0.69531,-0.18359 0.87891,-0.49609c0.17969,-0.3125 0.17969,-0.69531 0,-1.00781c-0.18359,-0.3125 -0.51953,-0.5 -0.87891,-0.49609h-8c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM7.8125,18c-0.55078,0.05078 -0.95703,0.54297 -0.90625,1.09375c0.05078,0.55078 0.54297,0.95703 1.09375,0.90625h10c0.35938,0.00391 0.69531,-0.18359 0.87891,-0.49609c0.17969,-0.3125 0.17969,-0.69531 0,-1.00781c-0.18359,-0.3125 -0.51953,-0.5 -0.87891,-0.49609h-10c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0z"></path>

src/assets/images/icons/SideDrawer/SettingsIcon.tsx

@@ -1,12 +1,6 @@
 const SvgComponent = ({ color }: { color: string }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
-    <g
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      clipPath="url(#a)"
-    >
+    <g stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} clipPath="url(#a)">
       <path d="M9 11.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z" />
       <path d="M14.55 11.25a1.238 1.238 0 0 0 .247 1.365l.045.045a1.5 1.5 0 0 1-1.06 2.562 1.5 1.5 0 0 1-1.062-.44l-.045-.044a1.238 1.238 0 0 0-1.365-.248 1.238 1.238 0 0 0-.75 1.133v.127a1.5 1.5 0 1 1-3 0v-.068a1.238 1.238 0 0 0-.81-1.132 1.238 1.238 0 0 0-1.365.247l-.045.045a1.5 1.5 0 1 1-2.123-2.122l.046-.045a1.238 1.238 0 0 0 .247-1.365 1.238 1.238 0 0 0-1.132-.75H2.25a1.5 1.5 0 1 1 0-3h.067a1.237 1.237 0 0 0 1.133-.81 1.237 1.237 0 0 0-.248-1.365l-.044-.045A1.5 1.5 0 1 1 5.28 3.217l.045.046a1.237 1.237 0 0 0 1.365.247h.06a1.237 1.237 0 0 0 .75-1.132V2.25a1.5 1.5 0 0 1 3 0v.067a1.238 1.238 0 0 0 .75 1.133 1.237 1.237 0 0 0 1.365-.248l.045-.044a1.5 1.5 0 1 1 2.123 2.122l-.045.045a1.237 1.237 0 0 0-.248 1.365v.06a1.237 1.237 0 0 0 1.133.75h.127a1.5 1.5 0 0 1 0 3h-.068a1.238 1.238 0 0 0-1.132.75Z" />
     </g>

src/assets/images/icons/SideDrawer/TagIcon.tsx

@@ -6,10 +6,7 @@ const SvgComponent = ({ color }: { color: string }) => (
       d="M2.26 2.26c-.02.307-.038.647-.052 1.007-.058 1.477-.05 3.16.111 4.434l7.899 7.899 5.382-5.382L7.7 2.319c-1.272-.162-2.957-.17-4.434-.11-.36.014-.699.032-1.008.05ZM.284.284C.18.385-.248 5.25.201 8.255c.048.32.206.608.434.837l8.43 8.43a1.633 1.633 0 0 0 2.306 0l6.15-6.15a1.63 1.63 0 0 0 0-2.308L9.092.635A1.502 1.502 0 0 0 8.255.2C5.25-.247.385.18.285.285Z"
       clipRule="evenodd"
     />
-    <path
-      fill={color}
-      d="M6.86 5.414a1.087 1.087 0 1 1-1.538 1.538 1.087 1.087 0 0 1 1.539-1.538Z"
-    />
+    <path fill={color} d="M6.86 5.414a1.087 1.087 0 1 1-1.538 1.538 1.087 1.087 0 0 1 1.539-1.538Z" />
   </svg>
 );
 export default SvgComponent;

src/common/RichEditor.tsx

@@ -5,8 +5,7 @@ import { UrlMatcher } from 'interweave-autolink';
 import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical';
 
 // Indicates how to replace different parts of the text from WhatsApp to HTML.
-const regexForLink =
-  /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/gi;
+const regexForLink = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/gi;
 
 export const handleFormatterEvents = (event: KeyboardEvent) => {
   if ((event.ctrlKey || event.metaKey) && event.code === 'KeyB') {
@@ -130,9 +129,7 @@ export const WhatsAppTemplateButton = (text: string) => {
     const buttonsStr = text.substring(isTemplateButtonsPresent);
     const templateStr = buttonsStr.split('|');
 
-    const buttons = templateStr
-      .map((val: string) => val && val.trim().slice(1, -1))
-      .filter((a) => a);
+    const buttons = templateStr.map((val: string) => val && val.trim().slice(1, -1)).filter((a) => a);
 
     // Checking if template type is call to action or quick reply
 

src/common/constants.ts

@@ -23,8 +23,7 @@ export const SIMULATOR_CONTACT = '9876543210';
 export const FLOW_STATUS_PUBLISHED = 'published';
 export const SIMULATOR_NUMBER_START = '9876543210';
 export const GUPSHUP_ENTERPRISE_SHORTCODE = 'gupshup_enterprise';
-export const VALID_URL_REGEX =
-  'https?://(www.)?[-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,4}([-a-zA-Z0-9@:%_+.~#?&/=]*)';
+export const VALID_URL_REGEX = 'https?://(www.)?[-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,4}([-a-zA-Z0-9@:%_+.~#?&/=]*)';
 // to find variables in message
 export const pattern = /[^{}]+(?=})/g;
 
@@ -131,12 +130,7 @@ export const GROUP_COLLECTION_SEARCH_QUERY_VARIABLES = {
   },
 };
 
-export const setVariables = (
-  filter: any = {},
-  limit: any = null,
-  offset: number = 0,
-  order: string = 'ASC'
-) => ({
+export const setVariables = (filter: any = {}, limit: any = null, offset: number = 0, order: string = 'ASC') => ({
   filter,
   opts: {
     limit,
@@ -248,12 +242,7 @@ export const yupPasswordValidation = (t: any) =>
 export const WA_GROUPS_COLLECTION = 'WA';
 export const CONTACTS_COLLECTION = 'WABA';
 
-export const getVariables = (
-  contactOptions: any,
-  messageOptions: any,
-  variables: any,
-  groups?: boolean
-) => {
+export const getVariables = (contactOptions: any, messageOptions: any, variables: any, groups?: boolean) => {
   const contactVariable: string = groups ? 'waGroupOpts' : 'contactOpts';
   const messageVariable: string = groups ? 'waMessageOpts' : 'messageOpts';
   return {

src/common/responsive.ts

@@ -8,8 +8,6 @@ export const showMessages = () => {
 export const showChats = () => {
   if (window.innerWidth < 768) {
     document.querySelector('.chatMessages')?.setAttribute('style', 'display: none ');
-    document
-      .querySelector('.ChatConversations')
-      ?.setAttribute('style', 'display: block !important');
+    document.querySelector('.ChatConversations')?.setAttribute('style', 'display: block !important');
   }
 };

src/common/utils.ts

@@ -15,8 +15,7 @@ import { CONTACT_FRAGMENT } from 'graphql/mutations/Chat';
 import { SIMULATOR_NUMBER_START, STANDARD_DATE_TIME_FORMAT } from './constants';
 import { setNotification } from './notification';
 
-export const isSimulator = (phone: string) =>
-  phone ? phone.startsWith(SIMULATOR_NUMBER_START) : false;
+export const isSimulator = (phone: string) => (phone ? phone.startsWith(SIMULATOR_NUMBER_START) : false);
 
 export const getObject = (arr: any, data: any) => {
   const result: any = [];
@@ -43,11 +42,7 @@ export { parseText as parseTextMethod };
 const validateMediaMethod = (URL: string, attachmentType: string, allowStickers: boolean = true) =>
   new Promise((resolve) => {
     // check if stickers are allowed instead of image, if not then return early
-    if (
-      !allowStickers &&
-      attachmentType === 'IMAGE' &&
-      URL.slice(-5).toLocaleLowerCase() === '.webp'
-    ) {
+    if (!allowStickers && attachmentType === 'IMAGE' && URL.slice(-5).toLocaleLowerCase() === '.webp') {
       resolve({
         data: {
           is_valid: false,
@@ -58,12 +53,9 @@ const validateMediaMethod = (URL: string, attachmentType: string, allowStickers:
 
     const encodedUrl = encodeURIComponent(URL);
     axios
-      .get(
-        `${FLOW_EDITOR_API}validate-media?url=${encodedUrl}&type=${attachmentType.toLowerCase()}`,
-        {
-          headers: { authorization: getAuthSession('access_token') },
-        }
-      )
+      .get(`${FLOW_EDITOR_API}validate-media?url=${encodedUrl}&type=${attachmentType.toLowerCase()}`, {
+        headers: { authorization: getAuthSession('access_token') },
+      })
       .then((response: any) => {
         resolve(response);
       })
@@ -95,8 +87,7 @@ const checkSessionValidityMethod = async () => {
 export { checkSessionValidityMethod as checkSessionValidity };
 
 // function to get the random number with min and max
-export const randomIntFromInterval = (min: number, max: number) =>
-  Math.floor(Math.random() * (max - min + 1) + min);
+export const randomIntFromInterval = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
 
 export const copyToClipboardMethod = (text: string) => {
   if (text) {
@@ -222,12 +213,8 @@ export const getAddOrRemoveRoleIds = (roles: any, payload: any) => {
   const initialSelectedRoles = roles.map((role: any) => role.id);
   const payloadRoleIds = payload.roles.map((role: any) => role.id);
 
-  let addRoleIds = payloadRoleIds.filter(
-    (selectedRoles: any) => !initialSelectedRoles.includes(selectedRoles)
-  );
-  const deleteRoleIds = initialSelectedRoles.filter(
-    (roleId: any) => !payloadRoleIds.includes(roleId)
-  );
+  let addRoleIds = payloadRoleIds.filter((selectedRoles: any) => !initialSelectedRoles.includes(selectedRoles));
+  const deleteRoleIds = initialSelectedRoles.filter((roleId: any) => !payloadRoleIds.includes(roleId));
 
   if (checkDynamicRole()) {
     const userRoles = getUserSession('roles').map((role: any) => role.id);

src/components/UI/DialogBox/DialogBox.test.tsx

@@ -16,12 +16,7 @@ const dialogBox = (
 
 it('should not display dialog box if open is false', () => {
   const { queryByTestId } = render(
-    <DialogBox
-      open={false}
-      title={'Are you sure?'}
-      handleOk={mockCallbackOK}
-      handleCancel={mockCallbackCancel}
-    />
+    <DialogBox open={false} title={'Are you sure?'} handleOk={mockCallbackOK} handleCancel={mockCallbackCancel} />
   );
 
   expect(queryByTestId('dialogBox')).toBe(null);
@@ -46,12 +41,7 @@ it('should check if callback method is called when confirm button is clicked', (
 
 it('Dialogbox with no ok and cancel buttons', () => {
   const { container } = render(
-    <DialogBox
-      skipOk
-      skipCancel
-      title="Dialog with no action buttons"
-      handleCancel={mockCallbackCancel}
-    />
+    <DialogBox skipOk skipCancel title="Dialog with no action buttons" handleCancel={mockCallbackCancel} />
   );
   expect(container).toBeInTheDocument();
 });

src/components/UI/DialogBox/DialogBox.tsx

@@ -54,12 +54,7 @@ export const DialogBox = ({
   let cancelButtonDisplay = null;
   if (!skipCancel) {
     cancelButtonDisplay = (
-      <Button
-        variant="outlined"
-        onClick={() => handleCancel()}
-        color={colorCancel}
-        data-testid="cancel-button"
-      >
+      <Button variant="outlined" onClick={() => handleCancel()} color={colorCancel} data-testid="cancel-button">
         {buttonCancel}
       </Button>
     );
@@ -83,12 +78,7 @@ export const DialogBox = ({
 
   if (buttonMiddle) {
     middleButtonDisplay = (
-      <Button
-        onClick={() => handleMiddle()}
-        color="primary"
-        variant="outlined"
-        data-testid="middle-button"
-      >
+      <Button onClick={() => handleMiddle()} color="primary" variant="outlined" data-testid="middle-button">
         {buttonMiddle}
       </Button>
     );

src/components/UI/EmojiPicker/EmojiPicker.test.tsx

@@ -28,9 +28,7 @@ Object.defineProperty(window, 'matchMedia', {
   },
 });
 
-const dialogBox = (
-  <EmojiPicker displayStyle={{ width: '100%' }} onEmojiSelect={onEmojiSelectMock} />
-);
+const dialogBox = <EmojiPicker displayStyle={{ width: '100%' }} onEmojiSelect={onEmojiSelectMock} />;
 
 test('it should render emoji picker', () => {
   const { getByTestId } = render(dialogBox);