Updated links model and poll page (lukevella#206)

* Improved sharing
* Updated desktop poll

package.json

@@ -30,12 +30,11 @@
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.2.2",
     "eta": "^1.12.3",
-    "framer-motion": "^6.2.9",
+    "framer-motion": "^6.3.11",
     "iron-session": "^6.1.3",
     "jose": "^4.5.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
-    "mongodb": "^4.5.0",
     "nanoid": "^3.1.30",
     "next": "^12.1.4",
     "next-i18next": "^10.5.0",
@@ -60,7 +59,7 @@
     "zod": "^3.16.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.20.1",
+    "@playwright/test": "^1.22.2",
     "@types/lodash": "^4.14.178",
     "@types/nodemailer": "^6.4.4",
     "@types/react": "^17.0.5",

prisma/migrations/20220623175037_remove_links_model/migration.sql

@@ -0,0 +1,26 @@
+-- AlterTable
+ALTER TABLE "polls"
+ADD COLUMN "admin_url_id" TEXT,
+ADD COLUMN "participant_url_id" TEXT;
+
+UPDATE polls
+	SET participant_url_id=(SELECT url_id FROM links WHERE polls.url_id=links.poll_id AND links."role"='participant');
+
+UPDATE polls
+	SET admin_url_id=(SELECT url_id FROM links WHERE polls.url_id=links.poll_id AND links."role"='admin');
+
+ALTER TABLE "polls"
+ALTER COLUMN "admin_url_id" SET NOT NULL,
+ALTER COLUMN "participant_url_id" SET NOT NULL;
+
+-- DropTable
+DROP TABLE "links";
+
+-- DropEnum
+DROP TYPE "role";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "polls_participant_url_id_key" ON "polls"("participant_url_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "polls_admin_url_id_key" ON "polls"("admin_url_id");

prisma/migrations/20220624111614_rename_poll_id/migration.sql

@@ -0,0 +1,21 @@
+/*
+  Warnings:
+
+  - The primary key for the `polls` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `url_id` on the `polls` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[id]` on the table `polls` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `id` to the `polls` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropIndex
+DROP INDEX "Poll_urlId_key";
+
+-- DropIndex
+DROP INDEX "polls_url_id_key";
+
+-- AlterTable
+ALTER TABLE "polls"
+RENAME COLUMN "url_id" TO "id";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "polls_id_key" ON "polls"("id");

prisma/schema.prisma

@@ -1,11 +1,11 @@
 datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
+  provider             = "postgresql"
+  url                  = env("DATABASE_URL")
   referentialIntegrity = "prisma"
 }
 
 generator client {
-  provider = "prisma-client-js"
+  provider        = "prisma-client-js"
   previewFeatures = ["referentialIntegrity"]
 }
 
@@ -29,60 +29,43 @@ enum PollType {
 }
 
 model Poll {
-  urlId         String        @id @unique @map("url_id")
-  createdAt     DateTime      @default(now()) @map("created_at")
-  updatedAt     DateTime      @updatedAt @map("updated_at")
-  deadline      DateTime?
-  title         String
-  type          PollType
-  description   String?
-  location      String?
-  user          User          @relation(fields: [userId], references: [id])
-  userId        String        @map("user_id")
-  votes         Vote[]
-  timeZone      String?       @map("time_zone")
-  verified      Boolean       @default(false)
-  options       Option[]
-  participants  Participant[]
-  authorName    String        @default("") @map("author_name")
-  demo          Boolean       @default(false)
-  comments      Comment[]
-  links         Link[]
-  legacy        Boolean       @default(false)
-  closed        Boolean       @default(false)
-  notifications Boolean       @default(false)
-  deleted       Boolean       @default(false)
-  deletedAt     DateTime?     @map("deleted_at")
-  touchedAt     DateTime      @default(now()) @map("touched_at")
+  id               String        @id @unique @map("id")
+  createdAt        DateTime      @default(now()) @map("created_at")
+  updatedAt        DateTime      @updatedAt @map("updated_at")
+  deadline         DateTime?
+  title            String
+  type             PollType
+  description      String?
+  location         String?
+  user             User          @relation(fields: [userId], references: [id])
+  userId           String        @map("user_id")
+  votes            Vote[]
+  timeZone         String?       @map("time_zone")
+  verified         Boolean       @default(false)
+  options          Option[]
+  participants     Participant[]
+  authorName       String        @default("") @map("author_name")
+  demo             Boolean       @default(false)
+  comments         Comment[]
+  legacy           Boolean       @default(false)
+  closed           Boolean       @default(false)
+  notifications    Boolean       @default(false)
+  deleted          Boolean       @default(false)
+  deletedAt        DateTime?     @map("deleted_at")
+  touchedAt        DateTime      @default(now()) @map("touched_at")
+  participantUrlId String        @unique @map("participant_url_id")
+  adminUrlId       String        @unique @map("admin_url_id")
 
   @@map("polls")
 }
 
-enum Role {
-  admin
-  participant
-
-  @@map("role")
-}
-
-model Link {
-  urlId     String   @id @unique @map("url_id")
-  role      Role
-  pollId    String   @map("poll_id")
-  poll      Poll     @relation(fields: [pollId], references: [urlId])
-  createdAt DateTime @default(now()) @map("created_at")
-
-  @@unique([pollId, role])
-  @@map("links")
-}
-
 model Participant {
   id        String    @id @default(cuid())
   name      String
   user      User?     @relation(fields: [userId], references: [id])
   userId    String?   @map("user_id")
   guestId   String?   @map("guest_id")
-  poll      Poll      @relation(fields: [pollId], references: [urlId])
+  poll      Poll      @relation(fields: [pollId], references: [id])
   pollId    String    @map("poll_id")
   votes     Vote[]
   createdAt DateTime  @default(now()) @map("created_at")
@@ -96,7 +79,7 @@ model Option {
   id        String    @id @default(cuid())
   value     String
   pollId    String    @map("poll_id")
-  poll      Poll      @relation(fields: [pollId], references: [urlId])
+  poll      Poll      @relation(fields: [pollId], references: [id])
   createdAt DateTime  @default(now()) @map("created_at")
   updatedAt DateTime? @updatedAt @map("updated_at")
   votes     Vote[]
@@ -118,7 +101,7 @@ model Vote {
   participantId String      @map("participant_id")
   option        Option      @relation(fields: [optionId], references: [id], onDelete: Cascade)
   optionId      String      @map("option_id")
-  poll          Poll        @relation(fields: [pollId], references: [urlId])
+  poll          Poll        @relation(fields: [pollId], references: [id])
   pollId        String      @map("poll_id")
   type          VoteType    @default(yes)
   createdAt     DateTime    @default(now()) @map("created_at")
@@ -130,7 +113,7 @@ model Vote {
 model Comment {
   id         String    @id @default(cuid())
   content    String
-  poll       Poll      @relation(fields: [pollId], references: [urlId])
+  poll       Poll      @relation(fields: [pollId], references: [id])
   pollId     String    @map("poll_id")
   authorName String    @map("author_name")
   user       User?     @relation(fields: [userId], references: [id])

public/locales/en/app.json

@@ -20,7 +20,7 @@
   "calendarHelp": "You can't create a poll without any options. Add at least one option to continue.",
   "errorCreate": "Uh oh! There was a problem creating your poll. The error has been logged and we'll try to fix it.",
   "share": "Share",
-  "shareDescription": "This poll is open to anyone who has the following link:",
+  "shareDescription": "Give this link to your <b>participants</b> to allow them to vote on your poll.",
   "requiredNameError": "Name is required",
   "remove": "Remove",
   "change": "Change",
@@ -38,9 +38,7 @@
   "loading": "Loading…",
   "loadingParticipants": "Loading participants…",
   "admin": "Admin",
-  "adminDescription": "Full access to edit this poll.",
   "participant": "Participant",
-  "participantDescription": "Partial access to vote and comment on this poll.",
   "unverifiedMessage": "An email has been sent to <b>{{email}}</b> with a link to verify the email address.",
   "notificationsOnDescription": "An email will be sent to <b>{{email}}</b> when there is activity on this poll.",
   "deletingOptionsWarning": "You are deleting options that participants have voted for. Their votes will be also be deleted.",

public/locales/en/homepage.json

@@ -1,5 +1,5 @@
 {
   "getStarted": "Get started",
-  "viewDemo": "View demo",
+  "viewDemo": "Live demo",
   "footerCredit": "Self-funded and built by <a>@imlukevella</a>"
 }

src/components/badge.tsx

@@ -9,7 +9,7 @@ const Badge: React.VoidFunctionComponent<{
   return (
     <div
       className={clsx(
-        "inline-flex h-5 cursor-default items-center rounded-md px-1 text-xs",
+        "inline-flex h-5 cursor-default items-center rounded-md px-1 text-xs lg:text-sm",
         {
           "bg-slate-200 text-slate-500": color === "gray",
           "bg-amber-100 text-amber-500": color === "amber",

src/components/create-poll.tsx

@@ -95,7 +95,7 @@ const Page: NextPage<CreatePollPageProps> = ({
   const plausible = usePlausible();
 
   const createPoll = trpc.useMutation(["polls.create"], {
-    onSuccess: (poll) => {
+    onSuccess: (res) => {
       setIsRedirecting(true);
       plausible("Created poll", {
         props: {
@@ -104,7 +104,7 @@ const Page: NextPage<CreatePollPageProps> = ({
         },
       });
       setPersistedFormData(initialNewEventData);
-      router.replace(`/admin/${poll.urlId}`);
+      router.replace(`/admin/${res.urlId}?sharing=true`);
     },
   });
 

src/components/discussion/discussion.tsx

@@ -27,9 +27,9 @@ interface CommentForm {
 const Discussion: React.VoidFunctionComponent = () => {
   const { locale } = usePreferences();
   const queryClient = trpc.useContext();
-  const {
-    poll: { pollId },
-  } = usePoll();
+  const { poll } = usePoll();
+
+  const pollId = poll.id;
 
   const { data: comments } = trpc.useQuery(
     ["polls.comments.list", { pollId }],
@@ -53,8 +53,6 @@ const Discussion: React.VoidFunctionComponent = () => {
     },
   });
 
-  const { poll } = usePoll();
-
   const deleteComment = trpc.useMutation("polls.comments.delete", {
     onMutate: ({ commentId }) => {
       queryClient.setQueryData(
@@ -96,9 +94,7 @@ const Discussion: React.VoidFunctionComponent = () => {
         <AnimatePresence initial={false}>
           {comments.map((comment) => {
             const canDelete =
-              poll.role === "admin" ||
-              session.ownsObject(comment) ||
-              isUnclaimed(comment);
+              poll.admin || session.ownsObject(comment) || isUnclaimed(comment);
 
             return (
               <motion.div
@@ -135,23 +131,22 @@ const Discussion: React.VoidFunctionComponent = () => {
                         )}
                       </span>
                     </div>
-                    {canDelete ? (
-                      <Dropdown
-                        placement="bottom-start"
-                        trigger={<CompactButton icon={DotsHorizontal} />}
-                      >
-                        <DropdownItem
-                          icon={Trash}
-                          label="Delete comment"
-                          onClick={() => {
-                            deleteComment.mutate({
-                              commentId: comment.id,
-                              pollId,
-                            });
-                          }}
-                        />
-                      </Dropdown>
-                    ) : null}
+                    <Dropdown
+                      placement="bottom-start"
+                      trigger={<CompactButton icon={DotsHorizontal} />}
+                    >
+                      <DropdownItem
+                        icon={Trash}
+                        label="Delete comment"
+                        disabled={!canDelete}
+                        onClick={() => {
+                          deleteComment.mutate({
+                            commentId: comment.id,
+                            pollId,
+                          });
+                        }}
+                      />
+                    </Dropdown>
                   </div>
                   <div className="w-fit whitespace-pre-wrap">
                     <TruncatedLinkify>{comment.content}</TruncatedLinkify>
@@ -187,11 +182,7 @@ const Discussion: React.VoidFunctionComponent = () => {
               )}
             />
           </div>
-          <Button
-            htmlType="submit"
-            loading={formState.isSubmitting}
-            type="primary"
-          >
+          <Button htmlType="submit" loading={formState.isSubmitting}>
             Comment
           </Button>
         </div>

src/components/home/poll-demo.tsx

@@ -87,6 +87,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
           color={participant.color}
           sidebarWidth={sidebarWidth}
           columnWidth={columnWidth}
+          participantId={`participant${i}`}
           name={participant.name}
           votes={options.map((_, i) => {
             return participant.votes.some((vote) => vote === i) ? "yes" : "no";