better ux

Author: yorek

client/src/SearchPage.jsx

@@ -9,6 +9,7 @@ import {
   Text,
   Link,
   SearchBox,
+  Tag,
   TeachingPopover,
   TeachingPopoverBody,
   TeachingPopoverHeader,
@@ -95,16 +96,44 @@ const SearchPage = () => {
     }
   };
 
-  const handleSearchClick = (event) => {
+  const handleSearchClick = () => {
+    console.log('Search button clicked');
     handleSearch();
   }
 
-  const handleGoToGithub = (even) => {
+  const handleOpenLink = (event, result) => {
+    window.open(result.url, '_blank', 'noopener,noreferrer');
+  }
+
+  const handleGoToGithub = () => {
     window.open("https://github.com/yorek/azure-sql-db-ai-samples-search", '_blank', 'noopener,noreferrer');
   }
 
+  const getResponseStatusFromResult = (result) => {
+    let responseStatus = { code: 0, description: '' };
+    if (result.error) {
+      console.log(error);
+      if (result.response) {                
+        responseStatus = JSON.parse(result.response).response.status.http;
+        if (responseStatus.code === 429) {
+          responseStatus.description = "Too many requests. Please try again later.";
+        }
+      } else {
+        responseStatus = { code: error.error_code, description: error_message };
+      }
+    }
+    return responseStatus;
+  }
+
+  let pageStatus = "first_load";
+  if (results.length === 0 && !loading && searchCompleted) pageStatus = "no_results";
+  if (results.length > 0) pageStatus = "results_found";
+  //console.log('Page Status:', pageStatus);
+  //console.log('Search Completed:', searchCompleted);
+
   return (
     <div className={styles.appContainer}>
+
       <div className={styles.header}>
         <div className={styles.title}>
           Azure SQL DB Samples AI Search 💡🔍
@@ -141,6 +170,7 @@ const SearchPage = () => {
           <Button onClick={handleGoToGithub} target="_blank">Go to GitHub Repo</Button>
         </div>
       </div>
+
       <div className={styles.searchWrapper}>
         <SearchBox
           placeholder="Type your query in natural language. The AI will do the rest..."
@@ -173,31 +203,27 @@ const SearchPage = () => {
         </Text>
       )}
 
+      {(pageStatus === "first_load") && 
+        (
+          <Text block style={{ textAlign: 'center' }}>
+            Start searching to get results!
+          </Text>
+        )
+      }
+
+      {(pageStatus === "no_results") && 
+        (
+          <Text block style={{ textAlign: 'center' }}>
+            No results found. Please try another query.
+          </Text>
+        )
+      }
+
       <div className={styles.results}>
-        {results.length === 0 && !loading ? (
-          query && searchCompleted == true ? (
-            <Text block style={{ textAlign: 'center' }}>
-              No results found. Try a different query!
-            </Text>
-          ) : (
-            <Text block style={{ textAlign: 'center' }}>
-              Start searching to get results!
-            </Text>
-          )
-        ) : (
+        {
           results.map((result, index) => {
-            let responseStatus;
-            if (result.error) {
-              console.log(error);
-              if (result.response) {                
-                responseStatus = JSON.parse(result.response).response.status.http;
-                if (responseStatus.code === 429) {
-                  responseStatus.description = "Too many requests. Please try again later.";
-                }
-              } else {
-                responseStatus = { code: error.error_code, description: error_message };
-              }
-            }
+            let responseStatus=getResponseStatusFromResult(result);
+            
             return (
               <Card key={index} className={styles.resultCard}>
                 {result.error ? (
@@ -226,17 +252,15 @@ const SearchPage = () => {
                         </div>
                       }
                     />
-                    <CardFooter>
-                      <Link href={result.url} target="_blank" rel="noopener noreferrer">
-                        {result.url}
-                      </Link>
+                    <CardFooter className={styles.resultCardFooter}>                   
+                      <Button onClick={(event) => handleOpenLink(event, result)}>Open Link</Button>
                     </CardFooter>
                   </>
                 )}
               </Card>
             );
           })
-        )}
+        }
       </div>
     </div>
   );

client/src/assets/styles/SearchPage.module.css

@@ -1,7 +1,6 @@
 .appContainer {
   padding: 20px;
-  font-family: 'Open Sans', sans-serif;
-  font-size: x-large;
+  font-family: 'Open Sans', sans-serif;  
 }
 
 .header {  
@@ -40,7 +39,6 @@
 
 .searchBox input {
   padding: 10px;
-  height: 40px;
 }
 
 .searchButton {
@@ -61,19 +59,23 @@
 } 
 
 .results {
-  font-size: medium;
+  font-size: small;
   width: 75%; /* Add this line to set the width to 75% */
   margin: 40px auto; /* Center the results */
+  display: grid;
+  grid-template-columns: auto auto auto;
+  justify-content: center;
+  margin-bottom: 20px;
+  gap: 10px;
 }
 
 .resultCardHeader {
   font-size: large;
-  font-weight: bold;
-  margin-bottom: 10px;
+  font-weight: bold;  
 }
 
 .resultCard {
-  margin-bottom: 20px;
+  width: 400px;
 }
 
 .resultDescription {
@@ -85,16 +87,8 @@
   color: #555555;
 }
 
-.nav {
-  margin-top: 10px;
-}
-
-.navLink {
-  margin-right: 15px;
-  text-decoration: none; 
-  font-weight: bold;
-}
-
-.navLink:hover {
-  text-decoration: underline;
-}
+.resultCardFooter {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+}