Implement option to hide Sponsors (#183)

* Implement option hide Sponsors

* `dprint fmt`

* Fix crucial typo

* Fix crucial typo more

* Update screenshot for options

README.md

@@ -34,8 +34,9 @@ Some features can be hidden by enabling them on the [Options page](https://devel
 - Pinned Repositories
 - "Explore repositories" and/or the stars
 - Sponsors
-- Achievements # 0.0.0.13+
-- Highlights # 0.0.0.13+
+- Sponsoring
+- Achievements
+- Highlights
 
 ### Suppressible third party stats
 

src/github-patcher.ts

@@ -18,6 +18,7 @@ const hideExploreRepositories = (): void => {
   }
 };
 
+// Sponsor: Received from
 const hideSponsors = (): void => {
   const sponsorsH2Node = document.evaluate(
     "/html/body//div[@class='Layout-sidebar']//h2[text()='Sponsors']",
@@ -34,6 +35,23 @@ const hideSponsors = (): void => {
   }
 };
 
+// Sponsoring: Paid for
+const hideSponsoring = (): void => {
+  const sponsoring2Node = document.evaluate(
+    "/html/body//div[@class='Layout-sidebar']//h2[text()='Sponsoring']",
+    document,
+    null,
+    XPathResult.FIRST_ORDERED_NODE_TYPE,
+    null,
+  ).singleNodeValue;
+
+  const sponsoringComponent = sponsoring2Node?.parentElement?.parentElement;
+
+  if (sponsoringComponent) {
+    hide(sponsoringComponent);
+  }
+};
+
 const hideHighlights = (): void => {
   const highlightsH2Node = document.evaluate(
     "/html/body//div[@class='Layout-sidebar']//h2[text()='Highlights']",
@@ -53,15 +71,22 @@ const hideComponents = (): void => {
   chrome.storage.sync.get([
     'isHideExploreRepositories',
     'isHideSponsors',
-  ]).then(({ isHideExploreRepositories, isHideSponsors }): void => {
-    if (isHideExploreRepositories) {
-      hideExploreRepositories();
-    }
+    'isHideSponsoring',
+  ]).then(
+    ({ isHideExploreRepositories, isHideSponsors, isHideSponsoring }): void => {
+      if (isHideExploreRepositories) {
+        hideExploreRepositories();
+      }
+
+      if (isHideSponsors) {
+        hideSponsors();
+      }
 
-    if (isHideSponsors) {
-      hideSponsors();
-    }
-  });
+      if (isHideSponsoring) {
+        hideSponsoring();
+      }
+    },
+  );
 
   hideHighlights();
 };

src/options/App.tsx

@@ -12,16 +12,22 @@ function App() {
     isHideSponsors,
     setIsHideSponsors,
   ] = useState(false);
+  const [
+    isHideSponsoring,
+    setIsHideSponsoring,
+  ] = useState(false);
 
   useEffect(() => {
     chrome.storage.sync.get([
       'isHideExploreRepositories',
       'isHideSponsors',
+      'isHideSponsoring',
     ]).then((keys): void => {
       setIsHideExploreRepositories(
         keys.isHideExploreRepositories,
       );
       setIsHideSponsors(keys.isHideSponsors);
+      setIsHideSponsoring(keys.isHideSponsoring);
     }).finally(() => setIsLoading(false));
   }, []);
 
@@ -89,6 +95,35 @@ function App() {
           Hide the section in left-sidebar if enabled this option
         </p>
       </div>
+      <div className='form-checkbox'>
+        <label>
+          <input
+            type='checkbox'
+            checked={isHideSponsoring}
+            aria-describedby='help-text-for-isHideSponsoring-checkbox'
+            onChange={(_ev) => {
+              const toggled = !isHideSponsoring;
+              setIsHideSponsoring(
+                toggled,
+              );
+              chrome.storage.sync.set({
+                'isHideSponsoring': toggled,
+              }).then(() => {
+                console.log(
+                  `isHideSponsoring is set to ${toggled}`,
+                );
+              });
+            }}
+          />
+          Hide "Sponsoring"
+        </label>
+        <p
+          className='note'
+          id='help-text-for-isHideSponsoring-checkbox'
+        >
+          Hide the section in left-sidebar if enabled this option
+        </p>
+      </div>
     </form>
   );
 }