Simplify the edit process

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'

src/components/RankingConfirmationModal/index.tsx

@@ -3,17 +3,18 @@ import { useEffect, useState } from 'react'
 
 import { ArrowForward } from '../Icon/ArrowForward'
 import { AttestationModal } from '../Poll/Rankings/OverallRankingRow/AttestationModal'
-import { Check } from '../Icon/Check'
 import { CollectionRanking } from '../Poll/Rankings/edit-logic/edit'
 import { PairType } from '@/types/Pairs/Pair'
 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'
 import { formatRankingValue } from '@/utils/helpers'
 
 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()
@@ -34,6 +35,13 @@ 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}
@@ -60,7 +68,7 @@ export const RankingConfirmationModal: React.FC = () => {
             <Button
               varient="secondary"
               className="rounded-xl"
-              onClick={() => router.push(`/ranking?c=${collection?.id}`)}>
+              onClick={() => setEditConfirmationOpen(true)}>
               Edit
               <Pencil />
             </Button>

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>