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]>

Author: 3 people

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";

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">

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: {