change Dialog with React Aria Component Dialog

sahidrahman404 · Apr 19, 2024 · 2168fc2 · 2168fc2
1 parent 0b489d3
commit 2168fc2
Showing 1 changed file with 88 additions and 90 deletions.
diff --git a/src/components/Exercises/ExercisesFilterSort.tsx b/src/components/Exercises/ExercisesFilterSort.tsx
@@ -1,14 +1,8 @@
 import { RefetchFnDynamic, graphql, useFragment } from "react-relay";
 import { Dispatch, TransitionStartFunction } from "react";
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "../ui/dialog";
-
+import { Dialog } from "../ReactAriaUI/Dialog";
+import { Modal } from "../ReactAriaUI/Modal";
+import { DialogTrigger, Heading } from "react-aria-components";
 import { Button } from "../ReactAriaUI/Button";
 import { Filter } from "lucide-react";
 import { ExerciseTypeInput } from "./ExerciseTypeInput";
@@ -52,96 +46,100 @@ function ExercisesFilterSort({
 
   return (
     <div className="space-x-4">
-      <Dialog
-        open={state.open}
+      <DialogTrigger
+        isOpen={state.open}
         onOpenChange={(open) => {
           dispatch({ type: "set_open", payload: open });
         }}
       >
-        <DialogTrigger asChild>
-          <Button variant="outline">
-            <Filter className="mr-2 w-4 h-4 text-xs" />
-            Filter
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Filter exercises</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-3">
-            <div className="space-y-1">
-              <Label htmlFor="name" className="text-right">
-                Muscles Groups
-              </Label>
-              <MusclesGroupInput
-                queryRef={dataExercisesFilterFragment}
-                selectedKey={state.musclesGroup}
-                onSelectionChange={(key) => {
-                  dispatch({
-                    type: "set_muscles_group",
-                    payload: typeof key === "string" ? key : "",
-                  });
+        <Button variant="outline">
+          <Filter className="mr-2 w-4 h-4 text-xs" />
+          Filter
+        </Button>
+        <Modal isDismissable>
+          <Dialog className="space-y-3">
+            <Heading
+              slot="title"
+              className="text-xl font-semibold leading-6 my-0"
+            >
+              Filter exercises
+            </Heading>
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <Label htmlFor="name" className="text-right">
+                  Muscles Groups
+                </Label>
+                <MusclesGroupInput
+                  queryRef={dataExercisesFilterFragment}
+                  selectedKey={state.musclesGroup}
+                  onSelectionChange={(key) => {
+                    dispatch({
+                      type: "set_muscles_group",
+                      payload: typeof key === "string" ? key : "",
+                    });
+                  }}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="username" className="text-right">
+                  Exercises Types
+                </Label>
+                <ExerciseTypeInput
+                  queryRef={dataExercisesFilterFragment}
+                  selectedKey={state.exerciseType}
+                  onSelectionChange={(key) => {
+                    dispatch({
+                      type: "set_exercise_type",
+                      payload: typeof key === "string" ? key : "",
+                    });
+                  }}
+                />
+              </div>
+              <Button
+                variant="outline"
+                onPress={() => {
+                  dispatch({ type: "set_muscles_group", payload: "" });
+                  dispatch({ type: "set_exercise_type", payload: "" });
                 }}
-              />
+              >
+                Reset
+              </Button>
             </div>
-            <div className="space-y-1">
-              <Label htmlFor="username" className="text-right">
-                Exercises Types
-              </Label>
-              <ExerciseTypeInput
-                queryRef={dataExercisesFilterFragment}
-                selectedKey={state.exerciseType}
-                onSelectionChange={(key) => {
-                  dispatch({
-                    type: "set_exercise_type",
-                    payload: typeof key === "string" ? key : "",
+            <div className="flex">
+              <Button
+                className="ml-auto"
+                isDisabled={state.isLoading}
+                onPress={() => {
+                  startTransition(() => {
+                    dispatch({ type: "set_is_loading", payload: true });
+                    refetch(
+                      {
+                        orderby: `${[...state.orderDirection][0] ?? "DESC"}`,
+                        exerciseTypeWhereInput:
+                          state.exerciseType.length !== 29
+                            ? []
+                            : { id: state.exerciseType },
+                        musclesGroupWhereInput:
+                          state.musclesGroup.length !== 29
+                            ? []
+                            : { id: state.musclesGroup },
+                      },
+                      {
+                        onComplete: () => {
+                          dispatch({ type: "set_is_loading", payload: false });
+                          dispatch({ type: "set_open", payload: false });
+                        },
+                      },
+                    );
                   });
                 }}
-              />
+              >
+                Filter
+              </Button>
             </div>
-            <Button
-              variant="outline"
-              onPress={() => {
-                dispatch({ type: "set_muscles_group", payload: "" });
-                dispatch({ type: "set_exercise_type", payload: "" });
-              }}
-            >
-              Reset
-            </Button>
-          </div>
-          <DialogFooter>
-            <Button
-              isDisabled={state.isLoading}
-              onPress={() => {
-                startTransition(() => {
-                  dispatch({ type: "set_is_loading", payload: true });
-                  refetch(
-                    {
-                      orderby: `${Object.entries(state.orderDirection.valueOf())[1][1]}`,
-                      exerciseTypeWhereInput:
-                        state.exerciseType.length !== 29
-                          ? []
-                          : { id: state.exerciseType },
-                      musclesGroupWhereInput:
-                        state.musclesGroup.length !== 29
-                          ? []
-                          : { id: state.musclesGroup },
-                    },
-                    {
-                      onComplete: () => {
-                        dispatch({ type: "set_is_loading", payload: false });
-                        dispatch({ type: "set_open", payload: false });
-                      },
-                    },
-                  );
-                });
-              }}
-            >
-              Filter
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </Dialog>
+        </Modal>
+      </DialogTrigger>
       <ExerciseSort
         state={state}
         refetch={refetch}