From 65dd7bf17fd23a54f3d4e2e389f30ce59d170e6b Mon Sep 17 00:00:00 2001
From: yagnik-finestar <yagnik@finestar.in>
Date: Thu, 27 Apr 2023 14:50:21 +0530
Subject: [PATCH] create custom MAP compoenent, env setup, and performance
 drawback strick setup

---
 .env.d.ts                         |  2 +-
 src/@types/Type.ts                | 57 ++++++++++++++-------------
 src/components/UserSearch.tsx     | 65 ++++++++++++++-----------------
 src/container/commas.tsx          | 15 +------
 src/container/common/Button.tsx   |  2 +-
 src/container/common/Card.tsx     | 24 ------------
 src/container/common/Form.tsx     |  2 +-
 src/container/common/Icon.tsx     |  2 +-
 src/container/common/Img.tsx      |  2 +-
 src/container/common/Input.tsx    |  2 +-
 src/container/common/Map.tsx      | 16 ++++++++
 src/container/common/Toastify.tsx |  2 +-
 12 files changed, 85 insertions(+), 106 deletions(-)
 delete mode 100644 src/container/common/Card.tsx
 create mode 100644 src/container/common/Map.tsx

diff --git a/.env.d.ts b/.env.d.ts
index 2fd3bac..7ab7d6a 100644
--- a/.env.d.ts
+++ b/.env.d.ts
@@ -1,5 +1,5 @@
 declare namespace NodeJS {
   interface ProcessEnv {
-    REACT_APP_API_KEY: string;
+    REACT_APP_API_URL: string;
   }
 }
\ No newline at end of file
diff --git a/src/@types/Type.ts b/src/@types/Type.ts
index 6fbdcc7..d0ea7a6 100644
--- a/src/@types/Type.ts
+++ b/src/@types/Type.ts
@@ -1,14 +1,14 @@
 import { ToastContainerProps } from "react-toastify";
 import { ToastProps } from "react-toastify/dist/types";
 import {
-  HTMLButtonTypeElement,
-  HTMLClassNameAttribute,
-  HTMLIdAttribute,
-  HTMLInputTypeAttribute,
-  HTMLOnChangeAttribute,
-  HTMLOnClickAttribute,
-  HTMLOnSubmitAttribute,
-  ToastPosition,
+    HTMLButtonTypeElement,
+    HTMLClassNameAttribute,
+    HTMLIdAttribute,
+    HTMLInputTypeAttribute,
+    HTMLOnChangeAttribute,
+    HTMLOnClickAttribute,
+    HTMLOnSubmitAttribute,
+    ToastPosition,
 } from "./UnionTypes";
 
 /*
@@ -38,7 +38,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     placeholder?: string | undefined;
     className?: HTMLClassNameAttribute;
     onChange?: HTMLOnChangeAttribute;
-} 
+}
 
 export interface ImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     src: string | undefined;
@@ -60,24 +60,6 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement | HT
     className?: HTMLClassNameAttribute;
 }
 
-/*
-*
-* define Custom specific Card Component type properties.
-* add any other custom props you want to use.
-*
-*/
-export interface CardProps {
-    key?: HTMLIdAttribute | number | null | undefined;
-    url?: string | undefined;
-    avatar?: string | undefined;
-    alt?: string | undefined;
-    children?: React.ReactNode | React.ReactNode[];
-    className?: string | undefined;
-    ImageId?: string | undefined;
-    IconId?: string | undefined;
-    onClick?: HTMLOnClickAttribute;
-}
-
 /*
 *
 * define Custom Toastify Component type properties.
@@ -136,4 +118,25 @@ export interface ToastifyProps extends ToastContainerProps {
      * @INTERNAL
     **/
     props?: ToastProps;
+}
+
+
+/*
+*
+*   • `data`: An array of items of type `T` that the component will be iterating over.
+*   • `renderItem`: A function that takes an item of type `T` as an argument, and returns a 
+*      React node that will be rendered for that item.
+*
+*   generic type parameter `T`, the `MapProps` interface allows you to define the 
+*   type of the data that the component will be iterating over at runtime. This makes the 
+*   component more flexible and reusable, as it can be used with different types of 
+*   data without needing to be rewritten for each type.
+*   
+*   • Define the props for the component using a generic type parameter `T`
+*
+*/
+
+export interface MapProps<T> {
+    data: T[];
+    renderItem: (element: T, index: number) => React.ReactNode;
 }
\ No newline at end of file
diff --git a/src/components/UserSearch.tsx b/src/components/UserSearch.tsx
index 6d2c0f3..562ac11 100644
--- a/src/components/UserSearch.tsx
+++ b/src/components/UserSearch.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import { API_URL } from '../container/commas';
 
-const Form = React.lazy(() => import('../container/common/Form'));
-const Card = React.lazy(() => import('../container/common/Card'));
+import Map from '../container/common/Map';
 
-const API_URL = "https://api.github.com";
+const Button = React.lazy(() => import('../container/common/Button'));
+const Form = React.lazy(() => import('../container/common/Form'));
+const Img = React.lazy(() => import('../container/common/Img'));
 
 interface User {
   login: string | undefined;
@@ -57,7 +59,8 @@ const UserSearch: React.FC = (): JSX.Element => {
     event?.preventDefault();
     /*
     *
-    * Here, 'EventTarget & HTMLInputElement' is a type that represents an object that can be both an 'EventTarget' and an 'HTMLInputElement'.
+    * Here, 'EventTarget & HTMLInputElement' is a type that represents an object that can be both an 
+    * 'EventTarget' and an 'HTMLInputElement'.
     * 
     * The 'value' property is specific to 'HTMLInputElement' objects, which  means that it may not
     * exist on all objects that implement the 'EventTarget' interface.
@@ -68,22 +71,28 @@ const UserSearch: React.FC = (): JSX.Element => {
     setQuery(inputValue);
   };
 
-  /**
-  * Here we restrict all handleClicks to be exclusively on 
-  * HTMLButtonElement Elements
-  * 
-  * We're using `MouseEvent` as type for the event.
-  * with `HTMLButtonElement` as a type parameter.
-  * It contains properties an event can have
-  * and methods (such as `preventDefault` an others).
-  **/
-  // const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-  // 👇️ prevent page refresh
-  // event?.preventDefault();
-
-  // 👇️ redirects to an external URL
-  // window.open('https://github.com/yagnikvadi2003', '_blank', 'noopener noreferrer');
-  // };
+  /*
+  * This function takes an element of type `User` and an index of type `number` as parameters.
+  */
+  function renderMyDataItem(element: User, index: number): React.ReactNode {
+    /*
+    *
+    * The function returns a React node that renders the markup for the given `User` element.
+    * 
+    * A `div` element is rendered with a class of `"card"`.
+    * The `key` attribute is set to the `element.login` value if it exists, otherwise it is 
+    * set to the `index` value.
+    * 
+    */
+    return (
+      <div className="card" key={element.login ? element.login : index}>
+        <Img src={element.avatar_url} alt={element.login} ImageId='cardImage' />
+        <a href={element.html_url} target="_blank" rel="noopener noreferrer">
+          <Button children='GitHub' className='fa-brands fa-github' id='card-button' />
+        </a>
+      </div>
+    );
+  }
 
   /*
   * 👇️type assertion
@@ -95,21 +104,7 @@ const UserSearch: React.FC = (): JSX.Element => {
         <div className='userSearchHeading'>GitHub User Search</div>
         <Form onSubmit={handleSubmit} onChange={handleChange} value={query} InputId='userSearchInput' className='fa-solid fa-magnifying-glass' ButtonId='userSearchButton' />
       </div>
-      {
-        results.map((element, index): any => {
-          return (
-            <Card
-              key={element.login ? element.login : index}
-              avatar={element.avatar_url}
-              alt={element.login}
-              url={element.html_url}
-              ImageId='cardImage'
-              children='GitHub'
-              className='fa-brands fa-github'
-            />
-          );
-        })
-      }
+      <Map data={results} renderItem={renderMyDataItem} />
     </React.Fragment>
   );
 };
diff --git a/src/container/commas.tsx b/src/container/commas.tsx
index 5973330..81588d1 100644
--- a/src/container/commas.tsx
+++ b/src/container/commas.tsx
@@ -1,13 +1,2 @@
-import axios, { AxiosInstance } from 'axios';
-
-/*
-* Create a new instance of Axios
-* 
-* If you are using different URLs, consider removing this line and adding a baseURL in the Axios Config parameter. 
-*/
-export const api: AxiosInstance = axios.create({
-    baseURL: 'https://api.github.com',
-    headers: {
-        "Content-type": "application/json"
-    }
-});
\ No newline at end of file
+// Get your API key from the environment variables.
+export const API_URL = process.env.REACT_APP_API_URL?.trim() || '';
\ No newline at end of file
diff --git a/src/container/common/Button.tsx b/src/container/common/Button.tsx
index f7af6b2..e8842b9 100644
--- a/src/container/common/Button.tsx
+++ b/src/container/common/Button.tsx
@@ -22,4 +22,4 @@ const Button: React.FC<ButtonProps> = ({ ButtonId, children, className, IconId,
  * Usage <Button text='something' className='something' onclick={ClickEvent} />
 **/
 
-export default Button;
\ No newline at end of file
+export default React.memo(Button);
\ No newline at end of file
diff --git a/src/container/common/Card.tsx b/src/container/common/Card.tsx
deleted file mode 100644
index 41f1522..0000000
--- a/src/container/common/Card.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { CardProps } from '../../@types/Type';
-
-import Img from './Img';
-import Button from './Button';
-
-const Card: React.FC<CardProps> = ({ key, url, avatar, alt, className, children, ImageId, IconId, onClick }): JSX.Element => {
-  return (
-    <div className="card" key={key}>
-      <Img src={avatar} alt={alt} ImageId={ImageId} />
-      <a href={url} target="_blank" rel="noopener noreferrer">
-        <Button className={className} IconId={IconId} id='card-button'>
-          {children}
-        </Button>
-      </a>
-    </div>
-  );
-};
-
-/**
- * Usage <Card text='something' avatarUrl='someThingURL' onclick={ClickEvent} />
-**/
-
-export default Card;
\ No newline at end of file
diff --git a/src/container/common/Form.tsx b/src/container/common/Form.tsx
index 54542c6..3b77eb7 100644
--- a/src/container/common/Form.tsx
+++ b/src/container/common/Form.tsx
@@ -23,4 +23,4 @@ const Form: React.FC<FormProps> = ({ onSubmit, onChange, value, InputId, classNa
  * Usage <Form value='SomeThingValue' onChange={ChangeEvents} onSubmit={SubmitEvent} IconId={IconId} ButtonId={ButtonId} />
 **/
 
-export default Form;
\ No newline at end of file
+export default React.memo(Form);
\ No newline at end of file
diff --git a/src/container/common/Icon.tsx b/src/container/common/Icon.tsx
index a0d2095..bd24e0f 100644
--- a/src/container/common/Icon.tsx
+++ b/src/container/common/Icon.tsx
@@ -5,4 +5,4 @@ const Icon: React.FC<IconProps> = ({ className, IconId }): JSX.Element => {
   return <i className={className} id={IconId} style={{ padding: "5px" }}></i>;
 };
 
-export default Icon
\ No newline at end of file
+export default React.memo(Icon);
\ No newline at end of file
diff --git a/src/container/common/Img.tsx b/src/container/common/Img.tsx
index 3712d7c..497bd2c 100644
--- a/src/container/common/Img.tsx
+++ b/src/container/common/Img.tsx
@@ -60,4 +60,4 @@ const Img: React.FC<ImgProps> = ({ src, alt, width, height, className, ImageId }
  * Usage <Img src='someUrl' alt='something' width={100} height={100} className='something' id='something' />
 **/
 
-export default Img;
\ No newline at end of file
+export default React.memo(Img);
\ No newline at end of file
diff --git a/src/container/common/Input.tsx b/src/container/common/Input.tsx
index 4f4112d..8b39e34 100644
--- a/src/container/common/Input.tsx
+++ b/src/container/common/Input.tsx
@@ -19,4 +19,4 @@ const Input: React.FC<InputProps> = ({ InputId, type, placeholder, className, va
 /**
  * Usage <Input type='something' placeholder='something' className='something' value={somethingValue} onChange={something OnChange Event} />
 **/
-export default Input;
\ No newline at end of file
+export default React.memo(Input);
\ No newline at end of file
diff --git a/src/container/common/Map.tsx b/src/container/common/Map.tsx
new file mode 100644
index 0000000..611b5d5
--- /dev/null
+++ b/src/container/common/Map.tsx
@@ -0,0 +1,16 @@
+import { MapProps } from "../../@types/Type";
+
+// Define the component as a function that takes the props as an argument
+function Map<T>({ data, renderItem }: MapProps<T>): JSX.Element {
+    /*
+    * • Use the `map` method to iterate over the `data` array and render 
+    * the items using the `renderItem` function
+    */
+    return <>{data.map((element, index) => renderItem(element, index))}</>;
+}
+
+/*
+*   • Export the component and its props interface for use in other parts 
+*   of the application
+*/
+export default Map;
diff --git a/src/container/common/Toastify.tsx b/src/container/common/Toastify.tsx
index e965761..bce2e15 100644
--- a/src/container/common/Toastify.tsx
+++ b/src/container/common/Toastify.tsx
@@ -30,4 +30,4 @@ const Toastify: React.FC<ToastifyProps> = ({
     );
 };
 
-export default Toastify;
+export default React.memo(Toastify);