fix: coderabbit reviews

Author: apsinghdev

apps/api/src/services/user.service.ts

@@ -55,7 +55,7 @@ export const userService = {
     prisma: ExtendedPrismaClient | PrismaClient,
     userId: string
   ) {
-    const user = await (prisma as any).user.findUnique({
+    const user = await prisma.user.findUnique({
       where: { id: userId },
       select: { completedSteps: true },
     });
@@ -76,7 +76,7 @@ export const userService = {
     userId: string,
     completedSteps: string[]
   ) {
-    const user = await (prisma as any).user.update({
+    const user = await prisma.user.update({
       where: { id: userId },
       data: {
         completedSteps: completedSteps,

apps/web/package.json

@@ -24,6 +24,7 @@
     "@vercel/speed-insights": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.3.0",
     "framer-motion": "^11.15.0",
     "geist": "^1.5.1",
     "lucide-react": "^0.456.0",
@@ -41,6 +42,7 @@
     "zustand": "^5.0.1"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.2.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

apps/web/src/app/(main)/dashboard/sheet/page.tsx

@@ -33,20 +33,62 @@ export default function SheetPage() {
   const { data: session, status } = useSession();
   const [completedSteps, setCompletedSteps] = useState<string[]>([]);
   const [copied, setCopied] = useState(false);
+  const utils = trpc.useUtils();
 
-  const { data: fetchedSteps, isLoading: isLoadingSteps } = (
-    trpc.user as any
-  ).getCompletedSteps.useQuery(undefined, {
-    enabled: !!session?.user && status === "authenticated",
-    refetchOnWindowFocus: false,
-  });
+  // TypeScript has difficulty narrowing TRPC procedure union types.
+  // These procedures are correctly typed at runtime (query vs mutation).
+  const getCompletedStepsProcedure = trpc.user
+    .getCompletedSteps as typeof trpc.user.getCompletedSteps & {
+    useQuery: (input: undefined, opts?: any) => any;
+  };
+  const updateCompletedStepsProcedure = trpc.user
+    .updateCompletedSteps as typeof trpc.user.updateCompletedSteps & {
+    useMutation: (opts?: any) => any;
+  };
+  const getCompletedStepsUtilsProcedure = utils.user
+    .getCompletedSteps as typeof utils.user.getCompletedSteps & {
+    cancel: () => Promise<void>;
+    invalidate: () => Promise<void>;
+  };
+
+  const { data: fetchedSteps, isLoading: isLoadingSteps } =
+    getCompletedStepsProcedure.useQuery(undefined, {
+      enabled: !!session?.user && status === "authenticated",
+      refetchOnWindowFocus: false,
+    });
+
+  const updateStepsMutation = updateCompletedStepsProcedure.useMutation({
+    onMutate: async (newData: { completedSteps: string[] }) => {
+      // Cancel any outgoing refetches to avoid overwriting optimistic update
+      await getCompletedStepsUtilsProcedure.cancel();
 
-  const updateStepsMutation = (
-    trpc.user as any
-  ).updateCompletedSteps.useMutation({
+      // Snapshot the previous value
+      const previousSteps = completedSteps;
+
+      // Optimistically update to the new value
+      setCompletedSteps(newData.completedSteps);
+
+      // Return context with the previous value
+      return { previousSteps };
+    },
     onSuccess: (data: string[]) => {
       setCompletedSteps(data);
     },
+    onError: (
+      error: unknown,
+      _newData: { completedSteps: string[] },
+      context: { previousSteps: string[] } | undefined
+    ) => {
+      console.error("Failed to update completed steps:", error);
+      if (context?.previousSteps) {
+        setCompletedSteps(context.previousSteps);
+      } else if (fetchedSteps) {
+        setCompletedSteps(fetchedSteps);
+      }
+    },
+    onSettled: () => {
+      getCompletedStepsUtilsProcedure.invalidate();
+    },
   });
 
   useEffect(() => {

apps/web/src/app/(main)/sheet/[moduleId]/page.tsx

@@ -5,26 +5,64 @@ import { sheetModules } from "@/data/sheet";
 import Link from "next/link";
 import { ArrowLeft, Download, Share2, Check } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
-import { useState } from "react";
+import { useState, useMemo } from "react";
+
+// Helper function to sanitize HTML - only works on client side
+const sanitizeHTMLSync = (
+  html: string,
+  options?: { ALLOWED_TAGS: string[] }
+): string => {
+  if (typeof window === "undefined") {
+    return html;
+  }
+
+  // Lazy load DOMPurify only when needed on client side
+  // Using require to avoid SSR issues
+  try {
+    const DOMPurify = require("dompurify");
+    // Handle both default export and named export
+    const purify = DOMPurify.default || DOMPurify;
+    if (options) {
+      return purify.sanitize(html, options);
+    }
+    return purify.sanitize(html);
+  } catch (error) {
+    // Fallback if DOMPurify fails to load
+    console.warn(
+      "DOMPurify failed to load, returning unsanitized HTML:",
+      error
+    );
+    return html;
+  }
+};
 
 export default function ModuleDocPage() {
   const params = useParams();
   const moduleId = params?.moduleId as string;
   const [copied, setCopied] = useState(false);
-  
+
   const currentModule = sheetModules.find((m) => m.id === moduleId);
 
+  const sanitizedDocContent = useMemo(() => {
+    if (!currentModule?.docContent) return "";
+    return sanitizeHTMLSync(currentModule.docContent);
+  }, [currentModule?.docContent]);
+
   const handleDownloadPDF = () => {
     if (!currentModule) return;
-    
+
     const printWindow = window.open("", "_blank");
     if (!printWindow) return;
 
+    const sanitizedModuleName = sanitizeHTMLSync(currentModule.name, {
+      ALLOWED_TAGS: [],
+    });
+
     const htmlContent = `
       <!DOCTYPE html>
       <html>
         <head>
-          <title>${currentModule.name} - 30 days of Open Source sheet</title>
+          <title>${sanitizedModuleName} - 30 days of Open Source sheet</title>
           <style>
             body {
               font-family: 'Courier New', monospace;
@@ -57,9 +95,9 @@ export default function ModuleDocPage() {
           </style>
         </head>
         <body>
-          <h1>${currentModule.name}</h1>
+          <h1>${sanitizedModuleName}</h1>
           <div class="content">
-            ${currentModule.docContent}
+            ${sanitizedDocContent}
           </div>
         </body>
       </html>
@@ -100,7 +138,9 @@ export default function ModuleDocPage() {
               <ArrowLeft className="h-4 w-4" />
               <span>Back to Sheet</span>
             </Link>
-            <h1 className="text-3xl font-bold text-white mb-2">{currentModule.name}</h1>
+            <h1 className="text-3xl font-bold text-white mb-2">
+              {currentModule.name}
+            </h1>
           </div>
 
           <div className="bg-ox-content rounded-lg p-8 border border-ox-header text-center">
@@ -154,13 +194,16 @@ export default function ModuleDocPage() {
               </button>
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white mb-2">{currentModule.name}</h1>
+          <h1 className="text-3xl font-bold text-white mb-2">
+            {currentModule.name}
+          </h1>
         </div>
 
         {/* Content */}
         <div className="bg-ox-content rounded-lg p-8 prose prose-invert max-w-none font-DMfont border border-ox-header">
           <div
-            dangerouslySetInnerHTML={{ __html: currentModule.docContent }}
+            // eslint-disable-next-line react/no-danger -- Safe: docContent is sanitized with DOMPurify before rendering
+            dangerouslySetInnerHTML={{ __html: sanitizedDocContent }}
             className="text-white [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:mt-6 [&_h1]:text-white [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:mb-3 [&_h2]:mt-5 [&_h2]:text-white [&_p]:text-gray-300 [&_p]:mb-4 [&_p]:leading-relaxed [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-4 [&_ul]:text-gray-300 [&_li]:mb-2 [&_pre]:bg-ox-sidebar [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:mb-4 [&_pre]:font-DMfont [&_pre]:border [&_pre]:border-ox-header [&_code]:text-ox-purple [&_code]:bg-ox-sidebar [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:font-DMfont [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-5 [&_img]:border [&_img]:border-ox-header"
           />
         </div>

apps/web/src/data/sheet/module-0.ts

@@ -88,7 +88,7 @@ export const module0: SheetModule = {
 
       <img src="/images/sheet-2.webp" alt="Ajeet's work screenshot" style="width: 60%; max-width: 60%; height: auto; border-radius: 8px; margin: 20px auto; display: block;" />
 
-      <p>also there are going to be couple of bonus modules or couple of ad hoc modules. so if i for forget something in this list then i will cover all of that in these bonue modules</p>
+      <p>also there are going to be couple of bonus modules or couple of ad hoc modules. so if i for forget something in this list then i will cover all of that in these bonus modules</p>
       
       <h3 style="margin-top: 40px; margin-bottom: 20px; color: #9455f4;">todos:</h3>
       <ul style="list-style: none; padding-left: 0;">

apps/web/src/data/sheet/module-10.ts

@@ -7,6 +7,6 @@ export const module10: SheetModule = {
       <h1>Live fix/implement the issue - 2</h1>
       <p>Second live session on fixing and implementing an issue in an OPEN SOURCE project.</p>
     `,
-  videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+  videoUrl: "",
   comingSoon: true,
 };

apps/web/src/data/sheet/module-11.ts

@@ -7,6 +7,6 @@ export const module11: SheetModule = {
       <h1>Live fix/implement the issue - 3</h1>
       <p>Third live session on fixing and implementing an issue in an OPEN SOURCE project.</p>
     `,
-  videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+  videoUrl: "",
   comingSoon: true,
 };

apps/web/src/data/sheet/module-12.ts

@@ -7,6 +7,6 @@ export const module12: SheetModule = {
       <h1>Live fix/implement the issue - 4</h1>
       <p>Fourth live session on fixing and implementing an issue in an OPEN SOURCE project.</p>
     `,
-  videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+  videoUrl: "",
   comingSoon: true,
 };

apps/web/src/data/sheet/module-13.ts

@@ -7,6 +7,6 @@ export const module13: SheetModule = {
       <h1>Raise PRs and fix the reviews</h1>
       <p>Learn how to create pull requests and effectively address review comments from maintainers.</p>
     `,
-  videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+  videoUrl: "",
   comingSoon: true,
 };

apps/web/src/data/sheet/module-14.ts

@@ -7,6 +7,6 @@ export const module14: SheetModule = {
       <h1>How to tackle competition in saturated orgs?</h1>
       <p>Strategies for standing out and getting your contributions noticed in highly competitive OPEN SOURCE organizations.</p>
     `,
-  videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+  videoUrl: "",
   comingSoon: true,
 };