Basic flow for editing signup via front with UUID

src/models/Signup.ts

@@ -32,11 +32,27 @@ export async function createSignup(data: Signup): Promise<Signup> {
   }
 }
 
-export async function updateSignup(data: Signup): Promise<Signup> {
+export async function updateSignup(data: Signup, uuid: string): Promise<Signup> {
   try {
     const { id } = data;
     if (!id) throw new Error("SignupId required!");
-    const resp = await axios.put(`${url}${id}`, data);
+    const resp = await axios.put(`${url}${id}/edit/`, data, {
+      params: { uuid }
+    });
+    return resp.data;
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+}
+
+export async function getSignupUUID(id: number, uuid: string): Promise<Signup> {
+  try {
+    const resp = await axios.get(`${url}${id}/edit/`, {
+      params: {
+        uuid
+      }
+    });
     return resp.data;
   } catch (err) {
     console.error(err);

src/pages/SignUpPage.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import { Helmet } from "react-helmet";
 import { getForm, SignupForm } from "@models/SignupForm";
-import { createSignup, Signup } from "@models/Signup";
+import { createSignup, updateSignup, getSignupUUID, Signup } from "@models/Signup";
 import SignUpPageView from "@views/SignUpPage/SignUpPageView";
 import { RouteComponentProps } from "react-router-dom";
 
 interface MatchParams {
-  id: string;
+  formId?: string;
+  signupId?: string;
+  uuid?: string;
 }
 
 type SignUpPageProps = RouteComponentProps<MatchParams>;
@@ -27,14 +29,17 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
       statusMessage: null,
       error: null,
     };
-
-    this.fetchSignUp();
+    const { match } = this.props;
+    const { formId, signupId } = match.params;
+    if (signupId) {
+      this.fetchSignUp().then(s => this.fetchSignUpForm(s.signupForm_id))
+    } else {
+      this.fetchSignUpForm(Number(formId));
+    }
   }
 
-  fetchSignUp = (): Promise<SignupForm> => {
-    const { match } = this.props;
-    const { id } = match.params;
-    const formPromise = getForm(Number(id));
+  fetchSignUpForm = (formId: number): Promise<SignupForm> => {
+    const formPromise = getForm(formId);
     formPromise.then(signUpForm => {
       this.setState({
         signUpForm,
@@ -43,29 +48,42 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
     return formPromise;
   }
 
+  fetchSignUp = (): Promise<Signup> => {
+    const { match } = this.props;
+    const { signupId, uuid } = match.params;
+    const signupPromise = getSignupUUID(Number(signupId), uuid);
+    signupPromise.then(signup => this.setState({
+      formData: signup.answer
+    }))
+    return signupPromise;
+  }
+
   onSubmit = async (data) => {
     const { signUpForm } = this.state;
+    const { signupId, uuid } = this.props.match.params;
+    const payload: Signup = {
+      id: signupId ? Number(signupId): undefined,
+      signupForm_id: signUpForm.id,
+      answer: data.formData,
+    };
+
     try {
-      const payload: Signup = {
-        id: undefined,
-        signupForm_id: signUpForm.id,
-        answer: data.formData,
-      };
-      if (payload.id === undefined) {
+      if (uuid) {
+        const resp = await updateSignup(payload, uuid);
+        this.fetchSignUpForm(signUpForm.id);
+        this.setState({
+          formData: resp,
+          statusMessage: "Sign-up submission updated successfully.",
+        });
+      }
+      else {
         const resp = await createSignup(payload);
-        this.fetchSignUp();
+        this.fetchSignUpForm(signUpForm.id);
         this.setState({
           error: null,
           statusMessage: "Sign-up submitted successfully",
         });
       }
-      else {
-        // const resp = await updateSignup(payload);
-        // this.setState({
-        //   formData: resp,
-        //   statusMessage: "Sign-up submission updated successfully.",
-        // });
-      }
     } catch (error) {
       console.error(error);
       this.setState({
@@ -81,13 +99,13 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
 
   render() {
     const { match } = this.props;
-    const { id } = match.params;
+    const { formId } = match.params;
     const { signUpForm, formData, statusMessage } = this.state;
 
     return (
       <>
         <Helmet>
-          <link rel="canonical" href={`https://sik.ayy.fi/signup/${id}`} />
+          <link rel="canonical" href={`https://sik.ayy.fi/signup/${formId}`} />
         </Helmet>
         <SignUpPageView
           signUpForm={signUpForm}

src/routes.tsx

@@ -40,7 +40,8 @@ const renderAdminPage = (Page) => (props): JSX.Element => {
 
 const commonRoutes = [
   { path: "/", page: FrontPage },
-  { path: "/signup/:id", page: SignUpPage },
+  { path: "/signup/:formId", page: SignUpPage },
+  { path: "/signup/edit/:signupId/:uuid", page: SignUpPage },
   { path: "/events/:id", page: EventPage },
   { path: "/kilta", page: GuildPage },
   { path: "/kilta/toiminta", page: ActualPage },