From dd934e63a26f416133ad022d95292272081ff2ef Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Tue, 3 Oct 2023 18:55:53 +0530 Subject: [PATCH] refactor: fetch object details logic --- .../custom-attributes/object-modal.tsx | 66 +++++++++--------- web/components/emoji-icon-picker/index.tsx | 67 +++++++++---------- web/constants/fetch-keys.ts | 2 + 3 files changed, 65 insertions(+), 70 deletions(-) diff --git a/web/components/custom-attributes/object-modal.tsx b/web/components/custom-attributes/object-modal.tsx index 354a03951..5ab034ead 100644 --- a/web/components/custom-attributes/object-modal.tsx +++ b/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 = 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 = 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 = 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) => { @@ -104,28 +107,19 @@ export const ObjectModal: React.FC = 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 = observer((props) => {

Attributes

- {customAttributes.fetchObjectDetailsLoader ? ( + {customAttributesStore.fetchObjectDetailsLoader ? ( ) : ( - 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 ( - - ); - } - ) + return ( + + ); + }) )} - {customAttributes.createObjectAttributeLoader && ( + {customAttributesStore.createObjectAttributeLoader && ( diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx index d46d7deeb..5e72361ef 100644 --- a/web/components/emoji-icon-picker/index.tsx +++ b/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 = ({ const [recentEmojis, setRecentEmojis] = useState([]); - const emojiPickerRef = useRef(null); + const [referenceElement, setReferenceElement] = useState(null); + const [popperElement, setPopperElement] = useState(null); + + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: "bottom-start", + }); useEffect(() => { setRecentEmojis(getRecentEmojis()); @@ -50,31 +53,27 @@ const EmojiIconPicker: React.FC = ({ if (!value || value?.length === 0) onChange(getRandomEmoji()); }, [value, onChange]); - useOutsideClickDetector(emojiPickerRef, () => setIsOpen(false)); - return ( - - setIsOpen((prev) => !prev)} - className="outline-none" - disabled={disabled} - > - {label} + + + - - -
+ +
+
{tabOptions.map((tab) => { @@ -214,8 +213,8 @@ const EmojiIconPicker: React.FC = ({
- - +
+ ); }; diff --git a/web/constants/fetch-keys.ts b/web/constants/fetch-keys.ts index e0ce24f65..9f8946bf5 100644 --- a/web/constants/fetch-keys.ts +++ b/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()}`;