fix: Linting suggestion refactors and fixes.

open-sauced · Apr 29, 2023 · ead7197 · ead7197
1 parent 7fa3b3b
commit ead7197
Show file tree

Hide file tree

Showing 14 changed files with 153 additions and 141 deletions.
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
@@ -0,0 +1,2 @@
+# Ran ESLint formatter(--fix)
+7fa3b3bb0ed3e493ab4a6dd0a5ff13e185417f02
diff --git a/src/content-scripts/profileScreen.ts b/src/content-scripts/profileScreen.ts
@@ -7,7 +7,7 @@ import { prefersDarkMode } from "../utils/colorPreference";
 const processProfilePage = async () => {
   const username = getGithubUsername(window.location.href);
 
-  if (username != null) {
+  if (username) {
     const darkMode = prefersDarkMode(document.cookie);
 
     if (darkMode) {
@@ -25,8 +25,8 @@ const processProfilePage = async () => {
 
 chrome.runtime.onMessage.addListener(request => {
   if (request.message === "GITHUB_URL_CHANGED") {
-    processProfilePage();
+    void processProfilePage();
   }
 });
 
-processProfilePage();
+void processProfilePage();
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -2,44 +2,44 @@ import { useEffect, useState } from "react";
 import { OPEN_SAUCED_AUTH_TOKEN_KEY, OPEN_SAUCED_SESSION_ENDPOINT } from "../constants";
 import { cachedFetch } from "../utils/cache";
 
-const removeTokenFromStorage = async () => new Promise((resolve, reject) => {
-    chrome.storage.sync.remove(OPEN_SAUCED_AUTH_TOKEN_KEY, () => {
-      resolve(true);
-    });
+const removeTokenFromStorage = async () => new Promise(resolve => {
+  chrome.storage.sync.remove(OPEN_SAUCED_AUTH_TOKEN_KEY, () => {
+    resolve(true);
   });
+});
 
 export const useAuth = () => {
   const [authToken, setAuthToken] = useState<null | string>(null);
   const [user, setUser] = useState<null | { id: string, user_name: string }>(null);
   const [isTokenValid, setIsTokenValid] = useState<boolean|null>(null);
 
   useEffect(() => {
-    chrome.storage.sync.get([OPEN_SAUCED_AUTH_TOKEN_KEY], result => {
+    chrome.storage.sync.get([OPEN_SAUCED_AUTH_TOKEN_KEY], async result => {
       if (result[OPEN_SAUCED_AUTH_TOKEN_KEY]) {
         setAuthToken(result[OPEN_SAUCED_AUTH_TOKEN_KEY]);
 
-        // get account data
-        cachedFetch(OPEN_SAUCED_SESSION_ENDPOINT, {
-          expireInSeconds: 2 * 60 * 60, // 2 hours
+        const resp = await cachedFetch(OPEN_SAUCED_SESSION_ENDPOINT, {
+          expireInSeconds: 2 * 60 * 60,
           headers: {
             Authorization: `Bearer ${result[OPEN_SAUCED_AUTH_TOKEN_KEY]}`,
             Accept: "application/json",
           },
-        }).then(async resp => {
-          if (!resp.ok) {
-            console.log("error getting user info");
-            removeTokenFromStorage().then(() => {
-              setAuthToken(null);
-              setUser(null);
-              setIsTokenValid(false);
-            });
-          }
-          return resp.json();
-        })
-          .then(json => {
-            setUser(json);
-            setIsTokenValid(true);
-          });
+        });
+
+        if (!resp?.ok) {
+          removeTokenFromStorage().then(() => {
+            setAuthToken(null);
+            setUser(null);
+            setIsTokenValid(false);
+            return null;
+          })
+            .catch(console.error);
+        } else {
+          const json = await resp.json();
+
+          setUser(json);
+          setIsTokenValid(true);
+        }
       } else {
         setIsTokenValid(false);
       }

diff --git a/src/hooks/useOpensaucedUserCheck.ts b/src/hooks/useOpensaucedUserCheck.ts
@@ -7,13 +7,12 @@ export const useOpensaucedUserCheck = () => {
   const [checkedUser, setCheckedUser] = useState<string|null>(null);
 
   useEffect(() => {
-    // get active tab
     chrome.tabs.query({ active: true, currentWindow: true }, async tabs => {
       if (tabs.length > 0) {
         const tab = tabs[0];
         const username = getGithubUsername(tab.url!);
 
-        if (username != null) {
+        if (username) {
           setCheckedUser(username);
           setCurrentTabIsOpensaucedUser(await isOpenSaucedUser(username));
         } else {

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { HiArrowTopRightOnSquare, HiUserCircle } from "react-icons/hi2";
 import { RouteContext } from "../App";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
@@ -22,14 +22,14 @@ const Home = () => {
         {user &&
           <button
             className="flex gap-1 items-center hover:text-orange text-white no-underline"
-            onClick={e => {
+            onClick={() => {
               setCurrentPage("profile", { userName: user.user_name });
             }}
           >
             {user.user_name}
 
             <img
-              alt="profile image"
+              alt="User avatar"
               className="rounded-full w-6 aspect-square border border-orange"
               src={`https://github.com/${user.user_name}.png`}
             />
@@ -62,20 +62,20 @@ const Home = () => {
 
           {
             currentTabIsOpensaucedUser &&
-            <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={e => {
-                setCurrentPage("profile", { userName: checkedUser });
-              }}
-            >
+              <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={() => {
+                  setCurrentPage("profile", { userName: checkedUser });
+                }}
+              >
                 <HiUserCircle />
                 View
 
-{" "}
+                {" "}
 
-{checkedUser}
-'s profile
-            </button>
+                {checkedUser}
+                &apos;s profile
+              </button>
           }
         </div>
       </main>

diff --git a/src/pages/loading.tsx b/src/pages/loading.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 const Loading = () => (
     <div>
       <p className="text-white">Loading...</p>

diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
@@ -32,16 +32,16 @@ export const Profile = () => {
   const [user, setUser] = useState<null | { id: string, user_name: string, bio: string, created_at: string, linkedin_url: string, twitter_username: string, blog: string, interests: string, open_issues: number }>(null);
   const [userPR, setUserPR] = useState<null | { meta: { itemCount: number } }>(null);
 
-useEffect(() => {
+  useEffect(() => {
     const fetchUserData = async () => {
-        const [userData, userPRData] = await Promise.all([getUserData(page.props.userName), getUserPRData(page.props.userName)]);
+      const [userData, userPRData] = await Promise.all([getUserData(page.props.userName), getUserPRData(page.props.userName)]);
 
-        setUser(userData);
-        setUserPR(userPRData);
+      setUser(userData);
+      setUserPR(userPRData);
     };
 
-    fetchUserData();
-}, []);
+    void fetchUserData();
+  }, []);
 
 
   return (
@@ -51,8 +51,8 @@ useEffect(() => {
           <button
             className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
             onClick={() => {
- setCurrentPage("home");
-}}
+              setCurrentPage("home");
+            }}
           >
             <FaChevronLeft className="text-osOrange" />
           </button>
@@ -81,14 +81,14 @@ useEffect(() => {
       <main>
         <div className="flex flex-col items-center gap-1 mb-4">
           <img
-            alt="profile image"
+            alt="User avatar"
             className="rounded-full w-14 aspect-square p-1 bg-slate-700"
             src={`https://github.com/${page.props.userName}.png`}
           />
 
           <p className="font-medium">
-@
-{page.props.userName}
+            @
+            {page.props.userName}
           </p>
 
           {(user?.linkedin_url || user?.twitter_username) &&
@@ -117,7 +117,7 @@ useEffect(() => {
             </div>}
 
           {user?.bio && <span>
-{user.bio}
+            {user.bio}
                         </span>}
 
           {user?.blog &&
@@ -138,15 +138,15 @@ useEffect(() => {
             <p>Open Issues</p>
 
             <p className="font-medium text-5xl">
-{user?.open_issues}
+              {user?.open_issues}
             </p>
           </div>
 
           <div className="flex flex-col items-center justify-center p-2 text-xs">
             <p>PRs Made</p>
 
             <p className="font-medium text-5xl">
-{userPR?.meta.itemCount}
+              {userPR?.meta.itemCount}
             </p>
           </div>
 
@@ -164,27 +164,27 @@ useEffect(() => {
         </div>
 
         <div>
-            <h2 className="font-medium text-lg mb-2">Current Interest</h2>
+          <h2 className="font-medium text-lg mb-2">Current Interest</h2>
 
-            <div
-              className="flex gap-1.5"
-              style={{ flexWrap: "wrap" }}
-            >
-              {user?.interests.split(",").map(interest => (
-                <a
-                  key={interest}
-                  className="flex gap-1 items-center p-1.5 px-4 rounded-full bg-slate-700 hover:bg-slate-700/50"
-                  href={`https://insights.opensauced.pizza/${interest}/dashboard/filter/recent`}
-                  rel="noreferrer"
-                  target="_blank"
-                  title={`https://insights.opensauced.pizza/${interest}/dashboard/filter/recent`}
-                >
-                  {interestIcon[interest as InterestIconKeys] ?? null}
-
-                  {interest}
-                </a>
-              ))}
-            </div>
+          <div
+            className="flex gap-1.5"
+            style={{ flexWrap: "wrap" }}
+          >
+            {user?.interests.split(",").map(interest => (
+              <a
+                key={interest}
+                className="flex gap-1 items-center p-1.5 px-4 rounded-full bg-slate-700 hover:bg-slate-700/50"
+                href={`https://insights.opensauced.pizza/${interest}/dashboard/filter/recent`}
+                rel="noreferrer"
+                target="_blank"
+                title={`https://insights.opensauced.pizza/${interest}/dashboard/filter/recent`}
+              >
+                {interestIcon[interest as InterestIconKeys]}
+
+                {interest}
+              </a>
+            ))}
+          </div>
         </div>
       </main>
     </div>

diff --git a/src/utils/cache.ts b/src/utils/cache.ts
@@ -2,10 +2,10 @@ export const cachedFetch = async (
   url: string,
   options:
     | number
-    | (RequestInit & { expireInSeconds: number; forceRefresh?: boolean })
+    | (RequestInit & { expireInSeconds?: number; forceRefresh?: boolean })
     | undefined,
 ) => {
-  let expiry = 5 * 60; // 5 min default
+  let expiry = 5 * 60;
 
   if (typeof options === "number") {
     expiry = options;
@@ -26,24 +26,22 @@ export const cachedFetch = async (
 
       return Promise.resolve(response);
     }
-      chrome.storage.local.remove(cacheKey);
-      chrome.storage.local.remove(`${cacheKey}:ts`);
+    void chrome.storage.local.remove(cacheKey);
+    void chrome.storage.local.remove(`${cacheKey}:ts`);
   }
 
-  return fetch(url, options).then(response => {
+  return fetch(url, options).then(async response => {
     if (response.status === 200) {
       const ct = response.headers.get("Content-Type");
 
-      if (ct && ct.match(/(application\/json|text\/.*)/i)) {
-        response
-          .clone()
-          .text()
-          .then(content => {
-            chrome.storage.local.set({ [cacheKey]: content });
-            chrome.storage.local.set({ [`${cacheKey}:ts`]: Date.now() });
-          });
+      if (ct?.match(/(application\/json|text\/.*)/i)) {
+        const content = await response.clone().text();
+
+        void chrome.storage.local.set({ [cacheKey]: content });
+        void chrome.storage.local.set({ [`${cacheKey}:ts`]: Date.now() });
       }
     }
     return response;
-  });
+  })
+.catch(console.error);
 };
diff --git a/src/utils/createHtmlElement.ts b/src/utils/createHtmlElement.ts
@@ -12,9 +12,9 @@ export function createHtmlElement<T extends keyof HTMLElementTagNameMap> (
   props: ElementProps,
 ) {
   const { style, ...nonStyleProps } = props;
-  const element = Object.assign(document.createElement(nodeName), props);
+  const element = Object.assign(document.createElement(nodeName), nonStyleProps);
 
-  if (style != undefined) {
+  if (style !== undefined) {
  Object.entries(style).forEach(([key, value]) => {
       element.style[key as CssDeclaration] = value;
     });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Ran ESLint formatter(--fix)
		7fa3b3bb0ed3e493ab4a6dd0a5ff13e185417f02