From df538e98321df546bfdec365e49a202d2381f866 Mon Sep 17 00:00:00 2001
From: eznarf <41272412+eznarf@users.noreply.github.com>
Date: Sun, 5 Nov 2023 17:53:51 -0800
Subject: [PATCH] Removing duplicate election component, add function to post
 new election in draft phase

---
 frontend/src/App.tsx                          |  3 -
 .../src/components/Election/Admin/Admin.tsx   |  2 +-
 .../components/Election/Admin/AdminHome.tsx   | 47 +++++++++++++---
 .../ElectionForm/DuplicateElection.tsx        | 56 -------------------
 4 files changed, 41 insertions(+), 67 deletions(-)
 delete mode 100644 frontend/src/components/ElectionForm/DuplicateElection.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 26d93056..71b8f5af 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,9 +6,7 @@ import Header from './components/Header'
 import Elections from './components/Elections'
 import Login from './components/Login'
 import CreateElectionTemplates from './components/ElectionForm/CreateElectionTemplates'
-// import AddElection from './components/ElectionForm/AddElection'
 import Election from './components/Election/Election'
-import DuplicateElection from './components/ElectionForm/DuplicateElection'
 import Sandbox from './components/Sandbox'
 import DebugPage from './components/DebugPage'
 import LandingPage from './components/LandingPage'
@@ -58,7 +56,6 @@ const App = () => {
                 <Route path='/Debug' element={<DebugPage authSession={authSession} />} />
                 <Route path='/CreateElection' element={<CreateElectionTemplates authSession={authSession} />} />
                 <Route path='/Election/:id/*' element={<Election authSession={authSession} />} />
-                <Route path='/DuplicateElection/:id' element={<DuplicateElection authSession={authSession} />} />
                 <Route path='/Sandbox' element={<Sandbox />} />
               </Routes>
             </Box>
diff --git a/frontend/src/components/Election/Admin/Admin.tsx b/frontend/src/components/Election/Admin/Admin.tsx
index 69743c8d..ed475496 100644
--- a/frontend/src/components/Election/Admin/Admin.tsx
+++ b/frontend/src/components/Election/Admin/Admin.tsx
@@ -9,7 +9,7 @@ const Admin = ({ authSession, election, permissions, fetchElection }) => {
     return (
         <Container>
             <Routes>
-                <Route path='/' element={<AdminHome />} />
+                <Route path='/' element={<AdminHome authSession={authSession}/>} />
                 <Route path='/voters' element={<ViewElectionRolls election={election} permissions={permissions} />} />
                 <Route path='/roles' element={<EditRoles election={election} permissions={permissions} fetchElection={fetchElection} />} />
                 <Route path='/ballots' element={<ViewBallots election={election} permissions={permissions} />} />
diff --git a/frontend/src/components/Election/Admin/AdminHome.tsx b/frontend/src/components/Election/Admin/AdminHome.tsx
index 3becbfd2..c03a1e00 100644
--- a/frontend/src/components/Election/Admin/AdminHome.tsx
+++ b/frontend/src/components/Election/Admin/AdminHome.tsx
@@ -3,16 +3,18 @@ import Grid from "@mui/material/Grid";
 import { Box, Divider, Paper } from "@mui/material";
 import { Typography } from "@mui/material";
 import { StyledButton } from "../../styles";
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Election } from '../../../../../domain_model/Election';
 import ShareButton from "../ShareButton";
-import { useArchiveEleciton, useFinalizeEleciton, useSetPublicResults } from "../../../hooks/useAPI";
+import { useArchiveEleciton, useFinalizeEleciton, usePostElection, useSetPublicResults } from "../../../hooks/useAPI";
 import { formatDate } from '../../util';
 import useConfirm from '../../ConfirmationDialogProvider';
 import useElection from '../../ElectionContextProvider';
 import ElectionDetailsInlineForm from '../../ElectionForm/Details/ElectionDetailsInlineForm';
 import Races from '../../ElectionForm/Races/Races';
 import ElectionSettings from '../../ElectionForm/ElectionSettings';
+import structuredClone from '@ungap/structured-clone';
+import { IAuthSession } from '../../../hooks/useAuthSession';
 const hasPermission = (permissions: string[], requiredPermission: string) => {
     return (permissions && permissions.includes(requiredPermission))
 }
@@ -191,7 +193,7 @@ const PreviewBallotSection = ({ election, permissions }: { election: Election, p
     />
 }
 
-const DuplicateElectionSection = ({ election, permissions }: { election: Election, permissions: string[] }) => {
+const DuplicateElectionSection = ({ election, permissions, duplicateElection }: { election: Election, permissions: string[], duplicateElection: Function }) => {
     return <Section
         Description={
             (<>
@@ -208,13 +210,12 @@ const DuplicateElectionSection = ({ election, permissions }: { election: Electio
                 variant='contained'
                 disabled={!hasPermission(permissions, 'canEditElectionState')}
                 fullwidth
-                component={Link} to={`/DuplicateElection/${election.election_id}`}
+                onClick={() => duplicateElection()}
             >
                 <Typography align='center' variant="body2">
                     Duplicate
                 </Typography>
             </StyledButton>
-
         </>)}
     />
 }
@@ -441,7 +442,10 @@ const FinalizeSection = ({ election, permissions, finalizeElection }: { election
 }
 
 
-const AdminHome = () => {
+type Props = {
+    authSession: IAuthSession}
+    
+const AdminHome = ({authSession}:Props) => {
     const { election, refreshElection: fetchElection, permissions } = useElection()
     const { makeRequest } = useSetPublicResults(election.election_id)
     const togglePublicResults = async () => {
@@ -452,6 +456,9 @@ const AdminHome = () => {
     const { makeRequest: finalize } = useFinalizeEleciton(election.election_id)
     const { makeRequest: archive } = useArchiveEleciton(election.election_id)
 
+    const navigate = useNavigate()
+    const { error, isPending, makeRequest: postElection } = usePostElection()
+    
     const confirm = useConfirm()
 
     const finalizeElection = async () => {
@@ -486,6 +493,32 @@ const AdminHome = () => {
             console.log(err)
         }
     }
+    const duplicateElection = async () => {
+        console.log("duplicating election")
+        const confirmed = await confirm(
+            {
+                title: 'Confirm Duplicate Election',
+                message: "Are you sure you wish to duplicate this election?"
+            })
+        if (!confirmed) return
+        console.log('confirmed')
+        const copiedElection = structuredClone(election)
+        copiedElection.title = 'Copy of ' + copiedElection.title
+        copiedElection.frontend_url = ''
+        copiedElection.owner_id = authSession.getIdField('sub')
+        copiedElection.state = 'draft'
+
+        const newElection = await postElection(
+            {
+                Election: copiedElection,
+            })
+
+        if ((!newElection)) {
+            throw Error("Error submitting election");
+        }
+        navigate(`/Election/${newElection.election.election_id}/admin`)
+    }
+    
 
     return (
         <Box
@@ -524,7 +557,7 @@ const AdminHome = () => {
                 <Divider style={{ width: '100%' }} />
                 <EditRolesSection election={election} permissions={permissions} />
                 <Divider style={{ width: '100%' }} />
-                <DuplicateElectionSection election={election} permissions={permissions} />
+                <DuplicateElectionSection election={election} permissions={permissions} duplicateElection={duplicateElection}/>
                 <Divider style={{ width: '100%' }} />
                 <ArchiveElectionSection election={election} permissions={permissions} archiveElection={archiveElection} />
                 {election.state === 'draft' &&
diff --git a/frontend/src/components/ElectionForm/DuplicateElection.tsx b/frontend/src/components/ElectionForm/DuplicateElection.tsx
deleted file mode 100644
index 4ec73aff..00000000
--- a/frontend/src/components/ElectionForm/DuplicateElection.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react'
-import { useParams } from "react-router";
-import Container from '@mui/material/Container';
-import ElectionForm from "./ElectionForm";
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router"
-import { useGetElection, usePostElection } from '../../hooks/useAPI';
-
-const DuplicateElection = ({ authSession }) => {
-    const navigate = useNavigate()
-    const { id } = useParams();
-
-    const [data, setData] = useState(null);
-
-    let { data: prevData, isPending, error, makeRequest: fetchElection } = useGetElection(id);
-    const { isPending: postIsPending, error: postError, makeRequest: postElection } = usePostElection()
-    useEffect(() => {
-        fetchElection()
-    }, [])
-    
-    useEffect(
-        () => {
-            if (prevData && prevData.election) {
-                setData({ ...prevData, election: { ...prevData.election, title: `Copy of ${prevData.election.title}` } });
-            }
-        }, [prevData]
-    )
-
-    const onCreateElection = async (election) => {
-        // calls post election api, throws error if response not ok
-        const newElection = await postElection(
-            {
-                Election: election,
-            })
-        if ((!newElection)) {
-            throw Error("Error submitting election");
-        }
-        
-        localStorage.removeItem('Election')
-        navigate(`/Election/${newElection.election.election_id}`)
-    }
-
-    return (
-        <Container >
-            {isPending && <div> Loading Election... </div>}
-            {!authSession.isLoggedIn() && <div> Must be logged in to create elections </div>}
-            {authSession.isLoggedIn() && data && data.election &&
-                <ElectionForm authSession={authSession} onSubmitElection={onCreateElection} prevElectionData={data.election} submitText='Create Election' disableSubmit={postIsPending}/>
-            }
-            {postIsPending && <div> Submitting... </div>}
-            {postError && <div> {postError} </div>}
-        </Container>
-    )
-}
-
-export default DuplicateElection