Pr05 Typescript Migration #18: Migrate client/modules/About & client/modules/Legal

client/modules/About/pages/About.jsx → client/modules/About/pages/About.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
+import type { TFunction } from 'react-i18next';
 import {
   AboutPageContent,
   Intro,
@@ -27,8 +27,34 @@ 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 { RootState } from '../../../reducers';
 
-const AboutSection = ({ section, t }) => (
+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
+}: {
+  section: AboutSectionInfoSection;
+  t: TFunction<'translation'>;
+}) => (
   <Section>
     <h2>{t(section.header)}</h2>
     <SectionContainer>
@@ -47,11 +73,15 @@ const AboutSection = ({ section, t }) => (
   </Section>
 );
 
-const About = () => {
+export const About = () => {
   const { t } = useTranslation();
 
-  const p5version = useSelector((state) => {
-    const index = state.files.find((file) => file.name === 'index.html');
+  const p5version = useSelector((state: RootState) => {
+    const index = state.files.find(
+      (file: {
+        name: string /** TODO: update once files types are defined in server */;
+      }) => file.name === 'index.html'
+    );
     return index?.content.match(/\/p5@([\d.]+)\//)?.[1];
   });
 
@@ -91,7 +121,11 @@ const About = () => {
         </Intro>
 
         {AboutSectionInfo.map((section) => (
-          <AboutSection key={t(section.header)} section={section} t={t} />
+          <AboutSection
+            key={t(section.header) as string}
+            section={section}
+            t={t}
+          />
         ))}
 
         <Contact>
@@ -152,19 +186,3 @@ 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
-};
-
-export default About;

client/modules/About/statics/aboutData.js → client/modules/About/statics/aboutData.ts

@@ -1,4 +1,9 @@
-export const ContactSectionLinks = [
+import type {
+  ContactSectionLink,
+  AboutSectionInfoSection
+} from '../pages/About';
+
+export const ContactSectionLinks: ContactSectionLink[] = [
   {
     label: 'About.Github',
     href: 'https://github.com/processing/p5.js-web-editor'
@@ -22,7 +27,7 @@ export const ContactSectionLinks = [
   }
 ];
 
-export const AboutSectionInfo = [
+export const AboutSectionInfo: AboutSectionInfoSection[] = [
   {
     header: 'About.NewP5',
     items: [

client/modules/Legal/components/PolicyContainer.jsx → client/modules/Legal/components/PolicyContainer.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import ReactMarkdown from 'react-markdown';
 import remarkSlug from 'remark-slug';
-import PropTypes from 'prop-types';
 import { remSize, prop } from '../../../theme';
 
 const PolicyContainerMain = styled.main`
@@ -48,16 +47,13 @@ const PolicyContainerMain = styled.main`
   }
 `;
 
-function PolicyContainer({ policy }) {
+export interface PolicyContainerProps {
+  policy: string;
+}
+export function PolicyContainer({ policy }: PolicyContainerProps) {
   return (
     <PolicyContainerMain>
       <ReactMarkdown remarkPlugins={[remarkSlug]}>{policy}</ReactMarkdown>
     </PolicyContainerMain>
   );
 }
-
-PolicyContainer.propTypes = {
-  policy: PropTypes.string.isRequired
-};
-
-export default PolicyContainer;

client/modules/Legal/pages/CodeOfConduct.jsx → client/modules/Legal/pages/CodeOfConduct.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Legal from './Legal';
+import { Legal } from './Legal';
 
-function CodeOfConduct() {
+export function CodeOfConduct() {
   const { t } = useTranslation();
 
   return (
     <Legal policyFile="code-of-conduct.md" title={t('Legal.CodeOfConduct')} />
   );
 }
-
-export default CodeOfConduct;

client/modules/Legal/pages/Legal.jsx → 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';
@@ -9,7 +8,7 @@ import { RootPage } from '../../../components/RootPage';
 import { remSize } from '../../../theme';
 import Loader from '../../App/components/loader';
 import Nav from '../../IDE/components/Header/Nav';
-import PolicyContainer from '../components/PolicyContainer';
+import { PolicyContainer } from '../components/PolicyContainer';
 
 const StyledTabList = styled.nav`
   display: flex;
@@ -21,8 +20,18 @@ const StyledTabList = styled.nav`
     gap: ${remSize(19)};
   }
 `;
-
-function Legal({ policyFile, title }) {
+export interface LegalProps {
+  /**
+   * Path of the markdown '.md' file, relative to the /public directory.
+   */
+  policyFile: string;
+  /**
+   * 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) {
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(true);
   const [policy, setPolicy] = useState('');
@@ -55,17 +64,3 @@ function Legal({ policyFile, title }) {
     </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
-};
-
-export default Legal;

client/modules/Legal/pages/PrivacyPolicy.jsx → client/modules/Legal/pages/PrivacyPolicy.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Legal from './Legal';
+import { Legal } from './Legal';
 
-function PrivacyPolicy() {
+export function PrivacyPolicy() {
   const { t } = useTranslation();
 
   return (
     <Legal policyFile="privacy-policy.md" title={t('Legal.PrivacyPolicy')} />
   );
 }
-
-export default PrivacyPolicy;

client/modules/Legal/pages/TermsOfUse.jsx → client/modules/Legal/pages/TermsOfUse.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Legal from './Legal';
+import { Legal } from './Legal';
 
-function TermsOfUse() {
+export function TermsOfUse() {
   const { t } = useTranslation();
 
   return <Legal policyFile="terms-of-use.md" title={t('Legal.TermsOfUse')} />;
 }
-
-export default TermsOfUse;

client/routes.jsx

@@ -6,10 +6,10 @@ import { Route as RouterRoute, Switch } from 'react-router-dom';
 import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
 import FullView from './modules/IDE/pages/FullView';
-import About from './modules/About/pages/About';
-import CodeOfConduct from './modules/Legal/pages/CodeOfConduct';
-import PrivacyPolicy from './modules/Legal/pages/PrivacyPolicy';
-import TermsOfUse from './modules/Legal/pages/TermsOfUse';
+import { About } from './modules/About/pages/About';
+import { CodeOfConduct } from './modules/Legal/pages/CodeOfConduct';
+import { PrivacyPolicy } from './modules/Legal/pages/PrivacyPolicy';
+import { TermsOfUse } from './modules/Legal/pages/TermsOfUse';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
 import ResetPasswordView from './modules/User/pages/ResetPasswordView';

package.json

@@ -144,9 +144,9 @@
     "@types/nodemailer": "^7.0.1",
     "@types/nodemailer-mailgun-transport": "^1.4.6",
     "@types/passport": "^1.0.17",
-    "@types/passport": "^1.0.17",
     "@types/react": "^16.14.0",
     "@types/react-dom": "^16.9.25",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
     "@types/sinon": "^17.0.4",
     "@types/styled-components": "^5.1.34",