Merge pull request #1490 from rockingrohit9639/fix/category-edit-issue

Fix/category edit issue
Shelf-nu · Dec 9, 2024 · 4eeab2b · 4eeab2b
2 parents 055da46 + 53f357a
commit 4eeab2b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 66 deletions.
diff --git a/app/modules/category/service.server.ts b/app/modules/category/service.server.ts
@@ -185,16 +185,15 @@ export async function getCategory({
   organizationId,
 }: Pick<Category, "id" | "organizationId">) {
   try {
-    return await db.category.findUnique({
-      where: {
-        id,
-        organizationId,
-      },
+    return await db.category.findFirstOrThrow({
+      where: { id, organizationId },
     });
   } catch (cause) {
     throw new ShelfError({
       cause,
-      message: "Something went wrong while fetching the category",
+      title: "Category not found",
+      message:
+        "The category you are trying to access does not exist or you do not have permission to access it.",
       additionalData: { id, organizationId },
       label,
     });

diff --git a/app/routes/_layout+/categories.$categoryId_.edit.tsx b/app/routes/_layout+/categories.$categoryId_.edit.tsx
@@ -34,6 +34,7 @@ const title = "Edit category";
 export async function loader({ context, request, params }: LoaderFunctionArgs) {
   const authSession = context.getSession();
   const { userId } = authSession;
+
   const { categoryId: id } = getParams(
     params,
     z.object({ categoryId: z.string() }),
@@ -52,11 +53,9 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
 
     const category = await getCategory({ id, organizationId });
 
-    const colorFromServer = category?.color;
+    const colorFromServer = category.color;
 
-    const header = {
-      title,
-    };
+    const header = { title };
 
     return json(data({ header, colorFromServer, category }));
   } catch (cause) {
@@ -123,68 +122,67 @@ export default function EditCategory() {
   const { colorFromServer, category } = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
 
-  return category && colorFromServer ? (
-    <>
-      <Form
-        method="post"
-        className="block rounded border border-gray-200 bg-white px-6 py-5"
-        ref={zo.ref}
-      >
-        <div className=" lg:flex lg:items-end lg:justify-between lg:gap-3">
-          <div className="gap-3 lg:flex lg:items-end">
-            <Input
-              label="Name"
-              placeholder="Category name"
-              className="mb-4 lg:mb-0 lg:max-w-[180px]"
-              name={zo.fields.name()}
+  return (
+    <Form
+      key={category.id}
+      method="post"
+      className="block rounded border border-gray-200 bg-white px-6 py-5"
+      ref={zo.ref}
+    >
+      <div className="lg:flex lg:items-end lg:justify-between lg:gap-3">
+        <div className="gap-3 lg:flex lg:items-end">
+          <Input
+            label="Name"
+            placeholder="Category name"
+            className="mb-4 lg:mb-0 lg:max-w-[180px]"
+            name={zo.fields.name()}
+            disabled={disabled}
+            error={zo.errors.name()?.message}
+            hideErrorText
+            autoFocus
+            required={zodFieldIsRequired(UpdateCategoryFormSchema.shape.name)}
+            defaultValue={category.name}
+          />
+          <Input
+            label="Description"
+            placeholder="Description (optional)"
+            name={zo.fields.description()}
+            disabled={disabled}
+            data-test-id="categoryDescription"
+            className="mb-4 lg:mb-0"
+            required={zodFieldIsRequired(
+              UpdateCategoryFormSchema.shape.description
+            )}
+            defaultValue={category.description || undefined}
+          />
+          <div className="mb-6 lg:mb-0">
+            <ColorInput
+              name={zo.fields.color()}
               disabled={disabled}
-              error={zo.errors.name()?.message}
+              error={zo.errors.color()?.message}
               hideErrorText
-              autoFocus
-              required={zodFieldIsRequired(UpdateCategoryFormSchema.shape.name)}
-              defaultValue={category.name}
-            />
-            <Input
-              label="Description"
-              placeholder="Description (optional)"
-              name={zo.fields.description()}
-              disabled={disabled}
-              data-test-id="categoryDescription"
-              className="mb-4 lg:mb-0"
+              colorFromServer={colorFromServer}
               required={zodFieldIsRequired(
-                UpdateCategoryFormSchema.shape.description
+                UpdateCategoryFormSchema.shape.color
               )}
-              defaultValue={category.description || undefined}
             />
-            <div className="mb-6 lg:mb-0">
-              <ColorInput
-                name={zo.fields.color()}
-                disabled={disabled}
-                error={zo.errors.color()?.message}
-                hideErrorText
-                colorFromServer={colorFromServer}
-                required={zodFieldIsRequired(
-                  UpdateCategoryFormSchema.shape.color
-                )}
-              />
-            </div>
           </div>
+        </div>
 
-          <div className="flex gap-1">
-            <Button variant="secondary" to="/categories" size="sm">
-              Cancel
-            </Button>
-            <Button type="submit" size="sm">
-              Update
-            </Button>
-          </div>
+        <div className="flex items-center gap-1">
+          <Button variant="secondary" to="/categories" size="sm">
+            Cancel
+          </Button>
+          <Button type="submit" size="sm">
+            Update
+          </Button>
         </div>
-        {actionData?.error ? (
-          <div className="mt-3 text-sm text-error-500">
-            {actionData?.error?.message}
-          </div>
-        ) : null}
-      </Form>
-    </>
-  ) : null;
+      </div>
+      {actionData?.error ? (
+        <div className="mt-3 text-sm text-error-500">
+          {actionData?.error?.message}
+        </div>
+      ) : null}
+    </Form>
+  );
 }