refactor: remove customized replaceChild(); avoid undefined childrens and IDs; optimize logic (qiuwenbaike#1699)

* refactor(EasyArchive): avoid undefined element ID; remove replaceChild(); optimize logic

* refactor(PagePatroller): remove replaceChild(); optimize logic

* refactor(EasyArchive, PagePatroller): avoid undefined childrens

* refactor: remove customized replaceChild(); avoid undefined childrens and IDs; optimize logic

Author: WaitSpringQW

dist/EasyArchive/EasyArchive.js

@@ -6,8 +6,12 @@ import {getSections} from './util/getSection';
 import {refresh} from './util/refreshPage';
 import {toastify} from 'ext.gadget.Toastify';
 
-const appendFooterNotice = (innerElement: Element) => {
-	document.querySelectorAll<HTMLElement>(OPTIONS.mountPointSelector)[0]?.prepend(innerElement);
+const appendFooterNotice = (element: Element) => {
+	const mountPoint = document.querySelector<HTMLElement>(OPTIONS.mountPointSelector);
+
+	if (mountPoint) {
+		mountPoint.prepend(element);
+	}
 };
 
 const addLinks = async ({

dist/GeoLocationReader/GeoLocationReader.js

@@ -1,31 +1,38 @@
+import * as OPTIONS from '../../options.json';
 import React, {ReactElement} from 'ext.gadget.React';
 import {footerNotice, sectionIdSpan} from './EasyArchive.module.less';
 import {getMessage} from '../i18n';
 import {sanitize} from '../util/sanitize';
 
 interface FooterNoticeProps {
-	id: string;
+	id?: string;
 	children?: ReactElement | ReactElement[];
 }
 
-const FooterNotice = ({id, children}: FooterNoticeProps) => (
-	<>
-		{mw.config.get('skin') === 'citizen' ? (
-			<section id={id} className={[footerNotice, 'page-info__item', 'citizen-footer__pageinfo-item', 'noprint']}>
-				{children}
-			</section>
-		) : ['vector', 'vector-2022', 'gongbi'].includes(mw.config.get('skin')) ||
-		  document.querySelector('ul#footer-info') ? (
-			<li id={id} className={[footerNotice, 'noprint']}>
-				{children}
-			</li>
-		) : (
-			<div id={id} className={[footerNotice, 'noprint']}>
-				{children}
-			</div>
-		)}
-	</>
-);
+const FooterNotice = ({id, children = <></>}: FooterNoticeProps) => {
+	const {skin} = mw.config.get();
+
+	return (
+		<>
+			{skin === 'citizen' ? (
+				<section
+					id={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={id ?? OPTIONS.elementId} className={[footerNotice, 'noprint']}>
+					{children}
+				</li>
+			) : (
+				<div id={id ?? OPTIONS.elementId} className={[footerNotice, 'noprint']}>
+					{children}
+				</div>
+			)}
+		</>
+	);
+};
 
 const InBlackList = () => (
 	<FooterNotice id="easy_archive_not_supported_notice">
@@ -86,27 +93,21 @@ interface OnClickProps {
 	textContent: string;
 	className: string;
 	onClick?: (event: Event) => void;
-	children?: ReactElement | ReactElement[];
 }
 
-const OnClick = ({textContent, className, onClick, children}: OnClickProps) => (
+const OnClick = ({textContent, className, onClick}: OnClickProps) => (
 	<a
 		className={['gadget-easy_archive__link', `gadget-easy_archive__link-${className}`]}
-		onClick={onClick}
+		onClick={onClick || (() => {})}
 		textContent={textContent}
-	>
-		{children}
-	</a>
+	/>
 );
 
 interface SectionIDProps {
-	className?: string;
 	children?: ReactElement | ReactElement[];
 }
 
-const SectionID = ({className, children}: SectionIDProps) => (
-	<span className={[className, sectionIdSpan]}>{children}</span>
-);
+const SectionID = ({children}: SectionIDProps) => <span className={sectionIdSpan}>{children}</span>;
 
 const Pipe = () => <span className="mw-editsection-divider" textContent={'|'} />;
 
@@ -121,8 +122,6 @@ const EditConflictNotice = ({onClick}: EditConflictNoticeProps) => (
 	</span>
 );
 
-const spanWrap = (textContent: string) => <span textContent={textContent} />;
-
 export {
 	FooterNotice,
 	Enabled,
@@ -134,5 +133,4 @@ export {
 	Pipe,
 	SectionID,
 	EditConflictNotice,
-	spanWrap,
 };

dist/MarkRights-Userpage/MarkRights-Userpage.js

@@ -58,7 +58,6 @@ const RemoveSectionLink = ({
 }: RemoveSectionLinkProps) => (
 	<OnClick
 		className={'delete'}
-		textContent={getMessage('Delete')}
 		onClick={(event) => {
 			void removeOnClick(event, {
 				sectionIdSpans,
@@ -69,6 +68,7 @@ const RemoveSectionLink = ({
 				toastifyInstance,
 			});
 		}}
+		textContent={getMessage('Delete')}
 	/>
 );
 

dist/OnlineAdmins/OnlineAdmins.js

@@ -0,0 +1,19 @@
+import {getMessage} from '../i18n';
+
+const getArchivingMessage = (indexNo: string) => {
+	return getMessage('Archiving') + getMessage(':') + getMessage('Section $1').replace('$1', indexNo);
+};
+
+const getArchivedMessage = (indexNo: string) => {
+	return getMessage('Archived') + getMessage(':') + getMessage('Section $1').replace('$1', indexNo);
+};
+
+const getDeletingMessage = (indexNo: string) => {
+	return getMessage('Deleting') + getMessage(':') + getMessage('Section $1').replace('$1', indexNo);
+};
+
+const getDeletedMessage = (indexNo: string) => {
+	return getMessage('Deleted') + getMessage(':') + getMessage('Section $1').replace('$1', indexNo);
+};
+
+export {getArchivingMessage, getArchivedMessage, getDeletingMessage, getDeletedMessage};