add github and kofi badges, add rate limiter

fpgmaas · Jun 22, 2024 · 9dc03ce · 9dc03ce
1 parent abe2dcd
commit 9dc03ce
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 21 deletions.
diff --git a/frontend/app/components/GitHubButton.tsx b/frontend/app/components/GitHubButton.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+const GitHubButton: React.FC = () => {
+  return (
+    <a
+      href="https://github.com/fpgmaas/pypi-scout"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center p-2 border border-gray-700 rounded bg-gray-900 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700"
+    >
+      <svg
+        height="24"
+        width="24"
+        viewBox="0 0 16 16"
+        fill="white"
+        className="mr-2"
+      >
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.58.82-2.14-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.14 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.45.55.38A8.001 8.001 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+      </svg>
+      GitHub
+    </a>
+  );
+};
+
+export default GitHubButton;
diff --git a/frontend/app/components/SearchResultsTable.tsx b/frontend/app/components/SearchResultsTable.tsx
@@ -25,6 +25,12 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
     return sortField === field ? (sortDirection === "asc" ? "▲" : "▼") : "";
   };
 
+  const truncateText = (text: string, maxLength: number) => {
+    return text.length > maxLength
+      ? `${text.substring(0, maxLength)}...`
+      : text;
+  };
+
   return (
     <div className="overflow-x-auto w-full">
       <table className="min-w-full divide-y divide-gray-700">
@@ -70,15 +76,15 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
           {results.map((result, index) => (
             <tr key={index} className="hover:bg-gray-700">
               <td className="px-4 py-2 whitespace-nowrap text-gray-200">
-                {result.name}
+                {truncateText(result.name, 20)}
               </td>
               <td className="px-4 py-2 whitespace-nowrap text-gray-200">
                 {result.similarity.toFixed(3)}
               </td>
               <td className="px-4 py-2 whitespace-nowrap text-gray-200">
                 {result.weekly_downloads.toLocaleString()}
               </td>
-              <td className="px-4 py-2 whitespace-normal break-words text-gray-200">
+              <td className="px-4 py-2 whitespace-normal break-words text-gray-200 min-w-[400px]">
                 {result.summary}
               </td>
               <td className="px-4 py-2 whitespace-nowrap">

diff --git a/frontend/app/components/SupportButton.tsx b/frontend/app/components/SupportButton.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const SupportButton: React.FC = () => {
+  return (
+    <a
+      href="https://ko-fi.com/fpgmaas"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center p-2 border border-gray-700 rounded bg-gray-900 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700"
+    >
+      <img
+        src="kofi.png"
+        alt="Ko-fi logo"
+        width="24"
+        height="24"
+        className="mr-2"
+      />
+      Support
+    </a>
+  );
+};
+
+export default SupportButton;
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -5,6 +5,8 @@ import { handleSearch, sortResults } from "./utils/search";
 import SearchResultsTable from "./components/SearchResultsTable";
 import InfoBox from "./components/InfoBox";
 import { ClipLoader } from "react-spinners";
+import GitHubButton from "./components/GitHubButton";
+import SupportButton from "./components/SupportButton";
 
 interface Match {
   name: string;
@@ -31,20 +33,29 @@ export default function Home() {
   };
 
   return (
-    <main className="flex flex-col items-center justify-start min-h-screen p-4 space-y-4 max-w-[2200px] mx-auto">
-      <header className="w-full flex flex-col items-center text-center mb-4">
+    <main className="flex flex-col items-center justify-start min-h-screen p-4 space-y-4 max-w-[2200px] mx-auto relative">
+      <header className="w-full flex justify-end p-4">
+        <div className="flex space-x-4">
+          <GitHubButton />
+          <SupportButton />
+        </div>
+      </header>
+
+      <div className="flex flex-col items-center text-center mb-4">
         <picture>
           <img
             alt="pypi-scout logo"
             width="420"
             height="220"
             src="./pypi.svg"
+            className="mx-auto"
           ></img>
         </picture>
         <p className="text-lg text-gray-300 mt-2">
           Enter your query to search for Python packages
         </p>
-      </header>
+      </div>
+
       <div className="flex flex-col items-center space-y-4 w-3/5 bg-gray-800 p-6 rounded-lg shadow-lg">
         <textarea
           className="w-full h-24 p-2 border border-gray-700 rounded resize-none overflow-auto focus:outline-none focus:ring-2 focus:ring-blue-700 bg-gray-700 text-white"
@@ -53,7 +64,7 @@ export default function Home() {
           placeholder="Enter your query here..."
         ></textarea>
         <button
-          className="w-[250px] p-2 border border-gray-700 rounded bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700"
+          className="w-full max-w-[250px] p-2 border border-gray-700 rounded bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700"
           onClick={() =>
             handleSearch(
               text,
@@ -75,7 +86,7 @@ export default function Home() {
 
       <div className="w-full flex justify-center mt-6">
         <button
-          className="w-[250px] p-2 border border-gray-700 rounded bg-gray-600 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700"
+          className="w-full max-w-[250px] p-2 border border-gray-700 rounded bg-gray-600 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700"
           onClick={() => setInfoBoxVisible(!infoBoxVisible)}
         >
           {infoBoxVisible ? "Hide Info" : "How does this work?"}

diff --git a/frontend/app/utils/search.ts b/frontend/app/utils/search.ts
@@ -34,7 +34,11 @@ export const handleSearch = async (
     const fetchedResults: Match[] = response.data.matches;
     setResults(sortResults(fetchedResults, sortField, sortDirection));
   } catch (error) {
-    setError("Error fetching search results.");
+    if (axios.isAxiosError(error) && error.response?.status === 429) {
+      setError("Rate limit reached. Please wait a minute and try again.");
+    } else {
+      setError("Error fetching search results.");
+    }
     console.error("Error fetching search results:", error);
   } finally {
     setLoading(false);
@@ -48,8 +52,9 @@ export const sortResults = (
 ): Match[] => {
   return [...data].sort((a, b) => {
     // @ts-ignore
-    if (a[field] < b[field]) return direction === "asc" ? -1 : 1; // @ts-ignore
-    if (a[field] > b[field]) return direction === "asc" ? 1 : -1; // @ts-ignore
+    if (a[field] < b[field]) return direction === "asc" ? -1 : 1;
+    // @ts-ignore
+    if (a[field] > b[field]) return direction === "asc" ? 1 : -1;
     return 0;
   });
 };
diff --git a/frontend/public/kofi.png b/frontend/public/kofi.png