Client/module migrations -- rough work

client/common/icons.jsx

@@ -73,7 +73,7 @@ function withLabel(SvgComponent) {
   };
 
   Icon.defaultProps = {
-    'aria-label': null
+    'aria-label': undefined
   };
 
   return Icon;

client/common/useSyncFormTranslations.ts

@@ -12,11 +12,11 @@ export interface FormLike {
  * @param language
  */
 export const useSyncFormTranslations = (
-  formRef: MutableRefObject<FormLike>,
+  formRef: MutableRefObject<FormLike | null>,
   language: string
 ) => {
   useEffect(() => {
-    const form = formRef.current;
+    const form = formRef?.current;
     if (!form) return;
 
     const { values } = form.getState();

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

@@ -1,8 +1,7 @@
 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 { TFunction, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import {
@@ -27,8 +26,15 @@ 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';
+import { AboutSectionInfoSection } from '../statics/aboutData';
 
-const AboutSection = ({ section, t }) => (
+interface AboutSectionProps {
+  section: AboutSectionInfoSection;
+  t: TFunction<'translation'>;
+}
+
+const AboutSection = ({ section, t }: AboutSectionProps) => (
   <Section>
     <h2>{t(section.header)}</h2>
     <SectionContainer>
@@ -47,11 +53,13 @@ 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 }) => file.name === 'index.html'
+    );
     return index?.content.match(/\/p5@([\d.]+)\//)?.[1];
   });
 
@@ -91,7 +99,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 +164,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 = [
+export interface ContactSectionLink {
+  label: string;
+  href: string;
+}
+
+export const ContactSectionLinks: ContactSectionLink[] = [
   {
     label: 'About.Github',
     href: 'https://github.com/processing/p5.js-web-editor'
@@ -22,7 +27,18 @@ export const ContactSectionLinks = [
   }
 ];
 
-export const AboutSectionInfo = [
+export interface AboutSectionInfoItem {
+  url: string;
+  title: string;
+  description: string;
+}
+
+export interface AboutSectionInfoSection {
+  header: string;
+  items: AboutSectionInfoItem[];
+}
+
+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,14 @@ 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;
@@ -22,7 +21,19 @@ const StyledTabList = styled.nav`
   }
 `;
 
-function Legal({ policyFile, title }) {
+export interface LegalProps {
+  /**
+   * Used in the HTML <title> tag.
+   * TODO: pass this to the Nav to use as the mobile title.
+   */
+  title: string;
+  /**
+   * Path of the markdown '.md' file, relative to the /public directory.
+   */
+  policyFile: string;
+}
+
+export function Legal({ policyFile, title }: LegalProps) {
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(true);
   const [policy, setPolicy] = useState('');
@@ -55,17 +66,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;