From fe1e1765c04ed9b1c0ce671789ea583fa3904ffd Mon Sep 17 00:00:00 2001
From: Carlos <hernandezc2@ufl.edu>
Date: Thu, 3 Oct 2024 15:39:37 -0400
Subject: [PATCH] =?UTF-8?q?fixed=20issue=20538=20=F0=9F=94=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/components/ethnicity-combobox.tsx  | 100 ++++++++----------
 packages/core/src/modules/slack/slack.ts      |  28 +++--
 2 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/apps/member-profile/app/shared/components/ethnicity-combobox.tsx b/apps/member-profile/app/shared/components/ethnicity-combobox.tsx
index 3b862b501..b9886253d 100644
--- a/apps/member-profile/app/shared/components/ethnicity-combobox.tsx
+++ b/apps/member-profile/app/shared/components/ethnicity-combobox.tsx
@@ -1,4 +1,5 @@
 import { useFetcher } from '@remix-run/react';
+
 import { useEffect } from 'react';
 
 import {
@@ -17,6 +18,7 @@ import {
 
 import type { SearchCountriesResult } from '@/routes/api.countries.search';
 
+// Ethnicity Combobox
 type EthnicityComboboxProps = Pick<InputProps, 'name' | 'required'>;
 
 export function EthnicityCombobox({ name }: EthnicityComboboxProps) {
@@ -24,96 +26,78 @@ export function EthnicityCombobox({ name }: EthnicityComboboxProps) {
 
   useEffect(() => {
     fetcher.load('/api/countries/search');
-  }, []);
+  }, [fetcher]);
 
   const countries = fetcher.data?.countries || [];
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    fetcher.submit(
+      { search: e.currentTarget.value },
+      {
+        action: '/api/countries/search',
+        method: 'get',
+      }
+    );
+  };
+
   return (
     <Combobox>
-      <ComboboxInput
-        id={name}
-        name={name}
-        onChange={(e) => {
-          fetcher.submit(
-            { search: e.currentTarget.value },
-            {
-              action: '/api/countries/search',
-              method: 'get',
-            }
-          );
-        }}
-        required
-      />
+      <ComboboxInput id={name} name={name} onChange={handleInputChange} required />
 
       {!!countries.length && (
         <ComboboxPopover>
-          <ul>
-            {countries.map((country) => {
-              const label = `${country.flagEmoji} ${country.demonym}`;
-
-              return (
-                <ComboboxItem key={country.code} value={country.code}>
-                  {label}
-                </ComboboxItem>
-              );
-            })}
-          </ul>
+          <div className="max-h-48 overflow-y-auto">
+            {countries.map((country) => (
+              <ComboboxItem key={country.code} value={country.code}>
+                {`${country.flagEmoji} ${country.demonym}`}
+              </ComboboxItem>
+            ))}
+          </div>
         </ComboboxPopover>
       )}
     </Combobox>
   );
 }
 
+// Ethnicity MultiCombobox
 type EthnicityMultiComboboxProps = Pick<MultiComboboxProps, 'defaultValues'> &
   Pick<InputProps, 'name' | 'required'>;
 
-export function EthnicityMultiCombobox({
-  defaultValues,
-  name,
-}: EthnicityMultiComboboxProps) {
+export function EthnicityMultiCombobox({ defaultValues, name }: EthnicityMultiComboboxProps) {
   const fetcher = useFetcher<SearchCountriesResult>();
 
   useEffect(() => {
     fetcher.load('/api/countries/search');
-  }, []);
+  }, [fetcher]);
 
   const countries = fetcher.data?.countries || [];
 
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    fetcher.submit(
+      { search: e.currentTarget.value },
+      {
+        action: '/api/countries/search',
+        method: 'get',
+      }
+    );
+  };
+
   return (
     <MultiCombobox defaultValues={defaultValues}>
       <MultiComboboxDisplay>
         <MultiComboboxValues name={name} />
-        <MultiComboboxSearch
-          id={name}
-          onChange={(e) => {
-            fetcher.submit(
-              { search: e.currentTarget.value },
-              {
-                action: '/api/countries/search',
-                method: 'get',
-              }
-            );
-          }}
-        />
+        <MultiComboboxSearch id={name} onChange={handleSearchChange} />
       </MultiComboboxDisplay>
 
       {!!countries.length && (
         <ComboboxPopover>
-          <ul>
-            {countries.map((country) => {
-              const label = `${country.flagEmoji} ${country.demonym}`;
-
-              return (
-                <MultiComboboxItem
-                  key={country.code}
-                  label={label}
-                  value={country.code}
-                >
-                  {label}
-                </MultiComboboxItem>
-              );
-            })}
-          </ul>
+          <div className="max-h-48 overflow-y-auto">
+            {countries.map((country) => (
+              <MultiComboboxItem key={country.code} label={`${country.flagEmoji} ${country.demonym}`} value={country.code}>
+                {`${country.flagEmoji} ${country.demonym}`}
+              </MultiComboboxItem>
+            ))}
+          </div>
         </ComboboxPopover>
       )}
     </MultiCombobox>
diff --git a/packages/core/src/modules/slack/slack.ts b/packages/core/src/modules/slack/slack.ts
index c6b801a81..f76df0c28 100644
--- a/packages/core/src/modules/slack/slack.ts
+++ b/packages/core/src/modules/slack/slack.ts
@@ -49,11 +49,10 @@ type AnswerChatbotQuestionInput = {
  * Answers the question asked by the user in its channel w/ the ColorStack bot.
  * The uses the underlying `getAnswerFromSlackHistory` function to answer the
  * question, and then sends the answer in the thread where the question was
- * asked.
+ * asked. In addition to the newly added reaction functionality
  *
  * @param input - The question (ie: `text`) to respond to.
- */
-export async function answerChatbotQuestion({
+ */export async function answerChatbotQuestion({
   channelId,
   id,
   text,
@@ -85,11 +84,9 @@ export async function answerChatbotQuestion({
     });
 
   const questionResult = await isQuestion(text);
-
   if (!questionResult.ok) {
     throw new Error(questionResult.error);
   }
-
   if (!questionResult.ok || !questionResult.data) {
     job('notification.slack.send', {
       channel: channelId,
@@ -99,11 +96,10 @@ export async function answerChatbotQuestion({
       threadId: id,
       workspace: 'regular',
     });
-
     return;
   }
 
-  job('notification.slack.send', {
+  const loadingMessage = await job('notification.slack.send', {
     channel: channelId,
     message: 'Searching our Slack history...',
     threadId: id,
@@ -120,7 +116,6 @@ export async function answerChatbotQuestion({
   }
 
   const threads = threadsResult.data;
-
   const answerResult = await getAnswerFromSlackHistory(text, threads);
 
   if (!answerResult.ok) {
@@ -134,9 +129,24 @@ export async function answerChatbotQuestion({
     workspace: 'regular',
   });
 
-  // TODO: Delete the loading message after the answer is sent.
+  // Delete the loading message after the answer is sent
+  await job('slack.message.delete', {
+    channel: channelId,
+    messageId: loadingMessage.id,
+  });
+
+  // Added Slack reaction function call!!
+  await addSlackReaction({
+    channelId: channelId,
+    messageId: id, // ID of  initial message
+    reaction: 'colorstack-logo',
+    userId: userId,
+  });
+
+  //TODO: DELETE LOADING MESSAGE AFTER ANSWER IS SENT
 }
 
+
 type AnswerPublicQuestionInPrivateInput = {
   /**
    * The ID of the channel where the question was asked (ie: public channel).