From d3e10e3adec57f7c33799cec6987753d61efdc80 Mon Sep 17 00:00:00 2001 From: Anmol Verma Date: Mon, 9 Sep 2024 22:53:43 +0530 Subject: [PATCH] add editPackModal --- .../card/PackCardHeader/PackCardHeader.tsx | 42 +++---- .../card/PackCardHeader/usePackActions.ts | 42 +++++++ .../card/PackCardHeader/usePackTitleInput.ts | 61 ----------- .../item/components/SearchItem/SearchItem.tsx | 2 +- .../modules/pack/components/EditPackModal.tsx | 103 ++++++++++++++++++ 5 files changed, 169 insertions(+), 81 deletions(-) create mode 100644 packages/app/components/card/PackCardHeader/usePackActions.ts delete mode 100644 packages/app/components/card/PackCardHeader/usePackTitleInput.ts create mode 100644 packages/app/modules/pack/components/EditPackModal.tsx diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx index 9b7996679..2b1ed6f60 100644 --- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx +++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx @@ -3,17 +3,15 @@ import useTheme from 'app/hooks/useTheme'; import { CustomCardHeader } from '../CustomCardHeader'; import { AntDesign, MaterialIcons } from '@expo/vector-icons'; import { useAuthUser } from 'app/modules/auth'; -import { - RStack, - RIconButton, - EditableText, - DropdownComponent, -} from '@packrat/ui'; +import { CascadedDropdownComponent } from '@packrat/ui/src/CascadedDropdown'; +import { EditableText } from '@packrat/ui/src/EditableText'; +import RStack from '@packrat/ui/src/RStack'; +import RIconButton from '@packrat/ui/src/RIconButton'; import { useFetchSinglePack, useDeletePack } from 'app/modules/pack'; -import { usePackTitleInput } from './usePackTitleInput'; +import { usePackActions } from './usePackActions'; import { useRouter } from 'app/hooks/router'; import { Platform, View } from 'react-native'; -import useResponsive from 'app/hooks/useResponsive'; +import { EditPackModal } from 'app/modules/pack/components/EditPackModal'; interface PackCardHeaderProps { data: any; @@ -31,24 +29,20 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => { const { handleDeletePack } = useDeletePack(data.id); const { handleActionsOpenChange, - handleEdit, handleSaveTitle, - isEditMode, - isOpen, - setIsOpen, - } = usePackTitleInput(data); + isEditModalOpen, + setIsEditModalOpen, + isTitleEditMode, + } = usePackActions({ data, refetch }); const { isDark } = useTheme(); const router = useRouter(); const optionValues: optionValues[] = [ { label: 'Edit', value: 'Edit' }, - { label: 'Save', value: 'Save' }, { label: 'Delete', value: 'Delete' }, ]; - const { xxs, xs, xxl } = useResponsive(); - return ( <> { @@ -99,7 +93,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => { maxWidth: 100, }} > - handleActionsOpenChange(value)} @@ -107,7 +101,9 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => { } - style={{ paddingTop: 20 }} + style={{ + height: 20, + }} /> } native={true} @@ -116,6 +112,14 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => { ) } /> + { + setIsEditModalOpen(false); + }} + refetch={refetch} + /> ); }; diff --git a/packages/app/components/card/PackCardHeader/usePackActions.ts b/packages/app/components/card/PackCardHeader/usePackActions.ts new file mode 100644 index 000000000..11f4c0081 --- /dev/null +++ b/packages/app/components/card/PackCardHeader/usePackActions.ts @@ -0,0 +1,42 @@ +import { useEditPack, useDeletePack } from 'app/modules/pack'; +import { useState } from 'react'; + +export const usePackActions = ({ data, refetch }) => { + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + const [isTitleEditMode, setIsTitleEditMode] = useState(false); + const { editPack } = useEditPack(); + const { handleDeletePack } = useDeletePack(data.id); + + const handleActionsOpenChange = (state) => { + switch (state) { + case 'Edit': + setIsEditModalOpen(true); + break; + case 'Delete': + handleDeletePack(); + break; + } + }; + + const handleSaveTitle = (title) => { + const packDetails = { + id: data.id, + name: title, + is_public: data.is_public, + }; + editPack(packDetails, { + onSuccess: () => { + refetch?.(); + }, + }); + setIsTitleEditMode(false); + }; + + return { + handleActionsOpenChange, + isTitleEditMode, + isEditModalOpen, + setIsEditModalOpen, + handleSaveTitle, + }; +}; diff --git a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts deleted file mode 100644 index 146198ca4..000000000 --- a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { useEditPack, useDeletePack } from 'app/modules/pack'; -import { useRef, useState } from 'react'; - -export const usePackTitleInput = (data) => { - const [isEditMode, setIsEditMode] = useState(false); - const isEditModeRef = useRef(false); - const [isOpen, setIsOpen] = useState(false); - const { editPack } = useEditPack(); - const { handleDeletePack } = useDeletePack(data.id); - - const handleActionsOpenChange = (state) => { - setIsOpen(true); - if (!state && isEditModeRef.current) { - isEditModeRef.current = false; - setIsEditMode(true); - setIsOpen(true); - } - switch (state) { - case 'Edit': - handleEdit(); - break; - case 'Save': - handleSaveTitle(data.name); - break; - case 'Delete': - handleDelete(); - break; - default: - break; - } - }; - const handleEdit = () => { - isEditModeRef.current = true; - setIsOpen(false); - setIsEditMode(true); - }; - - const handleSaveTitle = (title) => { - const packDetails = { - id: data.id, - name: title, - is_public: data.is_public, - }; - setIsOpen(false); - editPack(packDetails); - setIsEditMode(false); - }; - const handleDelete = () => { - handleDeletePack(); - setIsOpen(false); - }; - - return { - handleActionsOpenChange, - isEditMode, - handleEdit, - handleSaveTitle, - isOpen, - setIsOpen, - }; -}; diff --git a/packages/app/modules/item/components/SearchItem/SearchItem.tsx b/packages/app/modules/item/components/SearchItem/SearchItem.tsx index 655dac414..e0f763529 100644 --- a/packages/app/modules/item/components/SearchItem/SearchItem.tsx +++ b/packages/app/modules/item/components/SearchItem/SearchItem.tsx @@ -13,7 +13,7 @@ export const SearchItem = () => { searchString={searchString} onChange={setSearchString} resultItemComponent={} - placeholder="Search Item" + placeholder="Search Global Item" results={results} onSelect={handleSearchResultClick} /> diff --git a/packages/app/modules/pack/components/EditPackModal.tsx b/packages/app/modules/pack/components/EditPackModal.tsx new file mode 100644 index 000000000..f8ec7f54c --- /dev/null +++ b/packages/app/modules/pack/components/EditPackModal.tsx @@ -0,0 +1,103 @@ +import React, { useEffect, useState } from 'react'; +import { BaseModal } from '../../../../ui/src/modal/BaseModal'; +import RButton from '@packrat/ui/src/RButton'; +import RInput from '@packrat/ui/src/RInput'; + +import { View, Text } from 'react-native'; +import { useEditPack } from '../hooks/useEditPack'; +import RStack from '@packrat/ui/src/RStack'; +import RText from '@packrat/ui/src/RText'; +import { Switch } from 'tamagui'; +import RSwitch from '@packrat/ui/src/RSwitch'; + +interface EditPackModalProps { + isOpen?: boolean; + onClose?: () => void; + currentPack: any; + refetch?: () => void; +} + +export const EditPackModal: React.FC = ({ + isOpen, + onClose, + currentPack, + refetch, +}) => { + console.log({ currentPack }); + const [packName, setPackName] = useState(currentPack?.name ?? ''); + const [isPublic, setIsPublic] = useState(currentPack?.is_public ?? true); + const { editPack, isLoading, isError } = useEditPack(); + + const handleEditPack = async () => { + try { + editPack( + { id: currentPack.id, name: packName, is_public: isPublic }, + { + onSuccess: () => { + onClose?.(); + refetch?.(); + }, + }, + ); + } catch (e) { + console.error(e); + } + }; + + useEffect(() => { + if (isOpen) { + setPackName(currentPack?.name ?? ''); + setIsPublic(currentPack?.is_public ?? true); + } + }, [isOpen]); + + return ( + { + closeModal(); + onClose?.(); + }, + }, + ]} + isOpen={isOpen} + onClose={onClose} + > + setPackName(t)} + style={{ width: 200 }} + /> + + Public + setIsPublic((prev) => !prev)} + size="$1.5" + > + + + + + {isLoading ? 'Saving...' : 'Save'} + + {isError && ( + + Failed to save changes + + )} + + ); +};