Resolve "Fix the initial loading of the metrics + event preview page" & "Fix 3 files that have type errors"

frontend/src/components/EventPreview.tsx

@@ -40,10 +40,10 @@ const EventPreview: FC = () => {
     }
   }, [data]);
 
-  if ((isLoading || !data) && !cursor) {
+  if ((isLoading || !data) && !cursor.length) {
     return (
-      <div>
-        <LoadingSpinner />.
+      <div className="min-h-[100px] align-center">
+        <LoadingSpinner />
       </div>
     );
   }
@@ -69,7 +69,7 @@ const EventPreview: FC = () => {
         queryClient.invalidateQueries(["preview_events", cursor]);
         return;
       case "START":
-        setCursor(null);
+        setCursor("");
         setCurrentPage(1);
         queryClient.invalidateQueries(["preview_events", null]);
         return;
@@ -106,9 +106,9 @@ const EventPreview: FC = () => {
             className="hover:bg-background"
             style={{ background: "#ffffff" }}
           >
-            {!data && !!cursor && (
+            {!data && !!cursor.length && (
               <div className="loadMoreSpinner">
-                <LoadingSpinner />.
+                <LoadingSpinner />
               </div>
             )}
 
@@ -122,7 +122,10 @@ const EventPreview: FC = () => {
                     </div>
                     <div className="flex align-middle text-[16px]">
                       <p className="leading-[24px]">customer_id: </p>
-                      <p className="infoValue"> <CopyText showIcon textToCopy={event.customer_id}/></p>
+                      <p className="infoValue">
+                        {" "}
+                        <CopyText showIcon textToCopy={event.customer_id} />
+                      </p>
                     </div>
                   </div>
                 }
@@ -133,7 +136,10 @@ const EventPreview: FC = () => {
                   <div className="grid grid-cols-2">
                     <div className="flex align-middle text-[16px] ">
                       <p className="leading-[24px]">ID: </p>
-                      <p className="infoValue">  <CopyText showIcon textToCopy={event.idempotency_id}/></p>
+                      <p className="infoValue">
+                        {" "}
+                        <CopyText showIcon textToCopy={event.idempotency_id} />
+                      </p>
                     </div>
 
                     <p className="text-[16px]">Properties: </p>

frontend/src/pages/ResetPassword.tsx

@@ -6,6 +6,7 @@ import "./Login.css";
 import { useMutation } from "react-query";
 import { toast } from "react-toastify";
 import LoadingSpinner from "../components/LoadingSpinner";
+import { QueryErrors } from "../types/error-response-types";
 
 interface ResetPasswordForm extends HTMLFormControlsCollection {
   email: string;
@@ -30,7 +31,7 @@ const ResetPassword: FC = () => {
       onSuccess: (response) => {
         setIsEmailSent(true);
       },
-      onError: (error) => {
+      onError: (error: QueryErrors) => {
         if (error.response.status === 403) {
           toast.error("Please login again.");
           window.location.reload();

frontend/src/pages/SetNewPassword.tsx

@@ -8,6 +8,7 @@ import { toast } from "react-toastify";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { instance } from "../api/api";
 import Cookies from "universal-cookie";
+import { QueryErrors } from "../types/error-response-types";
 
 const cookies = new Cookies();
 
@@ -42,7 +43,7 @@ const SetNewPassword: FC = () => {
 
   const mutation = useMutation(
     (data: { userId: string; token: string; password: string }) =>
-      Authentication.setNewPassword(token, userId, password),
+      Authentication.setNewPassword(data.token, data.userId, data.password),
     {
       onSuccess: (response) => {
         const { token, detail } = response;
@@ -52,15 +53,16 @@ const SetNewPassword: FC = () => {
         queryClient.refetchQueries("session");
         redirectDashboard();
       },
-      onError: (error) => {
+      onError: (error: QueryErrors) => {
         // setError(error.message)
+
         toast.error(error.response.data.message);
       },
     }
   );
 
   const handleUpdatePassword = (event: React.FormEvent<FormElements>) => {
-    mutation.mutate({ token, userId, password });
+    if (token && userId) mutation.mutate({ token, userId, password });
   };
 
   if (!isAuthenticated) {

frontend/src/pages/ViewMetrics.tsx

@@ -141,7 +141,7 @@ const ViewMetrics: FC = () => {
     >
       <div className="flex flex-col space-y-4 bg-background">
         {isLoading || data === undefined ? (
-          <div className="flex justify-center">
+          <div className="flex align-center justify-center min-h-[100px] bg-white">
             <LoadingSpinner />{" "}
           </div>
         ) : (

frontend/src/types/error-response-types.ts

@@ -10,3 +10,11 @@ export interface ValidationError {
   detail: string;
   attr: string;
 }
+export type QueryErrors = {
+  response: Resp;
+};
+interface Resp extends Response {
+  data: {
+    [key: string]: string;
+  };
+}

frontend/src/types/metric-type.ts

@@ -3,7 +3,7 @@ export interface MetricType {
   property_name: string;
   usage_aggregation_type: string;
   billable_aggregation_type?: string;
-  metric_id: string;
+  metric_id?: string;
   billable_metric_name?: string;
   metric_type: "counter" | "stateful" | "rate";
   numeric_filters?: NumericFilterType[];