From 619435ca57e9ea3c083c19070b65576d3aff7e42 Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Thu, 5 Sep 2024 14:38:21 +0530
Subject: [PATCH] Fix dropdown not showing selected value in SelectTeamToChat
 component

---
 .../client/components/SelectTeamToChat.tsx    |  22 +--
 .../client/components/form/SelectInput.tsx    | 149 ------------------
 2 files changed, 13 insertions(+), 158 deletions(-)
 delete mode 100644 app/src/client/components/form/SelectInput.tsx

diff --git a/app/src/client/components/SelectTeamToChat.tsx b/app/src/client/components/SelectTeamToChat.tsx
index aaebf9f7..67e0cc21 100644
--- a/app/src/client/components/SelectTeamToChat.tsx
+++ b/app/src/client/components/SelectTeamToChat.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
+import Select from 'react-select';
 import { type Chat } from 'wasp/entities';
 import { SelectedModelSchema } from '../interfaces/BuildPageInterfaces';
 import { CreateNewChatProps } from '../interfaces/PlaygroundPageInterface';
 import NotificationBox from './NotificationBox';
-import { SelectInput } from './form/SelectInput';
 import TextareaAutosize from 'react-textarea-autosize';
 import { createNewChat } from 'wasp/client/operations';
 
@@ -18,8 +18,8 @@ const SelectTeamToChat = ({ userTeams }: any) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const isRedirecting = useRef(false);
 
-  const handleTeamChange = (value: string) => {
-    setTeam(value);
+  const handleTeamChange = (selectedOption: { value: string; label: string } | null) => {
+    setTeam(selectedOption ? selectedOption.value : '');
   };
 
   const handleMessageChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -70,7 +70,12 @@ const SelectTeamToChat = ({ userTeams }: any) => {
     setNotificationErrorMessage(null);
   };
 
-  const options = allTeams ? allTeams.map((team: SelectedModelSchema) => team.json_str.name) : [];
+  const options = allTeams
+    ? allTeams.map((team: SelectedModelSchema) => ({
+        value: team.json_str.name,
+        label: team.json_str.name,
+      }))
+    : [];
 
   return (
     <div className='lg:mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10'>
@@ -81,14 +86,13 @@ const SelectTeamToChat = ({ userTeams }: any) => {
             <label className='text-airt-primary' htmlFor='selectTeam'>
               Select Team
             </label>
-            <SelectInput
+            <Select
               id='selectTeam'
-              value={team}
               options={options}
               onChange={handleTeamChange}
-              propertyTypes={null}
-              handleAddProperty={() => {}}
-              isRequired={true}
+              className='pt-1 pb-1'
+              value={options.find((option) => option.value === team) || null}
+              isSearchable={true}
             />
             {formError.team && <div style={{ color: 'red' }}>{formError.team}</div>}
             <label className='mt-2  text-airt-primary inline-block' htmlFor='setSystemMessage'>
diff --git a/app/src/client/components/form/SelectInput.tsx b/app/src/client/components/form/SelectInput.tsx
deleted file mode 100644
index b693f7ea..00000000
--- a/app/src/client/components/form/SelectInput.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import Select, { StylesConfig } from 'react-select';
-import _ from 'lodash';
-import { capitalizeFirstLetter } from '../buildPage/buildPageUtils';
-
-interface SelectOption {
-  value: string;
-  label: string;
-  isNewOption?: boolean;
-  originalValue?: string;
-}
-
-interface SelectInputProps {
-  id: string;
-  value: string;
-  options: string[];
-  onChange: (value: string) => void;
-  propertyTypes?: string[] | null;
-  handleAddProperty?: (propertyType: string) => void;
-  isRequired: boolean;
-  updateExistingModel?: any;
-  resumeFormData?: any;
-}
-
-const generateLabel = (option: string): string =>
-  `Add new '${option === 'llm' ? 'LLM' : capitalizeFirstLetter(option)}'`;
-
-export const getSelectOptions = (
-  options: string[],
-  propertyTypes: string[] | undefined | null,
-  isRequired: boolean
-): SelectOption[] => {
-  // const filteredOptions = options.filter((o) => o !== SELECT_PLACEHOLDER);
-
-  const baseOptions =
-    isRequired && options.length === 0 ? [] : options.map((option) => ({ value: option, label: option }));
-
-  const newPropertyOptions =
-    propertyTypes?.map((option) => ({
-      value: generateLabel(option),
-      label: generateLabel(option),
-      isNewOption: true,
-      originalValue: option,
-    })) || [];
-
-  return [...baseOptions, ...newPropertyOptions];
-};
-
-const customStyles: StylesConfig<SelectOption, false> = {
-  control: (baseStyles) => ({
-    ...baseStyles,
-    borderColor: '#003257',
-  }),
-  option: (styles, { data }) => ({
-    ...styles,
-    display: 'flex',
-    alignItems: 'center',
-    '::before': data.isNewOption
-      ? {
-          fontFamily: '"Material Symbols Outlined"',
-          content: '"\ue147"',
-          marginRight: '5px',
-        }
-      : {},
-  }),
-};
-
-export const SelectInput: React.FC<SelectInputProps> = ({
-  id,
-  value,
-  options,
-  onChange,
-  propertyTypes,
-  handleAddProperty,
-  isRequired,
-  updateExistingModel = null,
-  resumeFormData = null,
-}) => {
-  const selectOptions = useMemo(
-    () => getSelectOptions(options, propertyTypes, isRequired),
-    [options, propertyTypes, isRequired]
-  );
-
-  const isClearable = !isRequired && !!propertyTypes;
-
-  const getInitialValue = (): SelectOption | null => {
-    if (!propertyTypes) {
-      const dataToCheck = resumeFormData ? resumeFormData : updateExistingModel;
-      return selectOptions.length > 0
-        ? dataToCheck
-          ? { value: dataToCheck[id], label: dataToCheck[id] }
-          : selectOptions[0]
-        : null;
-    }
-
-    if (!updateExistingModel && !resumeFormData) {
-      return isRequired && selectOptions.length > 1 ? selectOptions[0] : null;
-    }
-
-    const dataToCheck = resumeFormData ? resumeFormData : updateExistingModel;
-
-    return isRequired || (dataToCheck[id] !== null && dataToCheck[id] !== '')
-      ? selectOptions.length > 1
-        ? selectOptions[0]
-        : null
-      : null;
-  };
-
-  const [defaultValue, setDefaultValue] = useState<SelectOption | null>(getInitialValue());
-  const [key, setKey] = useState(0);
-
-  useEffect(() => {
-    setDefaultValue(getInitialValue());
-    setKey((prevKey) => prevKey + 1);
-  }, [options, propertyTypes, isRequired, updateExistingModel]);
-
-  const handleChange = (selectedOption: SelectOption | null) => {
-    if (!selectedOption) {
-      // onChange(SELECT_CLEAR_PLACEHOLDER);
-      return;
-    }
-
-    if (selectedOption.isNewOption && handleAddProperty) {
-      handleAddProperty(selectedOption.originalValue!);
-    }
-
-    onChange(selectedOption.value);
-  };
-
-  if (selectOptions.length === 0) {
-    return null;
-  }
-
-  return (
-    <Select
-      key={key}
-      data-testid='select-container'
-      classNamePrefix='react-select'
-      inputId={id}
-      options={selectOptions}
-      onChange={handleChange}
-      className='pt-1 pb-1'
-      defaultValue={defaultValue}
-      isSearchable={true}
-      isClearable={isClearable}
-      styles={customStyles}
-    />
-  );
-};