feat: latest highlights (#154)

* Add highlights list endpoint * Add getHighlights function * Add comma * Add functionality to fetch and display highlights * Resolve Errors and add Highlight interface * Link title and add styling * Add styling to author link * Refactor to add pagination * Handle links opening in new tab * Add functionality to remove space in link to user who created highlight * Update src/pages/home.tsx * Revert "Update src/pages/home.tsx" This reverts commit 8e8bb0b. --------- Co-authored-by: Brian Douglas <[email protected]> Co-authored-by: Brian 'bdougie' Douglas <[email protected]>
open-sauced · Jun 3, 2023 · 0ccd0e7 · 0ccd0e7
1 parent fd66ce4
commit 0ccd0e7
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 2 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -17,7 +17,7 @@ export const OPEN_SAUCED_USER_INSIGHTS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/u
 export const OPEN_SAUCED_AI_PR_DESCRIPTION_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/prs/description/generate`;
 export const OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/user/highlights`;
 export const OPEN_SAUCED_AI_CODE_REFACTOR_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/prs/suggestion/generate`;
-
+export const OPEN_SAUCED_HIGHLIGHTS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/highlights/list`;
 
 // GitHub constants/selectors
 export const GITHUB_PROFILE_MENU_SELECTOR = ".p-nickname.vcard-username.d-block";

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,24 +1,71 @@
 import {
+ HiArrowLeft,
+ HiArrowRight,
  HiArrowTopRightOnSquare,
  HiOutlineQuestionMarkCircle,
  HiPencil,
  HiUserCircle,
 } from "react-icons/hi2";
+import { useEffect, useState } from "react";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 import { useAuth } from "../hooks/useAuth";
 import { useOpensaucedUserCheck } from "../hooks/useOpensaucedUserCheck";
 import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
 import AIPRDescription from "./aiprdescription";
 import PostOnHighlight from "./posthighlight";
-
+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;
+}
+
 
 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();
+ const highlights = userHighlightsData.data;
+
+ setHighlights(highlights);
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
+ void fetchHighlights();
+ }, []);
+
+ const handlePrevious = () => {
+ setCurrentPage(prevPage => prevPage - 1);
+ };
+
+ const handleNext = () => {
+ setCurrentPage(prevPage => prevPage + 1);
+ };
+
+ const formatNameForLink = (name: string): string => name.replace(/\s/g, "");
+
+ useEffect(() => {
+ // Update the current name when the highlight changes
+ if (highlights[currentPage]?.name) {
+ setCurrentName(formatNameForLink(highlights[currentPage].name));
+ }
+ }, [highlights, currentPage]);
+
 
  return (
  <div className="p-4 bg-slate-800">
@@ -50,6 +97,63 @@ const Home = () => {
  </header>
 
  <main className="main-content">
+ <h3 className="text font-medium text-base leading-10">Latest Highlight:</h3>
+
+ {highlights.length > 0 && (
+
+ <div className="border border-white/40 rounded-sm p-3 mt-2">
+ <h3 className="text-base font-medium">
+ <a
+ className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
+ href={highlights[currentPage]?.url}
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ {highlights[currentPage]?.title}
+ </a>
+ </h3>
+
+
+ <div className="flex items-center">
+ <div className="mr-2">Author:</div>
+
+ <a
+ className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
+ href={`https://insights.opensauced.pizza/user/${formatNameForLink(highlights[currentPage]?.name)}`}
+ rel="noopener noreferrer"
+ target="_blank"
+
+
+ >
+ {highlights[currentPage]?.name}
+ </a>
+ </div>
+
+ <p className="py-2">
+ {highlights[currentPage]?.highlight}
+ </p>
+
+ <div className="flex justify-center">
+ <div className="flex justify-center mt-4">
+ <button
+ className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50"
+ disabled={currentPage === 0}
+ onClick={handlePrevious}
+ >
+ <HiArrowLeft />
+ </button>
+
+ <button
+ className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50 ml-4"
+ disabled={currentPage === highlights.length - 1}
+ onClick={handleNext}
+ >
+ <HiArrowRight />
+ </button>
+ </div>
+ </div>
+ </div>)}
+
  <h3 className="text font-medium text-base leading-10">Tools:</h3>
 
  <div className="tools flex flex-col gap-2">

diff --git a/src/utils/fetchOpenSaucedApiData.ts b/src/utils/fetchOpenSaucedApiData.ts
@@ -5,6 +5,7 @@ import {
  OPEN_SAUCED_REPOS_ENDPOINT,
  OPEN_SAUCED_USER_INSIGHTS_ENDPOINT,
  OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT,
+ OPEN_SAUCED_HIGHLIGHTS_ENDPOINT,
 } from "../constants";
 import { IInsight } from "../ts/InsightDto";
 
@@ -177,6 +178,14 @@ export const updateInsight = async (userToken: string, repoId: string, checked:
 
  return response.status === 200;
 };
+export const getHighlights = async () => {
+ const response = await fetch(
+ `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}`,
+ { method: "GET" },
+ );
+
+ return response.json();
+};
 
 export const cerateHighlight = async (userToken: string, url: string, title: string, highlight: string, shipped_at?: string) => fetch(OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT, {
  headers: {