feat: post to linkedin projects (#177)

* feat: add linkedin first iteration * chore: try function in scripting * feat: add fetch and populate data * chore:remove unimportant information from manifest * chore: remove content-script linkedin * feat: changed the effect name, logic to home * chore: lint * chore: wait for element loaded * feat: add linkedin icon * Empty-Commit * Update src/popup/pages/home.tsx Co-authored-by: Brian Douglas <[email protected]> * update copy Co-authored-by: Brian Douglas <[email protected]> * chore: lint format --------- Co-authored-by: Brian Douglas <[email protected]>
open-sauced · Jun 21, 2023 · a20bff4 · a20bff4
1 parent 472286e
commit a20bff4
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 35 deletions.
diff --git a/manifest.json b/manifest.json
@@ -20,6 +20,6 @@
     "48": "src/assets/os-icons/os-icon-48.png",
     "128": "src/assets/os-icons/os-icon-128.png"
   },
-  "host_permissions": ["https://github.com/*", "https://*.insights.opensauced.pizza/*"],
-  "permissions": ["storage", "tabs", "cookies"]
+  "host_permissions": ["https://github.com/*", "https://*.insights.opensauced.pizza/*" , "https://www.linkedin.com/*"],
+  "permissions": ["scripting", "storage", "tabs", "cookies"]
 }
diff --git a/src/hooks/useGetGitHubPageInfo.ts b/src/hooks/useGetGitHubPageInfo.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { isGithubPullRequestPage, isGithubRepoPage } from "../utils/urlMatchers";
+
+interface GitHubPageInfo {
+    prUrl: string;
+    prTitle: string;
+    type: "unknown" | "PR" | "REPO";
+}
+
+export const usGetGitHubPageInfo = () => {
+    const [GithubPRPage, setGithubPRPage] = useState<GitHubPageInfo>({ prUrl: "", prTitle: "", type: "unknown" });
+
+    useEffect(() => {
+        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+            if (tabs.length > 0) {
+                const tab = tabs[0];
+
+                if (isGithubPullRequestPage(tab.url!)) {
+                    setGithubPRPage({ prUrl: tab.url!, prTitle: tab.title!.split("by")[0].trim(), type: "PR" });
+                } else if (isGithubRepoPage(tab.url!)) {
+                    setGithubPRPage({ prUrl: tab.url!, prTitle: "", type: "REPO" });
+                }
+            }
+        });
+    }, []);
+
+
+    return GithubPRPage;
+};
diff --git a/src/hooks/useGithubPRPageCheck.ts b/src/hooks/useGithubPRPageCheck.ts
diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
@@ -4,6 +4,7 @@ import {
     HiPencil,
     HiUserCircle,
 } from "react-icons/hi2";
+import { IoLogoLinkedin } from "react-icons/io5";
 import { FiSettings } from "react-icons/fi";
 import { Navigation, Pagination, A11y } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -14,20 +15,20 @@ import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";
 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 Help from "./help";
 import { useEffect, useState } from "react";
 import Settings from "./settings";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
 import type { Highlight } from "../../ts/types";
-import { useIsGithubPRPageCheck } from "../../hooks/useGithubPRPageCheck";
+import { usGetGitHubPageInfo } from "../../hooks/useGetGitHubPageInfo";
 import { HighlightSlide } from "../components/HighlightSlide";
 
 const Home = () => {
     const { user } = useAuth();
     const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
-    const { isGithubPRPage, prUrl, prTitle } = useIsGithubPRPageCheck();
+    const { prUrl: pageURL, prTitle, type: GitHubPageType } = usGetGitHubPageInfo();
     const [highlights, setHighlights] = useState<Highlight[]>([]);
     const [emojis, setEmojis] = useState<Record<string, string>[]>([]);
 
@@ -141,11 +142,53 @@ const Home = () => {
 
                     <div className="tools flex flex-col gap-2">
 
-                        {isGithubPRPage && (
+                        {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");
+
+                                        if (inputFields.length === 0) {
+                                            // set timeout to wait for the page to load
+                                            setTimeout(() => {
+                                                populateDataToLinkedIn(data);
+                                            }, 500);
+
+                                            return;
+                                        }
+                                        console.log(inputFields);
+                                        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 => {
+                                                chrome.scripting
+                                                    .executeScript({
+                                                        target: { tabId: tab.id! },
+                                                        func: populateDataToLinkedIn,
+                                                        args: [data],
+                                                    })
+                                                    .then(() => console.log("script injected"))
+                                                    .catch(err => console.log(err));
+                                            },
+
+                                        ))
+                                        .catch(err => console.log(err));
+                                }}
+                            >
+                                <IoLogoLinkedin />
+                                Add to LinkedIn Projects.
+                            </button>
+                        )}
+
+                        {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, { prUrl, prTitle });
+                                    goTo(PostOnHighlight, { pageURL, prTitle });
                                 }}
                             >
                                 <HiPencil />
@@ -189,7 +232,7 @@ const Home = () => {
                         }}
                     >
                         <FiSettings />
-            Settings
+                        Settings
                     </button>
                 </footer>
             </div>

diff --git a/src/utils/urlMatchers.ts b/src/utils/urlMatchers.ts
@@ -50,6 +50,10 @@ export const isPullRequestFilesChangedPage = (url: string) => {
     return githubPullRequestFilesChangedPattern.test(url);
 };
 
+export const isOnGitHub = (url: string) => url.includes("github.com");
+
+export const getRepoAPIURL = (url: string) => url.replace(/github\.com/, "api.github.com/repos");
+
 export const getPullRequestAPIURL = async (url: string) => {
     const apiURL = url.replace(/github\.com/, "api.github.com/repos");