refactor simple react jsx to typescript

src/client/components/loading-spinner.js → src/client/components/loading-spinner.tsx

@@ -1,6 +1,7 @@
 /*
  * Copyright (C) 2015  Ben Ockmore
  *               2015  Sean Burke
+ * 				 2024  Meziyum
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -22,7 +23,11 @@ import React from 'react';
 import {faCircleNotch} from '@fortawesome/free-solid-svg-icons';
 
 
-function LoadingSpinner() {
+/**
+ * Renders a LoadingSpinner Component displaying a spinning loading icon.
+ * @returns {JSX.Element} The JSX content of the LoadingSpinner indicator
+ */
+function LoadingSpinner(): JSX.Element {
 	return (
 		<div className="loading-background">
 			<FontAwesomeIcon

src/client/components/pages/about.js → src/client/components/pages/about.tsx

@@ -25,10 +25,10 @@ import {faXTwitter} from '@fortawesome/free-brands-svg-icons';
 
 /**
  * Renders the document and displays the 'About' page.
- * @returns {ReactElement} a HTML document which displays the About
+ * @returns {JSX.Element} a React JSX Element
  * page
  */
-function AboutPage() {
+function AboutPage(): JSX.Element {
 	const NESLink =
 		'https://ocharles.org.uk/blog/posts/' +
 			'2012-07-10-nes-does-it-better-1.html';

src/client/components/pages/contribute.js → src/client/components/pages/contribute.tsx

@@ -21,10 +21,9 @@ import React from 'react';
 
 /**
  * Renders the the document and displays the 'Contribute' page.
- * @returns {ReactElement} a HTML document which displays the
- * Contribute page
+ * @returns {JSX.Element} a React JSX Element
  */
-function ContributePage() {
+function ContributePage(): JSX.Element {
 	const IRCLink = 'https://kiwiirc.com/nextclient/irc.libera.chat/?#bookbrainz';
 	const styleLink = 'https://bookbrainz-user-guide.readthedocs.io/';
 

src/client/components/pages/develop.js → src/client/components/pages/develop.tsx

@@ -21,9 +21,9 @@ import React from 'react';
 
 /**
  * Renders the document and displays the 'Develop' page.
- * @returns {ReactElement} a HTML document to display the Develop page
+ * @returns {JSX.Element} a React JSX Element
  */
-function DevelopPage() {
+function DevelopPage(): JSX.Element {
 	return (
 		<div>
 			<div className="page-header">

src/client/components/pages/faq.tsx

@@ -20,8 +20,11 @@ import {Card, ListGroup} from 'react-bootstrap';
 import React from 'react';
 import {genEntityIconHTMLElement} from '../../helpers/entity';
 
-
-function FAQPage() {
+/**
+ * Renders the page for the Frequently Asked Questions on Bookbrainz
+ * @returns {JSX.Element} a React JSX Element
+ */
+function FAQPage(): JSX.Element {
 	return (
 		<Card>
 			<Card.Header as="h2">

src/client/components/pages/help.js → src/client/components/pages/help.tsx

@@ -23,9 +23,9 @@ import {genEntityIconHTMLElement} from '../../helpers/entity';
 
 /**
  * Renders the document and displays the 'Help' page.
- * @returns {ReactElement} a HTML document to display the Develop page
+ * @returns {JSX.Element} a React JSX Element
  */
-function HelpPage() {
+function HelpPage(): JSX.Element {
 	const IRCLink = 'https://kiwiirc.com/nextclient/irc.libera.chat/?#bookbrainz';
 	const userGuideLink =
 		'https://bookbrainz-user-guide.readthedocs.io/';

src/client/components/pages/licensing.js → src/client/components/pages/licensing.tsx

@@ -23,7 +23,11 @@ import React from 'react';
 
 const {Col, Row} = bootstrap;
 
-function LicensingPage() {
+/**
+ * Renders a page containing information about the licensing and copyrights for the content available on the Bookbrainz.
+ * @returns {JSX.Element} a React JSX Component
+ */
+function LicensingPage(): JSX.Element {
 	const CC0Link = 'http://creativecommons.org/publicdomain/zero/1.0/';
 	const CC0Image = 'http://i.creativecommons.org/p/zero/1.0/88x31.png';
 

src/client/components/pages/privacy.js → src/client/components/pages/privacy.tsx

@@ -23,9 +23,9 @@ import React from 'react';
  * Renders a page containing a link to the current MusicBrainz privacy
  * policy, which will form the basis of a future privacy policy
  * for BookBrainz.
- * @returns {ReactElement} an element containing the rendered output
+ * @returns {JSX.Element} an element containing the rendered output
  */
-function PrivacyPage() {
+function PrivacyPage(): JSX.Element {
 	return (
 		<div>
 			<div className="page-header">