fix: Made the "Tools:" conditional according to the current page (#197)

* issue#112 resolved. submitting for review * issue#112 resolved. submitting for review * profile.tsx added line 59 * shifted the function & interface to dateUtils.ts * shited the function to getContributedRepos.ts * Update src/popup/pages/profile.tsx Co-authored-by: Brian Douglas <[email protected]> * Update src/utils/getContributedRepos.ts Co-authored-by: Brian Douglas <[email protected]> * Update src/utils/getContributedRepos.ts Co-authored-by: Brian Douglas <[email protected]> * Update src/utils/getContributedRepos.ts Co-authored-by: Brian Douglas <[email protected]> * Update src/popup/pages/profile.tsx Co-authored-by: Brian Douglas <[email protected]> * Update src/utils/getContributedRepos.ts Co-authored-by: Brian Douglas <[email protected]> * removed eslint from the loop * add semicolon to pass lint check * made the Tools conditional * added trailing comma to home.txt 37 35 * ran "npm run format" (i hate lint) * added useRef and made suitable changes --------- Co-authored-by: Brian Douglas <[email protected]> Co-authored-by: Divyansh Singh <[email protected]>
open-sauced · Jun 29, 2023 · b08ad07 · b08ad07
1 parent f2c55fa
commit b08ad07
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
@@ -18,7 +18,7 @@ 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 { useEffect, useState, useRef } from "react";
 import Settings from "./settings";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
 import type { Highlight } from "../../ts/types";
@@ -31,6 +31,7 @@ const Home = () => {
     const { prUrl: pageURL, prTitle, type: GitHubPageType } = usGetGitHubPageInfo();
     const [highlights, setHighlights] = useState<Highlight[]>([]);
     const [emojis, setEmojis] = useState<Record<string, string>[]>([]);
+    const toolsRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         const fetchHighlights = async () => {
@@ -112,7 +113,7 @@ const Home = () => {
                         rel="noreferrer"
                         target="_blank"
                     >
-                            Highlights feed
+                        Highlights feed
                         <HiArrowTopRightOnSquare />
                     </a>
 
@@ -137,10 +138,12 @@ const Home = () => {
                         </Swiper>
                     )}
 
+                    {Boolean(toolsRef.current?.children.length) && <h3 className="text font-medium text-base leading-10">Tools:</h3>}
 
-                    <h3 className="text font-medium text-base leading-10">Tools:</h3>
-
-                    <div className="tools flex flex-col gap-2">
+                    <div
+                        ref={toolsRef}
+                        className="tools flex flex-col gap-2"
+                    >
 
                         {GitHubPageType === "REPO" && (
                             <button