feat: add snippet creation with validation

Implemented Zod schema for snippet form validation and tags transformation

Refactored handleCreateSnippet to use schema instead of manual validation

Updated EditorPage and SnippetsPage to integrate form and validation

Added src/schemas/ folder to store Zod schemas

Author: sabbirhosen44

src/pages/editor/EditorPage.tsx

@@ -48,7 +48,7 @@ import {
   fetchProjectById,
   updateProject,
 } from "@/store/slices/projectSlice";
-import type { EditorSettings, TemplateFile } from "@/types";
+import type { EditorSettings, SnippetFormState, TemplateFile } from "@/types";
 import Editor from "@monaco-editor/react";
 import { PanelBottomIcon as LuPanelBottom } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -67,6 +67,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 import OutputConsole from "../../components/editor/OutputConsole";
 import { createSnippet } from "@/store/slices/snippetSlice";
 import LoadingSnipper from "@/components/LoadingSnipper";
+import { snippetFormSchema } from "@/schemas";
 
 const EditorPage = () => {
   const navigate = useNavigate();
@@ -84,7 +85,7 @@ const EditorPage = () => {
     error: projectError,
   } = useSelector((state: RootState) => state.project);
   const [isSnippetModalOpen, setIsSnippetModalOpen] = useState(false);
-  const [snippetForm, setSnippetForm] = useState({
+  const [snippetForm, setSnippetForm] = useState<SnippetFormState>({
     title: "",
     description: "",
     tags: "",
@@ -309,24 +310,18 @@ const EditorPage = () => {
       showToast("No active file selected", "error");
     }
 
-    if (!snippetForm.title.trim()) {
-      showToast("Please enter a title for the snippet", "error");
-      return;
-    }
-
     try {
-      const tagsArray = snippetForm.tags
-        .split(",")
-        .map((tag) => tag.trim().toLowerCase());
+      const parsedData = snippetFormSchema.parse(snippetForm);
+
       const language =
-        snippetForm.language || getFileLanguage(activeFile?.name ?? "");
+        parsedData.language || getFileLanguage(activeFile?.name ?? "");
 
       const result = await dispatch(
         createSnippet({
-          title: snippetForm.title,
-          description: snippetForm.description,
+          title: parsedData.title,
+          description: parsedData.description,
           code: activeFile?.content || "",
-          tags: tagsArray,
+          tags: parsedData.tags,
           language,
           author: {
             _id: user?._id || "",
@@ -344,11 +339,17 @@ const EditorPage = () => {
           language: "",
         });
         setIsSnippetModalOpen(false);
+        showToast("Snippet created successfully", "success");
       } else {
         throw new Error(result.payload as string);
       }
     } catch (error: any) {
-      console.error("Failed to create snippet:", error.message || error);
+      if (error.errors) {
+        showToast(error.errors[0].message, "error");
+      } else {
+        showToast(error.message || "Failed to create snippet", "error");
+      }
+      console.error("Failed to create snippet:", error);
     }
   };
 

src/pages/snippets/SnippetsPage.tsx

@@ -178,7 +178,7 @@ const SnippetsPage = () => {
                         </Badge>
                       ))}
                   </div>
-                  <pre className="bg-muted p-4 rounded-md overflow-x-auto max-h-40">
+                  <pre className="bg-muted p-4 rounded-md overflow-x-auto min-h-[120px] max-h-40 ">
                     <code>
                       {snippet.code.split("\n").slice(0, 5).join("\n")}
                       {snippet.code.split("\n").length > 5 ? "..." : ""}

src/schemas/index.ts

@@ -0,0 +1,20 @@
+import { z } from "zod";
+
+export const snippetFormSchema = z.object({
+  title: z.string().min(5, "Title is required with atleast 5 characters"),
+  description: z
+    .string()
+    .min(10, "Description is required with atleast 10 characters"),
+  tags: z
+    .string()
+    .min(1, "At least one tag is required")
+    .transform((val) =>
+      val
+        .split(",")
+        .map((tag) => tag.trim().toLowerCase())
+        .filter(Boolean)
+    ),
+  language: z.string().optional(),
+});
+
+export type SnippetFormInput = z.infer<typeof snippetFormSchema>;

src/types/index.ts

@@ -181,3 +181,10 @@ export interface SnippetState {
   currentPage: number;
   totalCount: number;
 }
+
+export interface SnippetFormState {
+  title: string;
+  description: string;
+  tags: string;
+  language: string;
+}