fix typescript errors

PhilDL · Feb 22, 2024 · ffbc576 · ffbc576
1 parent 6f70a1b
commit ffbc576
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 173 deletions.
diff --git a/app/routes/_blog.blog.load-more-posts.tsx b/app/routes/_blog.blog.load-more-posts.tsx
@@ -69,5 +69,5 @@ export async function action({ request }: ActionFunctionArgs) {
       }
       break;
   }
-  return json({});
-}
+
+}
diff --git a/app/services/types.ts b/app/services/types.ts
@@ -1,7 +1,5 @@
-import type { LoaderFunction } from "@remix-run/server-runtime";
+import type { LoaderFunction, SerializeFrom } from "@remix-run/server-runtime";
 
-export type UwrapJSONLoaderData<T extends LoaderFunction> = Awaited<
-  ReturnType<Awaited<ReturnType<T>>["json"]>
->;
+export type UwrapJSONLoaderData<T extends LoaderFunction> = SerializeFrom<T>;
 
 export type UwrapLoaderData<T extends LoaderFunction> = Awaited<ReturnType<T>>;
diff --git a/app/services/utils.ts b/app/services/utils.ts
@@ -31,13 +31,11 @@ export function safeRedirect(
  * @param {string} id The route id
  * @returns {JSON|undefined} The router data or undefined if not found
  */
-export function useMatchesData(
-  id: string
-): Record<string, unknown> | undefined {
+export function useMatchesData(id: string): unknown | undefined {
   const matchingRoutes = useMatches();
   const route = useMemo(
     () => matchingRoutes.find((route) => route.id === id),
-    [matchingRoutes, id]
+    [matchingRoutes, id],
   );
   return route?.data;
 }

diff --git a/app/ui/components/alert-dialog.tsx b/app/ui/components/alert-dialog.tsx
@@ -2,35 +2,24 @@
 
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { cn } from "~/ui/utils";
 
 import { buttonVariants } from "~/ui/components/button";
+import { cn } from "~/ui/utils";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = ({
-  className,
-  children,
-  ...props
-}: AlertDialogPrimitive.AlertDialogPortalProps) => (
-  <AlertDialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
-      {children}
-    </div>
-  </AlertDialogPrimitive.Portal>
-);
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in",
-      className
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
     ref={ref}
@@ -47,8 +36,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        className,
       )}
       {...props}
     />
@@ -63,7 +52,7 @@ const AlertDialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -77,7 +66,7 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -121,6 +110,19 @@ const AlertDialogAction = React.forwardRef<
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
+const AlertDialogDestructiveAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ variant: "destructive" }), className)}
+    {...props}
+  />
+));
+AlertDialogDestructiveAction.displayName =
+  AlertDialogPrimitive.Action.displayName;
+
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
@@ -130,7 +132,7 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -139,6 +141,8 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
   AlertDialogTrigger,
   AlertDialogContent,
   AlertDialogHeader,
@@ -147,4 +151,5 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogDestructiveAction,
 };
diff --git a/app/ui/components/command-bar.tsx b/app/ui/components/command-bar.tsx
@@ -22,12 +22,18 @@ import {
   CommandSeparator,
 } from "~/ui/components/command";
 
-export const CommandBar = () => {
+export function CommandBar<
+  TData extends {
+    tags: Tag[];
+    authors: Author[];
+    posts: Post[]
+  },
+>() {
   const [open, setOpen] = useState(false);
   const commandRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const navigation = useNavigation();
-  const command = useFetcher();
+  const command = useFetcher<TData>();
   const [pages, setPages] = useState<string[]>([]);
   const page = pages[pages.length - 1];
   const [search, setSearch] = useState("");

diff --git a/app/ui/components/dialog.tsx b/app/ui/components/dialog.tsx
@@ -3,24 +3,16 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+
 import { cn } from "~/ui/utils";
 
 const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
-  className,
-  children,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
-      {children}
-    </div>
-  </DialogPrimitive.Portal>
-);
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -29,8 +21,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
   />
@@ -46,8 +38,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        className,
       )}
       {...props}
     >
@@ -68,7 +60,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -82,7 +74,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -97,7 +89,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
@@ -118,7 +110,10 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
+  DialogPortal,
+  DialogOverlay,
   DialogTrigger,
+  DialogClose,
   DialogContent,
   DialogHeader,
   DialogFooter,

diff --git a/app/ui/components/layout/navbar.tsx b/app/ui/components/layout/navbar.tsx
@@ -177,7 +177,7 @@ export const Navbar = ({
               <Menu className="size-6" />
             </Button>
           </SheetTrigger>
-          <SheetContent position="right" size={"xl"}>
+          <SheetContent side="right">
             <SheetHeader>
               <SheetTitle>{settings.title}</SheetTitle>
               <SheetDescription>{settings.description}</SheetDescription>

diff --git a/app/ui/components/posts/posts-list.tsx b/app/ui/components/posts/posts-list.tsx
@@ -4,7 +4,8 @@ import { useFetcher } from "@remix-run/react";
 import { AuthenticityTokenInput } from "remix-utils/csrf/react";
 import { cn } from "~/ui/utils";
 
-import { Button } from "~/ui/components";;
+import { Button } from "~/ui/components";
+import { type SerializeFrom } from "@remix-run/server-runtime";
 
 export type PostsListProps = {
   posts: TPostPreview[];
@@ -14,6 +15,11 @@ export type PostsListProps = {
   className?: string;
 };
 
+export type TT = SerializeFrom<{
+  posts: TPostPreview[];
+  pagination?: { page: number; pages: number; next: number | null }
+}>
+
 export const PostsList = ({
   posts,
   pagination = { page: 1, pages: 1, next: null },
@@ -24,13 +30,13 @@ export const PostsList = ({
   const [page, setPage] = useState<number>(pagination.page);
   const [next, setNext] = useState<number | null>(pagination.next);
   const [morePosts, setMorePosts] = useState<TPostPreview[]>([]);
-  const paginate = useFetcher();
+  const paginate = useFetcher<TT>();
 
   useEffect(() => {
     if (paginate.state === "idle" && paginate.data && paginate.data.posts) {
-      setMorePosts((prev) => [...prev, ...paginate.data.posts]);
-      setPage(paginate.data.pagination.page);
-      setNext(paginate.data.pagination.next);
+      setMorePosts((prev) => [...prev, ...paginate.data?.posts ?? []]);
+      setPage(paginate.data.pagination?.page ?? 0);
+      setNext(paginate.data.pagination?.next ?? null);
     }
   }, [paginate.state, paginate.data]);