Add paper acknowledgement form (#3637)

I know all of this is suboptimal, but I'd like to get people to sign up to be mentioned asap. Feel free to improve (or to tell me how to improve) now or in subsequent PRs. I anticipate this form will be going away in the future, so I'm not sure a lot of work will be really worth it. --------- Co-authored-by: AbdBarho <ka70911@gmail.com>
LAION-AI · Aug 8, 2023 · 80c9ca5 · 80c9ca5
1 parent cbb46c1
commit 80c9ca5
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 2 deletions.
diff --git a/website/prisma/migrations/20230805220637_paperack/migration.sql b/website/prisma/migrations/20230805220637_paperack/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "paperackName" TEXT NOT NULL DEFAULT '',
+ADD COLUMN     "paperackYes" BOOLEAN NOT NULL DEFAULT false;
diff --git a/website/prisma/schema.prisma b/website/prisma/schema.prisma
@@ -43,6 +43,8 @@ model User {
   image         String?
   isNew         Boolean   @default(true)
   role          String    @default("general")
+  paperackYes   Boolean   @default(false)
+  paperackName  String    @default("")
 
   accounts Account[]
   sessions Session[]

diff --git a/website/public/locales/en/account.json b/website/public/locales/en/account.json
@@ -4,7 +4,8 @@
   "delete_account_intro": "Deleting an account entails the following:",
   "delete_account_leaderboard": "Accounts of deleted users won't show up on the leaderboards",
   "delete_account_permanent": "This action is permanent and cannot be undone",
-  "linked_accounts": "Linked accounts",
+  "edit_paper_ack": "Edit paper acknowledgement",
   "go_to_dashboard": "Go back to dashboard",
+  "linked_accounts": "Linked accounts",
   "yes_delete": "Yes, delete my account permanently"
 }
diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx
@@ -1,4 +1,4 @@
-import { Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react";
+import { Divider, Flex, Grid, Icon, Text, Button } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
@@ -71,6 +71,9 @@ export default function Account() {
                 </>
               )}
             </Grid>
+            <Button as={Link} href="/account/paperack">
+              {t("account:edit_paper_ack")}
+            </Button>
             <Divider my={4} />
             <XPBar />
           </SurveyCard>

diff --git a/website/src/pages/account/paperack.tsx b/website/src/pages/account/paperack.tsx
@@ -0,0 +1,89 @@
+import { Button, FormControl, FormLabel, Input, InputGroup, useToast } from "@chakra-ui/react";
+import Head from "next/head";
+import React, { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+export { getStaticProps } from "src/lib/defaultServerSideProps";
+import { get, post } from "src/lib/api";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
+
+interface AckData {
+  paperackYes: boolean;
+  paperackName: string;
+}
+
+export default function PaperAck() {
+  const toast = useToast();
+
+  const { data: defaultValues } = useSWRImmutable<AckData>("/api/paperack", get);
+  const { trigger } = useSWRMutation<AckData, any, any, AckData>("/api/paperack", post, {
+    onSuccess() {
+      toast({
+        title: "Successfully updated your preferences",
+        status: "success",
+      });
+    },
+    onError(err) {
+      console.error(err);
+      toast({
+        title: "An error occurred!",
+        status: "error",
+      });
+    },
+  });
+
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm<AckData>({ defaultValues });
+
+  useEffect(() => {
+    reset(defaultValues);
+  }, [defaultValues, reset]);
+
+  const updatePaperAck = useMemo(() => handleSubmit((data: AckData) => trigger(data)), [handleSubmit, trigger]);
+
+  const { paperackYes, paperackName } = watch();
+
+  return (
+    <>
+      <Head>
+        <title>Open Assistant</title>
+      </Head>
+      <main className="oa-basic-theme h-3/4 z-0 flex flex-col items-center justify-center">
+        <div className="max-w-3xl">
+          <div className="m-4">
+            <p className="mb-8">
+              If you want to be considered for acknowledgements in the paper for your contributions, tick the box below
+              AND enter your (real) name.
+            </p>
+            <form onSubmit={updatePaperAck}>
+              <InputGroup className="flex flex-col gap-6">
+                <FormControl className="flex flex-row gap-2">
+                  <input
+                    id="paperackYes"
+                    type="checkbox"
+                    name="paperackYes"
+                    {...register("paperackYes")}
+                    className="mb-2"
+                  />
+                  <FormLabel htmlFor="paperackYes">I want to be mentioned in the acknowledgements</FormLabel>
+                </FormControl>
+                <FormControl isInvalid={errors.paperackName ? true : false}>
+                  <FormLabel>Write the name by which you want to be mentioned in the acknowledgements</FormLabel>
+                  <Input placeholder="Name" type="text" {...register("paperackName")}></Input>
+                </FormControl>
+                <Button isDisabled={paperackYes && !paperackName} type="submit">
+                  Submit
+                </Button>
+              </InputGroup>
+            </form>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/website/src/pages/api/paperack.ts b/website/src/pages/api/paperack.ts
@@ -0,0 +1,40 @@
+import { withoutRole } from "src/lib/auth";
+import prisma from "src/lib/prismadb";
+
+/**
+ * Updates the user's paper ack info
+ */
+const handler = withoutRole("banned", async (req, res, token) => {
+  // handle GET
+  if (req.method === "GET") {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.sub,
+      },
+      select: {
+        paperackYes: true,
+        paperackName: true,
+      },
+    });
+    return res.status(200).json(user);
+  }
+
+  const { paperackYes, paperackName } = req.body;
+
+  const user = await prisma.user.update({
+    where: {
+      id: token.sub,
+    },
+    data: {
+      paperackYes,
+      paperackName,
+    },
+    select: {
+      paperackYes: true,
+      paperackName: true,
+    },
+  });
+  return res.status(200).json(user);
+});
+
+export default handler;