From 442975452824301aaec4fd5d4df91aac7a875239 Mon Sep 17 00:00:00 2001 From: Michal Szczepanski Date: Sat, 23 Sep 2023 15:53:25 +0200 Subject: [PATCH] fix: default popup rollback ObjListComponent --- .../components/obj/obj-list.component.tsx | 80 ++++--------------- .../components/obj/obj-view.component.tsx | 65 +++++++++++---- 2 files changed, 64 insertions(+), 81 deletions(-) diff --git a/src/default-popup/components/obj/obj-list.component.tsx b/src/default-popup/components/obj/obj-list.component.tsx index 6b89103..6db7d19 100644 --- a/src/default-popup/components/obj/obj-list.component.tsx +++ b/src/default-popup/components/obj/obj-list.component.tsx @@ -15,7 +15,7 @@ * along with this program. If not, see . */ import { ObjDto, ObjPageDataDto, ObjTypeDto } from '../../../common/model/obj/obj.dto'; -import React, { FunctionComponent, useEffect, useState } from 'react'; +import React, { FunctionComponent, useState } from 'react'; import { BrowserApi } from '@pinmenote/browser-api'; import { BusMessageType } from '../../../common/model/bus.model'; import { LogManager } from '../../../common/popup/log.manager'; @@ -31,60 +31,14 @@ import { PdfRemoveCommand } from '../../../common/command/pdf/pdf-remove.command import { PinListElement } from './pin-list-element.component'; import { PinRemoveCommand } from '../../../common/command/pin/pin-remove.command'; import { SnapshotListElement } from './snapshot-list-element.component'; -import { ObjGetCommand } from '../../../common/command/obj/obj-get.command'; interface Props { editNoteCallback: (obj: ObjDto) => void; - idList: number[]; - href?: string; + objList: ObjDto[]; } -interface FetchObjectsResult { - objs: ObjDto[]; - index: number; -} - -const hrefFilter = (obj: ObjDto, href?: string) => { - if ([ObjTypeDto.PageSnapshot, ObjTypeDto.PageElementSnapshot].includes(obj.type)) { - if ((obj.data as ObjPageDto).snapshot.info.url.href === href) return true; - } else if (obj.type === ObjTypeDto.PageElementPin) { - if ((obj.data as ObjPinDto).data.url.href === href) return true; - } else if (obj.type === ObjTypeDto.PageNote) { - if ((obj.data as ObjPageNoteDto).url.href === href) return true; - } else if (obj.type === ObjTypeDto.Pdf) { - if ((obj.data as ObjPdfDto).data.rawUrl === href) return true; - } - return false; -}; - -const fetchObjects = async (idList: number[], index: number, href?: string): Promise => { - LogManager.log(`aaa ${href || 'undefined'} bbb ${idList.length} ccc ${index}`); - if (index >= idList.length) return { objs: [], index }; - const objs: ObjDto[] = []; - for (index; index < idList.length; index++) { - const obj = await new ObjGetCommand(idList[index]).execute(); - if (hrefFilter(obj, href)) continue; - objs.push(obj); - } - return { objs, index }; -}; - export const ObjListComponent: FunctionComponent = (props) => { - const [objList, setObjList] = useState[]>([]); - const [index, setIndex] = useState(0); - - useEffect(() => { - refetch(); - }, [props]); - - const refetch = () => { - fetchObjects(props.idList, index, props.href) - .then((data) => { - setObjList(data.objs); - setIndex(data.index); - }) - .catch(() => LogManager.log('error')); - }; + const [reRender, setReRender] = useState(false); const handlePinRemove = async (data: ObjDto) => { await new PinRemoveCommand(data.id, data.data.data.url, data.data.data.iframe).execute(); @@ -108,32 +62,31 @@ export const ObjListComponent: FunctionComponent = (props) => { }; const handleRemove = (id: number) => { - for (let i = 0; i < props.idList.length; i++) { - if (props.idList[i] === id) { - props.idList.splice(i, 1); - refetch(); + for (let i = 0; i < props.objList.length; i++) { + const obj = props.objList[i]; + if (obj.id === id) { + props.objList.splice(i, 1); + setReRender(!reRender); break; } } }; // Render pins - const components: React.ReactNode[] = []; - for (const obj of objList) { + const objs: React.ReactNode[] = []; + for (const obj of props.objList) { switch (obj.type) { case ObjTypeDto.PageElementPin: - components.push( - } removeCallback={handlePinRemove} /> - ); + objs.push(} removeCallback={handlePinRemove} />); break; case ObjTypeDto.PageElementSnapshot: case ObjTypeDto.PageSnapshot: - components.push( + objs.push( } removeCallback={handleSnapshotRemove} /> ); break; case ObjTypeDto.PageNote: - components.push( + objs.push( } @@ -142,17 +95,16 @@ export const ObjListComponent: FunctionComponent = (props) => { ); break; case ObjTypeDto.Pdf: - components.push(} removeCallback={handlePdfRemove} />); + objs.push(} removeCallback={handlePdfRemove} />); break; default: { LogManager.log(`UNSUPPORTED ${obj.type}`); } } } - // TODO add scroll handler return ( -
-
{components}
+
+
{objs}
); }; diff --git a/src/default-popup/components/obj/obj-view.component.tsx b/src/default-popup/components/obj/obj-view.component.tsx index 1d8f0aa..5beff7c 100644 --- a/src/default-popup/components/obj/obj-view.component.tsx +++ b/src/default-popup/components/obj/obj-view.component.tsx @@ -14,7 +14,7 @@ * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ -import { ObjDto } from '../../../common/model/obj/obj.dto'; +import { ObjDto, ObjPageDataDto, ObjTypeDto } from '../../../common/model/obj/obj.dto'; import React, { FunctionComponent, useEffect, useState } from 'react'; import { BusMessageType } from '../../../common/model/bus.model'; import { ObjGetHrefCommand } from '../../../common/command/obj/url/obj-get-href.command'; @@ -23,15 +23,49 @@ import { ObjListComponent } from './obj-list.component'; import { ObjPageNoteDto } from '../../../common/model/obj/obj-note.dto'; import { PopupActiveTabStore } from '../../store/popup-active-tab.store'; import { TinyDispatcher } from '@pinmenote/tiny-dispatcher'; +import { LogManager } from '../../../common/popup/log.manager'; +import { ObjPageDto } from '../../../common/model/obj/obj-page.dto'; +import { ObjPinDto } from '../../../common/model/obj/obj-pin.dto'; +import { ObjPdfDto } from '../../../common/model/obj/obj-pdf.dto'; +import { ObjGetCommand } from '../../../common/command/obj/obj-get.command'; interface Props { editNoteCallback: (obj: ObjDto) => void; } +interface FetchObjectsResult { + objs: ObjDto[]; + index: number; +} + +const hrefFilter = (obj: ObjDto, href?: string) => { + if ([ObjTypeDto.PageSnapshot, ObjTypeDto.PageElementSnapshot].includes(obj.type)) { + if ((obj.data as ObjPageDto).snapshot.info.url.href === href) return true; + } else if (obj.type === ObjTypeDto.PageElementPin) { + if ((obj.data as ObjPinDto).data.url.href === href) return true; + } else if (obj.type === ObjTypeDto.PageNote) { + if ((obj.data as ObjPageNoteDto).url.href === href) return true; + } else if (obj.type === ObjTypeDto.Pdf) { + if ((obj.data as ObjPdfDto).data.rawUrl === href) return true; + } + return false; +}; + +const fetchObjects = async (idList: number[], index: number, href?: string): Promise => { + LogManager.log(`aaa ${href || 'undefined'} bbb ${idList.length} ccc ${index}`); + if (index >= idList.length) return { objs: [], index }; + const objs: ObjDto[] = []; + for (index; index < idList.length; index++) { + const obj = await new ObjGetCommand(idList[index]).execute(); + if (hrefFilter(obj, href)) continue; + objs.push(obj); + } + return { objs, index }; +}; + export const ObjViewComponent: FunctionComponent = (props) => { - const [originIds, setOriginIds] = useState([]); - const [hrefIds, setHrefIds] = useState([]); - const [initialized, setInitialized] = useState(false); + const [originObjs, setOriginObjs] = useState[]>([]); + const [hrefObjs, setHrefObjs] = useState[]>([]); useEffect(() => { // eslint-disable-next-line @typescript-eslint/no-floating-promises @@ -42,27 +76,24 @@ export const ObjViewComponent: FunctionComponent = (props) => { return () => { TinyDispatcher.getInstance().removeListener(BusMessageType.POP_UPDATE_URL, urlKey); }; - }, []); + }, [props]); const initUrl = async () => { - if (initialized) return; + LogManager.log('initUrl'); if (!PopupActiveTabStore.url) return; - setInitialized(true); - const href = await new ObjGetHrefCommand(PopupActiveTabStore.url).execute(); - const origin = await new ObjGetOriginCommand(PopupActiveTabStore.url).execute(); - setHrefIds(href); - setOriginIds(origin); + const hrefIds = await new ObjGetHrefCommand(PopupActiveTabStore.url).execute(); + const href = await fetchObjects(hrefIds, 0); + setHrefObjs(href.objs); + const originIds = await new ObjGetOriginCommand(PopupActiveTabStore.url).execute(); + const origin = await fetchObjects(originIds, 0, PopupActiveTabStore.url.href); + setOriginObjs(origin.objs); }; return (
On this page
- +
On {PopupActiveTabStore.url?.origin}
- +
); };