fix: highlight redirection, multiple AI generation, draft commit messages

src/content-scripts/components/AICodeRefactor/ChangeSuggestorButton.ts

@@ -21,13 +21,15 @@ export const ChangeSuggestorButton = (commentNode: HTMLElement) => {
 };
 
 const handleSubmit = async (commentNode: HTMLElement) => {
+ const logo = document.getElementById("ai-description-button-logo");
+ const button = document.getElementById("os-ai-change-gen");
+
  try {
  if (!(await isLoggedIn())) {
  return window.open(SUPABASE_LOGIN_URL, "_blank");
  }
- const logo = document.getElementById("ai-description-button-logo");
 
- if (!logo) {
+ if (!logo || !button) {
  return;
  }
 
@@ -41,6 +43,7 @@ const handleSubmit = async (commentNode: HTMLElement) => {
  }
 
  logo.classList.toggle("animate-spin");
+ button.classList.toggle("pointer-events-none");
 
  const selectedLines = document.querySelectorAll(".code-review.selected-line");
  let selectedCode = Array.from(selectedLines).map(line => line.textContent)
@@ -69,13 +72,17 @@ const handleSubmit = async (commentNode: HTMLElement) => {
  );
 
  logo.classList.toggle("animate-spin");
+ button.classList.toggle("pointer-events-none");
  if (!suggestionStream) {
  return console.error("No description was generated!");
  }
  const textArea = commentNode.querySelector(GITHUB_PR_SUGGESTION_TEXT_AREA_SELECTOR)!;
 
  insertTextAtCursor(textArea as HTMLTextAreaElement, suggestionStream);
  } catch (error: unknown) {
+ logo?.classList.toggle("animate-spin");
+ button?.classList.toggle("pointer-events-none");
+
  if (error instanceof Error) {
  console.error("Description generation error:", error.message);
  }

src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts

@@ -23,26 +23,30 @@ export const DescriptionGeneratorButton = () => {
 };
 
 const handleSubmit = async () => {
- const logo = document.getElementById("ai-description-button-logo") ?? null;
+ const logo = document.getElementById("ai-description-button-logo");
+ const button = document.getElementById("ai-description-button");
 
  try {
  if (!(await isLoggedIn())) {
  return window.open(SUPABASE_LOGIN_URL, "_blank");
  }
 
- if (!logo) {
+ if (!logo || !button) {
  return;
  }
  logo.classList.toggle("animate-spin");
+ button.classList.toggle("pointer-events-none");
  const descriptionStream = await getAiDescription();
 
  logo.classList.toggle("animate-spin");
+ button.classList.toggle("pointer-events-none");
 
  const textArea = document.getElementsByName(GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR)[0] as HTMLTextAreaElement;
 
  insertTextAtCursor(textArea, descriptionStream);
  } catch (error: unknown) {
  logo?.classList.toggle("animate-spin");
+ button?.classList.toggle("pointer-events-none");
 
  if (error instanceof Error) {
  alert(error.message);
@@ -52,7 +56,9 @@ const handleSubmit = async () => {
 };
 
 export const getAiDescription = async () => {
- const url = getPullRequestAPIURL(window.location.href);
+ const { protocol, hostname, pathname } = window.location;
+ const url = getPullRequestAPIURL(`${protocol}//${hostname}${pathname}`);
+
  const descriptionConfig = await getAIDescriptionConfig();
 
  if (!descriptionConfig) {
@@ -89,3 +95,4 @@ export const getAiDescription = async () => {
  return descriptionStream;
 };
 
+

src/pages/home.tsx

@@ -18,27 +18,22 @@ import { getHighlights } from "../utils/fetchOpenSaucedApiData";
 
 import Help from "./help";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../constants";
-interface Highlight {
- highlight: string;
- title: string;
- name: string;
- url: string;
- login: string;
-}
-
+import type { Highlight } from "../ts/types";
 
 const Home = () => {
  const { user } = useAuth();
  const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
  const [highlights, setHighlights] = useState<Highlight[]>([]);
  const [currentPage, setCurrentPage] = useState(0);
- const [currentName, setCurrentName] = useState<string>("");
-
 
  useEffect(() => {
  const fetchHighlights = async () => {
  try {
  const userHighlightsData = await getHighlights();
+
+ if (!userHighlightsData) {
+ return;
+ }
  const highlights = userHighlightsData.data;
 
  setHighlights(highlights);
@@ -58,13 +53,6 @@ const Home = () => {
  setCurrentPage(prevPage => prevPage + 1);
  };
 
- useEffect(() => {
- // Update the current name when the highlight changes
- if (highlights[currentPage]?.login) {
- setCurrentName(highlights[currentPage].login);
- }
- }, [highlights, currentPage]);
-
  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">

src/pages/posthighlight.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "../hooks/useAuth";
 import toast, { Toaster } from "react-hot-toast";
 import { cerateHighlight } from "../utils/fetchOpenSaucedApiData";
 import { goBack } from "react-chrome-extension-router";
+import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../constants";
 
 const PostOnHighlight = () => {
  const { authToken, user } = useAuth();
@@ -42,7 +43,7 @@ const PostOnHighlight = () => {
  return (
  <span>
  <a
- href={`https://insights.opensauced.pizza/user/${user?.user_name}/highlights`}
+ href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${user?.user_name}/highlights`}
  rel="noreferrer"
  target="_blank"
  >

src/ts/types.ts

@@ -17,3 +17,33 @@ export interface IUserPR {
  readonly changed_files: number;
  readonly repo_id: number;
 }
+
+export interface Highlights {
+ data: Highlight[];
+ meta: HighlightsMeta;
+}
+
+export interface Highlight {
+ id: number;
+ user_id: number;
+ url: string;
+ title: string;
+ highlight: string;
+ pinned: boolean;
+ created_at: string;
+ updated_at: string;
+ deleted_at: string;
+ shipped_at: string;
+ full_name: string;
+ name: string;
+ login: string;
+}
+
+interface HighlightsMeta {
+ page: number;
+ limit: number;
+ itemCount: number;
+ pageCount: number;
+ hasPreviousPage: boolean;
+ hasNextPage: boolean;
+}

src/utils/fetchOpenSaucedApiData.ts

@@ -8,6 +8,7 @@ import {
  OPEN_SAUCED_HIGHLIGHTS_ENDPOINT,
 } from "../constants";
 import { IInsight } from "../ts/InsightDto";
+import { Highlights } from "../ts/types";
 
 export const isOpenSaucedUser = async (username: string) => {
  try {
@@ -178,12 +179,18 @@ export const updateInsight = async (userToken: string, repoId: string, checked:
 
  return response.status === 200;
 };
-export const getHighlights = async () => {
- const response = await fetch(
+export const getHighlights = async (): Promise<Highlights | undefined> => {
+ const response = await cachedFetch(
  `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}`,
- { method: "GET" },
+ {
+ method: "GET",
+ expireInSeconds: 300,
+ },
  );
 
+ if (!response) {
+ return;
+ }
  return response.json();
 };