client/modules/About & client/modules/Legal: clean up Proptypes

Author: clairep94

client/modules/About/pages/About.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
@@ -28,9 +27,27 @@ import packageData from '../../../../package.json';
 import HeartIcon from '../../../images/heart.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
 import LogoIcon from '../../../images/p5js-square-logo.svg';
-import type { AboutSectionInfoSection } from '../statics/aboutData';
 import { RootState } from '../../../reducers';
 
+export interface AboutSectionInfoItem {
+  url: string;
+  title: string;
+  description: string;
+}
+export interface AboutSectionInfoSection {
+  header: string;
+  items: AboutSectionInfoItem[];
+}
+export interface ContactSectionLink {
+  label: string;
+  href: string;
+}
+
+export interface AboutSectionProps {
+  section: AboutSectionInfoSection;
+  t: TFunction<'translation'>;
+}
+
 const AboutSection = ({
   section,
   t
@@ -169,17 +186,3 @@ export const About = () => {
     </RootPage>
   );
 };
-
-AboutSection.propTypes = {
-  section: PropTypes.shape({
-    header: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        url: PropTypes.string.isRequired,
-        title: PropTypes.string.isRequired,
-        description: PropTypes.string.isRequired
-      })
-    ).isRequired
-  }).isRequired,
-  t: PropTypes.func.isRequired
-};

client/modules/About/statics/aboutData.ts

@@ -1,7 +1,8 @@
-export interface ContactSectionLink {
-  label: string;
-  href: string;
-}
+import type {
+  ContactSectionLink,
+  AboutSectionInfoSection
+} from '../pages/About';
+
 export const ContactSectionLinks: ContactSectionLink[] = [
   {
     label: 'About.Github',
@@ -26,15 +27,6 @@ export const ContactSectionLinks: ContactSectionLink[] = [
   }
 ];
 
-export interface AboutSectionInfoItem {
-  url: string;
-  title: string;
-  description: string;
-}
-export interface AboutSectionInfoSection {
-  header: string;
-  items: AboutSectionInfoItem[];
-}
 export const AboutSectionInfo: AboutSectionInfoSection[] = [
   {
     header: 'About.NewP5',

client/modules/Legal/pages/Legal.tsx

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
@@ -22,9 +21,14 @@ const StyledTabList = styled.nav`
   }
 `;
 export interface LegalProps {
-  /** File name of policy */
+  /**
+   * Path of the markdown '.md' file, relative to the /public directory.
+   */
   policyFile: string;
-  /** Title of policy */
+  /**
+   * Used in the HTML <title> tag.
+   * TODO: pass this to the Nav to use as the mobile title.
+   */
   title: string;
 }
 export function Legal({ policyFile, title }: LegalProps) {
@@ -60,15 +64,3 @@ export function Legal({ policyFile, title }: LegalProps) {
     </RootPage>
   );
 }
-
-Legal.propTypes = {
-  /**
-   * Used in the HTML <title> tag.
-   * TODO: pass this to the Nav to use as the mobile title.
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Path of the markdown '.md' file, relative to the /public directory.
-   */
-  policyFile: PropTypes.string.isRequired
-};