✨ add button to open all links

mrpmohiburrahman · Jul 9, 2024 · 0268ee7 · 0268ee7
1 parent 96e2e43
commit 0268ee7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/...ite/similar-react-native-libraries/components/search_component/SearchComponent.module.css b/...ite/similar-react-native-libraries/components/search_component/SearchComponent.module.css
@@ -87,4 +87,21 @@
 
 .noResultsSpace {
     margin-top: 2rem;
+}
+
+.openAllButton {
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    background-color: var(--active-bg-color);
+    color: var(--active-text-color);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    align-self: flex-end;
+    /* Align the button to the bottom-right */
+}
+
+.openAllButton:hover {
+    background-color: var(--hover-bg-color);
 }
diff --git a/website/similar-react-native-libraries/components/search_component/SearchComponent.tsx b/website/similar-react-native-libraries/components/search_component/SearchComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
-import combinedData from '../../../../category-selector/data/combinedFromChunks.json'; // Adjust the path to your JSON file
-import categoryData from '../../../../category-selector/data/uniqueCategoryToLib.json'; // Adjust the path to your JSON file
+import combinedData from '../../../../category-selector/data/combinedFromChunks.json';
+import categoryData from '../../../../category-selector/data/uniqueCategoryToLib.json';
 import styles from './SearchComponent.module.css';
 
 interface GithubData {
@@ -76,6 +76,7 @@ const SearchComponent: React.FC = () => {
   const [activeSuggestionIndex, setActiveSuggestionIndex] = useState<number>(0);
   const [hasSearched, setHasSearched] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const resultRefs = useRef<(HTMLAnchorElement | null)[]>([]);
 
   useEffect(() => {
     inputRef.current?.focus();
@@ -153,6 +154,14 @@ const SearchComponent: React.FC = () => {
     fetchResults(selectedSuggestion);
   };
 
+  const handleOpenAllLinks = () => {
+    resultRefs.current.forEach(ref => {
+      if (ref) {
+        ref.click();
+      }
+    });
+  };
+
   return (
     <div className={styles.container}>
       <input
@@ -164,6 +173,11 @@ const SearchComponent: React.FC = () => {
         placeholder="Enter GitHub URL"
         className={styles.searchInput}
       />
+      {hasSearched && results.length > 0 && (
+        <button onClick={handleOpenAllLinks} className={styles.openAllButton}>
+          Open All Links
+        </button>
+      )}
       {showSuggestions && suggestions.length > 0 && (
         <div className={styles.suggestionsContainer}>
           {suggestions.map((suggestion, index) => (
@@ -178,10 +192,14 @@ const SearchComponent: React.FC = () => {
       )}
       <div className={styles.resultsContainer}>
         {hasSearched && results.length > 0
-          ? results.map(result => (
+          ? results.map((result, index) => (
               <div key={result.githubUrl} className={styles.resultItem}>
                 <h2>
-                  <a href={result.github?.urls?.repo} target="_blank" rel="noopener noreferrer">
+                  <a
+                    href={result.github?.urls?.repo}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    ref={el => (resultRefs.current[index] = el)}>
                     {result.github?.name}
                   </a>
                 </h2>

diff --git a/website/similar-react-native-libraries/tsconfig.json b/website/similar-react-native-libraries/tsconfig.json
@@ -1,7 +1,12 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@docusaurus/tsconfig",
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
     "baseUrl": "."
   }
 }