From c02860c28a3778e5770d2923c950f491abe599e9 Mon Sep 17 00:00:00 2001
From: Mahdi Ghajary <mahdighajary@gmail.com>
Date: Thu, 16 Nov 2023 19:32:28 +0330
Subject: [PATCH] Simplify the edit process

---
 .../OverallRankingRow/EditManualModal.tsx     |  6 +++---
 .../RankingConfirmationModal/index.tsx        | 21 +++++++++++--------
 src/pages/ranking/index.tsx                   | 10 ++++++---
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/Poll/Rankings/OverallRankingRow/EditManualModal.tsx b/src/components/Poll/Rankings/OverallRankingRow/EditManualModal.tsx
index 55b695b..45dd297 100644
--- a/src/components/Poll/Rankings/OverallRankingRow/EditManualModal.tsx
+++ b/src/components/Poll/Rankings/OverallRankingRow/EditManualModal.tsx
@@ -15,18 +15,18 @@ export const EditManualModal: React.FC<Props> = ({
   const handleOkClick = async () => {
     if (!collectionId) return
     await finishCollections(collectionId)
-    window.location.href = `/ranking?c=${collectionId}`
+    window.location.href = `/ranking?c=${collectionId}&edit=true`
   }
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="flex w-96 flex-col gap-5 font-IBM">
+      <div className="flex flex-col gap-5 w-96 font-IBM">
         <p className="text-2xl font-bold">Warning</p>
         <p>
           After making manual edits to a category you can&apos;t do any more
           pairwise rankings for that category.
         </p>
-        <div className="flex w-full justify-center gap-5">
+        <div className="flex justify-center w-full gap-5">
           <button
             className={
               'flex h-12 w-fit items-center self-center rounded-full border border-black px-8 py-2'
diff --git a/src/components/RankingConfirmationModal/index.tsx b/src/components/RankingConfirmationModal/index.tsx
index 7ff3df9..1f5027d 100644
--- a/src/components/RankingConfirmationModal/index.tsx
+++ b/src/components/RankingConfirmationModal/index.tsx
@@ -10,9 +10,11 @@ import { Pencil } from '../Icon/Pencil'
 import { Plus } from '../Icon/Plus'
 import { useRouter } from 'next/router'
 import Button from '../Button'
+import { EditManualModal } from '../Poll/Rankings/OverallRankingRow/EditManualModal'
 
 export const RankingConfirmationModal: React.FC = () => {
   const [open, setOpen] = useState(false)
+  const [editConfirmationOpen, setEditConfirmationOpen] = useState(false)
   const [rankings, setRankings] = useState<CollectionRanking>()
   const [collection, setCollection] = useState<PairType>()
   const router = useRouter()
@@ -33,6 +35,7 @@ export const RankingConfirmationModal: React.FC = () => {
   return (
     <>
       <div className="flex max-w-[800px]  flex-col justify-center gap-5 font-IBM">
+       {collection && <EditManualModal isOpen={editConfirmationOpen} onClose={() => setEditConfirmationOpen(false)} collectionId={collection.id} />}
         {open && rankings && collection && (
           <AttestationModal
             collectionId={collection.id}
@@ -42,7 +45,7 @@ export const RankingConfirmationModal: React.FC = () => {
             onClose={() => (window.location.href = '/galaxy')}
           />
         )}
-        <header className="mb-2 flex w-full ">
+        <header className="flex w-full mb-2 ">
           <h3 className="text-2xl font-bold">Well done!</h3>
         </header>
 
@@ -52,25 +55,25 @@ export const RankingConfirmationModal: React.FC = () => {
           can create list or continue ranking other projects.
         </p>
         <div className="min-h-[270px] rounded-xl bg-grayish py-4 px-6">
-          <header className="flex items-center justify-between border-b border-gray-10 pb-4">
-            <p className="font-Inter text-base font-medium">
+          <header className="flex items-center justify-between pb-4 border-b border-gray-10">
+            <p className="text-base font-medium font-Inter">
               Review your ranking
             </p>
             <Button
               varient="secondary"
               className="rounded-xl"
-              onClick={() => router.push(`/ranking?c=${collection?.id}`)}>
+              onClick={() => setEditConfirmationOpen(true)}>
               Edit
               <Pencil />
             </Button>
           </header>
           <div className="mt-4 flex max-h-[160px] flex-col gap-4 overflow-y-auto font-Inter text-base">
             {rankings && (
-              <div className="flex items-center gap-6 rounded-xl text-black">
-                <span className="flex grow items-center gap-4 font-medium ">
+              <div className="flex items-center gap-6 text-black rounded-xl">
+                <span className="flex items-center gap-4 font-medium grow ">
                   {rankings.name}
                 </span>
-                <span className="relative flex w-20 items-center text-right font-medium">
+                <span className="relative flex items-center w-20 font-medium text-right">
                   <span className="">
                     {(rankings?.share * 3e7).toLocaleString(undefined, {
                       maximumFractionDigits: 2,
@@ -92,10 +95,10 @@ export const RankingConfirmationModal: React.FC = () => {
             )}
             {rankings?.ranking.map((ranking) => (
               <div
-                className="flex items-center gap-6 rounded-xl pl-6 text-black"
+                className="flex items-center gap-6 pl-6 text-black rounded-xl"
                 key={ranking.id}>
                 <span className="grow">{ranking.name} </span>
-                <span className="flex w-20 items-center text-right">
+                <span className="flex items-center w-20 text-right">
                   <span className="">
                     {(ranking.share * 3e7).toLocaleString(undefined, {
                       maximumFractionDigits: 2,
diff --git a/src/pages/ranking/index.tsx b/src/pages/ranking/index.tsx
index a015a07..8b523d0 100644
--- a/src/pages/ranking/index.tsx
+++ b/src/pages/ranking/index.tsx
@@ -20,7 +20,7 @@ import { OverallRanking } from '@/components/Poll/Rankings/OverallRanking'
 import { OverallRankingHeader } from '@/components/Poll/Rankings/OverallRankingRow/OverallRankingHeader'
 import { axiosInstance } from '@/utils/axiosInstance'
 import { getOverallRanking } from '@/utils/poll'
-import router from 'next/router'
+import { useRouter } from 'next/router'
 
 export const flattenRankingData = (
   input: CollectionRanking
@@ -32,11 +32,15 @@ export const flattenRankingData = (
 }
 
 export default function RankingPage() {
+  const router = useRouter()
   const [rankings, setRankings] = useState<EditingCollectionRanking>()
   const [tempRankings, setTempRankings] = useState<EditingCollectionRanking>()
   const [editMode, setEditMode] = useState(false)
-  // const [isOpen, setOpen] = useState(false)
   const [error, setError] = useState(false)
+  
+  useEffect(() => {
+    setEditMode(router.query.edit === 'true' ? true : false)
+  }, [router.query.edit])
 
   const handleBack = () => {
     if (editMode) {
@@ -97,7 +101,7 @@ export default function RankingPage() {
   if (!rankings || !tempRankings) {
     return (
       <div
-        className="flex w-full items-center justify-center"
+        className="flex items-center justify-center w-full"
         style={{ height: 'calc(100vh - 60px)' }}>
         <LoadingSpinner />
       </div>