[RZB-2500048]: fix build issues

Author: xkeshav

.vscode/dictionaries/project-words.txt

@@ -42,5 +42,6 @@ threadzip
 Threazip
 vaul
 venv
+Verdana
 waitlist
 werkzeug

src/components/FeedbackForm.astro

@@ -44,14 +44,20 @@ import "@/assets/styles/feedback.css";
     e.preventDefault();
     errorDiv.style.display = "none";
 
-    const formData = Object.fromEntries(new FormData(form));
+    const formData = new FormData(form);
+    const userName = formData.get("name") as string;
+    const feedback = formData.get("feedback") as string;
+
+    console.log({ formData, userName, feedback });
+
+    console.log(formData.entries());
 
     // Client-side validation
-    if (formData.name.trim().length < 2) {
+    if (userName.trim().length < 2) {
       showError("Name must be at least 2 characters long.");
       return;
     }
-    if (formData.feedback.trim().length < 10) {
+    if (feedback.trim().length < 10) {
       showError("Feedback must be at least 10 characters long.");
       return;
     }
@@ -60,12 +66,12 @@ import "@/assets/styles/feedback.css";
     submitButton.textContent = "Submitting...";
 
     try {
-      const response = await fetch("/api/submit-feedback", {
+      const response = await fetch("/api/feedback", {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify(formData)
+        body: JSON.stringify(Object.fromEntries(formData))
       });
 
       if (response.ok) {

src/components/canvasDialogue.astro

@@ -68,6 +68,11 @@ import "@/assets/styles/canvas.css";
 
 <script>
   class CanvasGenerator {
+    input: HTMLInputElement;
+    canvasContainer: HTMLDivElement;
+    fullCheckbox: HTMLInputElement;
+    fontFamilySelect: HTMLSelectElement;
+
     constructor() {
       this.initializeElements();
       this.bindEvents();
@@ -76,8 +81,8 @@ import "@/assets/styles/canvas.css";
     initializeElements() {
       this.input = document.getElementById("name") as HTMLInputElement;
       this.canvasContainer = document.getElementById("canvasDiv") as HTMLDivElement;
-      this.fullCheckbox = document.getElementById("full") as HTMLDivElement;
-      this.fontFamilySelect = document.getElementById("fontFamily") as HTMLDivElement;
+      this.fullCheckbox = document.getElementById("full") as HTMLInputElement;
+      this.fontFamilySelect = document.getElementById("fontFamily") as HTMLSelectElement;
     }
 
     bindEvents() {
@@ -86,8 +91,9 @@ import "@/assets/styles/canvas.css";
       });
     }
 
-    handleClick(event: any) {
-      const variant = event.target.dataset.variant;
+    handleClick(event: Event) {
+      const target = event.target as HTMLElement;
+      const variant = target.dataset.variant;
 
       switch (variant) {
         case "text":
@@ -171,7 +177,7 @@ import "@/assets/styles/canvas.css";
         ? text
         : text
             .split(" ")
-            .map((w: any) => w[0])
+            .map((w: string) => w[0])
             .join("")
             .toUpperCase();
 
@@ -189,7 +195,7 @@ import "@/assets/styles/canvas.css";
       this.displayImage(this.createCanvas(timeString));
     }
 
-    displayImage(dataUrl) {
+    displayImage(dataUrl: string) {
       const img = document.createElement("img");
       img.src = dataUrl;
       img.alt = "Generated fun image";
@@ -204,9 +210,9 @@ import "@/assets/styles/canvas.css";
 
     resetSettings() {
       this.fullCheckbox.checked = false;
-      (document.getElementById("cardColor") as HTMLInputElement).value = "random";
-      (document.getElementById("fontColor") as HTMLInputElement).value = "white";
-      (document.getElementById("fontFamily") as HTMLInputElement).value = "Comic Sans MS";
+      (document.getElementById("cardColor") as HTMLSelectElement).value = "random";
+      (document.getElementById("fontColor") as HTMLSelectElement).value = "white";
+      (document.getElementById("fontFamily") as HTMLSelectElement).value = "Comic Sans MS";
     }
   }
 

src/components/kannadaHindi.astro

@@ -97,52 +97,52 @@ const getLetterForLanguage = (pair: LetterPair, langCode: string): string => {
   }
 };
 
-const updateUI = () => {
-  const languageLabels = document.querySelectorAll(".language-label");
-  languageLabels[0].textContent = languages.find((lang) => lang.code === selectedLanguage1)?.name || "";
-  languageLabels[1].textContent = languages.find((lang) => lang.code === selectedLanguage2)?.name || "";
-
-  document.querySelectorAll(".language-letter-card").forEach((card, index) => {
-    const pair = letterPairs[index];
-    const lang1Letter = getLetterForLanguage(pair, selectedLanguage1);
-    const lang2Letter = getLetterForLanguage(pair, selectedLanguage2);
-
-    const lang1Element = card.querySelector(".language-letter-top");
-    const lang2Element = card.querySelector(".language-letter-bottom");
-
-    if (lang1Element && lang2Element) {
-      lang1Element.textContent = lang1Letter;
-      lang2Element.textContent = lang2Letter;
-
-      // Add special styling for English text
-      lang1Element.classList.toggle("english-text", selectedLanguage1 === "en");
-      lang2Element.classList.toggle("english-text", selectedLanguage2 === "en");
-
-      // Add transliteration class for proper display of diacritical marks
-      lang1Element.classList.toggle("transliteration", selectedLanguage1 === "en");
-      lang2Element.classList.toggle("transliteration", selectedLanguage2 === "en");
-    }
-  });
-};
-
-const handleLanguageChange = (event: Event, isFirstDropdown: boolean) => {
-  if (event.target instanceof HTMLSelectElement) {
-    if (isFirstDropdown) {
-      selectedLanguage1 = event.target.value;
-    } else {
-      selectedLanguage2 = event.target.value;
-    }
-    updateUI();
-  }
-};
+//const updateUI = () => {
+//  const languageLabels = document.querySelectorAll(".language-label");
+//  languageLabels[0].textContent = languages.find((lang) => lang.code === selectedLanguage1)?.name || "";
+//  languageLabels[1].textContent = languages.find((lang) => lang.code === selectedLanguage2)?.name || "";
+
+//  document.querySelectorAll(".language-letter-card").forEach((card, index) => {
+//    const pair = letterPairs[index];
+//    const lang1Letter = getLetterForLanguage(pair, selectedLanguage1);
+//    const lang2Letter = getLetterForLanguage(pair, selectedLanguage2);
+
+//    const lang1Element = card.querySelector(".language-letter-top");
+//    const lang2Element = card.querySelector(".language-letter-bottom");
+
+//    if (lang1Element && lang2Element) {
+//      lang1Element.textContent = lang1Letter;
+//      lang2Element.textContent = lang2Letter;
+
+//      // Add special styling for English text
+//      lang1Element.classList.toggle("english-text", selectedLanguage1 === "en");
+//      lang2Element.classList.toggle("english-text", selectedLanguage2 === "en");
+
+//      // Add transliteration class for proper display of diacritical marks
+//      lang1Element.classList.toggle("transliteration", selectedLanguage1 === "en");
+//      lang2Element.classList.toggle("transliteration", selectedLanguage2 === "en");
+//    }
+//  });
+//};
+
+//const handleLanguageChange = (event: Event, isFirstDropdown: boolean) => {
+//  if (event.target instanceof HTMLSelectElement) {
+//    if (isFirstDropdown) {
+//      selectedLanguage1 = event.target.value;
+//    } else {
+//      selectedLanguage2 = event.target.value;
+//    }
+//    updateUI();
+//  }
+//};
 ---
 
 <div class="language-letters-container">
   <!-- Dropdown Section -->
   <div class="toggle-container">
     <div class="dropdown-wrapper">
       <label class="dropdown-label">Language 1</label>
-      <select id="languageDropdown1" on:change={(e: any) => handleLanguageChange(e, true)}>
+      <select id="languageDropdown1">
         {
           languages.map((lang) => (
             <option value={lang.code} selected={lang.code === selectedLanguage1}>
@@ -155,7 +155,7 @@ const handleLanguageChange = (event: Event, isFirstDropdown: boolean) => {
 
     <div class="dropdown-wrapper">
       <label class="dropdown-label">Language 2</label>
-      <select id="languageDropdown2" on:change={(e: any) => handleLanguageChange(e, false)}>
+      <select id="languageDropdown2">
         {
           languages.map((lang) => (
             <option value={lang.code} selected={lang.code === selectedLanguage2}>
@@ -174,7 +174,7 @@ const handleLanguageChange = (event: Event, isFirstDropdown: boolean) => {
       letterPairs
         .filter((pair) => pair.type === "vowel")
         .map((pair, index) => (
-          <div key={`vowel-${index}`} class="language-letter-card language-letter-card-vowel">
+          <div data-key={`vowel-${index}`} class="language-letter-card language-letter-card-vowel">
             <div class="language-letter-kannada">{pair.kannada}</div>
             <div class="language-letter-hindi">{pair.hindi}</div>
             {/*<div class="language-letter-english">{pair.english}</div> */}
@@ -189,7 +189,7 @@ const handleLanguageChange = (event: Event, isFirstDropdown: boolean) => {
       letterPairs
         .filter((pair) => pair.type === "consonant")
         .map((pair, index) => (
-          <div key={`consonant-${index}`} class="language-letter-card language-letter-card-consonant">
+          <div data-key={`consonant-${index}`} class="language-letter-card language-letter-card-consonant">
             <div class="language-letter-kannada">{pair.kannada}</div>
             <div class="language-letter-hindi">{pair.hindi}</div>
           </div>
@@ -199,9 +199,9 @@ const handleLanguageChange = (event: Event, isFirstDropdown: boolean) => {
 </div>
 <script>
   // Letter generation helpers
-  const generateLetters = (startCode: number, length: number, extraCodes = []) =>
+  const generateLetters = (startCode: number, length: number, extraCodes = [] as number[]) =>
     Array.from({ length }, (_, i) => String.fromCodePoint(startCode + i)).filter(
-      (_, i) => !extraCodes.includes((startCode + i) as never)
+      (_, i) => !extraCodes.includes(startCode + i)
     );
 
   // Letter sets

src/data/feedback.json

@@ -34,5 +34,11 @@
     "name": "esvsDVsdv",
     "feedback": "dsvsdvsDvsdvds1111111111",
     "timestamp": "2025-02-13T15:18:13.114Z"
+  },
+  {
+    "id": 1740888288998,
+    "name": "product 1",
+    "feedback": "We value your thoughts and suggestions",
+    "timestamp": "2025-03-02T04:04:48.998Z"
   }
-]
+]

src/pages/api/submit-feedback.ts src/pages/api/feedback.tssrc/pages/api/submit-feedback.ts renamed to src/pages/api/feedback.ts

@@ -7,9 +7,11 @@ import path from "node:path";
 export const prerender = false;
 
 export const POST: APIRoute = async ({ request }) => {
+  console.log({ request });
   try {
     // Get the raw body and parse it manually
     const data = await request.json();
+    console.log({ data });
     const name = data.name?.trim();
     const feedback = data.feedback?.trim();
 

tsconfig.json

@@ -15,7 +15,11 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "jsxImportSource": "react",
-    "lib": ["es2022", "dom", "dom.iterable"],
+    "lib": [
+      "es2022",
+      "dom",
+      "dom.iterable"
+    ],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "noEmit": true,
@@ -24,21 +28,52 @@
     "strict": true,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
+    "strictPropertyInitialization": false,
     "target": "ESNext",
     "paths": {
-      "@/*": ["./src/*"],
-      "@/assets/*": ["src/assets/*"],
-      "@/components/*": ["src/components/*"],
-      "@/layouts/*": ["src/layouts/*.astro"],
-      "@/utils/*": ["src/utils/*"],
-      "@/libs": ["src/libs/index.ts"],
-      "@/hooks/*": ["src/hooks/*"],
-      "@/types": ["src/types/index.ts"],
-      "@/mocks/*": ["src/mocks/*"],
-      "@/site-config": ["src/site.config.ts"]
+      "@/*": [
+        "./src/*"
+      ],
+      "@/assets/*": [
+        "src/assets/*"
+      ],
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/layouts/*": [
+        "src/layouts/*.astro"
+      ],
+      "@/utils/*": [
+        "src/utils/*"
+      ],
+      "@/libs": [
+        "src/libs/index.ts"
+      ],
+      "@/hooks/*": [
+        "src/hooks/*"
+      ],
+      "@/types": [
+        "src/types/index.ts"
+      ],
+      "@/mocks/*": [
+        "src/mocks/*"
+      ],
+      "@/site-config": [
+        "src/site.config.ts"
+      ]
     },
     "verbatimModuleSyntax": true
   },
-  "include": ["src", "*.ts", "*.tsx"],
-  "exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist", ".eslintrc.mjs"]
-}
+  "include": [
+    "src",
+    "*.ts",
+    "*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/node_modules/*",
+    ".vscode",
+    "dist",
+    ".eslintrc.mjs"
+  ]
+}