Skip to content

Commit 1b46a68

Browse files
febinbellamyfebinbellamy
committed
Refactor welcome.js and popup.js: Move updateUI and toggleVisibility functions to separate file
1 parent 76bc991 commit 1b46a68

3 files changed

Lines changed: 75 additions & 90 deletions

File tree

‎popup.js‎

Lines changed: 7 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { updateUI } from "./scripts/helperFunctions.js";
2+
13
const authButton = document.querySelector("#authenticate-btn");
24
const authRequestSection = document.querySelector("#authenticate-request");
35
const linkRepoButton = document.querySelector("#link-repo-btn");
@@ -23,46 +25,9 @@ starCodeHubButton.addEventListener("click", () => {
2325
chrome.tabs.create({ url: "http://www.github.com/febinbellamy/codehub" });
2426
});
2527

26-
const toggleVisibility = (section, visible) => {
27-
section.style.display = visible ? "block" : "none";
28-
};
29-
30-
chrome.storage.local.get(
31-
[
32-
"isUserAuthenticated",
33-
"isRepoConnected",
34-
"githubUsername",
35-
"repo",
36-
"directory",
37-
],
38-
(result) => {
39-
const {
40-
isUserAuthenticated,
41-
isRepoConnected,
42-
githubUsername,
43-
repo,
44-
directory,
45-
} = result;
46-
47-
if (!isUserAuthenticated && !isRepoConnected) {
48-
toggleVisibility(linkRepoRequestSection, false);
49-
toggleVisibility(repoConnectedSection, false);
50-
toggleVisibility(authRequestSection, true);
51-
} else if (isUserAuthenticated && !isRepoConnected) {
52-
toggleVisibility(authRequestSection, false);
53-
toggleVisibility(repoConnectedSection, false);
54-
toggleVisibility(linkRepoRequestSection, true);
55-
} else if (isUserAuthenticated && isRepoConnected) {
56-
toggleVisibility(authRequestSection, false);
57-
toggleVisibility(linkRepoRequestSection, false);
58-
toggleVisibility(repoConnectedSection, true);
59-
aTagForRepoUrl.innerHTML = `${githubUsername}/${repo}${
60-
directory ? "/" + decodeURIComponent(directory) : ""
61-
}`;
62-
aTagForRepoUrl.href = `https://github.com/${githubUsername}/${repo}/${
63-
directory ? "tree/main/" + directory : ""
64-
}`;
65-
aTagForRepoUrl.target = "_blank";
66-
}
67-
}
28+
updateUI(
29+
authRequestSection,
30+
linkRepoRequestSection,
31+
repoConnectedSection,
32+
aTagForRepoUrl
6833
);

‎scripts/helperFunctions.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,62 @@ const extractRepoNameAndDirectoryName = (input, idxOfForwardSlash) => {
7676
return { repoName, directoryName };
7777
};
7878

79+
const toggleVisibility = (section, visible) => {
80+
section.style.display = visible ? "block" : "none";
81+
section.style.visibility = visible ? "visible" : "hidden";
82+
};
83+
84+
const updateUI = (
85+
authRequestSection,
86+
linkRepoRequestSection,
87+
repoConnectedSection,
88+
aTagForRepoUrl
89+
) => {
90+
chrome.storage.local.get(
91+
[
92+
"isUserAuthenticated",
93+
"isRepoConnected",
94+
"githubUsername",
95+
"repo",
96+
"directory",
97+
],
98+
(result) => {
99+
const {
100+
isUserAuthenticated,
101+
isRepoConnected,
102+
githubUsername,
103+
repo,
104+
directory,
105+
} = result;
106+
107+
if (!isUserAuthenticated && !isRepoConnected) {
108+
toggleVisibility(linkRepoRequestSection, false);
109+
toggleVisibility(repoConnectedSection, false);
110+
toggleVisibility(authRequestSection, true);
111+
} else if (isUserAuthenticated && !isRepoConnected) {
112+
toggleVisibility(authRequestSection, false);
113+
toggleVisibility(repoConnectedSection, false);
114+
toggleVisibility(linkRepoRequestSection, true);
115+
} else if (isUserAuthenticated && isRepoConnected) {
116+
toggleVisibility(authRequestSection, false);
117+
toggleVisibility(linkRepoRequestSection, false);
118+
toggleVisibility(repoConnectedSection, true);
119+
aTagForRepoUrl.innerHTML = `${githubUsername}/${repo}${
120+
directory ? "/" + decodeURIComponent(directory) : ""
121+
}`;
122+
aTagForRepoUrl.href = `https://github.com/${githubUsername}/${repo}${
123+
directory ? "/tree/main/" + directory : ""
124+
}`;
125+
aTagForRepoUrl.target = "_blank";
126+
}
127+
}
128+
);
129+
};
130+
79131
export {
80132
checkIfRepoExists,
81133
checkIfRepoAndDirectoryExists,
82134
extractRepoNameAndDirectoryName,
135+
toggleVisibility,
136+
updateUI,
83137
};

‎scripts/welcome.js‎

Lines changed: 14 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { updateUI } from "./helperFunctions.js";
2+
13
const authButton = document.querySelector("#authenticate-btn");
24
const authRequestSection = document.querySelector("#authenticate-request");
35
const getStartedButton = document.querySelector("#get-started-btn");
@@ -41,52 +43,6 @@ document.addEventListener("keydown", (event) => {
4143
}
4244
});
4345

44-
const toggleVisibility = (section, visible) => {
45-
section.style.display = visible ? "block" : "none";
46-
section.style.visibility = visible ? "visible" : "hidden";
47-
};
48-
49-
const updateUI = () => {
50-
chrome.storage.local.get(
51-
[
52-
"isUserAuthenticated",
53-
"isRepoConnected",
54-
"githubUsername",
55-
"repo",
56-
"directory",
57-
],
58-
(result) => {
59-
const {
60-
isUserAuthenticated,
61-
isRepoConnected,
62-
githubUsername,
63-
repo,
64-
directory,
65-
} = result;
66-
67-
if (!isUserAuthenticated && !isRepoConnected) {
68-
toggleVisibility(linkRepoRequestSection, false);
69-
toggleVisibility(repoConnectedSection, false);
70-
toggleVisibility(authRequestSection, true);
71-
} else if (isUserAuthenticated && !isRepoConnected) {
72-
toggleVisibility(authRequestSection, false);
73-
toggleVisibility(repoConnectedSection, false);
74-
toggleVisibility(linkRepoRequestSection, true);
75-
} else if (isUserAuthenticated && isRepoConnected) {
76-
toggleVisibility(authRequestSection, false);
77-
toggleVisibility(linkRepoRequestSection, false);
78-
toggleVisibility(repoConnectedSection, true);
79-
aTagForRepoUrl.innerHTML = `${githubUsername}/${repo}${
80-
directory ? "/" + decodeURIComponent(directory) : ""
81-
}`;
82-
aTagForRepoUrl.href = `https://github.com/${githubUsername}/${repo}${
83-
directory ? "/tree/main/" + directory : ""
84-
}`;
85-
}
86-
}
87-
);
88-
};
89-
9046
const displayErrorMessage = (msg) => {
9147
let errorMessage;
9248

@@ -117,10 +73,20 @@ const displayErrorMessage = (msg) => {
11773

11874
chrome.runtime.onMessage.addListener((message) => {
11975
if (message.action === "updateUI") {
120-
updateUI();
76+
updateUI(
77+
authRequestSection,
78+
linkRepoRequestSection,
79+
repoConnectedSection,
80+
aTagForRepoUrl
81+
);
12182
} else if (message.action === "displayErrorMessage") {
12283
displayErrorMessage(message);
12384
}
12485
});
12586

126-
updateUI();
87+
updateUI(
88+
authRequestSection,
89+
linkRepoRequestSection,
90+
repoConnectedSection,
91+
aTagForRepoUrl
92+
);

0 commit comments

Comments
 (0)