Replace Jotai with Zustand dialogs store and add robots.txt (#9)

Author: BetrixDev

app/components/dialogs/delete-video-dialog.tsx

@@ -6,19 +6,26 @@ import {
   CredenzaHeader,
   CredenzaTitle,
 } from "@/components/ui/credenza";
-import { useAtom } from "jotai";
 import { toast } from "sonner";
-import { deleteVideoAtom } from "@/lib/atoms";
 import { usageDataQueryOptions, videosQueryOptions } from "@/lib/query-utils";
 import { notNanOrDefault } from "@/lib/utils";
 import { queryClient } from "@/routes/__root";
 import { deleteVideoServerFn } from "@/server-fns/videos";
+import { useDialogsStore } from "@/lib/stores/dialogs";
 
 export function DeleteVideoDialog() {
-  const [deleteVideoData, setDeleteVideoData] = useAtom(deleteVideoAtom);
+  const closeDeleteVideoDialog = useDialogsStore(
+    (state) => state.closeDeleteVideoDialog
+  );
+  const deleteVideoDialogData = useDialogsStore(
+    (state) => state.deleteVideoDialogData
+  );
+  const isDeleteVideoDialogOpen = useDialogsStore(
+    (state) => state.isDeleteVideoDialogOpen
+  );
 
   async function doDeleteVideo() {
-    if (!deleteVideoData) {
+    if (!isDeleteVideoDialogOpen || !deleteVideoDialogData) {
       return;
     }
 
@@ -28,7 +35,6 @@ export function DeleteVideoDialog() {
     );
 
     function reset(message?: string) {
-      console.log("resetting videos to ", oldVideos);
       queryClient.setQueryData(usageDataQueryOptions.queryKey, oldUsageData);
 
       queryClient.setQueryData(videosQueryOptions.queryKey, (old) => {
@@ -45,7 +51,7 @@ export function DeleteVideoDialog() {
       const videos =
         queryClient.getQueryData(videosQueryOptions.queryKey)?.videos ?? [];
 
-      const video = videos.find((v) => v.id === deleteVideoData.id);
+      const video = videos.find((v) => v.id === deleteVideoDialogData.videoId);
 
       queryClient.setQueryData(usageDataQueryOptions.queryKey, (old) => {
         console.log(old);
@@ -62,15 +68,15 @@ export function DeleteVideoDialog() {
       queryClient.setQueryData(videosQueryOptions.queryKey, (old) => {
         return {
           ...old,
-          videos: videos.filter((v) => v.id !== deleteVideoData.id),
+          videos: videos.filter((v) => v.id !== deleteVideoDialogData.videoId),
         };
       });
 
-      setDeleteVideoData(undefined);
+      closeDeleteVideoDialog();
 
       toast.promise(
         deleteVideoServerFn({
-          data: { videoId: deleteVideoData.id },
+          data: { videoId: deleteVideoDialogData.videoId },
         }),
         {
           loading: "Queueing video for deletion...",
@@ -84,34 +90,29 @@ export function DeleteVideoDialog() {
     }
   }
 
-  if (deleteVideoData === undefined) {
+  if (!isDeleteVideoDialogOpen || !deleteVideoDialogData) {
     return null;
   }
 
   return (
     <Credenza
       onOpenChange={(o) => {
         if (!o) {
-          setDeleteVideoData(undefined);
+          closeDeleteVideoDialog();
         }
       }}
-      open={deleteVideoData !== undefined}
+      open={isDeleteVideoDialogOpen}
     >
       <CredenzaContent>
         <CredenzaHeader>
           <CredenzaTitle>Confirm Video Deletion</CredenzaTitle>
           <CredenzaDescription>
             Are you sure you want to delete{" "}
-            <strong>{deleteVideoData.name}</strong>?
+            <strong>{deleteVideoDialogData.videoTitle}</strong>?
           </CredenzaDescription>
         </CredenzaHeader>
         <div className="flex gap-2 items-end">
-          <Button
-            className="grow"
-            onMouseDown={() => {
-              setDeleteVideoData(undefined);
-            }}
-          >
+          <Button className="grow" onMouseDown={closeDeleteVideoDialog}>
             Cancel
           </Button>
           <Button

app/components/dialogs/edit-video-dialog.tsx

@@ -9,15 +9,14 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useForm } from "@tanstack/react-form";
-import { useAtom } from "jotai";
 import { useEffect } from "react";
 import { toast } from "sonner";
 import { FieldInfo } from "./upload-video-dialog";
 import { useRouter } from "@tanstack/react-router";
-import { editVideoAtom } from "@/lib/atoms";
 import { updateVideoDataServerFn } from "@/server-fns/videos";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { videosQueryOptions } from "@/lib/query-utils";
+import { useDialogsStore } from "@/lib/stores/dialogs";
 
 type FormData = {
   title?: string;
@@ -28,31 +27,42 @@ export function EditVideoDialog() {
   const router = useRouter();
   const queryClient = useQueryClient();
   const { data } = useQuery(videosQueryOptions);
-  const [editVideo, setEditVideo] = useAtom(editVideoAtom);
 
-  const videoData = data?.videos.find((v) => v.id === editVideo?.id);
+  const editVideoDialogData = useDialogsStore(
+    (state) => state.editVideoDialogData
+  );
+  const isEditVideoDialogOpen = useDialogsStore(
+    (state) => state.isEditVideoDialogOpen
+  );
+  const closeEditVideoDialog = useDialogsStore(
+    (state) => state.closeEditVideoDialog
+  );
+
+  const videoData = data?.videos.find(
+    (v) => v.id === editVideoDialogData?.videoId
+  );
 
   async function handleUpdateVideo(data: FormData) {
     try {
-      if (editVideo === undefined) {
+      if (editVideoDialogData === undefined) {
         return;
       }
 
       // Optimistically update the UI
       queryClient.setQueryData(videosQueryOptions.queryKey, (old) => ({
         ...old,
         videos: (old?.videos ?? []).map((v) => {
-          if (v.id === editVideo.id) {
+          if (v.id === editVideoDialogData.videoId) {
             return { ...v, ...data };
           }
           return v;
         }),
       }));
 
-      setEditVideo(undefined);
+      closeEditVideoDialog();
 
       const result = await updateVideoDataServerFn({
-        data: { videoId: editVideo.id, data },
+        data: { videoId: editVideoDialogData.videoId, data },
       });
 
       if (!result.success) {
@@ -84,38 +94,38 @@ export function EditVideoDialog() {
       if (!form.state.isPristine) {
         handleUpdateVideo(value);
       } else {
-        setEditVideo(undefined);
+        closeEditVideoDialog();
       }
       form.reset();
     },
   });
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: only should react to editVideo changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only should react to dialog open state changes
   useEffect(() => {
     form.reset();
-  }, [editVideo]);
+  }, [isEditVideoDialogOpen]);
 
-  if (editVideo === undefined) {
+  if (!isEditVideoDialogOpen || !editVideoDialogData) {
     return null;
   }
 
   if (videoData === undefined) {
-    setEditVideo(undefined);
+    closeEditVideoDialog();
     return null;
   }
 
   return (
     <Dialog
       onOpenChange={(o) => {
         if (!o) {
-          setEditVideo(undefined);
+          closeEditVideoDialog();
         }
       }}
-      open={editVideo !== undefined}
+      open={isEditVideoDialogOpen}
     >
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Edit {editVideo.name}</DialogTitle>
+          <DialogTitle>Edit {editVideoDialogData.videoTitle}</DialogTitle>
         </DialogHeader>
         <form
           className="flex flex-col gap-2"
@@ -172,12 +182,7 @@ export function EditVideoDialog() {
             }}
           />
           <div className="flex gap-2 mt-2">
-            <Button
-              className="grow basis-1/2"
-              onClick={() => {
-                setEditVideo(undefined);
-              }}
-            >
+            <Button className="grow basis-1/2" onClick={closeEditVideoDialog}>
               Cancel
             </Button>
             <Button

app/components/dialogs/trim-video-dialog.tsx

@@ -9,40 +9,42 @@ import { RangeSlider } from "@/components/ui/range-slider";
 import { formatSecondsToTimestamp } from "@/lib/utils";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { fetchFile, toBlobURL } from "@ffmpeg/util";
-import {
-  QueryClient,
-  QueryClientProvider,
-  useMutation,
-  useQuery,
-} from "@tanstack/react-query";
-import { useAtom, useSetAtom } from "jotai";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { Loader2Icon, PauseIcon, PlayIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  customFileToUploadAtom,
-  isUploadDialogOpenAtom,
-  trimVideoDataAtom,
-} from "@/lib/atoms";
+import { useDialogsStore } from "@/lib/stores/dialogs";
 
 export function TrimVideoDialog() {
-  const [trimVideoData] = useAtom(trimVideoDataAtom);
-  const [queryClient] = useState(new QueryClient());
+  const isTrimVideoDialogOpen = useDialogsStore(
+    (state) => state.isTrimVideoDialogOpen
+  );
+  const trimVideoDialogData = useDialogsStore(
+    (state) => state.trimVideoDialogData
+  );
 
-  if (!trimVideoData) {
+  if (!isTrimVideoDialogOpen || !trimVideoDialogData) {
     return null;
   }
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <TrimVideoDialogChild />
-    </QueryClientProvider>
-  );
+  return <TrimVideoDialogChild />;
 }
 
 function TrimVideoDialogChild() {
-  const [trimVideoData, setTrimVideoData] = useAtom(trimVideoDataAtom);
-  const setCustomFileToUploadAtom = useSetAtom(customFileToUploadAtom);
-  const setIsUploadDialogOpenAtom = useSetAtom(isUploadDialogOpenAtom);
+  const closeTrimVideoDialog = useDialogsStore(
+    (state) => state.closeTrimVideoDialog
+  );
+  const trimVideoDialogData = useDialogsStore(
+    (state) => state.trimVideoDialogData
+  );
+  const openTrimVideoDialog = useDialogsStore(
+    (state) => state.openTrimVideoDialog
+  );
+  const openUploadVideoDialog = useDialogsStore(
+    (state) => state.openUploadVideoDialog
+  );
+  const isTrimVideoDialogOpen = useDialogsStore(
+    (state) => state.isTrimVideoDialogOpen
+  );
 
   const ffmpegRef = useRef(new FFmpeg());
   const viewportRef = useRef<HTMLVideoElement>(null);
@@ -52,19 +54,23 @@ function TrimVideoDialogChild() {
   const [videoDurationSeconds, setVideoDurationSeconds] = useState<number>();
 
   const videoUrl = useMemo(
-    () => URL.createObjectURL(trimVideoData!.file),
-    [trimVideoData]
+    () =>
+      trimVideoDialogData
+        ? URL.createObjectURL(trimVideoDialogData.videoFile)
+        : "",
+    [trimVideoDialogData]
   );
 
   const { isLoading } = useQuery({
-    queryKey: ["loadFfmpeg"],
     refetchOnMount: true,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
+    staleTime: 0,
+    queryKey: ["loadFfmpeg"],
     queryFn: async () => {
       const ffmpeg = ffmpegRef.current;
 
-      const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
+      const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/umd";
 
       await ffmpeg.load({
         coreURL: await toBlobURL(
@@ -87,15 +93,18 @@ function TrimVideoDialogChild() {
     isError: isRenderError,
   } = useMutation({
     mutationFn: async () => {
-      if (!lastRangeValue.current || !trimVideoData) {
+      if (!lastRangeValue.current || !trimVideoDialogData) {
         return false;
       }
 
       resetViewportToBeginning();
 
       const ffmpeg = ffmpegRef.current;
 
-      await ffmpeg.writeFile("input.mp4", await fetchFile(trimVideoData.file));
+      await ffmpeg.writeFile(
+        "input.mp4",
+        await fetchFile(trimVideoDialogData.videoFile)
+      );
 
       const startTimestamp = formatSecondsToTimestamp(
         lastRangeValue.current[0]
@@ -116,13 +125,15 @@ function TrimVideoDialogChild() {
 
       const data = await ffmpeg.readFile("output_video.mp4");
 
-      const file = new File([new Blob([data])], trimVideoData.file.name, {
-        type: trimVideoData?.file.type,
-      });
-
-      console.log(file.type);
+      const file = new File(
+        [new Blob([data])],
+        trimVideoDialogData.videoFile.name,
+        {
+          type: trimVideoDialogData.videoFile.type,
+        }
+      );
 
-      setTrimVideoData({ title: trimVideoData?.title ?? null, file });
+      openTrimVideoDialog(file, trimVideoDialogData.videoTitle);
     },
     onError: (err) => {
       console.error(err);
@@ -178,9 +189,11 @@ function TrimVideoDialogChild() {
   }, [isViewportPlaying]);
 
   function handleBackToUploadClick() {
-    setTrimVideoData(undefined);
-    setCustomFileToUploadAtom(trimVideoData?.file);
-    setIsUploadDialogOpenAtom(true);
+    openUploadVideoDialog(
+      trimVideoDialogData?.videoFile,
+      trimVideoDialogData?.videoTitle
+    );
+    closeTrimVideoDialog();
   }
 
   function handleRangeValueChange(value: [number, number]) {
@@ -236,10 +249,10 @@ function TrimVideoDialogChild() {
             viewportRef.current.src = "";
           }
 
-          setTrimVideoData(undefined);
+          closeTrimVideoDialog();
         }
       }}
-      open={trimVideoData !== undefined}
+      open={isTrimVideoDialogOpen}
     >
       <DialogContent>
         <DialogHeader>