Add the possibility to reorder the repositories

components/user/UserRepos.js

@@ -6,10 +6,39 @@ import StarIcon from "@heroicons/react/20/solid/StarIcon";
 import PencilIcon from "@heroicons/react/20/solid/PencilIcon";
 import ExclamationCircleIcon from "@heroicons/react/20/solid/ExclamationCircleIcon";
 import dateFormat from "@services/utils/dateFormat";
+import { ReactSortable } from "react-sortablejs";
+import { useState, useEffect } from "react";
+import { clientEnv } from "@config/schemas/clientSchema";
+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 || []);
+  const saveOrder = async () => {
+    const BASE_URL = clientEnv.NEXT_PUBLIC_BASE_URL;
+    const res = await fetch(`${BASE_URL}/api/account/manage/repos`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(reposList),
+    });
+    const updatedRepos = await res.json();
+    setReposList(updatedRepos);
+    setReposListPrevious(updatedRepos);
+    setReorder(false);
+  };
+  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"
@@ -81,10 +110,47 @@ export default function UserRepos({ manage = false, confirmDelete, repos }) {
   );
 
   return (
-    <ul role="list" className="divide-y divide-primary-low">
-      {repos.map((repo) => (
+    <>
+    <div className="flex gap-4">
+    {!reorder && (
+          <Button
+            onClick={() => setReorder(true)}
+            disabled={reposList.length < 2}
+          >
+            <ArrowPathIcon className="h-5 w-5 mr-2" />
+            REORDER
+          </Button>
+        )}
+        {reorder && (
+          <Button
+            onClick={() => {
+              setReorder(false);
+              setReposList(reposListPrevious);
+            }}
+          >
+            CANCEL
+          </Button>
+        )}
+        {reorder && (
+            <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>
       ))}
-    </ul>
+      </ReactSortable>
+    </>
   );
 }

models/Profile/Repo.js

@@ -7,6 +7,7 @@ const RepoSchema = new Schema({
     min: 2,
     max: 256,
   },
+  order: Number,
   name: {
     type: String,
     required: true,

pages/account/manage/repos.js

@@ -59,7 +59,6 @@ export default function ManageRepos({ BASE_URL, repos }) {
       body: JSON.stringify({ url }),
     });
     const updatedRepos = await res.json();
-
     if (updatedRepos.message) {
       setIsDisabled(false);
       return setShowNotification({
@@ -72,7 +71,7 @@ export default function ManageRepos({ BASE_URL, repos }) {
 
     const resRepos = await fetch(`${BASE_URL}/api/account/manage/repos`);
     const listRepos = await resRepos.json();
-
+    console.log(listRepos);
     setRepoList(listRepos);
     setUrl("");
     return setShowNotification({

pages/api/account/manage/repos.js

@@ -8,15 +8,51 @@ import Profile from "@models/Profile";
 export default async function handler(req, res) {
   const session = await getServerSession(req, res, authOptions);
 
-  if (req.method !== "GET") {
+  if(!["GET","PATCH"].includes(req.method)){
     return res.status(400).json({ error: "Invalid request: GET required" });
   }
 
-  const data = await getReposApi(session.username);
+  const username = session.username;
+  let data = [];
+  if(req.method === "GET"){
+    data = await getReposApi(username);
+  }
+  if(req.method === "PATCH"){
+    data = await updateReposOrderApi(username, req.body);
+  }
 
   return res.status(200).json(data);
 }
 
+export async function updateReposOrderApi(username, data) {
+  await connectMongo();
+  const log = logger.child({ username });
+
+  const repoList =  data.map(async (repo, idx) => {
+    try {
+      return  Profile.findOneAndUpdate(
+        {
+          username,
+          "repos._id": repo._id,
+        },
+        {
+          $set: {
+            "repos.$.order": idx,
+          },
+        },
+      );
+    } catch (e) {
+      log.error(e, `failed to update repo order for username: ${username}`);
+    }
+  });
+
+  const repos = await Promise.allSettled(repoList).then(() => { 
+    return getReposApi(username);
+  })
+
+  return JSON.parse(JSON.stringify(repos));
+}
+
 export async function getReposApi(username) {
   await connectMongo();
   const log = logger.child({ username });
@@ -38,12 +74,11 @@ export async function getReposApi(username) {
         },
       },
       {
-        $sort: { date: 1 },
+        $sort: { order: 1 },
       },
     ]);
   } catch (e) {
     log.error(e, `failed to get repos for username: ${username}`);
   }
-
   return JSON.parse(JSON.stringify(getRepos));
 }