@conorheffron/ironoc-frontend 9.1.8 → 9.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "9.1.8",
+  "version": "9.1.9",
   "private": false,
   "license": "GPL-3.0-or-later",
   "dependencies": {

package/src/components/RepoIssues.js

@@ -35,7 +35,8 @@ const RepoIssues = () => {
 
   const [repoIssueList, setRepoIssueList] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [value, setValue] = useState('');
+  const [usernameValue, setUsernameValue] = useState(id);
+  const [repoValue, setRepoValue] = useState(repo);
 
   useEffect(() => {
     const fetchIssues = async () => {
@@ -44,20 +45,27 @@ const RepoIssues = () => {
         const body = await response.json();
         setRepoIssueList(body);
       }
+      setUsernameValue(id);
+      setRepoValue(repo);
       setIsLoading(false);
     };
     fetchIssues();
   }, [id, repo]);
 
-  const handleChange = (event) => setValue(event.target.value);
+  const handleUsernameChange = (event) => setUsernameValue(event.target.value);
+
+  const handleRepoChange = (event) => setRepoValue(event.target.value);
 
   const onSubmit = (event) => {
     event.preventDefault();
-    navigate(`/issues/${id}/${value}`, {
+    const searchUsername = usernameValue.trim() || id;
+    const searchRepo = repoValue.trim() || repo;
+
+    navigate(`/issues/${searchUsername}/${searchRepo}`, {
       replace: true,
       state: {
-        id: id,
-        repo: value,
+        id: searchUsername,
+        repo: searchRepo,
       },
     });
     navigate(0);
@@ -183,13 +191,19 @@ const RepoIssues = () => {
       <Container fluid={true}>
         <br />
         <InputGroup className="mb-3">
+          <Form.Control
+            placeholder="Enter GitHub User ID... Example: conorheffron"
+            aria-label="Enter GitHub User ID..."
+            type="text"
+            value={usernameValue}
+            onChange={handleUsernameChange}
+          />
           <Form.Control
             placeholder="Enter Project Name... Example: ironoc-db"
             aria-label="Enter Project Name..."
-            aria-describedby="basic-addon2"
             type="text"
-            value={value}
-            onChange={handleChange}
+            value={repoValue}
+            onChange={handleRepoChange}
           />
           <Button
             variant="outline-secondary"

package/src/components/__tests__/RepoIssues.test.js

@@ -164,17 +164,41 @@ describe('RepoIssues', () => {
     window.fetch = global.fetch;
     render(<RepoIssues />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
-    const input = screen.getByTestId('form-control');
+    const usernameInput = screen.getByRole('textbox', { name: /Enter GitHub User ID/i });
+    const repoInput = screen.getByRole('textbox', { name: /Enter Project Name/i });
     const button = screen.getByText(/Search Issues/i);
-    fireEvent.change(input, { target: { value: 'newrepo' } });
+    fireEvent.change(usernameInput, { target: { value: 'other-user' } });
+    fireEvent.change(repoInput, { target: { value: 'newrepo' } });
     fireEvent.click(button);
-    expect(mockNavigate).toHaveBeenCalledWith('/issues/user/newrepo', {
+    expect(mockNavigate).toHaveBeenCalledWith('/issues/other-user/newrepo', {
       replace: true,
       state: {
-        id: 'user',
+        id: 'other-user',
         repo: 'newrepo',
       },
     });
     expect(mockNavigate).toHaveBeenCalledWith(0);
   });
+
+  it('uses current route values when search fields are blank', async () => {
+    useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve([]) }));
+    window.fetch = global.fetch;
+    render(<RepoIssues />);
+    await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
+    const usernameInput = screen.getByRole('textbox', { name: /Enter GitHub User ID/i });
+    const repoInput = screen.getByRole('textbox', { name: /Enter Project Name/i });
+    const button = screen.getByText(/Search Issues/i);
+    fireEvent.change(usernameInput, { target: { value: '' } });
+    fireEvent.change(repoInput, { target: { value: '' } });
+    fireEvent.click(button);
+    expect(mockNavigate).toHaveBeenCalledWith('/issues/user/repo', {
+      replace: true,
+      state: {
+        id: 'user',
+        repo: 'repo',
+      },
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(0);
+  });
 });