From d34403c20dfde988ac5318a0d2e7d0e75160a3bd Mon Sep 17 00:00:00 2001 From: Thomas Rogers Date: Sun, 24 Sep 2023 20:43:45 +0200 Subject: [PATCH 1/3] Fix Editing Saved-Searches on Mobile View --- .../web/pages/settings/saved-searches.tsx | 216 ++++++------------ 1 file changed, 76 insertions(+), 140 deletions(-) diff --git a/packages/web/pages/settings/saved-searches.tsx b/packages/web/pages/settings/saved-searches.tsx index 685d72e73..d57f1ba4f 100644 --- a/packages/web/pages/settings/saved-searches.tsx +++ b/packages/web/pages/settings/saved-searches.tsx @@ -1,11 +1,4 @@ -import { - Dispatch, - MouseEventHandler, - SetStateAction, - useCallback, - useEffect, - useState, -} from 'react' +import { Dispatch, MouseEventHandler, SetStateAction, useCallback, useEffect, useState } from "react" import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Button } from '../../components/elements/Button' import { styled, theme } from '../../components/tokens/stitches.config' @@ -32,13 +25,13 @@ import { } from '../../components/elements/DropdownElements' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { InfoLink } from '../../components/elements/InfoLink' -import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery' -import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment' -import CheckboxComponent from '../../components/elements/Checkbox' -import { updateFilterMutation } from '../../lib/networking/mutations/updateFilterMutation' -import { saveFilterMutation } from '../../lib/networking/mutations/saveFilterMutation' -import { inRange } from 'lodash' -import { deleteFilterMutation } from '../../lib/networking/mutations/deleteFilterMutation' +import { useGetSavedSearchQuery } from "../../lib/networking/queries/useGetSavedSearchQuery" +import { SavedSearch } from "../../lib/networking/fragments/savedSearchFragment" +import CheckboxComponent from "../../components/elements/Checkbox" +import { updateFilterMutation } from "../../lib/networking/mutations/updateFilterMutation" +import { saveFilterMutation } from "../../lib/networking/mutations/saveFilterMutation" +import { inRange } from 'lodash'; +import { deleteFilterMutation } from "../../lib/networking/mutations/deleteFilterMutation" const HeaderWrapper = styled(Box, { width: '100%', @@ -153,24 +146,22 @@ export default function SavedSearchesPage(): JSX.Element { const { savedSearches, isLoading } = useGetSavedSearchQuery() const [nameInputText, setNameInputText] = useState('') const [queryInputText, setQueryInputText] = useState('') - const [editingId, setEditingId] = useState(null) + const [editingId, setEditingId] = useState(null); const [isCreateMode, setIsCreateMode] = useState(false) const [windowWidth, setWindowWidth] = useState(0) - const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = - useState(null) - const [draggedElementId, setDraggedElementId] = useState(null) - const [draggedElementPosition, setDraggedElementPosition] = - useState<{ x: number; y: number } | null>(null) - const [sortedSavedSearch, setSortedSavedSearch] = useState([]) + const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState< + string | null + >(null) + const [draggedElementId, setDraggedElementId] = useState(null); + const [draggedElementPosition, setDraggedElementPosition] = useState<{ x: number, y: number } | null>(null); + const [sortedSavedSearch, setSortedSavedSearch] = useState([]); // Some theming stuff here. const breakpoint = 768 applyStoredTheme(false) useEffect(() => { - setSortedSavedSearch( - [...(savedSearches ?? [])].sort((l, r) => l.position - r.position) - ) + setSortedSavedSearch([...(savedSearches ?? [])].sort((l, r) => l.position - r.position)) }, [isLoading]) useEffect(() => { @@ -193,12 +184,7 @@ export default function SavedSearchesPage(): JSX.Element { async function createSavedSearch(): Promise { try { - const savedFilter = await saveFilterMutation({ - name: nameInputText, - filter: queryInputText, - category: 'Search', - position: sortedSavedSearch?.length ?? 0, - }) + const savedFilter = await saveFilterMutation({ name: nameInputText, filter: queryInputText, category: 'Search', position: sortedSavedSearch?.length ?? 0 }); showSuccessToast(`Added Filter: ${nameInputText}`) if (savedFilter) { @@ -213,16 +199,12 @@ export default function SavedSearchesPage(): JSX.Element { async function updateSavedSearch(id: string): Promise { resetSavedSearchState() - const changedSortedSearch = sortedSavedSearch?.find((it) => it.id == id) + const changedSortedSearch = sortedSavedSearch?.find(it => it.id == id) if (changedSortedSearch != undefined) { changedSortedSearch.name = nameInputText changedSortedSearch.filter = queryInputText setSortedSavedSearch(sortedSavedSearch) - await updateFilterMutation({ - id, - name: nameInputText, - filter: queryInputText, - }) + await updateFilterMutation( { id, name: nameInputText, filter: queryInputText }); } } @@ -237,21 +219,15 @@ export default function SavedSearchesPage(): JSX.Element { } async function onDeleteSavedSearch(id: string): Promise { - const currentElement = sortedSavedSearch?.find((it) => it.id == id) + const currentElement = sortedSavedSearch?.find((it) => it.id == id); if (currentElement) { await deleteFilterMutation(id) setSortedSavedSearch( sortedSavedSearch - .filter((it) => it.id !== id) - .map((it) => { - return { - ...it, - position: - currentElement.position > it.position - ? it.position - : it.position - 1, - } + .filter(it => it.id !== id) + .map(it => { + return { ...it, position: currentElement.position > it.position ? it.position : it.position - 1 } }) ) } @@ -263,34 +239,18 @@ export default function SavedSearchesPage(): JSX.Element { setConfirmRemoveSavedSearchId(id) } - async function updatePositionOnMouseUp( - y: number - ): Promise { - const currentElement = sortedSavedSearch?.find( - ({ id }) => id == draggedElementId - ) + async function updatePositionOnMouseUp(y: number): Promise { + const currentElement = sortedSavedSearch?.find(({ id }) => id == draggedElementId); if (currentElement) { - const idx = Math.floor( - (y + window.scrollY - 25 - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD - ) - const correctedIdx = Math.min( - Math.max(idx, 0), - sortedSavedSearch?.length - 1 - ) + const idx = Math.floor(((y + window.scrollY - 25) - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD) + const correctedIdx = Math.min(Math.max(idx, 0), sortedSavedSearch?.length - 1) const moveUp = correctedIdx < currentElement.position if (correctedIdx != currentElement.position) { const newlyOrdered = sortedSavedSearch ?.map((search) => { - let pos = search.position - if ( - inRange( - pos, - Math.min(correctedIdx, currentElement.position), - Math.max(correctedIdx, currentElement.position) - ) || - search.position == correctedIdx - ) { + let pos = search.position; + if (inRange(pos, Math.min(correctedIdx, currentElement.position), Math.max(correctedIdx, currentElement.position)) || search.position == correctedIdx) { pos = search.position + (moveUp ? +1 : -1) } if (draggedElementId == search?.id) { @@ -298,15 +258,12 @@ export default function SavedSearchesPage(): JSX.Element { } return { ...search, - position: pos, + position: pos } }) - ?.sort((l, r) => l.position - r.position) + ?.sort((l, r) => l.position - r.position); setSortedSavedSearch(newlyOrdered) - return updateFilterMutation({ - ...currentElement, - position: correctedIdx, - }) + return updateFilterMutation({ ...currentElement, position: correctedIdx }) } } @@ -331,7 +288,9 @@ export default function SavedSearchesPage(): JSX.Element { > {confirmRemoveSavedSearchId ? ( { await onDeleteSavedSearch(confirmRemoveSavedSearchId) setConfirmRemoveSavedSearchId(null) @@ -349,7 +308,7 @@ export default function SavedSearchesPage(): JSX.Element { Saved Searches - + > isCreateMode: boolean setIsCreateMode: Dispatch> - setEditingId: Dispatch> + setEditingId: Dispatch> setNameInputText: Dispatch> createSavedSearch: () => Promise updateSavedSearch: (id: string) => Promise @@ -526,10 +485,8 @@ type EditCardProps = { isLastChild?: boolean | undefined draggedElementId: string | null setDraggedElementId: Dispatch> - setDraggedElementPosition: Dispatch< - SetStateAction<{ x: number; y: number } | null> - > - isSwappedCard?: boolean + setDraggedElementPosition: Dispatch> + isSwappedCard?: boolean, updatePositionOnMouseUp?: (y: number) => Promise } @@ -562,19 +519,10 @@ function GenericTableCard( updatePositionOnMouseUp, } = props const [isVisible, setIsVisible] = useState(!!savedSearch?.visible) - const showInput = - editingId === savedSearch?.id || (isCreateMode && !savedSearch) + const showInput = editingId === savedSearch?.id || (isCreateMode && !savedSearch) const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58' - const DEFAULT_STYLE = { position: null } - const [style, setStyle] = - useState< - Partial<{ - position: string | null - top: string - left: string - maxWidth: string - }> - >(DEFAULT_STYLE) + const DEFAULT_STYLE = { position: null }; + const [style, setStyle] = useState>(DEFAULT_STYLE) const handleEdit = () => { editingId && updateSavedSearch(editingId) setEditingId(null) @@ -584,14 +532,14 @@ function GenericTableCard( } + triggerElement={} > null}> @@ -952,13 +887,14 @@ function MobileEditCard(props: EditCardProps) { queryInputText, setQueryInputText, createSavedSearch, + updateSavedSearch, resetState, isFirstChild, isLastChild, } = props const handleEdit = () => { - editingId && setEditingId(editingId) + editingId && updateSavedSearch(editingId) setEditingId(null) } From 50d8b6868315b4f8f414877c372db7612acbff37 Mon Sep 17 00:00:00 2001 From: Thomas Rogers Date: Sun, 24 Sep 2023 20:48:12 +0200 Subject: [PATCH 2/3] Prettier Run --- .../web/pages/settings/saved-searches.tsx | 205 +++++++++++------- 1 file changed, 130 insertions(+), 75 deletions(-) diff --git a/packages/web/pages/settings/saved-searches.tsx b/packages/web/pages/settings/saved-searches.tsx index d57f1ba4f..1386a1501 100644 --- a/packages/web/pages/settings/saved-searches.tsx +++ b/packages/web/pages/settings/saved-searches.tsx @@ -1,4 +1,11 @@ -import { Dispatch, MouseEventHandler, SetStateAction, useCallback, useEffect, useState } from "react" +import { + Dispatch, + MouseEventHandler, + SetStateAction, + useCallback, + useEffect, + useState, +} from 'react' import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Button } from '../../components/elements/Button' import { styled, theme } from '../../components/tokens/stitches.config' @@ -25,13 +32,13 @@ import { } from '../../components/elements/DropdownElements' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { InfoLink } from '../../components/elements/InfoLink' -import { useGetSavedSearchQuery } from "../../lib/networking/queries/useGetSavedSearchQuery" -import { SavedSearch } from "../../lib/networking/fragments/savedSearchFragment" -import CheckboxComponent from "../../components/elements/Checkbox" -import { updateFilterMutation } from "../../lib/networking/mutations/updateFilterMutation" -import { saveFilterMutation } from "../../lib/networking/mutations/saveFilterMutation" -import { inRange } from 'lodash'; -import { deleteFilterMutation } from "../../lib/networking/mutations/deleteFilterMutation" +import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery' +import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment' +import CheckboxComponent from '../../components/elements/Checkbox' +import { updateFilterMutation } from '../../lib/networking/mutations/updateFilterMutation' +import { saveFilterMutation } from '../../lib/networking/mutations/saveFilterMutation' +import { inRange } from 'lodash' +import { deleteFilterMutation } from '../../lib/networking/mutations/deleteFilterMutation' const HeaderWrapper = styled(Box, { width: '100%', @@ -146,22 +153,27 @@ export default function SavedSearchesPage(): JSX.Element { const { savedSearches, isLoading } = useGetSavedSearchQuery() const [nameInputText, setNameInputText] = useState('') const [queryInputText, setQueryInputText] = useState('') - const [editingId, setEditingId] = useState(null); + const [editingId, setEditingId] = useState(null) const [isCreateMode, setIsCreateMode] = useState(false) const [windowWidth, setWindowWidth] = useState(0) const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState< string | null >(null) - const [draggedElementId, setDraggedElementId] = useState(null); - const [draggedElementPosition, setDraggedElementPosition] = useState<{ x: number, y: number } | null>(null); - const [sortedSavedSearch, setSortedSavedSearch] = useState([]); + const [draggedElementId, setDraggedElementId] = useState(null) + const [draggedElementPosition, setDraggedElementPosition] = useState<{ + x: number + y: number + } | null>(null) + const [sortedSavedSearch, setSortedSavedSearch] = useState([]) // Some theming stuff here. const breakpoint = 768 applyStoredTheme(false) useEffect(() => { - setSortedSavedSearch([...(savedSearches ?? [])].sort((l, r) => l.position - r.position)) + setSortedSavedSearch( + [...(savedSearches ?? [])].sort((l, r) => l.position - r.position) + ) }, [isLoading]) useEffect(() => { @@ -184,7 +196,12 @@ export default function SavedSearchesPage(): JSX.Element { async function createSavedSearch(): Promise { try { - const savedFilter = await saveFilterMutation({ name: nameInputText, filter: queryInputText, category: 'Search', position: sortedSavedSearch?.length ?? 0 }); + const savedFilter = await saveFilterMutation({ + name: nameInputText, + filter: queryInputText, + category: 'Search', + position: sortedSavedSearch?.length ?? 0, + }) showSuccessToast(`Added Filter: ${nameInputText}`) if (savedFilter) { @@ -199,12 +216,16 @@ export default function SavedSearchesPage(): JSX.Element { async function updateSavedSearch(id: string): Promise { resetSavedSearchState() - const changedSortedSearch = sortedSavedSearch?.find(it => it.id == id) + const changedSortedSearch = sortedSavedSearch?.find((it) => it.id == id) if (changedSortedSearch != undefined) { changedSortedSearch.name = nameInputText changedSortedSearch.filter = queryInputText setSortedSavedSearch(sortedSavedSearch) - await updateFilterMutation( { id, name: nameInputText, filter: queryInputText }); + await updateFilterMutation({ + id, + name: nameInputText, + filter: queryInputText, + }) } } @@ -219,15 +240,21 @@ export default function SavedSearchesPage(): JSX.Element { } async function onDeleteSavedSearch(id: string): Promise { - const currentElement = sortedSavedSearch?.find((it) => it.id == id); + const currentElement = sortedSavedSearch?.find((it) => it.id == id) if (currentElement) { await deleteFilterMutation(id) setSortedSavedSearch( sortedSavedSearch - .filter(it => it.id !== id) - .map(it => { - return { ...it, position: currentElement.position > it.position ? it.position : it.position - 1 } + .filter((it) => it.id !== id) + .map((it) => { + return { + ...it, + position: + currentElement.position > it.position + ? it.position + : it.position - 1, + } }) ) } @@ -239,18 +266,34 @@ export default function SavedSearchesPage(): JSX.Element { setConfirmRemoveSavedSearchId(id) } - async function updatePositionOnMouseUp(y: number): Promise { - const currentElement = sortedSavedSearch?.find(({ id }) => id == draggedElementId); + async function updatePositionOnMouseUp( + y: number + ): Promise { + const currentElement = sortedSavedSearch?.find( + ({ id }) => id == draggedElementId + ) if (currentElement) { - const idx = Math.floor(((y + window.scrollY - 25) - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD) - const correctedIdx = Math.min(Math.max(idx, 0), sortedSavedSearch?.length - 1) + const idx = Math.floor( + (y + window.scrollY - 25 - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD + ) + const correctedIdx = Math.min( + Math.max(idx, 0), + sortedSavedSearch?.length - 1 + ) const moveUp = correctedIdx < currentElement.position if (correctedIdx != currentElement.position) { const newlyOrdered = sortedSavedSearch ?.map((search) => { - let pos = search.position; - if (inRange(pos, Math.min(correctedIdx, currentElement.position), Math.max(correctedIdx, currentElement.position)) || search.position == correctedIdx) { + let pos = search.position + if ( + inRange( + pos, + Math.min(correctedIdx, currentElement.position), + Math.max(correctedIdx, currentElement.position) + ) || + search.position == correctedIdx + ) { pos = search.position + (moveUp ? +1 : -1) } if (draggedElementId == search?.id) { @@ -258,12 +301,15 @@ export default function SavedSearchesPage(): JSX.Element { } return { ...search, - position: pos + position: pos, } }) - ?.sort((l, r) => l.position - r.position); + ?.sort((l, r) => l.position - r.position) setSortedSavedSearch(newlyOrdered) - return updateFilterMutation({ ...currentElement, position: correctedIdx }) + return updateFilterMutation({ + ...currentElement, + position: correctedIdx, + }) } } @@ -288,9 +334,7 @@ export default function SavedSearchesPage(): JSX.Element { > {confirmRemoveSavedSearchId ? ( { await onDeleteSavedSearch(confirmRemoveSavedSearchId) setConfirmRemoveSavedSearchId(null) @@ -474,7 +518,7 @@ type EditCardProps = { setQueryInputText: Dispatch> isCreateMode: boolean setIsCreateMode: Dispatch> - setEditingId: Dispatch> + setEditingId: Dispatch> setNameInputText: Dispatch> createSavedSearch: () => Promise updateSavedSearch: (id: string) => Promise @@ -485,8 +529,10 @@ type EditCardProps = { isLastChild?: boolean | undefined draggedElementId: string | null setDraggedElementId: Dispatch> - setDraggedElementPosition: Dispatch> - isSwappedCard?: boolean, + setDraggedElementPosition: Dispatch< + SetStateAction<{ x: number; y: number } | null> + > + isSwappedCard?: boolean updatePositionOnMouseUp?: (y: number) => Promise } @@ -519,10 +565,19 @@ function GenericTableCard( updatePositionOnMouseUp, } = props const [isVisible, setIsVisible] = useState(!!savedSearch?.visible) - const showInput = editingId === savedSearch?.id || (isCreateMode && !savedSearch) + const showInput = + editingId === savedSearch?.id || (isCreateMode && !savedSearch) const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58' - const DEFAULT_STYLE = { position: null }; - const [style, setStyle] = useState>(DEFAULT_STYLE) + const DEFAULT_STYLE = { position: null } + const [style, setStyle] = + useState< + Partial<{ + position: string | null + top: string + left: string + maxWidth: string + }> + >(DEFAULT_STYLE) const handleEdit = () => { editingId && updateSavedSearch(editingId) setEditingId(null) @@ -547,7 +602,7 @@ function GenericTableCard( onClick={() => onEditPress(savedSearch)} disabled={isCreateMode} > - + (savedSearch ? deleteSavedSearch(savedSearch.id) : null)} + onClick={() => + savedSearch ? deleteSavedSearch(savedSearch.id) : null + } disabled={isCreateMode} > @@ -587,10 +644,10 @@ function GenericTableCard( ) } - const onMouseDown= (e: MouseEvent) => { + const onMouseDown = (e: MouseEvent) => { if (savedSearch) { setDraggedElementId(savedSearch.id) - setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25}) + setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25 }) } } @@ -654,7 +711,6 @@ function GenericTableCard( } as never } > - {showInput && !savedSearch ? ( - - {editingId === savedSearch?.id @@ -781,38 +836,38 @@ function GenericTableCard( )} - { !savedSearch?.defaultFilter && + {!savedSearch?.defaultFilter && ( - {!showInput && ( - - { moreActionsButton() } - - )} - - } - - - {editingId === savedSearch?.id || !savedSearch ? ( + {!showInput && ( + + {moreActionsButton()} + + )} + + )} + + + {editingId === savedSearch?.id || !savedSearch ? ( <> From b5caff2a12e2181a41dcf141a47141861387cee2 Mon Sep 17 00:00:00 2001 From: Tom Rogers Date: Mon, 25 Sep 2023 09:13:49 +0200 Subject: [PATCH 3/3] Fix link --- packages/web/pages/settings/saved-searches.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/pages/settings/saved-searches.tsx b/packages/web/pages/settings/saved-searches.tsx index 1386a1501..5c5cc8e43 100644 --- a/packages/web/pages/settings/saved-searches.tsx +++ b/packages/web/pages/settings/saved-searches.tsx @@ -352,7 +352,7 @@ export default function SavedSearchesPage(): JSX.Element { Saved Searches - +