feat: linked quizzes (#14)

Author: Makhare01

package-lock.json

@@ -27,6 +27,7 @@
     "promise-retry": "^2.0.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.5",
@@ -48,6 +49,7 @@
     "@types/promise-retry": "^1.1.6",
     "@types/react": "^18.2.66",
     "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.22",
     "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

package.json

@@ -5,7 +5,7 @@ import { TAnswerId, TPublicQuestion, TUserAnswer } from "./answer.schema";
 type StartQuizInput = {
   questionsId: string;
   quizId: string;
-  userId: string;
+  userId?: string;
   email: string;
   username: string;
 };
@@ -35,27 +35,27 @@ export const startQuiz = async ({
 
 export type GetUserAnswerInput = {
   answerId?: string;
-  answersUser?: {
-    userId: string;
-    questionsId: string;
-  };
+  email: string;
+  questionsId?: string;
 };
 
 export const getUserAnswers = async ({
   answerId,
-  answersUser,
+  email,
+  questionsId,
 }: GetUserAnswerInput) => {
   const query = new URLSearchParams();
 
   if (answerId) {
     query.set("answerId", answerId);
   }
 
-  if (answersUser) {
-    query.set("userId", answersUser.userId);
-    query.set("questionsId", answersUser.questionsId);
+  if (questionsId) {
+    query.set("questionsId", questionsId);
   }
 
+  query.set("email", email);
+
   return await request("/api/answer/details").get(
     {
       query,
@@ -98,6 +98,7 @@ type SaveAnswerInput = {
   answers: Array<string>;
   order: number;
   isLast: boolean;
+  userEmail: string;
 };
 
 export const saveAnswer = async ({
@@ -108,6 +109,7 @@ export const saveAnswer = async ({
   answers,
   order,
   isLast,
+  userEmail,
 }: SaveAnswerInput) => {
   return await request("/api/answer/:answerId/save").post({
     body: {
@@ -117,6 +119,7 @@ export const saveAnswer = async ({
       answers,
       order,
       isLast,
+      email: userEmail,
     },
     params: {
       answerId,

src/api/answer/answer.api.ts

@@ -109,16 +109,25 @@ export const getPublicQuizzes = async ({
 
 export type GetPublicQuizDetailsInput = {
   quizId: string;
+  userId?: string;
 };
 
 export const getPublicQuizDetails = async ({
   quizId,
+  userId,
 }: GetPublicQuizDetailsInput) => {
+  const query = new URLSearchParams();
+
+  if (userId) {
+    query.set("userId", userId);
+  }
+
   return await request("/api/quizzes/:quizId").get(
     {
       params: {
         quizId,
       },
+      query,
     },
     TPublicQuiz
   );

src/api/quiz/quiz.api.ts

@@ -39,7 +39,7 @@ const TQuizStatus = z.union([z.literal("DRAFT"), z.literal("READY")]);
 export type QuizStatus = z.infer<typeof TQuizStatus>;
 
 const TQuizUser = z.object({
-  userId: z.string(),
+  userId: z.string().optional(),
   email: z.string().email(),
   username: z.string(),
   answerId: z.string(),

src/api/quiz/quiz.schema.ts

@@ -2,6 +2,7 @@ export { IconArrow } from "./arrow";
 export { IconCheck } from "./check";
 export { IconClose } from "./close";
 export { IconDraggableDots } from "./draggable-dots";
+export { IconLink } from "./link";
 export { IconPlus } from "./plus";
 export { IconQuiz } from "./quiz";
 export * from "./quiz-categories";

src/app/assets/icons/index.ts

@@ -0,0 +1,19 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+
+export const IconLink = ({ ...props }: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g clipPath="url(#clip0_100_8)">
+        <path
+          d="M17.303 9.524L20.485 12.706C21.0013 13.2155 21.4118 13.822 21.6927 14.4908C21.9737 15.1595 22.1196 15.8773 22.122 16.6026C22.1244 17.328 21.9834 18.0467 21.7069 18.7173C21.4304 19.3879 21.024 19.9972 20.5111 20.5101C19.9982 21.0231 19.3889 21.4294 18.7183 21.7059C18.0477 21.9824 17.329 22.1235 16.6036 22.121C15.8783 22.1186 15.1605 21.9727 14.4918 21.6918C13.823 21.4108 13.2165 21.0003 12.707 20.484L11.647 19.424C11.5037 19.2857 11.3893 19.1202 11.3106 18.9373C11.2319 18.7543 11.1904 18.5575 11.1886 18.3583C11.1868 18.1592 11.2247 17.9616 11.3 17.7772C11.3753 17.5929 11.4866 17.4253 11.6274 17.2844C11.7682 17.1435 11.9356 17.0321 12.1199 16.9566C12.3042 16.881 12.5017 16.843 12.7009 16.8446C12.9 16.8463 13.0969 16.8876 13.2799 16.9661C13.463 17.0446 13.6285 17.1588 13.767 17.302L14.829 18.363C15.2986 18.8284 15.9334 19.0888 16.5946 19.0873C17.2557 19.0857 17.8893 18.8223 18.3568 18.3548C18.8242 17.8872 19.0874 17.2535 19.0887 16.5924C19.0901 15.9312 18.8295 15.2965 18.364 14.827L15.182 11.645C14.8381 11.3009 14.4012 11.0647 13.925 10.9652C13.4488 10.8657 12.9539 10.9074 12.501 11.085C12.3397 11.149 12.1883 11.2143 12.047 11.281L11.583 11.498C10.963 11.778 10.486 11.898 9.87899 11.292C9.00699 10.42 9.23299 9.615 10.296 8.882C11.3549 8.15336 12.6356 7.81861 13.9156 7.93589C15.1956 8.05317 16.3941 8.61507 17.303 9.524ZM11.293 3.514L12.353 4.574C12.6264 4.85677 12.7777 5.23561 12.7745 5.62891C12.7713 6.0222 12.6137 6.3985 12.3357 6.67674C12.0577 6.95499 11.6816 7.11292 11.2883 7.11652C10.895 7.12012 10.516 6.96911 10.233 6.696L9.17199 5.636C8.94144 5.39716 8.66563 5.20663 8.36066 5.07552C8.05568 4.94441 7.72765 4.87535 7.39571 4.87238C7.06376 4.8694 6.73454 4.93256 6.42727 5.05817C6.11999 5.18379 5.84081 5.36934 5.60601 5.60401C5.37121 5.83867 5.1855 6.11775 5.05971 6.42495C4.93393 6.73216 4.87058 7.06134 4.87337 7.39329C4.87616 7.72524 4.94503 8.05331 5.07597 8.35835C5.2069 8.6634 5.39728 8.93932 5.63599 9.17L8.81799 12.352C9.16191 12.6961 9.59876 12.9323 10.075 13.0318C10.5512 13.1313 11.0461 13.0896 11.499 12.912C11.6603 12.848 11.8117 12.7827 11.953 12.716L12.417 12.499C13.037 12.219 13.515 12.099 14.121 12.705C14.993 13.577 14.767 14.382 13.704 15.115C12.6451 15.8436 11.3644 16.1784 10.0844 16.0611C8.80437 15.9438 7.60586 15.3819 6.69699 14.473L3.51499 11.291C2.99865 10.7815 2.58818 10.175 2.30723 9.50621C2.02628 8.83746 1.88039 8.11974 1.87796 7.39437C1.87553 6.669 2.01661 5.95032 2.29307 5.2797C2.56954 4.60908 2.97593 3.99977 3.48884 3.48686C4.00176 2.97394 4.61107 2.56755 5.28169 2.29109C5.95231 2.01462 6.67099 1.87354 7.39636 1.87597C8.12172 1.8784 8.83944 2.02429 9.5082 2.30525C10.1769 2.5862 10.7835 2.99766 11.293 3.514Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_100_8">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  );
+};

src/app/assets/icons/link.tsx

@@ -11,6 +11,8 @@ export const paths = {
   addQuizQuestions: "/my-quizzes/:quizId/:questionsId/add-questions",
   profile: "/profile",
   createQuiz: "/create-quiz",
+
+  linkedQuiz: "/linked-quiz/:quizId",
 } as const;
 
 export type PathKey = keyof typeof paths;

src/app/routes/paths.ts

@@ -1,16 +1,11 @@
 import { createRoute } from "./create-route";
 import { paths } from "./paths";
 
-export const authRoutes = [
+const sharedRoutes = [
   createRoute({
-    path: paths.dashboard,
-    factory: () => import("../../pages/dashboard"),
-    title: "Dashboard",
-  }),
-  createRoute({
-    path: paths.startQuiz,
-    factory: () => import("../../pages/start-quiz"),
-    title: "Start quiz",
+    path: paths.linkedQuiz,
+    factory: () => import("../../pages/linked-quiz"),
+    title: "Quiz",
   }),
   createRoute({
     path: paths.passQuiz,
@@ -22,6 +17,19 @@ export const authRoutes = [
     factory: () => import("../../pages/result"),
     title: "Quiz result",
   }),
+];
+
+export const authRoutes = [
+  createRoute({
+    path: paths.dashboard,
+    factory: () => import("../../pages/dashboard"),
+    title: "Dashboard",
+  }),
+  createRoute({
+    path: paths.startQuiz,
+    factory: () => import("../../pages/start-quiz"),
+    title: "Start quiz",
+  }),
   createRoute({
     path: paths.myQuizzes,
     factory: () => import("../../pages/my-quizzes"),
@@ -52,6 +60,7 @@ export const authRoutes = [
     factory: () => import("../../pages/profile"),
     title: "Profile",
   }),
+  ...sharedRoutes,
 ];
 
 export const unauthRoutes = [
@@ -65,6 +74,7 @@ export const unauthRoutes = [
     factory: () => import("../../pages/sign-up"),
     title: "Sign up",
   }),
+  ...sharedRoutes,
 ];
 
 export const routes = [...authRoutes, ...unauthRoutes];

src/app/routes/routes.ts

@@ -0,0 +1,55 @@
+import { IconLink } from "@app/assets/icons";
+import { useBoolean } from "@lib/hooks";
+import { Box, SxProps, Theme, Tooltip } from "@mui/material";
+import { useEffect } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+
+type Props = {
+  text: string;
+  copyText?: string;
+  iconSx?: SxProps<Theme>;
+};
+
+export const CopyText = ({ text, copyText, iconSx }: Props) => {
+  const isCopied = useBoolean();
+
+  useEffect(() => {
+    if (isCopied.isTrue) {
+      setTimeout(() => {
+        isCopied.setFalse();
+      }, 3000);
+    }
+  }, [isCopied]);
+
+  return (
+    <Box
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
+    >
+      <CopyToClipboard text={text} onCopy={isCopied.setTrue}>
+        <Tooltip
+          title={isCopied.isTrue ? "Copied" : copyText ?? "Copy"}
+          arrow
+          placement="top"
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+            }}
+          >
+            <IconLink
+              sx={{
+                color: isCopied.isTrue ? "success.main" : "text.disabled",
+                ...iconSx,
+              }}
+            />
+          </Box>
+        </Tooltip>
+      </CopyToClipboard>
+    </Box>
+  );
+};