From 78fe37986c7e18ba14257607d9767503297a0450 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Tue, 20 Feb 2024 15:19:17 +0300
Subject: [PATCH 1/6] update extension naming convention

---
 src/components/app-search-bar/app-search-bar.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/app-search-bar/app-search-bar.component.tsx b/src/components/app-search-bar/app-search-bar.component.tsx
index b55b03f..1f024a3 100644
--- a/src/components/app-search-bar/app-search-bar.component.tsx
+++ b/src/components/app-search-bar/app-search-bar.component.tsx
@@ -61,7 +61,7 @@ const AppSearchBar = React.forwardRef<
     const filteredExtensions = menuItemExtensions
       .filter((extension) => Object.keys(extension).length > 0)
       .map((extension, index) => ({
-        slot: `${appMenuItemSlot}-${index}`,
+        slot: `${appMenuItemSlot}-${extension.name}`,
         extension: extension.name,
         name: extension.meta.name,
       }));

From c63a0ac5118fb3bd43f8325562f5d1f59f157c55 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Tue, 20 Feb 2024 15:30:02 +0300
Subject: [PATCH 2/6] remove unneccessary code

---
 .../app-search-bar.component.tsx              | 16 ----------------
 src/menu/item/item.component.tsx              | 19 -------------------
 src/menu/item/item.resource.ts                |  0
 src/menu/item/item.scss                       | 17 -----------------
 src/menu/menu.component.tsx                   | 19 -------------------
 src/menu/menu.scss                            |  0
 src/menu/menus.resource.ts                    |  0
 7 files changed, 71 deletions(-)
 delete mode 100644 src/menu/item/item.component.tsx
 delete mode 100644 src/menu/item/item.resource.ts
 delete mode 100644 src/menu/item/item.scss
 delete mode 100644 src/menu/menu.component.tsx
 delete mode 100644 src/menu/menu.scss
 delete mode 100644 src/menu/menus.resource.ts

diff --git a/src/components/app-search-bar/app-search-bar.component.tsx b/src/components/app-search-bar/app-search-bar.component.tsx
index 1f024a3..82253e5 100644
--- a/src/components/app-search-bar/app-search-bar.component.tsx
+++ b/src/components/app-search-bar/app-search-bar.component.tsx
@@ -2,22 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Search } from "@carbon/react";
 import styles from "./app-search-bar.scss";
-import MenuItems from "../../menu/menu.component";
-import {
-  Analytics,
-  AnalyticsCustom,
-  Db2DataSharingGroup,
-  DocumentAdd,
-  DocumentImport,
-  Events,
-  VolumeFileStorage,
-  HospitalBed,
-  Medication,
-  User,
-  Report,
-  UserActivity,
-  Grid,
-} from "@carbon/react/icons";
 import {
   AssignedExtension,
   ExtensionSlot,
diff --git a/src/menu/item/item.component.tsx b/src/menu/item/item.component.tsx
deleted file mode 100644
index 7fd3fc2..0000000
--- a/src/menu/item/item.component.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ClickableTile } from "@carbon/react";
-import React from "react";
-import styles from "./item.scss";
-
-const Item = ({ item }) => {
-  return (
-    <ClickableTile
-      className={styles.customTile}
-      id="menu-item"
-      href={item.meta.link}
-    >
-      {item.meta.icon && (
-        <div className="customTileTitle">{item.meta.icon}</div>
-      )}
-      {item.meta.app && <div>{item.app}</div>}
-    </ClickableTile>
-  );
-};
-export default Item;
diff --git a/src/menu/item/item.resource.ts b/src/menu/item/item.resource.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/menu/item/item.scss b/src/menu/item/item.scss
deleted file mode 100644
index 230065d..0000000
--- a/src/menu/item/item.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-
-.customTile {
-    background-color: #f0f0f0;
-    border-radius: 4px;
-    padding: 20px;
-    width: 50px;
-    height: 100px;
-    text-align: center;
-    margin: 2px;
-  }
-  
-  .customTileTitle {
-    font-size: 14px;
-    color: #333;
-  }
-  
-  
\ No newline at end of file
diff --git a/src/menu/menu.component.tsx b/src/menu/menu.component.tsx
deleted file mode 100644
index 4ced285..0000000
--- a/src/menu/menu.component.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import Item from "./item/item.component";
-import { Grid, Column } from "@carbon/react";
-
-const MenuItems = ({ items }) => {
-  return (
-    <Grid style={{ gap: "2px" }}>
-      {items
-        .filter((extension) => Object.keys(extension.meta).length > 0)
-        .map((extension, index) => {
-          <Column lg={5} md={5} sm={5} style={{ margin: "2px" }}>
-            <Item key={index} item={extension} />
-          </Column>;
-        })}
-    </Grid>
-  );
-};
-
-export default MenuItems;
diff --git a/src/menu/menu.scss b/src/menu/menu.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/menu/menus.resource.ts b/src/menu/menus.resource.ts
deleted file mode 100644
index e69de29..0000000

From b4ad9e3844d723b8bdf869da3fa62a4d2dd3e0fc Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Tue, 20 Feb 2024 16:23:59 +0300
Subject: [PATCH 3/6]  update file

---
 src/components/app-search-bar/app-search-bar.component.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/app-search-bar/app-search-bar.component.tsx b/src/components/app-search-bar/app-search-bar.component.tsx
index 82253e5..553c352 100644
--- a/src/components/app-search-bar/app-search-bar.component.tsx
+++ b/src/components/app-search-bar/app-search-bar.component.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Search } from "@carbon/react";
 import styles from "./app-search-bar.scss";
+
 import {
   AssignedExtension,
   ExtensionSlot,

From df9c621a5d9d4caa8e7c57056d48112162dbc36d Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Sun, 3 Mar 2024 17:07:21 +0300
Subject: [PATCH 4/6] fix app menu render display

---
 package.json                                  |   2 +-
 .../app-search-bar.component.tsx              | 107 ++++++++----------
 2 files changed, 46 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index 256eaf8..018beab 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "main": "src/index.ts",
     "source": true,
     "scripts": {
-        "start": "openmrs develop --backend http://167.71.32.250:8080",
+        "start": "openmrs develop --backend http://194.163.171.253:8282",
         "serve": "webpack serve --mode=development",
         "build": "webpack --mode production",
         "analyze": "webpack --mode=production --env analyze=true",
diff --git a/src/components/app-search-bar/app-search-bar.component.tsx b/src/components/app-search-bar/app-search-bar.component.tsx
index 553c352..2fa3c52 100644
--- a/src/components/app-search-bar/app-search-bar.component.tsx
+++ b/src/components/app-search-bar/app-search-bar.component.tsx
@@ -8,8 +8,10 @@ import {
   ExtensionSlot,
   attach,
   detachAll,
+  Extension,
   useConnectedExtensions,
 } from "@openmrs/esm-framework";
+import { ComponentContext } from "@openmrs/esm-framework/src/internal";
 
 const appMenuItemSlot = "app-menu-item-slot";
 
@@ -26,55 +28,34 @@ const AppSearchBar = React.forwardRef<
 >(({ onChange, onClear, onSubmit, small }, ref) => {
   const { t } = useTranslation();
 
-  // State for item extensions
-  const [derivedSlots, setDerivedSlots] = useState<
-    { slot: string; extension: string; name: string }[]
-  >([]);
-
-  // State for search term and filtered items
+  const [derivedSlots, setDerivedSlots] = useState<any>([]);
   const [searchTerm, setSearchTerm] = useState("");
-  const [items, setItems] = useState(derivedSlots);
 
-  // Fetch item extensions
   const menuItemExtensions = useConnectedExtensions(
     appMenuItemSlot
   ) as AssignedExtension[];
 
-  // UseEffect for processing item extensions and attaching/detaching slots
   useEffect(() => {
-    // Filter and process extensions
     const filteredExtensions = menuItemExtensions
       .filter((extension) => Object.keys(extension).length > 0)
-      .map((extension, index) => ({
-        slot: `${appMenuItemSlot}-${extension.name}`,
-        extension: extension.name,
-        name: extension.meta.name,
-      }));
+      .map((extension) => (
+        <ComponentContext.Provider
+          key={extension.id}
+          value={{
+            moduleName: extension.moduleName,
+            extension: {
+              extensionId: extension.id,
+              extensionSlotName: appMenuItemSlot,
+              extensionSlotModuleName: extension.moduleName,
+            },
+          }}
+        >
+          <Extension />
+        </ComponentContext.Provider>
+      ));
     setDerivedSlots(filteredExtensions);
-
-    // Attach/detach slots
-    filteredExtensions.forEach(({ slot, extension }) => {
-      attach(slot, extension);
-    });
-
-    return () => {
-      filteredExtensions.forEach(({ slot }) => {
-        detachAll(slot);
-      });
-    };
   }, [menuItemExtensions]);
 
-  // UseEffect for updating items based on derivedSlots
-  useEffect(() => {
-    setItems(derivedSlots);
-  }, [derivedSlots]);
-
-  // UseMemo for rendering ExtensionSlots
-  const extraPanels = useMemo(() => {
-    return items.map(({ slot }) => <ExtensionSlot key={slot} name={slot} />);
-  }, [items]);
-
-  // Callback for handling search term changes
   const handleChange = useCallback(
     (val) => {
       if (typeof onChange === "function") {
@@ -82,16 +63,14 @@ const AppSearchBar = React.forwardRef<
       }
       setSearchTerm(val);
 
-      // Filter items based on the search term
       const filteredItems = derivedSlots.filter((item) =>
-        item.name.toLowerCase().includes(val.toLowerCase())
+        item?.name?.toLowerCase().includes(val?.toLowerCase())
       );
-      setItems(filteredItems);
+      setDerivedSlots(filteredItems);
     },
     [derivedSlots, onChange]
   );
 
-  // Handle form submission
   const handleSubmit = (evt) => {
     evt.preventDefault();
     onSubmit(searchTerm);
@@ -99,27 +78,31 @@ const AppSearchBar = React.forwardRef<
 
   return (
     <>
-      <form onSubmit={handleSubmit} className={styles.searchArea}>
-        {/* Search component */}
-        <Search
-          autoFocus
-          className={styles.appSearchInput}
-          closeButtonLabelText={t("clearSearch", "Clear")}
-          labelText=""
-          onChange={(event) => handleChange(event.target.value)}
-          onClear={onClear}
-          placeholder={t(
-            "searchForApp",
-            "Search for an application or module by name"
-          )}
-          size={small ? "sm" : "lg"}
-          value={searchTerm}
-          ref={ref}
-          data-testid="appSearchBar"
-        />
-      </form>
-      {/* Render ExtensionSlots */}
-      <div className={styles.searchItems}>{extraPanels}</div>
+      {derivedSlots.length > 0 ? (
+        <>
+          <form onSubmit={handleSubmit} className={styles.searchArea}>
+            <Search
+              autoFocus
+              className={styles.appSearchInput}
+              closeButtonLabelText={t("clearSearch", "Clear")}
+              labelText=""
+              onChange={(event) => handleChange(event.target.value)}
+              onClear={onClear}
+              placeholder={t(
+                "searchForApp",
+                "Search for an application or module by name"
+              )}
+              size={small ? "sm" : "lg"}
+              value={searchTerm}
+              ref={ref}
+              data-testid="appSearchBar"
+            />
+          </form>
+          <div className={styles.searchItems}>{derivedSlots}</div>
+        </>
+      ) : (
+        <div className={styles.searchItems}>Loading modules...</div>
+      )}
     </>
   );
 });

From 971a2c9a237aeae2d82b15951575439e04e46101 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Sun, 3 Mar 2024 17:15:13 +0300
Subject: [PATCH 5/6] check slots if available

---
 src/components/app-search-bar/app-search-bar.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/app-search-bar/app-search-bar.component.tsx b/src/components/app-search-bar/app-search-bar.component.tsx
index 2fa3c52..47496d7 100644
--- a/src/components/app-search-bar/app-search-bar.component.tsx
+++ b/src/components/app-search-bar/app-search-bar.component.tsx
@@ -78,7 +78,7 @@ const AppSearchBar = React.forwardRef<
 
   return (
     <>
-      {derivedSlots.length > 0 ? (
+      {derivedSlots.length >= 0 ? (
         <>
           <form onSubmit={handleSubmit} className={styles.searchArea}>
             <Search

From c029992a6c423203d90c03fca421804c16d2a88c Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Sun, 3 Mar 2024 17:17:43 +0300
Subject: [PATCH 6/6] check slots if available

---
 .../app-search-bar/app-search-bar.component.tsx   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/app-search-bar/app-search-bar.component.tsx b/src/components/app-search-bar/app-search-bar.component.tsx
index 47496d7..32f108d 100644
--- a/src/components/app-search-bar/app-search-bar.component.tsx
+++ b/src/components/app-search-bar/app-search-bar.component.tsx
@@ -5,9 +5,6 @@ import styles from "./app-search-bar.scss";
 
 import {
   AssignedExtension,
-  ExtensionSlot,
-  attach,
-  detachAll,
   Extension,
   useConnectedExtensions,
 } from "@openmrs/esm-framework";
@@ -40,13 +37,13 @@ const AppSearchBar = React.forwardRef<
       .filter((extension) => Object.keys(extension).length > 0)
       .map((extension) => (
         <ComponentContext.Provider
-          key={extension.id}
+          key={extension?.id}
           value={{
-            moduleName: extension.moduleName,
+            moduleName: extension?.moduleName,
             extension: {
-              extensionId: extension.id,
+              extensionId: extension?.id,
               extensionSlotName: appMenuItemSlot,
-              extensionSlotModuleName: extension.moduleName,
+              extensionSlotModuleName: extension?.moduleName,
             },
           }}
         >
@@ -63,7 +60,7 @@ const AppSearchBar = React.forwardRef<
       }
       setSearchTerm(val);
 
-      const filteredItems = derivedSlots.filter((item) =>
+      const filteredItems = derivedSlots?.filter((item) =>
         item?.name?.toLowerCase().includes(val?.toLowerCase())
       );
       setDerivedSlots(filteredItems);
@@ -86,7 +83,7 @@ const AppSearchBar = React.forwardRef<
               className={styles.appSearchInput}
               closeButtonLabelText={t("clearSearch", "Clear")}
               labelText=""
-              onChange={(event) => handleChange(event.target.value)}
+              onChange={(event) => handleChange(event?.target?.value)}
               onClear={onClear}
               placeholder={t(
                 "searchForApp",