From f33d9fd8ab66242aecf07be23d961c33b9779727 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <divyanshanandsingh@gmail.com>
Date: Tue, 18 Jul 2023 17:23:07 +0530
Subject: [PATCH] feat: view repos on opensauced (#218)

* feat: view repos on opensauced

* change var names
---
 src/hooks/useGetGitHubPageInfo.ts   |  12 ++--
 src/popup/pages/home.tsx            | 103 ++++++++++++++++++----------
 src/utils/fetchOpenSaucedApiData.ts |  14 ++++
 3 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/src/hooks/useGetGitHubPageInfo.ts b/src/hooks/useGetGitHubPageInfo.ts
index 2864e98d..296e64fc 100644
--- a/src/hooks/useGetGitHubPageInfo.ts
+++ b/src/hooks/useGetGitHubPageInfo.ts
@@ -2,13 +2,13 @@ import { useEffect, useState } from "react";
 import { isGithubPullRequestPage, isGithubRepoPage } from "../utils/urlMatchers";
 
 interface GitHubPageInfo {
-    prUrl: string;
-    prTitle: string;
+    pageUrl: string;
+    pageTitle: string;
     type: "unknown" | "PR" | "REPO";
 }
 
 export const usGetGitHubPageInfo = () => {
-    const [GithubPRPage, setGithubPRPage] = useState<GitHubPageInfo>({ prUrl: "", prTitle: "", type: "unknown" });
+    const [GithubPage, setGithubPage] = useState<GitHubPageInfo>({ pageUrl: "", pageTitle: "", type: "unknown" });
 
     useEffect(() => {
         chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
@@ -16,14 +16,14 @@ export const usGetGitHubPageInfo = () => {
                 const tab = tabs[0];
 
                 if (isGithubPullRequestPage(tab.url!)) {
-                    setGithubPRPage({ prUrl: tab.url!, prTitle: tab.title!.split("by")[0].trim(), type: "PR" });
+                    setGithubPage({ pageUrl: tab.url!, pageTitle: tab.title!.split("by")[0].trim(), type: "PR" });
                 } else if (isGithubRepoPage(tab.url!)) {
-                    setGithubPRPage({ prUrl: tab.url!, prTitle: "", type: "REPO" });
+                    setGithubPage({ pageUrl: tab.url!, pageTitle: "", type: "REPO" });
                 }
             }
         });
     }, []);
 
 
-    return GithubPRPage;
+    return GithubPage;
 };
diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
index 2d319915..91358133 100644
--- a/src/popup/pages/home.tsx
+++ b/src/popup/pages/home.tsx
@@ -5,7 +5,7 @@ import {
     HiUserCircle,
 } from "react-icons/hi2";
 import { IoLogoLinkedin } from "react-icons/io5";
-import { FiSettings } from "react-icons/fi";
+import { FiSettings, FiExternalLink } from "react-icons/fi";
 import { Navigation, Pagination, A11y } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/swiper-bundle.min.css";
@@ -16,7 +16,7 @@ import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
 import PostOnHighlight from "./posthighlight";
 import { getRepoAPIURL } from "../../utils/urlMatchers";
-import { getEmojis, getHighlights } from "../../utils/fetchOpenSaucedApiData";
+import { getEmojis, getHighlights, getRepoOpenSaucedURL } from "../../utils/fetchOpenSaucedApiData";
 import Help from "./help";
 import { useEffect, useState, useRef } from "react";
 import Settings from "./settings";
@@ -28,7 +28,8 @@ import { HighlightSlide } from "../components/HighlightSlide";
 const Home = () => {
     const { user } = useAuth();
     const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
-    const { prUrl: pageURL, prTitle, type: GitHubPageType } = usGetGitHubPageInfo();
+    const { pageUrl, pageTitle, type: GitHubPageType } = usGetGitHubPageInfo();
+    const [repoOpenSaucedURL, setRepoOpenSaucedURL] = useState<string>("");
     const [highlights, setHighlights] = useState<Highlight[]>([]);
     const [emojis, setEmojis] = useState<Record<string, string>[]>([]);
     const toolsRef = useRef<HTMLDivElement>(null);
@@ -68,6 +69,22 @@ const Home = () => {
         void fetchEmojis();
     }, []);
 
+    useEffect(() => {
+        const fetchRepoOpenSaucedURL = async () => {
+            try {
+                const openSaucedUrl = await getRepoOpenSaucedURL(pageUrl);
+
+                setRepoOpenSaucedURL(openSaucedUrl);
+            } catch (error) {
+                console.log(error);
+            }
+        };
+
+        if (GitHubPageType === "REPO") {
+            void fetchRepoOpenSaucedURL();
+        }
+    }, [pageUrl]);
+
     return (
         <div className="p-4 bg-slate-800">
             <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
@@ -146,49 +163,65 @@ const Home = () => {
                     >
 
                         {GitHubPageType === "REPO" && (
-                            <button
-                                className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-                                onClick={() => {
-                                    function populateDataToLinkedIn (data: any) {
-                                        const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(".artdeco-text-input--input");
+                            <>
+                                <button
+                                    className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+                                    onClick={() => {
+                                        function populateDataToLinkedIn (data: any) {
+                                            const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(".artdeco-text-input--input");
 
-                                        if (inputFields.length === 0) {
+                                            if (inputFields.length === 0) {
                                             // set timeout to wait for the page to load
-                                            setTimeout(() => {
-                                                populateDataToLinkedIn(data);
-                                            }, 500);
+                                                setTimeout(() => {
+                                                    populateDataToLinkedIn(data);
+                                                }, 500);
 
-                                            return;
+                                                return;
+                                            }
+                                            inputFields[0].value = data.name;
+                                            inputFields[1].value = data.description;
                                         }
-                                        inputFields[0].value = data.name;
-                                        inputFields[1].value = data.description;
-                                    }
-                                    fetch(getRepoAPIURL(pageURL)).then(async res => res.json())
-                                        .then(data => chrome.tabs.create(
-                                            { url: "https://www.linkedin.com/in/me/edit/forms/project/new/", active: true },
-                                            tab => {
-                                                void chrome.scripting
-                                                    .executeScript({
-                                                        target: { tabId: tab.id! },
-                                                        func: populateDataToLinkedIn,
-                                                        args: [data],
-                                                    });
-                                            },
-
-                                        ))
-                                        .catch(err => console.log(err));
-                                }}
-                            >
-                                <IoLogoLinkedin />
+                                        fetch(getRepoAPIURL(pageUrl)).then(async res => res.json())
+                                            .then(data => chrome.tabs.create(
+                                                { url: "https://www.linkedin.com/in/me/edit/forms/project/new/", active: true },
+                                                tab => {
+                                                    void chrome.scripting
+                                                        .executeScript({
+                                                            target: { tabId: tab.id! },
+                                                            func: populateDataToLinkedIn,
+                                                            args: [data],
+                                                        });
+                                                },
+
+                                            ))
+                                            .catch(err => console.log(err));
+                                    }}
+                                >
+                                    <IoLogoLinkedin />
                                 Add to LinkedIn Projects.
-                            </button>
+                                </button>
+
+                                {
+                                    repoOpenSaucedURL && (
+                                        <a
+                                            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+                                            href={repoOpenSaucedURL}
+                                            rel="noreferrer"
+                                            target="_blank"
+                                        >
+                                            <FiExternalLink />
+                                            View On OpenSauced
+                                        </a>
+                                    )
+                                }
+                            </>
                         )}
 
                         {GitHubPageType === "PR" && (
                             <button
                                 className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
                                 onClick={() => {
-                                    goTo(PostOnHighlight, { pageURL, prTitle });
+                                    goTo(PostOnHighlight, { pageUrl, pageTitle });
                                 }}
                             >
                                 <HiPencil />
diff --git a/src/utils/fetchOpenSaucedApiData.ts b/src/utils/fetchOpenSaucedApiData.ts
index 8c9dc027..79d5028c 100644
--- a/src/utils/fetchOpenSaucedApiData.ts
+++ b/src/utils/fetchOpenSaucedApiData.ts
@@ -6,6 +6,7 @@ import {
     OPEN_SAUCED_HIGHLIGHTS_LIST_ENDPOINT,
     OPEN_SAUCED_HIGHLIGHT_ENDPOINT,
     OPEN_SAUCED_EMOJIS_ENDPOINT,
+    OPEN_SAUCED_INSIGHTS_DOMAIN,
 } from "../constants";
 import { IInsight } from "../ts/InsightDto";
 import { GeneralAPIResponse, Highlights } from "../ts/types";
@@ -230,3 +231,16 @@ export const removeReactionOnHighlight = async (userToken: string, highlightId:
     headers: { Authorization: `Bearer ${userToken}` },
     method: "DELETE",
 });
+
+export const getRepoOpenSaucedURL = async (repoUrl: string) => {
+    const repoFullName = repoUrl.split("/").slice(-2)
+        .join("/");
+    const response = await fetch(`${OPEN_SAUCED_REPOS_ENDPOINT}/${repoFullName}`, { method: "GET" });
+
+    if (response.status === 200) {
+        const data = await response.json();
+
+        return `https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/${data.language}/repositories/filter/${data.full_name}`;
+    }
+    return "";
+};