feat: default popup show all urls

src/common/command/obj/url/obj-get-href.command.ts

@@ -14,27 +14,17 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { ObjDto, ObjPageDataDto, ObjUrlDto } from '../../../model/obj/obj.dto';
+import { ObjUrlDto } from '../../../model/obj/obj.dto';
 import { ICommand } from '../../../model/shared/common.dto';
 import { LinkHrefStore } from '../../../store/link-href.store';
-import { ObjGetCommand } from '../obj-get.command';
-import { ObjPinDto } from '../../../model/obj/obj-pin.dto';
 
-export class ObjGetHrefCommand implements ICommand<Promise<ObjDto<ObjPageDataDto>[]>> {
+export class ObjGetHrefCommand implements ICommand<Promise<number[]>> {
   constructor(private data: ObjUrlDto) {}
 
-  async execute(): Promise<ObjDto<ObjPageDataDto>[]> {
-    const out: ObjDto<ObjPageDataDto>[] = [];
-    const pinIds = (await LinkHrefStore.pinIds(this.data.href)).reverse();
-    for (const id of pinIds) {
-      const obj = await new ObjGetCommand<ObjPinDto>(id).execute();
-      out.push(obj);
-    }
-    const ids = (await LinkHrefStore.hrefIds(this.data.href)).reverse();
-    for (const id of ids) {
-      const obj = await new ObjGetCommand<ObjPageDataDto>(id).execute();
-      out.push(obj);
-    }
-    return out;
+  async execute(): Promise<number[]> {
+    const pinIds = (await LinkHrefStore.hrefIds(this.data.href)).reverse();
+    const objsIds = (await LinkHrefStore.pinIds(this.data.href)).reverse();
+    pinIds.push(...objsIds);
+    return pinIds;
   }
 }

src/common/command/obj/url/obj-get-origin.command.ts

@@ -14,37 +14,17 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { ObjDto, ObjPageDataDto, ObjTypeDto, ObjUrlDto } from '../../../model/obj/obj.dto';
+import { ObjUrlDto } from '../../../model/obj/obj.dto';
 import { ICommand } from '../../../model/shared/common.dto';
 import { LinkOriginStore } from '../../../store/link-origin.store';
-import { ObjGetCommand } from '../obj-get.command';
-import { ObjPageDto } from '../../../model/obj/obj-page.dto';
-import { ObjPageNoteDto } from '../../../model/obj/obj-note.dto';
-import { ObjPdfDto } from '../../../model/obj/obj-pdf.dto';
-import { ObjPinDto } from '../../../model/obj/obj-pin.dto';
-import { fnConsoleLog } from '../../../fn/fn-console';
 
-export class ObjGetOriginCommand implements ICommand<Promise<ObjDto<ObjPageDataDto>[]>> {
+export class ObjGetOriginCommand implements ICommand<Promise<number[]>> {
   constructor(private data: ObjUrlDto) {}
 
-  async execute(): Promise<ObjDto<ObjPageDataDto>[]> {
+  async execute(): Promise<number[]> {
     const pinIds = (await LinkOriginStore.originIds(LinkOriginStore.PIN_ORIGIN, this.data.origin)).reverse();
     const objsIds = (await LinkOriginStore.originIds(LinkOriginStore.OBJ_ORIGIN, this.data.origin)).reverse();
     pinIds.push(...objsIds);
-    const out: ObjDto<ObjPageDataDto>[] = [];
-    for (const id of pinIds) {
-      const obj = await new ObjGetCommand<ObjPageDataDto | ObjPinDto>(id).execute();
-      if ([ObjTypeDto.PageSnapshot, ObjTypeDto.PageElementSnapshot].includes(obj.type)) {
-        if ((obj.data as ObjPageDto).snapshot.info.url.href === this.data.href) continue;
-      } else if (obj.type === ObjTypeDto.PageElementPin) {
-        if ((obj.data as ObjPinDto).data.url.href === this.data.href) continue;
-      } else if (obj.type === ObjTypeDto.PageNote) {
-        if ((obj.data as ObjPageNoteDto).url.href === this.data.href) continue;
-      } else if (obj.type === ObjTypeDto.Pdf) {
-        if ((obj.data as ObjPdfDto).data.rawUrl === this.data.href) continue;
-      }
-      out.push(obj);
-    }
-    return out;
+    return pinIds;
   }
 }

src/default-popup/components/obj/obj-list.component.tsx

@@ -15,7 +15,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { ObjDto, ObjPageDataDto, ObjTypeDto } from '../../../common/model/obj/obj.dto';
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 import { BrowserApi } from '@pinmenote/browser-api';
 import { BusMessageType } from '../../../common/model/bus.model';
 import { LogManager } from '../../../common/popup/log.manager';
@@ -31,14 +31,57 @@ 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<ObjPageNoteDto>) => void;
-  objList: ObjDto<ObjPageDataDto>[];
+  idList: number[];
+  href?: string;
 }
 
+interface FetchObjectsResult {
+  objs: ObjDto<ObjPageDataDto>[];
+  index: number;
+}
+
+const hrefFilter = (obj: ObjDto<ObjPageDataDto>, 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<FetchObjectsResult> => {
+  LogManager.log(`aaa ${href || 'undefined'} bbb ${idList.length} ccc ${index}`);
+  if (index >= idList.length) return { objs: [], index };
+  const objs: ObjDto<ObjPageDataDto>[] = [];
+  for (index; index < idList.length; index++) {
+    const obj = await new ObjGetCommand<ObjPageDataDto>(idList[index]).execute();
+    if (hrefFilter(obj, href)) continue;
+    objs.push(obj);
+  }
+  return { objs, index };
+};
+
 export const ObjListComponent: FunctionComponent<Props> = (props) => {
   const [reRender, setReRender] = useState(false);
+  const [objList, setObjList] = useState<ObjDto<ObjPageDataDto>[]>([]);
+  const [index, setIndex] = useState<number>(0);
+
+  useEffect(() => {
+    fetchObjects(props.idList, index, props.href)
+      .then((data) => {
+        setObjList(data.objs);
+        setIndex(data.index);
+      })
+      .catch(() => LogManager.log('error'));
+  }, [props]);
 
   const handlePinRemove = async (data: ObjDto<ObjPinDto>) => {
     await new PinRemoveCommand(data.id, data.data.data.url, data.data.data.iframe).execute();
@@ -62,10 +105,9 @@ export const ObjListComponent: FunctionComponent<Props> = (props) => {
   };
 
   const handleRemove = (id: number) => {
-    for (let i = 0; i < props.objList.length; i++) {
-      const obj = props.objList[i];
-      if (obj.id === id) {
-        props.objList.splice(i, 1);
+    for (let i = 0; i < props.idList.length; i++) {
+      if (props.idList[i] === id) {
+        props.idList.splice(i, 1);
         setReRender(!reRender);
         break;
       }
@@ -73,20 +115,22 @@ export const ObjListComponent: FunctionComponent<Props> = (props) => {
   };
 
   // Render pins
-  const objs: React.ReactNode[] = [];
-  for (const obj of props.objList) {
+  const components: React.ReactNode[] = [];
+  for (const obj of objList) {
     switch (obj.type) {
       case ObjTypeDto.PageElementPin:
-        objs.push(<PinListElement key={obj.id} obj={obj as ObjDto<ObjPinDto>} removeCallback={handlePinRemove} />);
+        components.push(
+          <PinListElement key={obj.id} obj={obj as ObjDto<ObjPinDto>} removeCallback={handlePinRemove} />
+        );
         break;
       case ObjTypeDto.PageElementSnapshot:
       case ObjTypeDto.PageSnapshot:
-        objs.push(
+        components.push(
           <SnapshotListElement key={obj.id} obj={obj as ObjDto<ObjPageDto>} removeCallback={handleSnapshotRemove} />
         );
         break;
       case ObjTypeDto.PageNote:
-        objs.push(
+        components.push(
           <NoteListElementComponent
             editCallback={props.editNoteCallback}
             obj={obj as ObjDto<ObjPageNoteDto>}
@@ -95,16 +139,22 @@ export const ObjListComponent: FunctionComponent<Props> = (props) => {
         );
         break;
       case ObjTypeDto.Pdf:
-        objs.push(<PdfListElementComponent obj={obj as ObjDto<ObjPdfDto>} removeCallback={handlePdfRemove} />);
+        components.push(<PdfListElementComponent obj={obj as ObjDto<ObjPdfDto>} removeCallback={handlePdfRemove} />);
         break;
       default: {
         LogManager.log(`UNSUPPORTED ${obj.type}`);
       }
     }
   }
+
+  const handleScroll = () => {
+    LogManager.log('scroll');
+  };
   return (
     <div style={{ width: '100%' }}>
-      <div style={{ width: '100%' }}>{objs}</div>
+      <div style={{ width: '100%' }} onScroll={handleScroll}>
+        {components}
+      </div>
     </div>
   );
 };

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 <http://www.gnu.org/licenses/>.
  */
-import { ObjDto, ObjPageDataDto } from '../../../common/model/obj/obj.dto';
+import { ObjDto } 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';
@@ -30,8 +30,8 @@ interface Props {
 }
 
 export const ObjViewComponent: FunctionComponent<Props> = (props) => {
-  const [originObjs, setOriginObjs] = useState<ObjDto<ObjPageDataDto>[]>([]);
-  const [hrefObjs, setHrefObjs] = useState<ObjDto<ObjPageDataDto>[]>([]);
+  const [originIds, setOriginIds] = useState<number[]>([]);
+  const [hrefIds, setHrefIds] = useState<number[]>([]);
   const [initialized, setInitialized] = useState<boolean>(false);
 
   useEffect(() => {
@@ -51,19 +51,23 @@ export const ObjViewComponent: FunctionComponent<Props> = (props) => {
     setInitialized(true);
     const href = await new ObjGetHrefCommand(PopupActiveTabStore.url).execute();
     const origin = await new ObjGetOriginCommand(PopupActiveTabStore.url).execute();
-    setHrefObjs(href);
-    setOriginObjs(origin);
+    setHrefIds(href);
+    setOriginIds(origin);
   };
   return (
-    <div>
+    <div style={{ overflow: 'hidden' }}>
       <Typography fontWeight="bold" fontSize="14px">
         On this page
       </Typography>
-      <ObjListComponent objList={hrefObjs} editNoteCallback={props.editNoteCallback} />
+      <ObjListComponent idList={hrefIds} editNoteCallback={props.editNoteCallback} />
       <Typography fontWeight="bold" fontSize="14px">
         On {PopupActiveTabStore.url?.origin}
       </Typography>
-      <ObjListComponent objList={originObjs} editNoteCallback={props.editNoteCallback} />
+      <ObjListComponent
+        idList={originIds}
+        href={PopupActiveTabStore.url?.href}
+        editNoteCallback={props.editNoteCallback}
+      />
     </div>
   );
 };

src/default-popup/store/popup-active-tab.store.ts

@@ -18,8 +18,6 @@ import { BrowserApi } from '@pinmenote/browser-api';
 import { BusMessageType } from '../../common/model/bus.model';
 import { ExtensionPopupInitData } from '../../common/model/obj-request.model';
 import { LogManager } from '../../common/popup/log.manager';
-import { ObjGetHrefCommand } from '../../common/command/obj/url/obj-get-href.command';
-import { ObjGetOriginCommand } from '../../common/command/obj/url/obj-get-origin.command';
 import { ObjUrlDto } from '../../common/model/obj/obj.dto';
 import { TinyDispatcher } from '@pinmenote/tiny-dispatcher';
 import { UrlFactory } from '../../common/factory/url.factory';
@@ -31,9 +29,6 @@ export class PopupActiveTabStore {
 
   private static isAddingValue = false;
 
-  private static hrefData: any[] = [];
-  private static originData: any[] = [];
-
   static get isAdding(): boolean {
     return this.isAddingValue;
   }
@@ -61,8 +56,6 @@ export class PopupActiveTabStore {
         search: url.search
       };
       LogManager.log(`updateState URL : ${JSON.stringify(this.urlValue)}`);
-      this.hrefData = await new ObjGetHrefCommand(this.urlValue).execute();
-      this.originData = await new ObjGetOriginCommand(this.urlValue).execute();
       if (this.urlValue?.href.startsWith(BrowserApi.startUrl)) {
         this.extensionUrl = true;
         this.isError = true;