From 0dcd93ef92d4ae9a4e5a63e5bac74f0c9b23c16a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 19 Jun 2023 15:45:26 -0300
Subject: [PATCH] added discord and twitter icons, added github stars

---
 .../src/components/headerComponent/index.tsx  | 52 +++++++++++++------
 src/frontend/src/controllers/API/index.ts     | 17 ++++++
 2 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 67ef327f2..48c73ac86 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -1,6 +1,6 @@
 import { BellIcon, Home, Users2 } from "lucide-react";
-import { useContext } from "react";
-import { FaGithub } from "react-icons/fa";
+import { useContext, useEffect, useState } from "react";
+import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
 import { Button } from "../ui/button";
 import { TabsContext } from "../../contexts/tabsContext";
 import AlertDropdown from "../../alerts/alertDropDown";
@@ -11,6 +11,7 @@ import { typesContext } from "../../contexts/typesContext";
 import MenuBar from "./components/menuBar";
 import { Link, useLocation, useParams } from "react-router-dom";
 import { USER_PROJECTS_HEADER } from "../../constants";
+import { getRepoStars } from "../../controllers/API";
 
 export default function Header() {
   const { flows, addFlow, tabId } = useContext(TabsContext);
@@ -22,6 +23,16 @@ export default function Header() {
   const { notificationCenter, setNotificationCenter, setErrorData } =
     useContext(alertContext);
   const location = useLocation();
+
+  const [stars, setStars] = useState(null);
+
+  useEffect(() => {
+    async function fetchStars() {
+      const starsCount = await getRepoStars("logspace-ai", "langflow");
+      setStars(starsCount);
+    }
+    fetchStars();
+  }, []);
   return (
     <div className="w-full h-12 flex justify-between items-center border-b bg-muted">
       <div className="flex gap-2 justify-start items-center w-96">
@@ -57,22 +68,35 @@ export default function Header() {
         </Link>
       </div>
       <div className="flex justify-end px-2 w-96">
-        <div className="ml-auto mr-2 flex gap-5">
-          <Button
-            asChild
-            variant="outline"
-            className="text-gray-600 dark:text-gray-300 "
-          >
+        <div className="ml-auto mr-2 flex gap-5 items-center">
             <a
               href="https://github.com/logspace-ai/langflow"
               target="_blank"
               rel="noreferrer"
-              className="flex"
+              className="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 dark:text-gray-300 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
             >
               <FaGithub className="h-5 w-5 mr-2" />
-              Join The Community
+              Star
+              <div className="ml-2 flex text-sm bg-background rounded-md rounded-l-none border px-2 h-9 -mr-px items-center justify-center">
+                {stars}
+              </div>
+            </a>
+            <a
+              href="https://twitter.com/logspace_ai¼"
+              target="_blank"
+              rel="noreferrer"
+              className="text-muted-foreground"
+            >
+              <FaTwitter className="h-5 w-5" />
+            </a>
+            <a
+              href="https://discord.gg/EqksyE2EX9"
+              target="_blank"
+              rel="noreferrer"
+              className="text-muted-foreground"
+            >
+              <FaDiscord className="h-5 w-5" />
             </a>
-          </Button>
           {/* <button
             className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
             onClick={() => {
@@ -110,12 +134,6 @@ export default function Header() {
             )}
             <BellIcon className="h-5 w-5" aria-hidden="true" />
           </button>
-          {/* <button>
-            <img
-              src="https://github.com/shadcn.png"
-              className="rounded-full w-8"
-            />
-          </button> */}
         </div>
       </div>
     </div>
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index f0c36a215..fb24a0f2b 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -18,6 +18,23 @@ export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
   return await axios.get(`/api/v1/all`);
 }
 
+const GITHUB_API_URL = "https://api.github.com";
+const GITHUB_PERSONAL_ACCESS_TOKEN = "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";
+
+axios.defaults.headers.common[
+  "Authorization"
+] = `token ${GITHUB_PERSONAL_ACCESS_TOKEN}`;
+
+export async function getRepoStars(owner, repo) {
+  try {
+    const response = await axios.get(`${GITHUB_API_URL}/repos/${owner}/${repo}`);
+    return response.data.stargazers_count;
+  } catch (error) {
+    console.error("Error fetching repository data:", error);
+    return null;
+  }
+}
+
 /**
  * Sends data to the API for prediction.
  *