fix: add repo button in manage repo page

components/user/UserRepos.js

@@ -13,7 +13,6 @@ import ArrowPathIcon from "@heroicons/react/24/outline/ArrowPathIcon";
 import Button from "@components/Button";
 
 export default function UserRepos({ manage = false, confirmDelete, repos }) {
-
   const [reposList, setReposList] = useState(repos || []);
   const [reorder, setReorder] = useState(false);
   const [reposListPrevious, setReposListPrevious] = useState(repos || []);
@@ -31,14 +30,12 @@ export default function UserRepos({ manage = false, confirmDelete, repos }) {
     setReposListPrevious(updatedRepos);
     setReorder(false);
   };
-  useEffect(()=>{
-    setReposList(repos)
-  },[repos]);
+  useEffect(() => {
+    setReposList(repos);
+  }, [repos]);
 
-
   const item = (repo) => (
     <div className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-primary-low dark:hover:bg-primary-medium transition-all duration-100 sm:px-6 lg:px-8">
-
       <div className="flex gap-x-4">
         <FallbackImage
           className="h-12 w-12 flex-none rounded-full bg-primary-low"
@@ -111,8 +108,8 @@ export default function UserRepos({ manage = false, confirmDelete, repos }) {
 
   return (
     <>
-    <div className="flex gap-4">
-    {!reorder && manage && (
+      <div className="flex gap-4">
+        {!reorder && manage && (
           <Button
             onClick={() => setReorder(true)}
             disabled={reposList.length < 2}
@@ -132,24 +129,24 @@ export default function UserRepos({ manage = false, confirmDelete, repos }) {
           </Button>
         )}
         {reorder && (
-            <Button primary={true} onClick={() => saveOrder()}>
-              SAVE
-            </Button>
-          )}
-    </div>
+          <Button primary={true} onClick={() => saveOrder()}>
+            SAVE
+          </Button>
+        )}
+      </div>
       <ReactSortable
-          list={reposList}
-          setList={setReposList}
-          disabled={!reorder}
-          tag="ul"
-          ghostClass="border-2"
-          chosenClass="border-dashed"
-          dragClass="border-red-500"
-          className="divide-y divide-primary-low"
-        >
-      {reposList.map((repo) => (
-        <li key={repo._id}>{manage ? manageDelete(repo) : item(repo)}</li>
-      ))}
+        list={reposList}
+        setList={setReposList}
+        disabled={!reorder}
+        tag="ul"
+        ghostClass="border-2"
+        chosenClass="border-dashed"
+        dragClass="border-red-500"
+        className="divide-y divide-primary-low"
+      >
+        {reposList.map((repo) => (
+          <li key={repo._id}>{manage ? manageDelete(repo) : item(repo)}</li>
+        ))}
       </ReactSortable>
     </>
   );

pages/account/manage/repos.js

@@ -73,6 +73,7 @@ export default function ManageRepos({ BASE_URL, repos }) {
     const listRepos = await resRepos.json();
     setRepoList(listRepos);
     setUrl("");
+    setIsDisabled(false);
     return setShowNotification({
       show: true,
       type: "success",

pages/api/account/manage/repos.js

@@ -8,16 +8,16 @@ import Profile from "@models/Profile";
 export default async function handler(req, res) {
   const session = await getServerSession(req, res, authOptions);
 
-  if(!["GET","PATCH"].includes(req.method)){
+  if (!["GET", "PATCH"].includes(req.method)) {
     return res.status(400).json({ error: "Invalid request: GET required" });
   }
 
   const username = session.username;
   let data = [];
-  if(req.method === "GET"){
+  if (req.method === "GET") {
     data = await getReposApi(username);
   }
-  if(req.method === "PATCH"){
+  if (req.method === "PATCH") {
     data = await updateReposOrderApi(username, req.body);
   }
 
@@ -28,9 +28,9 @@ export async function updateReposOrderApi(username, data) {
   await connectMongo();
   const log = logger.child({ username });
 
-  const repoList =  data.map(async (repo, idx) => {
+  const repoList = data.map(async (repo, idx) => {
     try {
-      return  Profile.findOneAndUpdate(
+      return Profile.findOneAndUpdate(
         {
           username,
           "repos._id": repo._id,
@@ -46,9 +46,9 @@ export async function updateReposOrderApi(username, data) {
     }
   });
 
-  const repos = await Promise.allSettled(repoList).then(() => { 
+  const repos = await Promise.allSettled(repoList).then(() => {
     return getReposApi(username);
-  })
+  });
 
   return JSON.parse(JSON.stringify(repos));
 }