fix(EasyArchive, PagePatroller): children node missing (qiuwenbaike#1709)

* fix(EasyArchive, PagePatroller): children node missing

Author: WaitSpringQW

dist/EasyArchive/EasyArchive.js

@@ -1,5 +1,5 @@
 import {ArchiveAndDeleteSectionLink} from './components/sectionLink';
-import {EditConflictNotice} from './components/react';
+import {EditConflictNotice} from './components/editConflictNotice';
 import React from 'ext.gadget.JSX';
 import {getSections} from './util/getSection';
 import {refresh} from './util/refreshPage';

dist/PagePatroller/PagePatroller.js

@@ -0,0 +1,15 @@
+import React from 'ext.gadget.JSX';
+import {getMessage} from '../i18n';
+
+interface EditConflictNoticeProps {
+	onClick: () => void;
+}
+
+const EditConflictNotice = ({onClick}: EditConflictNoticeProps) => (
+	<span>
+		{getMessage('Edit Confilict Notice')}
+		<a onClick={onClick}>{getMessage('Refresh')}</a>
+	</span>
+);
+
+export {EditConflictNotice};

src/EasyArchive/modules/addLinks.tsx

@@ -0,0 +1,87 @@
+import * as OPTIONS from '../../options.json';
+import React, {ReactElement} from 'ext.gadget.JSX';
+import {footerNotice} from './EasyArchive.module.less';
+import {getMessage} from '../i18n';
+import {sanitize} from '../util/sanitize';
+
+interface FooterNoticeProps {
+	children: ReactElement;
+}
+
+interface ArcLocProps {
+	arcLoc: string;
+}
+
+const FooterNotice = ({children = <></>}: FooterNoticeProps) => {
+	const {skin} = mw.config.get();
+
+	return (
+		<>
+			{skin === 'citizen' ? (
+				<section
+					id={OPTIONS.elementId}
+					className={[footerNotice, 'page-info__item', 'citizen-footer__pageinfo-item', 'noprint']}
+				>
+					{children}
+				</section>
+			) : ['vector', 'vector-2022', 'gongbi'].includes(skin) || document.querySelector('ul#footer-info') ? (
+				<li id={OPTIONS.elementId} className={[footerNotice, 'noprint']}>
+					{children}
+				</li>
+			) : (
+				<div id={OPTIONS.elementId} className={[footerNotice, 'noprint']}>
+					{children}
+				</div>
+			)}
+		</>
+	);
+};
+
+const InBlackList = () => (
+	<FooterNotice>
+		<>
+			{getMessage('Easy Archive not supported')}
+			<br />
+			{getMessage('Easy Archive not supported details')}
+		</>
+	</FooterNotice>
+);
+
+const NotAllowed = () => (
+	<FooterNotice>
+		<>{getMessage('Easy Archive not allowed')}</>
+	</FooterNotice>
+);
+
+const ArcLocNotAllowed = ({arcLoc}: ArcLocProps) => (
+	<FooterNotice>
+		<>
+			{getMessage('Archive Location not allowed').replace('$1', sanitize(arcLoc))}
+			<br />
+			{getMessage('Archive Location not allowed details')}
+		</>
+	</FooterNotice>
+);
+
+const NoArcLoc = () => (
+	<FooterNotice>
+		<>{getMessage('No Archive Location')}</>
+	</FooterNotice>
+);
+
+const Enabled = ({arcLoc}: ArcLocProps) => (
+	<FooterNotice>
+		<>
+			{getMessage('Easy Archive enabled')}
+			{getMessage('(')}
+			{getMessage('Archive location')}
+			<a title={sanitize(arcLoc)} href={`/wiki/${sanitize(arcLoc)}`}>
+				{arcLoc}
+			</a>
+			{getMessage(')')}
+			{getMessage('.')}
+		</>
+	</FooterNotice>
+);
+
+export {FooterNotice, Enabled, InBlackList, NotAllowed, ArcLocNotAllowed, NoArcLoc};

src/EasyArchive/modules/components/editConflictNotice.tsx

@@ -1,7 +1,29 @@
-import {OnClick, Pipe, SectionID} from './react';
+import React, {ReactElement} from 'ext.gadget.JSX';
 import {archiveOnClick, removeOnClick} from '../util/onClick';
-import React from 'ext.gadget.JSX';
 import {getMessage} from '../i18n';
+import {sectionIdSpan} from './EasyArchive.module.less';
+
+interface OnClickProps {
+	textContent: string;
+	className: string;
+	onClick?: (event: Event) => void;
+}
+
+interface SectionIDProps {
+	children?: ReactElement;
+}
+
+const OnClick = ({textContent, className, onClick}: OnClickProps) => (
+	<a
+		className={['gadget-easy_archive__link', `gadget-easy_archive__link-${className}`]}
+		onClick={onClick || (() => {})}
+		textContent={textContent}
+	/>
+);
+
+const SectionID = ({children = <></>}: SectionIDProps) => <span className={sectionIdSpan}>{children}</span>;
+
+const Pipe = () => <span className="mw-editsection-divider" textContent={'|'} />;
 
 interface ArchiveSectionLinkProps {
 	sectionIdSpans: Element[];

src/EasyArchive/modules/components/footerNotices.tsx

@@ -1,5 +1,5 @@
 import * as OPTIONS from '../options.json';
-import {ArcLocNotAllowed, Enabled, FooterNotice, InBlackList, NoArcLoc, NotAllowed} from './components/react';
+import {ArcLocNotAllowed, Enabled, InBlackList, NoArcLoc, NotAllowed} from './components/footerNotices';
 import {getSettings, ifArcLocNotAllowed, isInBlacklist, isNotAllowed, isNotSupported} from './util/getSettings';
 import React from 'ext.gadget.JSX';
 import {addLinks} from './addLinks';
@@ -15,40 +15,37 @@ const loadEasyArcive = () => {
 		return;
 	}
 
-	const footerElement = <FooterNotice />;
-	mountPoint.prepend(footerElement);
-
 	const inBlacklist = isInBlacklist();
 	if (inBlacklist) {
-		footerElement.append(<InBlackList />);
+		mountPoint.prepend(<InBlackList />);
 		return;
 	}
 
 	const notAllowed = isNotAllowed();
 	if (notAllowed) {
-		footerElement.append(<NotAllowed />);
+		mountPoint.prepend(<NotAllowed />);
 		return;
 	}
 
 	const settings = getSettings();
 	if (!settings) {
-		footerElement.append(<NoArcLoc />);
+		mountPoint.prepend(<NoArcLoc />);
 		return;
 	}
 
 	const {arcLoc} = settings;
 	if (!arcLoc) {
-		footerElement.append(<NoArcLoc />);
+		mountPoint.prepend(<NoArcLoc />);
 		return;
 	}
 
 	const arcLocNotAllowed = ifArcLocNotAllowed(arcLoc);
 	if (arcLocNotAllowed) {
-		footerElement.append(<ArcLocNotAllowed arcLoc={arcLoc} />);
+		mountPoint.prepend(<ArcLocNotAllowed arcLoc={arcLoc} />);
 		return;
 	}
 
-	footerElement.append(<Enabled arcLoc={arcLoc} />);
+	mountPoint.prepend(<Enabled arcLoc={arcLoc} />);
 
 	void addLinks(settings);
 };

src/EasyArchive/modules/components/react.tsx

@@ -30,35 +30,49 @@ const FooterNotice = ({id = OPTIONS.elementId, children = <></>}: FooterNoticePr
 };
 
 const NotPatrolledYet = () => (
-	<span id="page_patroller__not-patrolled" textContent={getMessage('This page has not been patrolled yet')} />
+	<FooterNotice>
+		<span id="page_patroller__not-patrolled" textContent={getMessage('This page has not been patrolled yet')} />
+	</FooterNotice>
 );
 
-const Loading = () => <span id="page_patroller__loading" textContent={getMessage('Loading...')} />;
+const Loading = () => (
+	<FooterNotice>
+		<span id="page_patroller__loading" textContent={getMessage('Loading...')} />
+	</FooterNotice>
+);
 
 interface PatrolledProps {
-	timestamp?: string;
-	user?: string;
+	timestamp: string;
+	user: string;
 }
 
-const Patrolled = ({timestamp, user}: PatrolledProps) => (
-	<>
-		{timestamp && user ? (
-			<span id="page_patroller__patrolled-by">
-				{getMessage('This page was patrolled at by').replace('$1', timestamp)}
-				<a href={mw.util.getUrl(`User:${user}`)}>{user}</a>
-				{getMessage('period')}
-			</span>
-		) : (
+const Patrolled = ({timestamp, user}: PatrolledProps) => {
+	if (timestamp && user) {
+		return (
+			<FooterNotice>
+				<span id="page_patroller__patrolled-by">
+					{getMessage('This page was patrolled at by').replace('$1', timestamp)}
+					<a href={mw.util.getUrl(`User:${user}`)}>{user}</a>
+					{getMessage('period')}
+				</span>
+			</FooterNotice>
+		);
+	}
+
+	return (
+		<FooterNotice>
 			<span
 				id="page_patroller__patrolled"
 				textContent={getMessage('This page has been patrolled, or has been marked as auto-patrolled')}
 			/>
-		)}
-	</>
-);
+		</FooterNotice>
+	);
+};
 
 const ErrorMessage = () => (
-	<span id="page_patroller__error" textContent={getMessage('Error occurs when finding patroller')} />
+	<FooterNotice>
+		<span id="page_patroller__error" textContent={getMessage('Error occurs when finding patroller')} />
+	</FooterNotice>
 );
 
 export {FooterNotice, NotPatrolledYet, Loading, Patrolled, ErrorMessage};