Added search to languages and timezone.

src/app/(main)/settings/profile/LanguageSetting.module.css

@@ -0,0 +1,4 @@
+div.menu {
+  max-height: 300px;
+  width: 300px;
+}

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -1,17 +1,27 @@
+import { useState } from 'react';
 import { Button, Dropdown, Item, Flexbox } from 'react-basics';
 import useLocale from 'components/hooks/useLocale';
 import { DEFAULT_LOCALE } from 'lib/constants';
 import { languages } from 'lib/lang';
 import useMessages from 'components/hooks/useMessages';
+import styles from './LanguageSetting.module.css';
 
 export function LanguageSetting() {
+  const [search, setSearch] = useState('');
   const { formatMessage, labels } = useMessages();
   const { locale, saveLocale } = useLocale();
-  const options = Object.keys(languages);
+  const options = search
+    ? Object.keys(languages).filter(n => {
+        return (
+          n.toLowerCase().includes(search.toLowerCase()) ||
+          languages[n].label.toLowerCase().includes(search.toLowerCase())
+        );
+      })
+    : Object.keys(languages);
 
   const handleReset = () => saveLocale(DEFAULT_LOCALE);
 
-  const renderValue = value => languages[value].label;
+  const renderValue = (value: string | number) => languages[value].label;
 
   return (
     <Flexbox gap={10}>
@@ -20,7 +30,9 @@ export function LanguageSetting() {
         value={locale}
         renderValue={renderValue}
         onSelect={saveLocale}
-        menuProps={{ style: { height: 300, width: 300 } }}
+        allowSearch={true}
+        onSearch={setSearch}
+        menuProps={{ className: styles.menu }}
       >
         {item => <Item key={item}>{languages[item].label}</Item>}
       </Dropdown>

src/app/(main)/settings/profile/TimezoneSetting.module.css

@@ -0,0 +1,4 @@
+div.menu {
+  max-height: 300px;
+  width: 300px;
+}

src/app/(main)/settings/profile/TimezoneSetting.tsx

@@ -1,13 +1,18 @@
+import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
 import { listTimeZones } from 'timezone-support';
 import useTimezone from 'components/hooks/useTimezone';
 import useMessages from 'components/hooks/useMessages';
 import { getTimezone } from 'lib/date';
+import styles from './TimezoneSetting.module.css';
 
 export function TimezoneSetting() {
+  const [search, setSearch] = useState('');
   const { formatMessage, labels } = useMessages();
   const [timezone, saveTimezone] = useTimezone();
-  const options = listTimeZones();
+  const options = search
+    ? listTimeZones().filter(n => n.toLowerCase().includes(search.toLowerCase()))
+    : listTimeZones();
 
   const handleReset = () => saveTimezone(getTimezone());
 
@@ -17,8 +22,9 @@ export function TimezoneSetting() {
         items={options}
         value={timezone}
         onSelect={saveTimezone}
-        style={{ flex: 1 }}
+        menuProps={{ className: styles.menu }}
-        menuProps={{ style: { height: 300 } }}
+        allowSearch={true}
+        onSearch={setSearch}
       >
         {item => <Item key={item}>{item}</Item>}
       </Dropdown>

src/lib/clickhouse.ts

@@ -110,7 +110,7 @@ async function parseFilters(websiteId: string, filters: QueryFilters = {}, optio
     params: {
       ...normalizeFilters(filters),
       websiteId,
-      startDate: maxDate(filters.startDate, new Date(website.resetAt)),
+      startDate: maxDate(filters.startDate, new Date(website?.resetAt)),
       websiteDomain: website.domain,
     },
   };

src/lib/prisma.ts

@@ -151,7 +151,7 @@ async function parseFilters(
     params: {
       ...normalizeFilters(filters),
       websiteId,
-      startDate: maxDate(filters.startDate, website.resetAt),
+      startDate: maxDate(filters.startDate, website?.resetAt),
       websiteDomain: website.domain,
     },
   };

src/queries/admin/website.ts

@@ -252,7 +252,7 @@ export async function createWebsite(
 }
 
 export async function updateWebsite(
-  websiteId,
+  websiteId: string,
   data: Prisma.WebsiteUpdateInput | Prisma.WebsiteUncheckedUpdateInput,
 ): Promise<Website> {
   return prisma.client.website.update({
@@ -264,7 +264,7 @@ export async function updateWebsite(
 }
 
 export async function resetWebsite(
-  websiteId,
+  websiteId: string,
 ): Promise<[Prisma.BatchPayload, Prisma.BatchPayload, Website]> {
   const { client, transaction } = prisma;