Refactoring 🎯

Author: divyanshu-rawat

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import * as S from '../styles';
 import * as H from '../../typography';
-import { Details } from '../constants';
+import { DataType } from '../types';
 
-export const SecondaryDropDown: React.FC = () => {
+export const SecondaryDropDown = ({ data }) => {
   const [showOptions, setShowOptions] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState('');
   const [searchResults, setSearchResults] = React.useState([] as any);
@@ -12,14 +12,12 @@ export const SecondaryDropDown: React.FC = () => {
     setShowOptions(true);
   };
   React.useEffect(() => {
-    const results =
-      [] ||
-      Details.filter(person =>
-        person.name
-          .replace(/\s+/g, '')
-          .toLowerCase()
-          .includes(searchTerm.replace(/\s+/g, '').toLowerCase()),
-      );
+    const results: [] | DataType = data.filter(person =>
+      person.name
+        .replace(/\s+/g, '')
+        .toLowerCase()
+        .includes(searchTerm.replace(/\s+/g, '').toLowerCase()),
+    );
     setSearchResults(results);
     if (searchTerm) {
       setShowOptions(true);
@@ -40,11 +38,11 @@ export const SecondaryDropDown: React.FC = () => {
       </S.SearchBarWrapper>
       {showOptions && (
         <S.OptionsContainer>
-          {searchResults.map(person => (
-            <S.CardWrapper key={`${person.name}`}>
-              <S.Avatar src={person.avatarLink} />
+          {searchResults.map(({ name, avatar }) => (
+            <S.CardWrapper key={`${name}`}>
+              <S.Avatar src={avatar} />
               <S.NameWrapper>
-                <H.Heading5>{person.name}</H.Heading5>
+                <H.Heading5>{name}</H.Heading5>
               </S.NameWrapper>
             </S.CardWrapper>
           ))}

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts

@@ -3,24 +3,21 @@ import * as C from '../colors';
 import * as F from '../fonts';
 
 export const ParentContainer = styled.div`
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
-  width: 20rem;
-  margin: 2rem;
-  max-height: 20rem;
 `;
 
 export const SearchBarWrapper = styled.div`
   width: 20rem;
-  height: 3rem;
+  height: 2rem;
 `;
 
 export const SearchBar = styled.input`
   outline: none;
   border: 0.1rem solid ${C.IgnitusBlue};
   border-radius: 0.5rem;
   width: 20rem;
-  height: 2.5rem;
+  height: 2rem;
   padding-left: 0.25rem;
   color: ${C.IgnitusBlue};
   font-weight: ${F.SemiBold};

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts

@@ -1,9 +1,4 @@
-export type SecondaryDropDownProps = {
-  label: string;
-  options: string[];
-  display: string;
+export type DataType = {
+  avatar: string;
+  name: string;
 };
-
-// export type DropDownProps = {
-//   display: string;
-// };

src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Interface } from '../../../../styles';
+import { data } from '../constants';
 import { Heading2, SecondaryDropDown } from '../../../../../ignitus-Shared';
 
 export const interfaceSecondaryDropDown: React.FC = () => (
@@ -8,7 +9,7 @@ export const interfaceSecondaryDropDown: React.FC = () => (
       <Heading2>Secondary DropDown</Heading2>
       <hr />
 
-      <SecondaryDropDown />
+      <SecondaryDropDown data={data} />
     </Interface>
   </React.Fragment>
 );

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/constants.ts src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/constants.ts

@@ -1,31 +1,33 @@
-export const Details = [
+import { DataType } from './types';
+
+export const data: DataType[] = [
   {
-    avatarLink:
+    avatar:
       'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
     name: 'Harpar Hopman',
   },
   {
-    avatarLink:
+    avatar:
       'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
     name: 'Hara Hopman',
   },
   {
-    avatarLink:
+    avatar:
       'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
     name: 'Harbour Center',
   },
   {
-    avatarLink:
+    avatar:
       'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
     name: 'Harvard University',
   },
   {
-    avatarLink:
+    avatar:
       'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
     name: 'Henry Harbour',
   },
   {
-    avatarLink:
+    avatar:
       'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
     name: 'Hara Jackson',
   },

src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/types.ts

@@ -0,0 +1,4 @@
+export type DataType = {
+  avatar: string;
+  name: string;
+};