fix: default popup rollback ObjListComponent
This commit is contained in:
parent
3c8beb8e85
commit
4429754528
@ -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, 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<ObjPageNoteDto>) => void;
|
||||
idList: number[];
|
||||
href?: string;
|
||||
objList: ObjDto<ObjPageDataDto>[];
|
||||
}
|
||||
|
||||
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 [objList, setObjList] = useState<ObjDto<ObjPageDataDto>[]>([]);
|
||||
const [index, setIndex] = useState<number>(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<ObjPinDto>) => {
|
||||
await new PinRemoveCommand(data.id, data.data.data.url, data.data.data.iframe).execute();
|
||||
@ -108,32 +62,31 @@ export const ObjListComponent: FunctionComponent<Props> = (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(
|
||||
<PinListElement key={obj.id} obj={obj as ObjDto<ObjPinDto>} removeCallback={handlePinRemove} />
|
||||
);
|
||||
objs.push(<PinListElement key={obj.id} obj={obj as ObjDto<ObjPinDto>} removeCallback={handlePinRemove} />);
|
||||
break;
|
||||
case ObjTypeDto.PageElementSnapshot:
|
||||
case ObjTypeDto.PageSnapshot:
|
||||
components.push(
|
||||
objs.push(
|
||||
<SnapshotListElement key={obj.id} obj={obj as ObjDto<ObjPageDto>} removeCallback={handleSnapshotRemove} />
|
||||
);
|
||||
break;
|
||||
case ObjTypeDto.PageNote:
|
||||
components.push(
|
||||
objs.push(
|
||||
<NoteListElementComponent
|
||||
editCallback={props.editNoteCallback}
|
||||
obj={obj as ObjDto<ObjPageNoteDto>}
|
||||
@ -142,17 +95,16 @@ export const ObjListComponent: FunctionComponent<Props> = (props) => {
|
||||
);
|
||||
break;
|
||||
case ObjTypeDto.Pdf:
|
||||
components.push(<PdfListElementComponent obj={obj as ObjDto<ObjPdfDto>} removeCallback={handlePdfRemove} />);
|
||||
objs.push(<PdfListElementComponent obj={obj as ObjDto<ObjPdfDto>} removeCallback={handlePdfRemove} />);
|
||||
break;
|
||||
default: {
|
||||
LogManager.log(`UNSUPPORTED ${obj.type}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
// TODO add scroll handler
|
||||
return (
|
||||
<div style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{components}</div>
|
||||
<div style={{ width: '100%' }}>
|
||||
<div style={{ width: '100%' }}>{objs}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 } 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<ObjPageNoteDto>) => void;
|
||||
}
|
||||
|
||||
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 ObjViewComponent: FunctionComponent<Props> = (props) => {
|
||||
const [originIds, setOriginIds] = useState<number[]>([]);
|
||||
const [hrefIds, setHrefIds] = useState<number[]>([]);
|
||||
const [initialized, setInitialized] = useState<boolean>(false);
|
||||
const [originObjs, setOriginObjs] = useState<ObjDto<ObjPageDataDto>[]>([]);
|
||||
const [hrefObjs, setHrefObjs] = useState<ObjDto<ObjPageDataDto>[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
@ -42,27 +76,24 @@ export const ObjViewComponent: FunctionComponent<Props> = (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 (
|
||||
<div style={{ maxHeight: '420px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
|
||||
<div style={{ fontWeight: 'bold', fontSize: '14px' }}>On this page</div>
|
||||
<ObjListComponent idList={hrefIds} editNoteCallback={props.editNoteCallback} />
|
||||
<ObjListComponent objList={hrefObjs} editNoteCallback={props.editNoteCallback} />
|
||||
<div style={{ fontWeight: 'bold', fontSize: '14px' }}>On {PopupActiveTabStore.url?.origin}</div>
|
||||
<ObjListComponent
|
||||
idList={originIds}
|
||||
href={PopupActiveTabStore.url?.href}
|
||||
editNoteCallback={props.editNoteCallback}
|
||||
/>
|
||||
<ObjListComponent objList={originObjs} editNoteCallback={props.editNoteCallback} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user