From 5e71ad14c711aab3be7607cd78cb7878f8d9b022 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <divyanshanandsingh@gmail.com>
Date: Mon, 17 Jul 2023 16:39:30 +0530
Subject: [PATCH] feat: view repos on opensauced

---
 src/popup/pages/home.tsx            | 99 +++++++++++++++++++----------
 src/utils/fetchOpenSaucedApiData.ts | 14 ++++
 2 files changed, 80 insertions(+), 33 deletions(-)

diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
index 2d319915..9d0ed3e4 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";
@@ -29,6 +29,7 @@ const Home = () => {
     const { user } = useAuth();
     const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
     const { prUrl: pageURL, prTitle, 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,42 +163,58 @@ 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" && (
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 "";
+};