From ed99bfdd2dcff7d7af5fbe738605b08a9f8d2b2e Mon Sep 17 00:00:00 2001 From: lisofffa Date: Tue, 24 Dec 2024 22:25:37 +0300 Subject: [PATCH 1/3] fix: update sort to mutations list --- .../multitable-panel/components/dropdown.tsx | 126 ++++++++++-------- 1 file changed, 72 insertions(+), 54 deletions(-) diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 7f38169f..5a1f45d5 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -66,24 +66,31 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro const { deleteLocalMutation } = useDeleteLocalMutation() - const recentlyUsedMutations = useMemo( - () => - Object.groupBy( - mutations - .filter((mut) => mut.settings.lastUsage) - .sort((a, b) => { - const dateA = a.settings.lastUsage ? new Date(a.settings.lastUsage).getTime() : null - const dateB = b.settings.lastUsage ? new Date(b.settings.lastUsage).getTime() : null + const recentlyUsedMutations = useMemo(() => { + if (!selectedMutation) return [] - if (!dateA) return 1 - if (!dateB) return -1 + let recentList = Object.values(mutations).flat() - return dateB - dateB - }), - (mut) => mut.id - ), - [mutations] - ) + recentList = recentList.filter((mut) => mut.id !== selectedMutation.id) + + recentList.unshift(selectedMutation) + + recentList.sort((a, b) => { + if (a.id === selectedMutation.id) return -1 + if (b.id === selectedMutation.id) return 1 + + if (a.source === EntitySourceType.Local && b.source !== EntitySourceType.Local) return -1 + if (b.source === EntitySourceType.Local && a.source !== EntitySourceType.Local) return 1 + return 0 + }) + + const localMutations = recentList.filter((mut) => mut.source === EntitySourceType.Local) + const otherMutations = recentList.filter((mut) => mut.source !== EntitySourceType.Local) + + const limitedOtherMutations = otherMutations.slice(0, 5 - localMutations.length) + + return [...localMutations, ...limitedOtherMutations] + }, [selectedMutation, mutations]) const [isAccordeonExpanded, setIsAccordeonExpanded] = useState( Object.keys(recentlyUsedMutations).length === 0 @@ -124,6 +131,21 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro removeMutationFromRecents(mut.id) } + const getBadgeProps = (mut: { source: EntitySourceType; id: string | undefined }) => { + if (mut.source === EntitySourceType.Local) { + return { + text: mut.id === selectedMutation?.id ? 'local on' : 'local', + theme: 'blue', + } + } else if (mut.id === selectedMutation?.id) { + return { + text: 'local off', + theme: 'yellow', + } + } + return null + } + return ( @@ -141,82 +163,78 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro - {Object.keys(recentlyUsedMutations).length > 0 ? ( + {recentlyUsedMutations.length > 0 ? ( - {Object.values(recentlyUsedMutations).map((muts) => { - if (!muts || !muts.length) return null - const recentlyUsedSource = getPreferredSource(muts[0].id) - const mut = - muts.find( - (mut) => mut.source === (recentlyUsedSource ?? EntitySourceType.Local) - ) ?? muts[0] + {recentlyUsedMutations.map((muts) => { + if (!muts) return null return ( - handleMutationClick(mut.id)}> + handleMutationClick(muts.id)}> {/* todo: mocked classname */} - {mut.metadata ? mut.metadata.name : ''}{' '} - {recentlyUsedMutations[mut.id]?.length === 2 ? ( - mut.source === EntitySourceType.Local ? ( - - ) : ( - - ) - ) : mut.source === EntitySourceType.Local ? ( - - ) : null} + {muts.metadata ? muts.metadata.name : ''}{' '} + {(() => { + const badgeProps = getBadgeProps(muts) + return badgeProps ? ( + + ) : null + })()} {/* todo: mocked classname */} - {mut.authorId ? ( + {muts.authorId ? ( - by {mut.authorId} + by {muts.authorId} ) : null} {/* todo: mocked */} - {mut.id === favoriteMutationId ? ( - handleFavoriteButtonClick(mut.id)}> + {muts.id === favoriteMutationId ? ( + handleFavoriteButtonClick(muts.id)}> - ) : mut.id === selectedMutation?.id ? ( - handleFavoriteButtonClick(mut.id)}> + ) : muts.id === selectedMutation?.id ? ( + handleFavoriteButtonClick(muts.id)}> ) : null} - {mut.source === EntitySourceType.Local ? ( - setMutationIdToDelete(mut.id)}> + {muts.source === EntitySourceType.Local ? ( + setMutationIdToDelete(muts.id)}> - ) : mut.id !== selectedMutation?.id && - mut.id !== favoriteMutationId && - !getPreferredSource(mut.id) ? ( - handleRemoveFromRecentlyUsedClick(mut)}> + ) : muts.id !== selectedMutation?.id && + muts.id !== favoriteMutationId && + !getPreferredSource(muts.id) ? ( + handleRemoveFromRecentlyUsedClick(muts)}> ) : null} From 91cdf02069cd9ee3abc0c55276d8a7c7f2468bb8 Mon Sep 17 00:00:00 2001 From: lisofffa Date: Thu, 26 Dec 2024 03:51:50 +0300 Subject: [PATCH 2/3] fix: update sort --- .../multitable-panel/components/dropdown.tsx | 46 ++++++++++++------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 5a1f45d5..2a3b72b8 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -1,7 +1,16 @@ import { ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons' import { EntitySourceType, MutationWithSettings } from '@mweb/backend' import { useDeleteLocalMutation, useMutableWeb } from '@mweb/engine' -import React, { DetailedHTMLProps, FC, HTMLAttributes, useMemo, useState } from 'react' +import React, { + DetailedHTMLProps, + FC, + HTMLAttributes, + useCallback, + useEffect, + useMemo, + useReducer, + useState, +} from 'react' import styled from 'styled-components' import { AuthorMutation, @@ -65,6 +74,15 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro } = useMutableWeb() const { deleteLocalMutation } = useDeleteLocalMutation() + const [, forceUpdate] = useReducer((x) => x + 1, 0) + + const handleRemoveFromRecentlyUsedClick = useCallback( + async (mut: MutationWithSettings) => { + removeMutationFromRecents(mut.id) + forceUpdate() + }, + [removeMutationFromRecents] + ) const recentlyUsedMutations = useMemo(() => { if (!selectedMutation) return [] @@ -72,7 +90,6 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro let recentList = Object.values(mutations).flat() recentList = recentList.filter((mut) => mut.id !== selectedMutation.id) - recentList.unshift(selectedMutation) recentList.sort((a, b) => { @@ -81,30 +98,31 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro if (a.source === EntitySourceType.Local && b.source !== EntitySourceType.Local) return -1 if (b.source === EntitySourceType.Local && a.source !== EntitySourceType.Local) return 1 + return 0 }) const localMutations = recentList.filter((mut) => mut.source === EntitySourceType.Local) const otherMutations = recentList.filter((mut) => mut.source !== EntitySourceType.Local) - const limitedOtherMutations = otherMutations.slice(0, 5 - localMutations.length) + const limitedOtherMutations = + localMutations.length < 5 ? otherMutations.slice(0, 5 - localMutations.length) : [] + forceUpdate() return [...localMutations, ...limitedOtherMutations] - }, [selectedMutation, mutations]) + }, [selectedMutation, mutations, handleRemoveFromRecentlyUsedClick]) const [isAccordeonExpanded, setIsAccordeonExpanded] = useState( Object.keys(recentlyUsedMutations).length === 0 ) const [mutationIdToDelete, setMutationIdToDelete] = useState(null) - const unusedMutations = useMemo( - () => - Object.groupBy( - mutations.filter((mut) => !mut.settings.lastUsage), - (mut) => mut.id - ), - [mutations] - ) + const unusedMutations = useMemo(() => { + return Object.groupBy( + mutations.filter((mut) => !recentlyUsedMutations.some((usedMut) => usedMut.id === mut.id)), + (mut) => mut.id + ) + }, [mutations, recentlyUsedMutations]) const handleMutationClick = (mutationId: string) => { switchMutation(mutationId) @@ -127,10 +145,6 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro switchMutation(null) } - const handleRemoveFromRecentlyUsedClick = async (mut: MutationWithSettings) => { - removeMutationFromRecents(mut.id) - } - const getBadgeProps = (mut: { source: EntitySourceType; id: string | undefined }) => { if (mut.source === EntitySourceType.Local) { return { From 365b0e34d2ca895ab2a2e2382bcdab872763b68a Mon Sep 17 00:00:00 2001 From: lisofffa Date: Thu, 26 Dec 2024 23:58:50 +0300 Subject: [PATCH 3/3] fix: update sort --- .../multitable-panel/components/dropdown.tsx | 163 ++++++++---------- 1 file changed, 70 insertions(+), 93 deletions(-) diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 2a3b72b8..5b330d62 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -1,16 +1,7 @@ import { ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons' import { EntitySourceType, MutationWithSettings } from '@mweb/backend' import { useDeleteLocalMutation, useMutableWeb } from '@mweb/engine' -import React, { - DetailedHTMLProps, - FC, - HTMLAttributes, - useCallback, - useEffect, - useMemo, - useReducer, - useState, -} from 'react' +import React, { DetailedHTMLProps, FC, HTMLAttributes, useEffect, useMemo, useState } from 'react' import styled from 'styled-components' import { AuthorMutation, @@ -42,6 +33,7 @@ import { import { Badge } from './badge' import { Image } from './image' import { ModalDelete } from './modal-delete' +import { log } from 'console' const ModalConfirmBackground = styled.div` position: absolute; @@ -74,55 +66,47 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro } = useMutableWeb() const { deleteLocalMutation } = useDeleteLocalMutation() - const [, forceUpdate] = useReducer((x) => x + 1, 0) - - const handleRemoveFromRecentlyUsedClick = useCallback( - async (mut: MutationWithSettings) => { - removeMutationFromRecents(mut.id) - forceUpdate() - }, - [removeMutationFromRecents] - ) const recentlyUsedMutations = useMemo(() => { - if (!selectedMutation) return [] - - let recentList = Object.values(mutations).flat() - - recentList = recentList.filter((mut) => mut.id !== selectedMutation.id) - recentList.unshift(selectedMutation) + let sortedMutations = mutations + .filter((mut) => mut.settings.lastUsage) + .sort((a, b) => { + let dateA = a.settings.lastUsage ? new Date(a.settings.lastUsage).getTime() : null + let dateB = b.settings.lastUsage ? new Date(b.settings.lastUsage).getTime() : null - recentList.sort((a, b) => { - if (a.id === selectedMutation.id) return -1 - if (b.id === selectedMutation.id) return 1 + if (!dateA) return 1 + if (!dateB) return -1 - if (a.source === EntitySourceType.Local && b.source !== EntitySourceType.Local) return -1 - if (b.source === EntitySourceType.Local && a.source !== EntitySourceType.Local) return 1 + if (a.source === EntitySourceType.Local && b.source !== EntitySourceType.Local) return -1 + if (b.source === EntitySourceType.Local && a.source !== EntitySourceType.Local) return 1 - return 0 - }) + return dateB - dateA + }) - const localMutations = recentList.filter((mut) => mut.source === EntitySourceType.Local) - const otherMutations = recentList.filter((mut) => mut.source !== EntitySourceType.Local) - - const limitedOtherMutations = - localMutations.length < 5 ? otherMutations.slice(0, 5 - localMutations.length) : [] + if (sortedMutations.length > 5) { + const excessMutations = sortedMutations.slice(5) + excessMutations.forEach((mut) => { + removeMutationFromRecents(mut.id) + }) + sortedMutations = sortedMutations.slice(0, 5) + } - forceUpdate() - return [...localMutations, ...limitedOtherMutations] - }, [selectedMutation, mutations, handleRemoveFromRecentlyUsedClick]) + return Object.groupBy(sortedMutations, (mut) => mut.id) + }, [mutations]) const [isAccordeonExpanded, setIsAccordeonExpanded] = useState( Object.keys(recentlyUsedMutations).length === 0 ) const [mutationIdToDelete, setMutationIdToDelete] = useState(null) - const unusedMutations = useMemo(() => { - return Object.groupBy( - mutations.filter((mut) => !recentlyUsedMutations.some((usedMut) => usedMut.id === mut.id)), - (mut) => mut.id - ) - }, [mutations, recentlyUsedMutations]) + const unusedMutations = useMemo( + () => + Object.groupBy( + mutations.filter((mut) => !mut.settings.lastUsage), + (mut) => mut.id + ), + [mutations] + ) const handleMutationClick = (mutationId: string) => { switchMutation(mutationId) @@ -145,19 +129,8 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro switchMutation(null) } - const getBadgeProps = (mut: { source: EntitySourceType; id: string | undefined }) => { - if (mut.source === EntitySourceType.Local) { - return { - text: mut.id === selectedMutation?.id ? 'local on' : 'local', - theme: 'blue', - } - } else if (mut.id === selectedMutation?.id) { - return { - text: 'local off', - theme: 'yellow', - } - } - return null + const handleRemoveFromRecentlyUsedClick = async (mut: MutationWithSettings) => { + removeMutationFromRecents(mut.id) } return ( @@ -177,78 +150,82 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro - {recentlyUsedMutations.length > 0 ? ( + {Object.keys(recentlyUsedMutations).length > 0 ? ( - {recentlyUsedMutations.map((muts) => { - if (!muts) return null + {Object.values(recentlyUsedMutations).map((muts) => { + if (!muts || !muts.length) return null + const recentlyUsedSource = getPreferredSource(muts[0].id) + const mut = + muts.find( + (mut) => mut.source === (recentlyUsedSource ?? EntitySourceType.Local) + ) ?? muts[0] return ( - handleMutationClick(muts.id)}> + handleMutationClick(mut.id)}> {/* todo: mocked classname */} - {muts.metadata ? muts.metadata.name : ''}{' '} - {(() => { - const badgeProps = getBadgeProps(muts) - return badgeProps ? ( - - ) : null - })()} + {mut.metadata ? mut.metadata.name : ''}{' '} + {recentlyUsedMutations[mut.id]?.length === 2 ? ( + mut.source === EntitySourceType.Local ? ( + + ) : ( + + ) + ) : mut.source === EntitySourceType.Local ? ( + + ) : null} {/* todo: mocked classname */} - {muts.authorId ? ( + {mut.authorId ? ( - by {muts.authorId} + by {mut.authorId} ) : null} {/* todo: mocked */} - {muts.id === favoriteMutationId ? ( - handleFavoriteButtonClick(muts.id)}> + {mut.id === favoriteMutationId ? ( + handleFavoriteButtonClick(mut.id)}> - ) : muts.id === selectedMutation?.id ? ( - handleFavoriteButtonClick(muts.id)}> + ) : mut.id === selectedMutation?.id ? ( + handleFavoriteButtonClick(mut.id)}> ) : null} - {muts.source === EntitySourceType.Local ? ( - setMutationIdToDelete(muts.id)}> + {mut.source === EntitySourceType.Local ? ( + setMutationIdToDelete(mut.id)}> - ) : muts.id !== selectedMutation?.id && - muts.id !== favoriteMutationId && - !getPreferredSource(muts.id) ? ( - handleRemoveFromRecentlyUsedClick(muts)}> + ) : mut.id !== selectedMutation?.id && + mut.id !== favoriteMutationId && + !getPreferredSource(mut.id) ? ( + handleRemoveFromRecentlyUsedClick(mut)}> ) : null}