first commit

apps/web/src/entities/issue/ui/issue-select-box.ui.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { useThrottle } from 'react-use';
+
+import { client } from '@/shared';
+import AsyncMultiSelectSearchInput from '@/shared/ui/inputs/async-multi-select-search-input.ui';
+
+import { useIssueSearchInfinite } from '../lib';
+
+interface Props {
+  onChange: (value?: number[]) => void;
+  value?: number[];
+}
+
+const IssueSelectBox = ({ onChange, value }: Props) => {
+  const router = useRouter();
+  const projectId = Number(router.query.projectId as string);
+  const [selectedIssues, setSelectedIssues] = useState<
+    { label: string; value: string }[]
+  >([]);
+
+  const [inputValue, setInputValue] = useState('');
+  const throttedValue = useThrottle(inputValue, 500);
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useIssueSearchInfinite(projectId, {
+      queries: [{ key: 'name', value: throttedValue, condition: 'CONTAINS' }],
+      sort: { name: 'ASC' },
+    });
+
+  useEffect(() => {
+    if (!value) {
+      setSelectedIssues([]);
+      return;
+    }
+    void Promise.allSettled(
+      value.map(async (issueId) => {
+        try {
+          const { data } = await client.get({
+            path: '/api/admin/projects/{projectId}/issues/{issueId}',
+            pathParams: { projectId, issueId },
+          });
+          return { label: data.name, value: String(issueId) };
+        } catch (error) {
+          console.warn(`Failed to fetch issue ${issueId}:`, error);
+          return { label: `Issue ${issueId}`, value: String(issueId) };
+        }
+      }),
+    ).then((results) => {
+      const successfulResults = results
+        .filter((result) => result.status === 'fulfilled')
+        .map((result) => result.value);
+      setSelectedIssues(successfulResults);
+    });
+  }, [value]);
+
+  return (
+    <AsyncMultiSelectSearchInput
+      options={data.pages.flatMap((page) =>
+        page ?
+          page.items.map(({ name, id }) => ({ label: name, value: String(id) }))
+        : [],
+      )}
+      value={selectedIssues}
+      onChange={(input) => onChange(input.map((v) => Number(v.value)))}
+      fetchNextPage={fetchNextPage}
+      hasNextPage={hasNextPage}
+      inputValue={inputValue}
+      setInputValue={setInputValue}
+      isFetchingNextPage={isFetchingNextPage}
+    />
+  );
+};
+
+export default IssueSelectBox;