fix filter stuff

apps/web/src/app/(dashboard)/emails/email-list.tsx

@@ -45,12 +45,12 @@ import { useState } from "react";
 /* Stupid hydrating error. And I so stupid to understand the stupid NextJS docs */
 const DynamicSheetWithNoSSR = dynamic(
   () => import("@unsend/ui/src/sheet").then((mod) => mod.Sheet),
-  { ssr: false },
+  { ssr: false }
 );
 
 const DynamicSheetContentWithNoSSR = dynamic(
   () => import("@unsend/ui/src/sheet").then((mod) => mod.SheetContent),
-  { ssr: false },
+  { ssr: false }
 );
 
 export default function EmailsList() {
@@ -58,14 +58,12 @@ export default function EmailsList() {
   const [page, setPage] = useUrlState("page", "1");
   const [status, setStatus] = useUrlState("status");
   const [search, setSearch] = useUrlState("search");
-  const [domainName, setDomainName] = useUrlState("domain");
+  const [domain, setDomain] = useUrlState("domain");
-  const [apiKeyName, setApiKeyName] = useUrlState("apikey");
+  const [apiKey, setApiKey] = useUrlState("apikey");
-  const [domain, setDomain] = useState<string | null>(null);
-  const [apikey, setApikey] = useState<string | null>(null);
 
   const pageNumber = Number(page);
-  const domainId = Number(domain);
+  const domainId = domain ? Number(domain) : undefined;
-  const apiId = Number(apikey);
+  const apiId = apiKey ? Number(apiKey) : undefined;
 
   const emailsQuery = api.email.emails.useQuery({
     page: pageNumber,
@@ -82,20 +80,12 @@ export default function EmailsList() {
     setSelectedEmail(emailId);
   };
 
-  const handleDomainName = (val: string) => {
+  const handleDomain = (val: string) => {
     setDomain(val === "All Domain" ? null : val);
-    const nameOfDomain = domainsQuery?.find(
-      (item) => item.id.toString() === val,
-    );
-    setDomainName(nameOfDomain?.name || "All Domain");
   };
 
-  const handleApiKeyName = (val: string) => {
+  const handleApiKey = (val: string) => {
-    setApikey(val === "All ApiKey" ? null : val);
+    setApiKey(val === "All ApiKey" ? null : val);
-    const nameOfApiKey = apiKeysQuery?.find(
-      (item) => item.id.toString() === val,
-    );
-    setApiKeyName(nameOfApiKey?.name || "All ApiKey");
   };
 
   const handleSheetChange = (isOpen: boolean) => {
@@ -119,11 +109,14 @@ export default function EmailsList() {
         />
         <div className="flex justify-center items-center gap-x-3">
           <Select
-            value={apikey ?? "All ApiKey"}
+            value={apiKey ?? "All ApiKey"}
-            onValueChange={(val) => handleApiKeyName(val)}
+            onValueChange={(val) => handleApiKey(val)}
           >
             <SelectTrigger className="w-[180px]">
-              {apiKeyName ? apiKeyName : "All ApiKey"}
+              {apiKey
+                ? apiKeysQuery?.find((apikey) => apikey.id === Number(apiKey))
+                    ?.name
+                : "All ApiKey"}
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="All ApiKey">All ApiKey</SelectItem>
@@ -133,17 +126,16 @@ export default function EmailsList() {
                     {apikey.name}
                   </SelectItem>
                 ))}
-              {/* <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark">Dark</SelectItem>
-            <SelectItem value="system">System</SelectItem> */}
             </SelectContent>
           </Select>
           <Select
             value={domain ?? "All Domain"}
-            onValueChange={(val) => handleDomainName(val)}
+            onValueChange={(val) => handleDomain(val)}
           >
             <SelectTrigger className="w-[180px]">
-              {domainName ? domainName : "All Domain"}
+              {domain
+                ? domainsQuery?.find((d) => d.id === Number(domain))?.name
+                : "All Domain"}
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="All Domain" className=" capitalize">
@@ -155,9 +147,6 @@ export default function EmailsList() {
                     {domain.name}
                   </SelectItem>
                 ))}
-              {/* <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark">Dark</SelectItem>
-            <SelectItem value="system">System</SelectItem> */}
             </SelectContent>
           </Select>
           <Select
@@ -188,9 +177,6 @@ export default function EmailsList() {
                   {status.toLowerCase().replace("_", " ")}
                 </SelectItem>
               ))}
-              {/* <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark">Dark</SelectItem>
-            <SelectItem value="system">System</SelectItem> */}
             </SelectContent>
           </Select>
         </div>
@@ -243,7 +229,7 @@ export default function EmailsList() {
                             Scheduled at{" "}
                             {formatDate(
                               email.scheduledAt,
-                              "MMM dd'th', hh:mm a",
+                              "MMM dd'th', hh:mm a"
                             )}
                           </TooltipContent>
                         </Tooltip>
@@ -259,7 +245,7 @@ export default function EmailsList() {
                     {email.latestStatus !== "SCHEDULED"
                       ? formatDate(
                           email.scheduledAt ?? email.createdAt,
-                          "MMM do, hh:mm a",
+                          "MMM do, hh:mm a"
                         )
                       : "--"}
                   </TableCell>

apps/web/src/server/public-api/api/emails/send-email.ts

@@ -11,30 +11,42 @@ const route = createRoute({
       required: true,
       content: {
         "application/json": {
-          schema: z.object({
+          schema: z
-            to: z.string().or(z.array(z.string())),
+            .object({
-            from: z.string(),
+              to: z.string().or(z.array(z.string())),
-            subject: z.string().optional().openapi({ description: 'Optional when templateId is provided' }),
+              from: z.string(),
-            templateId: z.string().optional().openapi({ description: 'ID of a template from the dashboard' }),
+              subject: z
-            variables: z.record(z.string()).optional(),
+                .string()
-            replyTo: z.string().or(z.array(z.string())).optional(),
+                .optional()
-            cc: z.string().or(z.array(z.string())).optional(),
+                .openapi({
-            bcc: z.string().or(z.array(z.string())).optional(),
+                  description: "Optional when templateId is provided",
-            text: z.string().optional(),
+                }),
-            html: z.string().optional(),
+              templateId: z
-            attachments: z
+                .string()
-              .array(
+                .optional()
-                z.object({
+                .openapi({
-                  filename: z.string(),
+                  description: "ID of a template from the dashboard",
-                  content: z.string(),
+                }),
-                })
+              variables: z.record(z.string()).optional(),
-              )
+              replyTo: z.string().or(z.array(z.string())).optional(),
-              .optional(),
+              cc: z.string().or(z.array(z.string())).optional(),
-            scheduledAt: z.string().datetime().optional(),
+              bcc: z.string().or(z.array(z.string())).optional(),
-          }).refine(
+              text: z.string().optional(),
-            data => !!data.subject || !!data.templateId,
+              html: z.string().optional(),
-            'Either subject or templateId should be passed.',
+              attachments: z
-          ),
+                .array(
+                  z.object({
+                    filename: z.string(),
+                    content: z.string(),
+                  })
+                )
+                .optional(),
+              scheduledAt: z.string().datetime().optional(),
+            })
+            .refine(
+              (data) => !!data.subject || !!data.templateId,
+              "Either subject or templateId should be passed."
+            ),
         },
       },
     },
@@ -58,6 +70,7 @@ function send(app: PublicAPIApp) {
     const email = await sendEmail({
       ...c.req.valid("json"),
       teamId: team.id,
+      apiKeyId: team.apiKeyId,
     });
 
     return c.json({ emailId: email?.id });

apps/web/src/server/public-api/auth.ts

@@ -64,7 +64,7 @@ export const getTeamFromToken = async (c: Context) => {
     })
     .catch(console.error);
 
-  return team;
+  return { ...team, apiKeyId: apiKey.id };
 };
 
 const checkRateLimit = (token: string) => {

apps/web/src/server/service/email-service.ts

@@ -46,7 +46,7 @@ export const replaceVariables = (
  Send transactional email
  */
 export async function sendEmail(
-  emailContent: EmailContent & { teamId: number }
+  emailContent: EmailContent & { teamId: number; apiKeyId?: number }
 ) {
   const {
     to,
@@ -62,6 +62,7 @@ export async function sendEmail(
     cc,
     bcc,
     scheduledAt,
+    apiKeyId,
   } = emailContent;
   let subject = subjectFromApiCall;
   let html = htmlFromApiCall;
@@ -122,6 +123,7 @@ export async function sendEmail(
       attachments: attachments ? JSON.stringify(attachments) : undefined,
       scheduledAt: scheduledAtDate,
       latestStatus: scheduledAtDate ? "SCHEDULED" : "QUEUED",
+      apiId: apiKeyId,
     },
   });