From 675496cc3b3cbbb214c0ea77e49a059bc5ba6d7c Mon Sep 17 00:00:00 2001
From: Anush008 <anushshetty90@gmail.com>
Date: Sat, 13 May 2023 16:47:10 +0530
Subject: [PATCH] fix: circular-deps in vote buttons

---
 .../components/RepoVoting/RepoUnvoteButton.ts             | 7 +++----
 .../components/RepoVoting/RepoVoteButton.ts               | 8 +++-----
 src/utils/fetchOpenSaucedApiData.ts                       | 4 ++--
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts b/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts
index c82c124f..aed7ba10 100644
--- a/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts
+++ b/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts
@@ -20,12 +20,11 @@ export const RepoUnvoteButton = (ownerName: string, repoName: string) => {
     `;
     const userToken = await getAuthToken();
 
-    const unvoted = await voteOrUnvoteRepo(userToken, ownerName, repoName, false);
+    const unvoted = await voteOrUnvoteRepo(userToken, ownerName, repoName, "DELETE");
 
     if (unvoted) {
-      const voteRepoButton = VoteRepoButton(ownerName, repoName);
-
-      repoUnvoteButton.replaceWith(voteRepoButton);
+      const { VoteRepoButton } = await import("./RepoVoteButton");
+      repoUnvoteButton.replaceWith(VoteRepoButton(ownerName, repoName));
     } else {
       console.log("Something went wrong");
     }
diff --git a/src/content-scripts/components/RepoVoting/RepoVoteButton.ts b/src/content-scripts/components/RepoVoting/RepoVoteButton.ts
index a2bb43d7..b22dfd34 100644
--- a/src/content-scripts/components/RepoVoting/RepoVoteButton.ts
+++ b/src/content-scripts/components/RepoVoting/RepoVoteButton.ts
@@ -1,7 +1,6 @@
 import "../../content-scripts.css";
 import { createHtmlElement } from "../../../utils/createHtmlElement";
 import { getAuthToken } from "../../../utils/checkAuthentication";
-import { RepoUnvoteButton } from "./RepoUnvoteButton";
 import { voteOrUnvoteRepo } from "../../../utils/fetchOpenSaucedApiData";
 
 export const VoteRepoButton = (ownerName: string, repoName: string) => {
@@ -20,12 +19,11 @@ export const VoteRepoButton = (ownerName: string, repoName: string) => {
     `;
     const userToken = await getAuthToken();
 
-    const voted = await voteOrUnvoteRepo(userToken, ownerName, repoName, true);
+    const voted = await voteOrUnvoteRepo(userToken, ownerName, repoName, "PUT");
 
     if (voted) {
-      const unvoteRepoButton = RepoUnvoteButton(ownerName, repoName);
-
-      voteRepoButton.replaceWith(unvoteRepoButton);
+      const { RepoUnvoteButton } = await import("./RepoUnvoteButton");
+      voteRepoButton.replaceWith(RepoUnvoteButton(ownerName, repoName));
     } else {
       console.log("Something went wrong");
     }
diff --git a/src/utils/fetchOpenSaucedApiData.ts b/src/utils/fetchOpenSaucedApiData.ts
index 28685fb1..78dfd14e 100644
--- a/src/utils/fetchOpenSaucedApiData.ts
+++ b/src/utils/fetchOpenSaucedApiData.ts
@@ -88,11 +88,11 @@ export const repoExistsOnOpenSauced = async (ownerName: string, repoName: string
   return response.status === 200;
 };
 
-export const voteOrUnvoteRepo = async (userToken: string, ownerName: string, repoName: string, vote: boolean) => {
+export const voteOrUnvoteRepo = async (userToken: string, ownerName: string, repoName: string, method: "PUT" | "DELETE") => {
   const response = await fetch(
     `${OPEN_SAUCED_REPOS_ENDPOINT}/${ownerName}/${repoName}/vote`,
     {
-      method: vote ? "PUT" : "DELETE",
+      method,
       headers: { Authorization: `Bearer ${userToken}` },
     },
   );