Merge pull request #21 from Hasnainahmad04/feat/ui-upgrade

Feat/UI upgrade

.eslintrc.json

@@ -1,74 +1,29 @@
 {
-  // Configuration for JavaScript files
+  "plugins": ["import"],
   "extends": [
-    "airbnb-base",
-    "next/core-web-vitals", // Needed to avoid warning in next.js build: 'The Next.js plugin was not detected in your ESLint configuration'
-    "plugin:prettier/recommended"
+    "next/core-web-vitals",
+    "plugin:tailwindcss/recommended",
+    "prettier"
   ],
   "rules": {
-    "prettier/prettier": [
+    "no-undef": "off",
+    "import/order": [
       "error",
       {
-        "singleQuote": true,
-        "endOfLine": "auto"
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
       }
-    ] // Avoid conflict rule between Prettier and Airbnb Eslint
-  },
-  "overrides": [
-    // Configuration for TypeScript files
-    {
-      "files": ["**/*.ts", "**/*.tsx", "**/*.mts"],
-      "plugins": [
-        "@typescript-eslint",
-        "unused-imports",
-        "tailwindcss",
-        "simple-import-sort"
-      ],
-      "extends": [
-        "plugin:tailwindcss/recommended",
-        "airbnb",
-        "airbnb-typescript",
-        "next/core-web-vitals",
-        "plugin:prettier/recommended"
-      ],
-      "parser": "@typescript-eslint/parser",
-      "parserOptions": {
-        "project": "./tsconfig.json"
-      },
-      "rules": {
-        "@typescript-eslint/lines-between-class-members": "off",
-        "@typescript-eslint/no-throw-literal": "off",
-        "prettier/prettier": [
-          "error",
-          {
-            "singleQuote": true,
-            "endOfLine": "auto"
-          }
-        ], // Avoid conflict rule between Prettier and Airbnb Eslint
-        "import/extensions": "off", // Avoid missing file extension errors, TypeScript already provides a similar feature
-        "react/function-component-definition": "off", // Disable Airbnb's specific function type
-        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
-        "react/require-default-props": "off", // Allow non-defined react props as undefined
-        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
-        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
-        "@typescript-eslint/consistent-type-imports": "error", // Ensure import type is used when it's necessary
-        "no-restricted-syntax": [
-          "error",
-          "ForInStatement",
-          "LabeledStatement",
-          "WithStatement"
-        ], // Overrides Airbnb configuration and enable no-restricted-syntax
-        "import/prefer-default-export": "off", // Named export is easier to refactor automatically
-        "simple-import-sort/imports": "error", // Import configuration for eslint-plugin-simple-import-sort
-        "simple-import-sort/exports": "error", // Export configuration for eslint-plugin-simple-import-sort
-        "import/order": "off", // Avoid conflict rule between eslint-plugin-import and eslint-plugin-simple-import-sort
-        "@typescript-eslint/no-unused-vars": "off",
-        "unused-imports/no-unused-imports": "error",
-        "unused-imports/no-unused-vars": [
-          "error",
-          { "argsIgnorePattern": "^_" }
-        ]
-      }
-    }
-  ]
+    ]
+  }
 }

app/dashboard/error.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Image from 'next/image';
+import { useEffect } from 'react';
+
+import { Button } from '@/components/ui/button';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className="prose mx-auto flex h-[calc(100vh-4.5rem)] w-full flex-col items-center justify-center text-center">
+      <Image
+        src="/server-error.svg"
+        width={500}
+        height={500}
+        alt="server_error"
+        className="size-80"
+      />
+      <h2>Something went wrong!</h2>
+      <p className="text-lg">
+        We encountered an unexpected error. Please try refreshing the page or
+        come back later. If the problem persists, contact support for
+        assistance.
+      </p>
+      <Button variant="destructive" onClick={() => reset()} className="mt-6">
+        Try again
+      </Button>
+    </main>
+  );
+}

app/dashboard/issue/[id]/IssueDetail.tsx

@@ -15,7 +15,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import useDeleteIssue from '@/hooks/issue/useDeleteIssue';
+import { deleteIssue } from '@/lib/actions/issue';
 import { cn, formatDate } from '@/lib/utils';
 import type { Issue } from '@/types';
 
@@ -26,9 +26,21 @@ type Props = {
 const IssueDetail = ({ issue }: Props) => {
   const [open, setOpen] = useState(false);
   const [selectedImage, setSelectedImage] = useState(0);
-  const { mutate: deleteIssue, isPending } = useDeleteIssue();
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
+  const handleDelete = async () => {
+    setIsLoading(true);
+    try {
+      await deleteIssue(issue.id);
+      router.replace('/dashboard/issue/list');
+    } catch (error) {
+      console.log(error);
+    }
+
+    setIsLoading(false);
+  };
+
   return (
     <div className="prose mx-auto">
       <div className="mb-8 flex w-full justify-between">
@@ -69,15 +81,8 @@ const IssueDetail = ({ issue }: Props) => {
               onOpenChange={setOpen}
               open={open}
               issue={issue}
-              loading={isPending}
-              onDelete={() => {
-                deleteIssue(issue.id, {
-                  onSuccess: () => {
-                    setOpen(false);
-                    router.replace('/dashboard/issue/list');
-                  },
-                });
-              }}
+              loading={isLoading}
+              onDelete={handleDelete}
             />
           </TooltipProvider>
         </div>

app/dashboard/issue/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 
-import { getIssueDetail } from '@/app/actions/issue';
+import { getIssueDetail } from '@/lib/actions/issue';
 
 import IssueDetail from './IssueDetail';
 

app/dashboard/issue/board/Board.tsx

@@ -4,37 +4,35 @@ import type { DragEndEvent } from '@dnd-kit/core';
 import type { Status } from '@prisma/client';
 import React, { useState } from 'react';
 
-import useUpdateIssue from '@/hooks/issue/useUpdateIssue';
 import { groupBy } from '@/lib/utils';
-import type { Issue } from '@/types';
+import type { IssueList } from '@/types';
 
 import Column from './Column';
 import { KanbanBoard, KanbanBoardContainer } from './Kanban';
 import KanbanCard from './KanbanCard';
 import KanbanItem from './KanbanItem';
 
 type Props = {
-  data: Issue[];
+  data: IssueList[];
 };
 
 const Board = ({ data }: React.PropsWithChildren<Props>) => {
-  const initialState: Record<Status, Issue[]> = {
+  const initialState: Record<Status, IssueList[]> = {
     TODO: [],
     BACKLOG: [],
     IN_PROGRESS: [],
     DONE: [],
     CANCELLED: [],
   };
-  const { mutate: updateIssueStatus } = useUpdateIssue();
   const [taskStages, setTaskStages] = useState({
     ...initialState,
-    ...groupBy<Issue, 'status'>(data, (item) => item.status),
+    ...groupBy<IssueList, 'status'>(data, (item) => item.status),
   });
 
   const handleOnDragEnd = (event: DragEndEvent) => {
     const status = event.over?.id as undefined | Status | null;
     const taskId = event.active.id as string;
-    const issue = event.active.data.current?.issue as Issue;
+    const issue = event.active.data.current?.issue as IssueList;
     const prevStatus = event.active.data.current?.prevStatus as Status;
 
     if (status) {
@@ -47,18 +45,6 @@ const Board = ({ data }: React.PropsWithChildren<Props>) => {
       state[status].push({ ...issue, status });
 
       setTaskStages(state);
-      updateIssueStatus(
-        { id: Number(taskId), data: { ...issue, status } },
-
-        {
-          onSuccess: () => {
-            alert('Status Updated');
-          },
-          onError: () => {
-            setTaskStages(taskStages);
-          },
-        },
-      );
     }
   };
 

app/dashboard/issue/board/KanbanCard.tsx

@@ -1,6 +1,6 @@
-import type { Issue } from '@/types';
+import type { IssueList } from '@/types';
 
-const KanbanCard = ({ issue }: { issue: Issue }) => {
+const KanbanCard = ({ issue }: { issue: IssueList }) => {
   return (
     <div className="divide-y rounded-lg border border-neutral-200 bg-white">
       <span className="block p-2 text-sm font-medium text-zinc-900">