refactor: fetch object details logic

web/components/custom-attributes/object-modal.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
+import useSWR from "swr";
 
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -15,6 +16,8 @@ import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { ICustomAttribute, TCustomAttributeTypes } from "types";
+// fetch-keys
+import { CUSTOM_ATTRIBUTE_DETAILS } from "constants/fetch-keys";
 // constants
 import { CUSTOM_ATTRIBUTES_LIST } from "constants/custom-attributes";
 
@@ -48,7 +51,7 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
 
   const objectId = watch("id") && watch("id") !== "" ? watch("id") : null;
 
-  const { customAttributes } = useMobxStore();
+  const { customAttributes: customAttributesStore } = useMobxStore();
 
   const handleClose = () => {
     onClose();
@@ -69,7 +72,7 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
       type: "entity",
     };
 
-    await customAttributes
+    await customAttributesStore
       .createObject(workspaceSlug.toString(), payload)
       .then((res) => setValue("id", res?.id ?? ""));
   };
@@ -83,7 +86,7 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
       icon: formData.icon ?? "",
     };
 
-    await customAttributes.updateObject(workspaceSlug.toString(), data.id, payload);
+    await customAttributesStore.updateObject(workspaceSlug.toString(), data.id, payload);
   };
 
   const handleObjectFormSubmit = async (formData: Partial<ICustomAttribute>) => {
@@ -104,28 +107,19 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
       ...typeMetaData.initialPayload,
     };
 
-    await customAttributes.createObjectAttribute(workspaceSlug.toString(), {
+    await customAttributesStore.createObjectAttribute(workspaceSlug.toString(), {
       ...payload,
       parent: objectId,
     });
   };
 
-  // fetch the object details if object state has id
-  useEffect(() => {
-    if (!objectId) return;
-
-    if (!customAttributes.objectAttributes[objectId]) {
-      if (!workspaceSlug) return;
-
-      customAttributes.fetchObjectDetails(workspaceSlug.toString(), objectId).then((res) => {
-        reset({ ...res });
-      });
-    } else {
-      reset({
-        ...customAttributes.objects?.find((e) => e.id === objectId),
-      });
-    }
-  }, [customAttributes, objectId, reset, workspaceSlug]);
+  useSWR(
+    workspaceSlug && objectId ? CUSTOM_ATTRIBUTE_DETAILS(objectId.toString()) : null,
+    workspaceSlug && objectId
+      ? () =>
+          customAttributesStore.fetchObjectDetails(workspaceSlug.toString(), objectId.toString())
+      : null
+  );
 
   // update the form if data is present
   useEffect(() => {
@@ -237,28 +231,28 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
                       <div className="px-6">
                         <h4 className="font-medium">Attributes</h4>
                         <div className="mt-2 space-y-2">
-                          {customAttributes.fetchObjectDetailsLoader ? (
+                          {customAttributesStore.fetchObjectDetailsLoader ? (
                             <Loader>
                               <Loader.Item height="40px" />
                             </Loader>
                           ) : (
-                            Object.keys(customAttributes.objectAttributes[objectId] ?? {})?.map(
-                              (attributeId) => {
-                                const attribute =
-                                  customAttributes.objectAttributes[objectId][attributeId];
+                            Object.keys(
+                              customAttributesStore.objectAttributes[objectId] ?? {}
+                            )?.map((attributeId) => {
+                              const attribute =
+                                customAttributesStore.objectAttributes[objectId][attributeId];
 
-                                return (
-                                  <AttributeForm
-                                    key={attributeId}
-                                    attributeDetails={attribute}
-                                    objectId={objectId}
-                                    type={attribute.type}
-                                  />
-                                );
-                              }
-                            )
+                              return (
+                                <AttributeForm
+                                  key={attributeId}
+                                  attributeDetails={attribute}
+                                  objectId={objectId}
+                                  type={attribute.type}
+                                />
+                              );
+                            })
                           )}
-                          {customAttributes.createObjectAttributeLoader && (
+                          {customAttributesStore.createObjectAttributeLoader && (
                             <Loader>
                               <Loader.Item height="40px" />
                             </Loader>

web/components/emoji-icon-picker/index.tsx

@@ -1,18 +1,16 @@
-import React, { useEffect, useState, useRef } from "react";
-// headless ui
-import { Tab, Transition, Popover } from "@headlessui/react";
-// react colors
+import React, { useEffect, useState } from "react";
+import { Tab, Popover } from "@headlessui/react";
 import { TwitterPicker } from "react-color";
-// hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// types
-import { Props } from "./types";
+import { usePopper } from "react-popper";
+
 // emojis
 import emojis from "./emojis.json";
 import icons from "./icons.json";
 // helpers
 import { getRecentEmojis, saveRecentEmoji } from "./helpers";
 import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
+// types
+import { Props } from "./types";
 
 const tabOptions = [
   {
@@ -40,7 +38,12 @@ const EmojiIconPicker: React.FC<Props> = ({
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
-  const emojiPickerRef = useRef<HTMLDivElement>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
 
   useEffect(() => {
     setRecentEmojis(getRecentEmojis());
@@ -50,31 +53,27 @@ const EmojiIconPicker: React.FC<Props> = ({
     if (!value || value?.length === 0) onChange(getRandomEmoji());
   }, [value, onChange]);
 
-  useOutsideClickDetector(emojiPickerRef, () => setIsOpen(false));
-
   return (
-    <Popover className="relative z-[1]">
-      <Popover.Button
-        onClick={() => setIsOpen((prev) => !prev)}
-        className="outline-none"
-        disabled={disabled}
-      >
-        {label}
+    <Popover>
+      <Popover.Button as={React.Fragment}>
+        <button
+          type="button"
+          onClick={() => setIsOpen((prev) => !prev)}
+          className="outline-none"
+          ref={setReferenceElement}
+          disabled={disabled}
+        >
+          {label}
+        </button>
       </Popover.Button>
-      <Transition
-        show={isOpen}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div
-            ref={emojiPickerRef}
-            className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl"
-          >
+      <Popover.Panel>
+        <div
+          className="mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg"
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => {
@@ -214,8 +213,8 @@ const EmojiIconPicker: React.FC<Props> = ({
               </Tab.Panels>
             </Tab.Group>
           </div>
-        </Popover.Panel>
-      </Transition>
+        </div>
+      </Popover.Panel>
     </Popover>
   );
 };

web/constants/fetch-keys.ts

@@ -389,3 +389,5 @@ export const COMMENT_REACTION_LIST = (
 
 export const CUSTOM_OBJECTS_LIST = (projectId: string) =>
   `CUSTOM_OBJECTS_LIST_${projectId.toUpperCase()}`;
+export const CUSTOM_ATTRIBUTE_DETAILS = (attributeId: string) =>
+  `CUSTOM_ATTRIBUTE_DETAILS_${attributeId.toUpperCase()}`;