fix: avoid duplicate repos (#1464)

fixes #1460
fixes #1462

src/components/AddRepoForm.jsx

@@ -10,6 +10,7 @@ import {ErrorMessage} from "../styles/Typography";
 
 function AddRepoForm({goalsId, onGoalAdded, goals}) {
   const urlRef = useRef(null);
+  const submitBtnRef = useRef(null);
   const [error, setError] = useState(null);
 
   const _handleGoalCreation = async(event) => {
@@ -21,8 +22,8 @@ function AddRepoForm({goalsId, onGoalAdded, goals}) {
     }
 
     const [isValid, repoUrl] = isValidRepoUrl(urlRef.current.value.replace(/\s+/g, ""));
-    const statusCode = await repoStatusCode(repoUrl);
-    const goalExists = goals.nodes.find(goal => goal.full_name === repoUrl);
+    const [statusCode, newFullName] = await repoStatusCode(repoUrl);
+    const goalExists = goals.nodes.find(goal => goal.full_name.toLowerCase() === repoUrl);
 
     if (!isValid) {
       urlRef.current.focus();
@@ -43,10 +44,12 @@ function AddRepoForm({goalsId, onGoalAdded, goals}) {
     }
 
     if (statusCode === 301) {
+      urlRef.current.value = newFullName;
       urlRef.current.focus();
-      setError("Repository has been moved to another location!");
+      setError(`Repository has been renamed to ${newFullName} and we have changed the input below.`);
       return;
     }
+    submitBtnRef.current.disabled = true;
     api
       .createGoal(goalsId, repoUrl, null)
       .then(response => {
@@ -55,7 +58,10 @@ function AddRepoForm({goalsId, onGoalAdded, goals}) {
         urlRef.current.focus();
         setError(null);
       })
-      .catch(e => console.error(e));
+      .catch(e => console.error(e))
+      .finally(() => {
+        submitBtnRef.current.disabled = false;
+      });
   };
 
   return (
@@ -64,7 +70,7 @@ function AddRepoForm({goalsId, onGoalAdded, goals}) {
         {error && <ErrorMessage>{error}</ErrorMessage>}
         <Flex>
           <Input aria-label="repo name with owner" type="text" ref={urlRef} placeholder="owner/repo" />
-          <InputButton type="submit" primary>
+          <InputButton type="submit" ref={submitBtnRef} primary>
             Add
           </InputButton>
         </Flex>

src/lib/repoStatusCode.js

@@ -1,10 +1,10 @@
 export async function repoStatusCode(repoUrl) {
   const apiRepoUrl = `https://api.github.com/repos/${repoUrl}`;
   const response = await fetch(apiRepoUrl);
-
+  const {full_name} = await response.json();
   if (apiRepoUrl !== response.url) {
-    return 301;
+    return [301, full_name];
   } else {
-    return response.status;
+    return [response.status,""];
   }
 }

src/lib/repoStatusCode.test.js

@@ -3,19 +3,26 @@ import {repoStatusCode} from "./repoStatusCode";
 describe("Test: repoStatusCode()", () => {
   test("github/gh-ost should return 200", async() => {
     const repoUrl = "github/gh-ost";
-    const result = await repoStatusCode(repoUrl);
+    const [result] = await repoStatusCode(repoUrl);
     expect(result).toBe(200);
   });
 
   test("github/ghost should return 404", async() => {
     const repoUrl = "github/ghost";
-    const result = await repoStatusCode(repoUrl);
+    const [result] = await repoStatusCode(repoUrl);
     expect(result).toBe(404);
   });
 
-  test("bdougie/open-sauced should return 200", async() => {
+  test("open-sauced/open-sauced should return 200", async() => {
     const repoUrl = "open-sauced/open-sauced";
-    const result = await repoStatusCode(repoUrl);
+    const [result] = await repoStatusCode(repoUrl);
     expect(result).toBe(200);
   });
+
+  test("finitesingularity/tau should return 301", async() => {
+    const repoUrl = "finitesingularity/tau";
+    const [result, newFullName] = await repoStatusCode(repoUrl);
+    expect(result).toBe(301);
+    expect(newFullName).toBe("Team-TAU/tau");
+  });
 });

src/styles/Button.jsx

@@ -42,6 +42,8 @@ const Button = styled.button`
   }
 
   &:disabled {
+    background: ${colors.lighterGrey};
+    color: ${colors.darkestGrey};
     cursor: not-allowed;
   }
 `;