Skip to content

Commit

Permalink
feat: view repos on opensauced (#218)
Browse files Browse the repository at this point in the history 
* feat: view repos on opensauced

* change var names
  • Loading branch information
@diivi
diivi authored Jul 18, 2023
1 parent 1d401ab commit f33d9fd
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 41 deletions.
12 changes: 6 additions & 6 deletions src/hooks/useGetGitHubPageInfo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,28 @@ 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 => {
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" });
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;
};
103 changes: 68 additions & 35 deletions src/popup/pages/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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 />
Expand Down
14 changes: 14 additions & 0 deletions src/utils/fetchOpenSaucedApiData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 "";
};

0 comments on commit f33d9fd

Please sign in to comment.