Merge pull request #34 from dakshesh14/main

apps/app/components/command-palette/shortcuts.tsx

@@ -1,15 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
+// ui
+import { Input } from "ui";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+const shortcuts = [
+  {
+    title: "Navigation",
+    shortcuts: [
+      { keys: "ctrl,/", description: "To open navigator" },
+      { keys: "↑", description: "Move up" },
+      { keys: "↓", description: "Move down" },
+      { keys: "←", description: "Move left" },
+      { keys: "→", description: "Move right" },
+      { keys: "Enter", description: "Select" },
+      { keys: "Esc", description: "Close" },
+    ],
+  },
+  {
+    title: "Common",
+    shortcuts: [
+      { keys: "ctrl,p", description: "To create project" },
+      { keys: "ctrl,i", description: "To create issue" },
+      { keys: "ctrl,q", description: "To create cycle" },
+      { keys: "ctrl,h", description: "To open shortcuts guide" },
+      {
+        keys: "ctrl,alt,c",
+        description: "To copy issue url when on issue detail page.",
+      },
+    ],
+  },
+];
+
 const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const [query, setQuery] = useState("");
+
+  const filteredShortcuts = shortcuts.filter((shortcut) =>
+    shortcut.shortcuts.some((item) => item.description.includes(query.trim())) || query === ""
+      ? true
+      : false
+  );
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={setIsOpen}>
@@ -39,7 +77,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="bg-white p-5">
                   <div className="sm:flex sm:items-start">
-                    <div className="text-center sm:text-left w-full">
+                    <div className="flex flex-col gap-y-4 text-center sm:text-left w-full">
                       <Dialog.Title
                         as="h3"
                         className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
@@ -54,35 +92,18 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                           </button>
                         </span>
                       </Dialog.Title>
-                      <div className="mt-2 pt-5 flex flex-col gap-y-3 w-full">
+                      <div>
-                        {[
+                        <Input
-                          {
+                          id="search"
-                            title: "Navigation",
+                          name="search"
-                            shortcuts: [
+                          type="text"
-                              { keys: "ctrl,/", description: "To open navigator" },
+                          placeholder="Search for shortcuts"
-                              { keys: "↑", description: "Move up" },
+                          onChange={(e) => setQuery(e.target.value)}
-                              { keys: "↓", description: "Move down" },
+                        />
-                              { keys: "←", description: "Move left" },
+                      </div>
-                              { keys: "→", description: "Move right" },
+                      <div className="flex flex-col gap-y-3 w-full">
-                              { keys: "Enter", description: "Select" },
+                        {filteredShortcuts.length > 0 ? (
-                              { keys: "Esc", description: "Close" },
+                          filteredShortcuts.map(({ title, shortcuts }) => (
-                            ],
-                          },
-                          {
-                            title: "Common",
-                            shortcuts: [
-                              { keys: "ctrl,p", description: "To create project" },
-                              { keys: "ctrl,i", description: "To create issue" },
-                              { keys: "ctrl,q", description: "To create cycle" },
-                              { keys: "ctrl,m", description: "To create module" },
-                              { keys: "ctrl,h", description: "To open shortcuts guide" },
-                              {
-                                keys: "ctrl,alt,c",
-                                description: "To copy issue url when on issue detail page.",
-                              },
-                            ],
-                          },
-                        ].map(({ title, shortcuts }) => (
                             <div key={title} className="w-full flex flex-col">
                               <p className="font-medium mb-4">{title}</p>
                               <div className="flex flex-col gap-y-3">
@@ -95,9 +116,6 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                           <kbd className="bg-gray-200 text-sm px-1 rounded">
                                             {key}
                                           </kbd>
-                                        {/* {index !== keys.split(",").length - 1 ? (
-                                          <span className="text-xs">+</span>
-                                        ) : null} */}
                                         </span>
                                       ))}
                                     </div>
@@ -105,7 +123,19 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                 ))}
                               </div>
                             </div>
-                        ))}
+                          ))
+                        ) : (
+                          <div className="flex flex-col gap-y-3">
+                            <p className="text-sm text-gray-500">
+                              No shortcuts found for{" "}
+                              <span className="font-semibold italic">
+                                {`"`}
+                                {query}
+                                {`"`}
+                              </span>
+                            </p>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>

apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx

@@ -9,6 +9,8 @@ import stateServices from "lib/services/state.service";
 import { STATE_LIST } from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
+// common
+import { groupBy } from "constants/common";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
@@ -18,25 +20,27 @@ import { Button } from "ui";
 import type { IState } from "types";
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
-  data?: IState;
+  data: IState | null;
 };
 
-const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const { activeWorkspace } = useUser();
+  const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
+
+  const { activeWorkspace, issues } = useUser();
 
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setIsDeleteLoading(false);
   };
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !activeWorkspace) return;
+    if (!data || !activeWorkspace || issuesWithThisStateExist) return;
     await stateServices
       .deleteState(activeWorkspace.slug, data.project, data.id)
       .then(() => {
@@ -53,9 +57,11 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
       });
   };
 
+  const groupedIssues = groupBy(issues?.results ?? [], "state");
+
   useEffect(() => {
-    data && setIsOpen(true);
+    if (data) setIssuesWithThisStateExist(!!groupedIssues[data.id]);
-  }, [data, setIsOpen]);
+  }, [groupedIssues, data]);
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -109,6 +115,14 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
                           This action cannot be undone.
                         </p>
                       </div>
+                      <div className="mt-2">
+                        {issuesWithThisStateExist && (
+                          <p className="text-sm text-red-500">
+                            There are issues with this state. Please move them to another state
+                            before deleting this state.
+                          </p>
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -117,7 +131,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
                     type="button"
                     onClick={handleDeletion}
                     theme="danger"
-                    disabled={isDeleteLoading}
+                    disabled={isDeleteLoading || issuesWithThisStateExist}
                     className="inline-flex sm:ml-3"
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}

apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx

@@ -0,0 +1,209 @@
+import React, { useEffect } from "react";
+// swr
+import { mutate } from "swr";
+// react hook form
+import { useForm, Controller } from "react-hook-form";
+// react color
+import { TwitterPicker } from "react-color";
+// headless
+import { Popover, Transition } from "@headlessui/react";
+// constants
+import { GROUP_CHOICES } from "constants/";
+import { STATE_LIST } from "constants/fetch-keys";
+// services
+import stateService from "lib/services/state.service";
+// ui
+import { Button, Input, Select, Spinner } from "ui";
+// types
+import type { IState } from "types";
+
+type Props = {
+  workspaceSlug?: string;
+  projectId?: string;
+  data: IState | null;
+  onClose: () => void;
+  selectedGroup: StateGroup | null;
+};
+
+export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  color: "#000000",
+  group: "backlog",
+};
+
+export const CreateUpdateStateInline: React.FC<Props> = ({
+  workspaceSlug,
+  projectId,
+  data,
+  onClose,
+  selectedGroup,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    setError,
+    watch,
+    reset,
+    control,
+  } = useForm<IState>({
+    defaultValues,
+  });
+
+  const handleClose = () => {
+    onClose();
+    reset({ name: "", color: "#000000", group: "backlog" });
+  };
+
+  const onSubmit = async (formData: IState) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+    const payload: IState = {
+      ...formData,
+    };
+    if (!data) {
+      await stateService
+        .createState(workspaceSlug, projectId, { ...payload })
+        .then((res) => {
+          mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
+          handleClose();
+        })
+        .catch((err) => {
+          Object.keys(err).map((key) => {
+            setError(key as keyof IState, {
+              message: err[key].join(", "),
+            });
+          });
+        });
+    } else {
+      await stateService
+        .updateState(workspaceSlug, projectId, data.id, {
+          ...payload,
+        })
+        .then((res) => {
+          mutate<IState[]>(
+            STATE_LIST(projectId),
+            (prevData) => {
+              const newData = prevData?.map((item) => {
+                if (item.id === res.id) {
+                  return res;
+                }
+                return item;
+              });
+              return newData;
+            },
+            false
+          );
+          handleClose();
+        })
+        .catch((err) => {
+          Object.keys(err).map((key) => {
+            setError(key as keyof IState, {
+              message: err[key].join(", "),
+            });
+          });
+        });
+    }
+  };
+
+  useEffect(() => {
+    if (data === null) return;
+    reset(data);
+  }, [data, reset]);
+
+  useEffect(() => {
+    if (!data)
+      reset({
+        ...defaultValues,
+        group: selectedGroup ?? "backlog",
+      });
+  }, [selectedGroup, data, reset]);
+
+  return (
+    <div className="flex items-center gap-x-2 p-2 bg-gray-50">
+      <div className="w-8 h-8 shrink-0">
+        <Popover className="relative w-full h-full flex justify-center items-center bg-gray-200 rounded-xl">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
+                  open ? "text-gray-900" : "text-gray-500"
+                }`}
+              >
+                {watch("color") && watch("color") !== "" && (
+                  <span
+                    className="w-4 h-4 rounded"
+                    style={{
+                      backgroundColor: watch("color") ?? "green",
+                    }}
+                  />
+                )}
+              </Popover.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute top-full z-50 left-0 mt-3 px-2 w-screen max-w-xs sm:px-0">
+                  <Controller
+                    name="color"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                    )}
+                  />
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      </div>
+      <Input
+        id="name"
+        name="name"
+        register={register}
+        placeholder="Enter state name"
+        validations={{
+          required: true,
+        }}
+        error={errors.name}
+        autoComplete="off"
+      />
+      {data && (
+        <Select
+          id="group"
+          name="group"
+          error={errors.group}
+          register={register}
+          validations={{
+            required: true,
+          }}
+          options={Object.keys(GROUP_CHOICES).map((key) => ({
+            value: key,
+            label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
+          }))}
+        />
+      )}
+      <Input
+        id="description"
+        name="description"
+        register={register}
+        placeholder="Enter state description"
+        error={errors.description}
+        autoComplete="off"
+      />
+      <Button theme="secondary" onClick={handleClose}>
+        Cancel
+      </Button>
+      <Button theme="primary" disabled={isSubmitting} onClick={handleSubmit(onSubmit)}>
+        {isSubmitting ? "Loading..." : data ? "Update" : "Create"}
+      </Button>
+    </div>
+  );
+};

apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx

@@ -11,10 +11,12 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
 import stateService from "lib/services/state.service";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
-import { Button, Input, TextArea } from "ui";
+import { Button, Input, Select, TextArea } from "ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
@@ -31,6 +33,7 @@ const defaultValues: Partial<IState> = {
   name: "",
   description: "",
   color: "#000000",
+  group: "backlog",
 };
 
 const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
@@ -161,6 +164,22 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
                             }}
                           />
                         </div>
+                        <div>
+                          <Select
+                            id="group"
+                            label="Group"
+                            name="group"
+                            error={errors.group}
+                            register={register}
+                            validations={{
+                              required: "Group is required",
+                            }}
+                            options={Object.keys(GROUP_CHOICES).map((key) => ({
+                              value: key,
+                              label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
+                            }))}
+                          />
+                        </div>
                         <div>
                           <Popover className="relative">
                             {({ open }) => (

apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx

@@ -32,7 +32,7 @@ import SelectProject from "./SelectProject";
 import SelectPriority from "./SelectPriority";
 import SelectAssignee from "./SelectAssignee";
 import SelectParent from "./SelectParentIssue";
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
+import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // types
 import type { IIssue, IssueResponse, CycleIssueResponse } from "types";

apps/app/components/project/issues/ListView/index.tsx

@@ -93,6 +93,9 @@ const ListView: React.FC<Props> = ({
                         <h2 className="font-medium leading-5 capitalize">
                           {singleGroup === null || singleGroup === "null"
                             ? selectedGroup === "priority" && "No priority"
+                            : selectedGroup === "created_by"
+                            ? people?.find((p) => p.member.id === singleGroup)?.member
+                                ?.first_name ?? "Loading..."
                             : addSpaceIfCamelCase(singleGroup)}
                         </h2>
                       ) : (

apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx

@@ -1,16 +1,12 @@
 import React, { useEffect, useState } from "react";
 // next
 import Image from "next/image";
-// swr
-import { mutate } from "swr";
 // headless ui
 import { Menu } from "@headlessui/react";
 // react hook form
 import { useForm } from "react-hook-form";
 // hooks
 import useUser from "lib/hooks/useUser";
-// fetch keys
-import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
 // common
 import { timeAgo } from "constants/common";
 // ui
@@ -42,16 +38,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
 
   const onEnter = (formData: IIssueComment) => {
     if (isSubmitting) return;
-    mutate<IIssueComment[]>(
-      PROJECT_ISSUES_COMMENTS,
-      (prevData) => {
-        const newData = prevData ?? [];
-        const index = newData.findIndex((comment) => comment.id === formData.id);
-        newData[index] = formData;
-        return [...newData];
-      },
-      false
-    );
     setIsEditing(false);
     onSubmit(formData);
   };
@@ -155,11 +141,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
                       className="w-full text-left py-2 pl-2"
                       type="button"
                       onClick={() => {
-                        mutate<IIssueComment[]>(
-                          PROJECT_ISSUES_COMMENTS,
-                          (prevData) => (prevData ?? []).filter((c) => c.id !== comment.id),
-                          false
-                        );
                         handleCommentDeletion(comment.id);
                       }}
                     >

apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx

@@ -13,8 +13,6 @@ import CommentCard from "components/project/issues/issue-detail/comment/IssueCom
 import { TextArea, Button, Spinner } from "ui";
 // types
 import type { IIssueComment } from "types";
-// icons
-import UploadingIcon from "public/animated-icons/uploading.json";
 
 type Props = {
   comments?: IIssueComment[];
@@ -41,11 +39,10 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
       .createIssueComment(workspaceSlug, projectId, issueId, formData)
       .then((response) => {
         console.log(response);
-        mutate<IIssueComment[]>(
+        mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => [
-          PROJECT_ISSUES_COMMENTS,
+          response,
-          (prevData) => [...(prevData ?? []), response],
+          ...(prevData ?? []),
-          false
+        ]);
-        );
         reset(defaultValues);
       })
       .catch((error) => {
@@ -58,6 +55,12 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
       .patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
       .then((response) => {
         console.log(response);
+        mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => {
+          const newData = prevData ?? [];
+          const index = newData.findIndex((comment) => comment.id === response.id);
+          newData[index] = response;
+          return [...newData];
+        });
       });
   };
 
@@ -65,6 +68,9 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
     await issuesServices
       .deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
       .then((response) => {
+        mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) =>
+          (prevData ?? []).filter((c) => c.id !== commentId)
+        );
         console.log(response);
       });
   };

apps/app/components/project/settings/StatesSettings.tsx

@@ -1,74 +1,120 @@
-// react
+import React, { useState } from "react";
-import { useState } from "react";
 // hooks
 import useUser from "lib/hooks/useUser";
 // components
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
+import {
-// ui
+  StateGroup,
-import { Button } from "ui";
+  CreateUpdateStateInline,
+} from "components/project/issues/BoardView/state/create-update-state-inline";
+import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
 // icons
-import { PencilSquareIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 // constants
-import { addSpaceIfCamelCase } from "constants/common";
+import { addSpaceIfCamelCase, groupBy } from "constants/common";
+// types
+import type { IState } from "types";
 
 type Props = {
   projectId: string | string[] | undefined;
 };
 
 const StatesSettings: React.FC<Props> = ({ projectId }) => {
-  const [isCreateStateModal, setIsCreateStateModal] = useState(false);
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
-  const [selectedState, setSelectedState] = useState<string | undefined>();
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
 
-  const { states } = useUser();
+  const { states, activeWorkspace } = useUser();
+
+  const groupedStates: {
+    [key: string]: Array<IState>;
+  } = groupBy(states ?? [], "group");
 
   return (
     <>
-      <CreateUpdateStateModal
+      <ConfirmStateDeletion
-        isOpen={isCreateStateModal || Boolean(selectedState)}
+        isOpen={!!selectDeleteState}
-        handleClose={() => {
+        data={states?.find((state) => state.id === selectDeleteState) ?? null}
-          setSelectedState(undefined);
+        onClose={() => setSelectDeleteState(null)}
-          setIsCreateStateModal(false);
-        }}
-        projectId={projectId as string}
-        data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
       />
+
       <section className="space-y-5">
         <div>
           <h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
           <p className="mt-1 text-sm text-gray-500">Manage the state of this project.</p>
         </div>
-        <div className="flex justify-between gap-3">
+        <div className="flex flex-col justify-between gap-3">
-          <div className="w-full space-y-5">
+          {Object.keys(groupedStates).map((key) => (
-            {states?.map((state) => (
+            <React.Fragment key={key}>
+              <div className="flex justify-between w-full md:w-2/3">
+                <p className="font-medium capitalize">{key} states</p>
+                <button
+                  type="button"
+                  onClick={() => setActiveGroup(key as keyof StateGroup)}
+                  className="flex items-center gap-x-2 text-theme"
+                >
+                  <PlusIcon className="h-4 w-4 text-theme" />
+                  <span>Add</span>
+                </button>
+              </div>
+              <div className="w-full md:w-2/3 space-y-1 border p-1 rounded-xl bg-gray-50">
+                <div className="w-full">
+                  {groupedStates[key]?.map((state) =>
+                    state.id !== selectedState ? (
                       <div
                         key={state.id}
-                className="bg-white px-4 py-2 rounded flex justify-between items-center"
+                        className={`bg-gray-50 px-5 py-4 flex justify-between items-center border-b ${
+                          Boolean(activeGroup !== key) ? "last:border-0" : ""
+                        }`}
                       >
-                <div className="flex items-center gap-x-2">
+                        <div className="flex items-center gap-x-8">
                           <div
-                    className="w-3 h-3 rounded-full"
+                            className="w-6 h-6 rounded-full"
                             style={{
                               backgroundColor: state.color,
                             }}
                           ></div>
                           <h4>{addSpaceIfCamelCase(state.name)}</h4>
                         </div>
-                <div>
+                        <div className="flex gap-x-2">
+                          <button type="button" onClick={() => setSelectDeleteState(state.id)}>
+                            <TrashIcon className="h-5 w-5 text-red-400" />
+                          </button>
                           <button type="button" onClick={() => setSelectedState(state.id)}>
                             <PencilSquareIcon className="h-5 w-5 text-gray-400" />
                           </button>
                         </div>
                       </div>
-            ))}
+                    ) : (
-            <Button
+                      <div className={`border-b last:border-b-0`} key={state.id}>
-              type="button"
+                        <CreateUpdateStateInline
-              className="flex items-center gap-x-1"
+                          projectId={projectId as string}
-              onClick={() => setIsCreateStateModal(true)}
+                          onClose={() => {
-            >
+                            setActiveGroup(null);
-              <PlusIcon className="h-4 w-4" />
+                            setSelectedState(null);
-              <span>Add State</span>
+                          }}
-            </Button>
+                          workspaceSlug={activeWorkspace?.slug}
+                          data={states?.find((state) => state.id === selectedState) ?? null}
+                          selectedGroup={key as keyof StateGroup}
+                        />
                       </div>
+                    )
+                  )}
+                </div>
+                {key === activeGroup && (
+                  <CreateUpdateStateInline
+                    projectId={projectId as string}
+                    onClose={() => {
+                      setActiveGroup(null);
+                      setSelectedState(null);
+                    }}
+                    workspaceSlug={activeWorkspace?.slug}
+                    data={null}
+                    selectedGroup={key as keyof StateGroup}
+                  />
+                )}
+              </div>
+            </React.Fragment>
+          ))}
         </div>
       </section>
     </>

apps/app/components/socialbuttons/google-login.tsx

@@ -1,4 +1,4 @@
-import { FC, CSSProperties } from "react";
+import { FC, CSSProperties, useEffect, useRef, useCallback } from "react";
 // next
 import Script from "next/script";
 
@@ -10,19 +10,16 @@ export interface IGoogleLoginButton {
 }
 
 export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
-  return (
+  const googleSignInButton = useRef<HTMLDivElement>(null);
-    <>
+
-      <Script
+  const loadScript = useCallback(() => {
-        src="https://accounts.google.com/gsi/client"
+    if (!googleSignInButton.current) return;
-        async
-        defer
-        onLoad={() => {
     window?.google?.accounts.id.initialize({
       client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
       callback: props.onSuccess as any,
     });
     window?.google?.accounts.id.renderButton(
-            document.getElementById("googleSignInButton") as HTMLElement,
+      googleSignInButton.current,
       {
         type: "standard",
         theme: "outline",
@@ -33,9 +30,18 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
       } as GsiButtonConfiguration // customization attributes
     );
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
-        }}
+  }, [props.onSuccess]);
-      />
+
-      <div className="w-full" id="googleSignInButton"></div>
+  useEffect(() => {
+    if (window?.google?.accounts?.id) {
+      loadScript();
+    }
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="w-full" id="googleSignInButton" ref={googleSignInButton}></div>
     </>
   );
 };

apps/app/constants/common.ts

@@ -26,7 +26,7 @@ export const renderShortNumericDateFormat = (date: string | Date) => {
 export const groupBy = (array: any[], key: string) => {
   const innerKey = key.split("."); // split the key by dot
   return array.reduce((result, currentValue) => {
-    const key = innerKey.reduce((obj, i) => obj[i], currentValue); // get the value of the inner key
+    const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
     (result[key] = result[key] || []).push(currentValue);
     return result;
   }, {});

apps/app/constants/fetch-keys.ts

@@ -5,6 +5,7 @@ export const USER_WORKSPACES = "USER_WORKSPACES";
 export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`;
 export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
 export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
 
 export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
 export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
@@ -17,7 +18,7 @@ export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
 export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId}`;
 export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
   `PROJECT_ISSUES_PROPERTIES_${projectId}`;
-export const PROJECT_ISSUES_COMMENTS = "PROJECT_ISSUES_COMMENTS";
+export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId}`;
 export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY";
 export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
 export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
@@ -30,6 +31,7 @@ export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
 export const STATE_DETAIL = "STATE_DETAIL";
 
 export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
+export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
 
 export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
 export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;

apps/app/constants/index.ts

@@ -8,3 +8,11 @@ export const ROLE = {
 };
 
 export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
+
+export const GROUP_CHOICES = {
+  backlog: "Backlog",
+  unstarted: "Unstarted",
+  started: "Started",
+  completed: "Completed",
+  cancelled: "Cancelled",
+};

apps/app/contexts/theme.context.tsx

@@ -1,4 +1,6 @@
 import React, { createContext, useCallback, useReducer, useEffect } from "react";
+// swr
+import useSWR from "swr";
 // constants
 import {
   TOGGLE_SIDEBAR,
@@ -10,6 +12,12 @@ import {
 } from "constants/theme.context.constants";
 // components
 import ToastAlert from "components/toast-alert";
+// hooks
+import useUser from "lib/hooks/useUser";
+// constants
+import { PROJECT_MEMBERS, USER_PROJECT_VIEW } from "constants/fetch-keys";
+// services
+import projectService from "lib/services/project.service";
 
 export const themeContext = createContext<ContextType>({} as ContextType);
 
@@ -122,53 +130,89 @@ export const reducer: ReducerFunctionType = (state, action) => {
 export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const { activeProject, activeWorkspace, user } = useUser();
+
+  const { data: projectMember } = useSWR(
+    activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
   const toggleCollapsed = useCallback(() => {
     dispatch({
       type: TOGGLE_SIDEBAR,
     });
   }, []);
 
-  const setIssueView = useCallback((display: "list" | "kanban") => {
+  const saveDataToServer = useCallback(() => {
+    if (!activeProject || !activeWorkspace) return;
+    projectService
+      .setProjectView(activeWorkspace.slug, activeProject.id, state)
+      .then((res) => {
+        console.log("saved", res);
+      })
+      .catch((error) => {});
+  }, [activeProject, activeWorkspace, state]);
+
+  const setIssueView = useCallback(
+    (display: "list" | "kanban") => {
       dispatch({
         type: SET_ISSUE_VIEW,
         payload: {
           issueView: display,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setGroupByProperty = useCallback((property: NestedKeyOf<IIssue> | null) => {
+  const setGroupByProperty = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
       dispatch({
         type: SET_GROUP_BY_PROPERTY,
         payload: {
           groupByProperty: property,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
+  const setOrderBy = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
       dispatch({
         type: SET_ORDER_BY_PROPERTY,
         payload: {
           orderBy: property,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
+  const setFilterIssue = useCallback(
+    (property: "activeIssue" | "backlogIssue" | null) => {
       dispatch({
         type: SET_FILTER_ISSUES,
         payload: {
           filterIssue: property,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
   useEffect(() => {
     dispatch({
       type: REHYDRATE_THEME,
+      payload: projectMember?.find((member) => member.member.id === user?.id)?.view_props,
     });
-  }, []);
+  }, [projectMember, user]);
 
   return (
     <themeContext.Provider

apps/app/layouts/app-layout.tsx

@@ -1,9 +1,4 @@
-// react
+import React, { useState } from "react";
-import React, { useEffect, useState } from "react";
-// next
-import { useRouter } from "next/router";
-// hooks
-import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/container";
 import Sidebar from "layouts/navbar/main-siderbar";
@@ -25,14 +20,6 @@ const AppLayout: React.FC<Props> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const router = useRouter();
-
-  const { user, isUserLoading } = useUser();
-
-  useEffect(() => {
-    if (!isUserLoading && (!user || user === null)) router.push("/signin");
-  }, [isUserLoading, user, router]);
-
   return (
     <Container meta={meta}>
       <CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />

apps/app/lib/hooks/useMyIssueFilter.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+// hooks
+import useUser from "./useUser";
+// types
+import { Properties, NestedKeyOf, IIssue } from "types";
+// services
+import userService from "lib/services/user.service";
+// common
+import { groupBy } from "constants/common";
+
+import { PRIORITIES } from "constants/";
+
+const initialValues: Properties = {
+  key: true,
+  state: true,
+  assignee: true,
+  priority: false,
+  start_date: false,
+  target_date: false,
+  cycle: false,
+};
+
+const useMyIssuesProperties = (issues?: IIssue[]) => {
+  const [properties, setProperties] = useState<Properties>(initialValues);
+  const [groupByProperty, setGroupByProperty] = useState<NestedKeyOf<IIssue> | null>(null);
+
+  const { states, user } = useUser();
+
+  useEffect(() => {
+    if (!user) return;
+    setProperties({ ...initialValues, ...user.my_issues_prop?.properties });
+    setGroupByProperty(user.my_issues_prop?.groupBy ?? null);
+  }, [user]);
+
+  let groupedByIssues: {
+    [key: string]: IIssue[];
+  } = {
+    ...(groupByProperty === "state_detail.name"
+      ? Object.fromEntries(
+          states
+            ?.sort((a, b) => a.sequence - b.sequence)
+            ?.map((state) => [
+              state.name,
+              issues?.filter((issue) => issue.state === state.name) ?? [],
+            ]) ?? []
+        )
+      : groupByProperty === "priority"
+      ? Object.fromEntries(
+          PRIORITIES.map((priority) => [
+            priority,
+            issues?.filter((issue) => issue.priority === priority) ?? [],
+          ])
+        )
+      : {}),
+    ...groupBy(issues ?? [], groupByProperty ?? ""),
+  };
+
+  const setMyIssueProperty = (key: keyof Properties) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setProperties((prevData) => ({
+      ...prevData,
+      [key]: !prevData[key],
+    }));
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({
+        properties: {
+          ...properties,
+          [key]: !properties[key],
+        },
+        groupBy: groupByProperty,
+      })
+    );
+  };
+
+  const setMyIssueGroupByProperty = (groupByProperty: NestedKeyOf<IIssue> | null) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setGroupByProperty(groupByProperty);
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({ properties, groupBy: groupByProperty })
+    );
+  };
+
+  useEffect(() => {
+    const viewProps = localStorage.getItem("my_issues_prop");
+    if (viewProps) {
+      const { properties, groupBy } = JSON.parse(viewProps);
+      setProperties(properties);
+      setGroupByProperty(groupBy);
+    }
+  }, []);
+
+  return {
+    filteredIssues: groupedByIssues,
+    groupByProperty,
+    properties,
+    setMyIssueProperty,
+    setMyIssueGroupByProperty,
+  } as const;
+};
+
+export default useMyIssuesProperties;

apps/app/lib/services/project.service.ts

@@ -132,6 +132,20 @@ class ProjectServices extends APIService {
       });
   }
 
+  async getProjectMember(
+    workspacSlug: string,
+    projectId: string,
+    memberId: string
+  ): Promise<IProjectMember> {
+    return this.get(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async updateProjectMember(
     workspacSlug: string,
     projectId: string,
@@ -207,7 +221,7 @@ class ProjectServices extends APIService {
     projectId: string,
     data: ProjectViewTheme
   ): Promise<any> {
-    await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
+    await this.post(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })

apps/app/lib/services/user.service.ts

@@ -1,6 +1,7 @@
 // services
 import { USER_ENDPOINT, USER_ISSUES_ENDPOINT, USER_ONBOARD_ENDPOINT } from "constants/api-routes";
 import APIService from "lib/services/api.service";
+import type { IUser } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -38,7 +39,7 @@ class UserService extends APIService {
       });
   }
 
-  async updateUser(data = {}): Promise<any> {
+  async updateUser(data: Partial<IUser>): Promise<any> {
     return this.patch(USER_ENDPOINT, data)
       .then((response) => {
         return response?.data;

apps/app/lib/services/workspace.service.ts

@@ -19,7 +19,12 @@ import APIService from "lib/services/api.service";
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
 // types
-import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types";
+import {
+  IWorkspace,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+  ILastActiveWorkspaceDetails,
+} from "types";
 
 class WorkspaceService extends APIService {
   constructor() {
@@ -98,6 +103,16 @@ class WorkspaceService extends APIService {
       });
   }
 
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get(LAST_ACTIVE_WORKSPACE_AND_PROJECTS)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
     return this.get(USER_WORKSPACE_INVITATIONS)
       .then((response) => {

apps/app/pages/me/my-issues.tsx

@@ -1,17 +1,18 @@
 // react
 import React from "react";
 // next
-import type { NextPage } from "next";
 import Link from "next/link";
+import type { NextPage } from "next";
 import Image from "next/image";
 // swr
 import useSWR from "swr";
+// headless ui
+import { Disclosure, Listbox, Menu, Popover, Transition } from "@headlessui/react";
 // layouts
 import AppLayout from "layouts/app-layout";
 // hooks
 import useUser from "lib/hooks/useUser";
 // headless ui
-import { Disclosure, Listbox, Menu, Popover, Transition } from "@headlessui/react";
 // ui
 import { Spinner, Breadcrumbs, BreadcrumbItem, EmptySpace, EmptySpaceItem, HeaderButton } from "ui";
 // icons
@@ -31,6 +32,7 @@ import workspaceService from "lib/services/workspace.service";
 import useIssuesProperties from "lib/hooks/useIssuesProperties";
 // hoc
 import withAuth from "lib/hoc/withAuthWrapper";
+import useMyIssuesProperties from "lib/hooks/useMyIssueFilter";
 // components
 import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
 // types
@@ -97,6 +99,9 @@ const MyIssues: NextPage = () => {
       });
   };
 
+  const { filteredIssues, setMyIssueGroupByProperty, setMyIssueProperty, groupByProperty } =
+    useMyIssuesProperties(myIssues);
+
   return (
     <AppLayout
       breadcrumbs={

apps/app/pages/projects/[projectId]/issues/[issueId].tsx

@@ -114,7 +114,7 @@ const IssueDetail: NextPage = () => {
   );
 
   const { data: issueComments } = useSWR<IIssueComment[]>(
-    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS : null,
+    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null,
     activeWorkspace && projectId && issueId
       ? () =>
           issuesServices.getIssueComments(

apps/app/pages/projects/[projectId]/issues/index.tsx

@@ -49,6 +49,7 @@ import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
   { name: "State", key: "state_detail.name" },
   { name: "Priority", key: "priority" },
+  { name: "Cycle", key: "issue_cycle.cycle_detail.name" },
   { name: "Created By", key: "created_by" },
   { name: "None", key: null },
 ];

apps/app/pages/workspace/settings.tsx

@@ -223,7 +223,14 @@ const WorkspaceSettings = () => {
                   </div>
                 </Tab.Panel>
                 <Tab.Panel>
-                  <div>
+                  <div className="space-y-3">
+                    <h2 className="text-2xl text-red-500 font-semibold">Danger Zone</h2>
+                    <p className="w-full md:w-1/2">
+                      The danger zone of the workspace delete page is a critical area that requires
+                      careful consideration and attention. When deleting a workspace, all of the
+                      data and resources within that workspace will be permanently removed and
+                      cannot be recovered.
+                    </p>
                     <Button theme="danger" onClick={() => setIsOpen(true)}>
                       Delete the workspace
                     </Button>

apps/app/types/issues.d.ts

@@ -11,6 +11,19 @@ export interface IssueResponse {
   results: IIssue[];
 }
 
+export interface IIssueCycle {
+  id: string;
+  cycle_detail: ICycle;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  cycle: string;
+}
+
 export interface IIssue {
   id: string;
   state_detail: IState;
@@ -60,6 +73,8 @@ export interface IIssue {
   blocked_issue_details: any[];
   sprints: string | null;
   cycle: string | null;
+
+  issue_cycle: IIssueCycle;
 }
 
 export interface BlockeIssue {

apps/app/types/users.d.ts

@@ -1,3 +1,5 @@
+import { IIssue, NestedKeyOf, Properties } from "./";
+
 export interface IUser {
   id: readonly string;
   last_login: readonly Date;
@@ -14,6 +16,12 @@ export interface IUser {
   created_location: readonly string;
   is_email_verified: boolean;
   token: string;
+
+  my_issues_prop?: {
+    properties: Properties;
+    groupBy: NestedKeyOf<IIssue> | null;
+  };
+
   [...rest: string]: any;
 }
 

apps/app/types/workspace.d.ts

@@ -1,4 +1,4 @@
-import type { IUser, IUserLite } from "./";
+import type { IProjectMember, IUser, IUserLite } from "./";
 
 export interface IWorkspace {
   readonly id: string;
@@ -36,3 +36,8 @@ export interface IWorkspaceMember {
   created_by: string;
   updated_by: string;
 }
+
+export interface ILastActiveWorkspaceDetails {
+  workspace_details: IWorkspace;
+  project_details?: IProjectMember[];
+}

yarn.lock

@@ -778,7 +778,12 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
+caniuse-lite@^1.0.30001332:
+  version "1.0.30001439"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
+  integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
+
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
   version "1.0.30001434"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5"
   integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==