fix: resolve syntax error in customize page

Author: sahil-shv

app/customize/page.tsx

@@ -83,52 +83,8 @@ export default function CustomizePage(): ReactElement {
     }
   }, []);
 
-  // ── buildQueryParams ──────────────────────────────────────────────────────
-
-  const buildQueryParams = useCallback((): string => {
-    const params = new URLSearchParams();
-
-    if (hasUsername) {
-      params.set('user', trimmedUsername);
-    }
-
-    if (skipsCustomColors) {
-      // Virtual themes always emit theme=<name> and skip custom color params.
-      params.set('theme', theme);
-    } else {
-      const hasCustomColors = bgHex || accentHex || textHex;
-
-      // Custom hex colors take priority over theme
-      if (!hasCustomColors) {
-        params.set('theme', theme);
-      }
-      if (bgHex) params.set('bg', stripHash(bgHex));
-      if (accentHex) params.set('accent', stripHash(accentHex));
-      if (textHex) params.set('text', stripHash(textHex));
-    }
-
-    if (scale !== 'linear') params.set('scale', scale);
-    if (speed !== '8s') params.set('speed', speed);
-    if (font) params.set('font', font);
-    if (year) params.set('year', year);
-    if (radius !== 8) params.set('radius', radius.toString());
-    if (size !== 'medium') params.set('size', size);
-
-    if (hideTitle) params.set('hide_title', 'true');
-    if (hideBackground) params.set('hide_background', 'true');
-    if (hideStats) params.set('hide_stats', 'true');
-    if (viewMode !== 'default') params.set('view', viewMode);
-    if (deltaFormat !== 'percent') params.set('delta_format', deltaFormat);
-    if (badgeWidth !== '') params.set('width', badgeWidth.toString());
-    if (badgeHeight !== '') params.set('height', badgeHeight.toString());
-    if (grace !== 1) params.set('grace', grace.toString());
-    if (language !== 'en') params.set('lang', language);
-    if (timezone !== 'UTC') params.set('tz', timezone);
-
-    return params.toString();
-  }, [
-    hasUsername,
-    trimmedUsername,
+  const queryString = buildQueryParams({
+    username,
     theme,
     bgHex,
     accentHex,
@@ -149,9 +105,7 @@ export default function CustomizePage(): ReactElement {
     grace,
     language,
     timezone,
-  ]);
-
-  const queryString = buildQueryParams();
+  });
   const previewSrc = `/api/streak?${queryString}`;
   const exportSnippet = getExportSnippet(exportFormat, queryString);
 

app/customize/types.ts

@@ -85,6 +85,7 @@ export interface CustomizeOptions {
   badgeHeight: number | '';
   grace: number;
   language: Language;
+  timezone: Timezone;
 }
 export const TIMEZONES = [
   { value: 'UTC', label: 'UTC (Default)' },

app/customize/utils.test.ts

@@ -1,8 +1,12 @@
 import { describe, it, expect } from 'vitest';
-import { stripHash, isValidHex, buildQueryParams } from './utils';
+import {
+  stripHash,
+  isValidHex,
+  buildQueryParams,
+  getExportSnippet,
+  getPlaceholderSnippet,
+} from './utils';
 import type { CustomizeOptions } from './types';
-import { describe, expect, it } from 'vitest';
-import { getExportSnippet, getPlaceholderSnippet } from './utils';
 
 describe('Export Snippet utilities', () => {
   const EXPECTED_BASE_URL = 'https://commitpulse.vercel.app/api/streak';
@@ -112,6 +116,7 @@ describe('Export Snippet utilities', () => {
       badgeHeight: '',
       grace: 1,
       language: 'en',
+      timezone: 'UTC',
     };
 
     it('returns minimal params with default values', () => {
@@ -179,10 +184,11 @@ describe('Export Snippet utilities', () => {
         badgeHeight: 400,
         grace: 2,
         language: 'es' as const,
+        timezone: 'America/New_York' as const,
       };
       const result = buildQueryParams(options);
       expect(result).toBe(
-        'user=testuser&theme=dark&scale=log&speed=4s&font=fira&year=2023&radius=12&size=large&hide_title=true&hide_background=true&hide_stats=true&view=monthly&delta_format=absolute&width=600&height=400&grace=2&lang=es'
+        'user=testuser&theme=dark&scale=log&speed=4s&font=fira&year=2023&radius=12&size=large&hide_title=true&hide_background=true&hide_stats=true&view=monthly&delta_format=absolute&width=600&height=400&grace=2&lang=es&tz=America%2FNew_York'
       );
     });
   });

app/customize/utils.ts

@@ -1,6 +1,4 @@
 import type { CustomizeOptions, ExportFormat } from './types';
-const BADGE_BASE_URL = 'https://commitpulse.vercel.app/api/streak';
-import type { ExportFormat } from './types';
 
 const BADGE_BASE_URL = `${process.env.NEXT_PUBLIC_SITE_URL ?? 'https://commitpulse.vercel.app'}/api/streak`;
 
@@ -113,6 +111,7 @@ export function buildQueryParams(options: CustomizeOptions): string {
   if (options.badgeHeight !== '') params.set('height', options.badgeHeight.toString());
   if (options.grace !== 1) params.set('grace', options.grace.toString());
   if (options.language !== 'en') params.set('lang', options.language);
+  if (options.timezone !== 'UTC') params.set('tz', options.timezone);
 
   return params.toString();
 }