dev: hello world

components/project/issues/my-issues/ChangeStateDropdown.tsx

@@ -0,0 +1,110 @@
+// react
+import React from "react";
+// ui
+import { Listbox, Transition } from "@headlessui/react";
+// hooks
+import useUser from "lib/hooks/useUser";
+// services
+import issuesServices from "lib/services/issues.services";
+import stateServices from "lib/services/state.services";
+// swr
+import useSWR, { mutate } from "swr";
+// types
+import { IIssue, IssueResponse, IState } from "types";
+// constants
+import { addSpaceIfCamelCase, classNames } from "constants/common";
+import { STATE_LIST, USER_ISSUE } from "constants/fetch-keys";
+
+type Props = {
+  issue: IIssue;
+};
+
+const ChangeStateDropdown = ({ issue }: Props) => {
+  const { activeWorkspace } = useUser();
+
+  const partialUpdateIssue = (formData: Partial<IIssue>, projectId: string, issueId: string) => {
+    if (!activeWorkspace) return;
+    issuesServices
+      .patchIssue(activeWorkspace.slug, projectId, issueId, formData)
+      .then((response) => {
+        // mutate<IssueResponse>(
+        //   USER_ISSUE,
+        //   (prevData) => ({
+        //     ...(prevData as IssueResponse),
+        //   }),
+        //   false
+        // );
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  const { data: states } = useSWR<IState[]>(
+    activeWorkspace ? STATE_LIST(issue.project) : null,
+    activeWorkspace ? () => stateServices.getStates(activeWorkspace.slug, issue.project) : null
+  );
+
+  return (
+    <>
+      <Listbox
+        as="div"
+        value={issue.state}
+        onChange={(data: string) => {
+          partialUpdateIssue({ state: data }, issue.project, issue.id);
+        }}
+        className="flex-shrink-0"
+      >
+        {({ open }) => (
+          <>
+            <div>
+              <Listbox.Button
+                className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
+                style={{
+                  border: `2px solid ${issue.state_detail.color}`,
+                  backgroundColor: `${issue.state_detail.color}20`,
+                }}
+              >
+                <span
+                  className={classNames(
+                    issue.state ? "" : "text-gray-900",
+                    "hidden capitalize sm:block w-16"
+                  )}
+                >
+                  {addSpaceIfCamelCase(issue.state_detail.name)}
+                </span>
+              </Listbox.Button>
+
+              <Transition
+                show={open}
+                as={React.Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                  {states?.map((state) => (
+                    <Listbox.Option
+                      key={state.id}
+                      className={({ active }) =>
+                        classNames(
+                          active ? "bg-indigo-50" : "bg-white",
+                          "cursor-pointer select-none px-3 py-2"
+                        )
+                      }
+                      value={state.id}
+                    >
+                      {addSpaceIfCamelCase(state.name)}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </>
+        )}
+      </Listbox>
+    </>
+  );
+};
+
+export default ChangeStateDropdown;