fix:console warnings in verification flow (#861)

* fix:console warnings in verification flow Signed-off-by: pranalidhanavade <[email protected]> * fix:console warnings in verification flow Signed-off-by: pranalidhanavade <[email protected]> * fix: Resolve comments on pull request Signed-off-by: pranalidhanavade <[email protected]> --------- Signed-off-by: pranalidhanavade <[email protected]>
credebl · Jan 7, 2025 · fe609f2 · fe609f2
1 parent 1a690a9
commit fe609f2
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 72 deletions.
diff --git a/src/commonComponents/CustomCheckbox.tsx b/src/commonComponents/CustomCheckbox.tsx
@@ -5,39 +5,10 @@ import type { ICustomCheckboxProps, ISchemaData } from './interface';
 
 const CustomCheckbox: React.FC<ICustomCheckboxProps> = ({ showCheckbox, isVerificationUsingEmail, onChange, schemaData }) => {
   const [checked, setChecked] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (schemaData) {
-      try {
-        const selectedSchemas = JSON.parse(localStorage.getItem('selectedSchemas') ?? '[]');
-        const isChecked = selectedSchemas.some((schema: ISchemaData) => schema.schemaId === schemaData.schemaId);
-        setChecked(isChecked);
-      } catch (error) {
-        console.error('Error parsing JSON from localStorage:', error);
-      }
-    }
-  }, [schemaData]);
-
   const handleCheckboxChange = async () => {
     const newChecked = !checked;
     setChecked(newChecked);
     onChange(newChecked, schemaData);
-
-    try {
-      const selectedSchemas = JSON.parse(localStorage.getItem('selectedSchemas') ?? '[]');
-
-      if (newChecked) {
-        selectedSchemas.push(schemaData);
-      } else {
-        const index = selectedSchemas.findIndex((schema: ISchemaData) => schema.schemaId === schemaData?.schemaId);
-        if (index > -1) {
-          selectedSchemas.splice(index, 1);
-        }
-      }
-      await setToLocalStorage(storageKeys.SELECTED_SCHEMAS, JSON.stringify(selectedSchemas));
-    } catch (error) {
-      console.error('Error updating localStorage:', error);
-    }
   };
 
   return (

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -1,6 +1,6 @@
 
-import React, { useState } from 'react'
 import * as Avatar from '@radix-ui/react-avatar';
+import { avatarColorPairs } from '../../config/CommonConstant';
 
 type Props = {
     name?: string,
@@ -16,64 +16,40 @@ interface ColorPair {
     background: string
 }
 
+const getColorPair = (name: string): ColorPair => {
+    if (!name) return avatarColorPairs[0];
+    const index = name
+        .split('')
+        .reduce((acc, char) => acc + char.charCodeAt(0), 0) % avatarColorPairs.length;
+    return avatarColorPairs[index];
+};
+
+const CustomAvatar = ({ name, src, className, textSizeRatio = 2.5, round = false, size = '45px' }: Props): JSX.Element => {
+    const colorPair = name ? getColorPair(name) : avatarColorPairs[0];
+    const fontSize = `calc(${size} / ${textSizeRatio})`;
 
-const CustomAvatar = ({ name, src, className,textSizeRatio = 2.5, round=false, size}: Props): JSX.Element => {
-    const avatarColorPairs: ColorPair[] = [
-                {
-                    text: '#ea5455',
-                    background: '#fceaea'
-                },
-                {
-                    text: '#b8b2f7',
-                    background: '#eeecfe'
-                },
-                {
-                    text: '#c1c2c5',
-                    background: '#f0f0f1'
-                },
-                {
-                    text: '#82ddaa',
-                    background: '#e5f8ed'
-                },
-                {   
-                    text: '#f4a651',
-                    background: '#fdf3e8'
-                },
-                {
-                    text: '#76ddef',
-                    background: '#e0f9fd'
-                }
-            ]
-            const [randomColor] = useState<ColorPair>(avatarColorPairs[Math.floor(Math.random() * avatarColorPairs.length)])
-            const fontSize = `calc(${size} / ${textSizeRatio})`;
     return (
         <Avatar.Root style={{
             height: size,
             width: size,
             borderRadius: round ? '0%' : '100%'
         }} className={`bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle`}>
             {src ? (
-                <div >
-                 <Avatar.Image
+                <Avatar.Image
                     className={className}
                     src={src}
-                    color={randomColor.background}
                     alt={name}
-
                 />
-                </div>
-
             ) : (
                 <Avatar.Fallback
-                    // className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium "
-                    className={className}
-                    style={{ backgroundColor: randomColor.background, color: randomColor.text, fontSize, display:'flex', justifyContent:'center', alignItems:'center' }}
+                className={className}
+                style={{ backgroundColor: colorPair.background, color: colorPair.text, fontSize, display:'flex', justifyContent:'center', alignItems:'center' }}
                 >
-                    {name?.split(' ').map(part => part[0]).join('').toUpperCase().slice(0,2)}
+                    {name?.split(' ').map(part => part[0]).join('').toUpperCase().slice(0, 2)}
                 </Avatar.Fallback>
             )}
         </Avatar.Root>
     );
-}
+};
 
 export default CustomAvatar;
diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx
@@ -1,4 +1,4 @@
-const SearchInput = ({ onInputChange, value }: any) => {
+const SearchInput = ({ onInputChange, value = '' }: { onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; value?: string }) => {
 	return (
 		<div>
 			<label className="sr-only">Search</label>

diff --git a/src/components/Verification/EmailCredDefSelection.tsx b/src/components/Verification/EmailCredDefSelection.tsx
@@ -157,7 +157,7 @@ const EmailCredDefSelection = () => {
                     <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
                         Credential-definition
                     </h1>
-                    <SearchInput value={searchValue} onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value)} />
+                    <SearchInput value={searchValue} onInputChange={(e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value)} />
                 </div>
             </div>
 

diff --git a/src/config/CommonConstant.ts b/src/config/CommonConstant.ts
@@ -71,4 +71,31 @@ export const predicatesConditions = [
     { value: '<', label: 'Less than' },
     { value: '>=', label: 'Greater than or equal to' },
     { value: '<=', label: 'Less than or equal to' }
+]
+
+export const avatarColorPairs = [
+    {
+        text: '#ea5455',
+        background: '#fceaea'
+    },
+    {
+        text: '#b8b2f7',
+        background: '#eeecfe'
+    },
+    {
+        text: '#c1c2c5',
+        background: '#f0f0f1'
+    },
+    {
+        text: '#82ddaa',
+        background: '#e5f8ed'
+    },
+    {   
+        text: '#f4a651',
+        background: '#fdf3e8'
+    },
+    {
+        text: '#76ddef',
+        background: '#e0f9fd'
+    }
 ]