Typescript Migration: client/modules/IDE/hook and client/modules/IDE/utils

client/components/Dropdown/TableDropdown.tsx

@@ -9,7 +9,7 @@ import {
 
 import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
 import MoreIconSvg from '../../images/more.svg';
-import useIsMobile from '../../modules/IDE/hooks/useIsMobile';
+import { useIsMobile } from '../../modules/IDE/hooks';
 
 const DotsHorizontal = styled(MoreIconSvg)`
   transform: rotate(90deg);

client/custom.d.ts

@@ -1,3 +1,15 @@
+declare module '*.svg?byUrl' {
+  const url: string;
+  // eslint-disable-next-line import/no-default-export
+  export default url;
+}
+
+declare module '*.svg?byContent' {
+  const content: string;
+  // eslint-disable-next-line import/no-default-export
+  export default content;
+}
+
 declare module '*.svg' {
   import * as React from 'react';
 

client/modules/IDE/components/Console.jsx

@@ -11,10 +11,9 @@ import DownArrowIcon from '../../../images/down-arrow.svg';
 
 import * as IDEActions from '../actions/ide';
 import * as ConsoleActions from '../actions/console';
-import { useDidUpdate } from '../hooks/custom-hooks';
-import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
+import { useDidUpdate, useHandleMessageEvent } from '../hooks';
 import { listen } from '../../../utils/dispatcher';
-import getConsoleFeedStyle from '../utils/consoleStyles';
+import { getConsoleFeedStyle } from '../utils/consoleStyles';
 
 const Console = () => {
   const { t } = useTranslation();

client/modules/IDE/components/Header/Nav.jsx

@@ -30,7 +30,7 @@ import {
 import { logoutUser } from '../../../User/actions';
 import { CmControllerContext } from '../../pages/IDEView';
 import MobileNav from './MobileNav';
-import useIsMobile from '../../hooks/useIsMobile';
+import { useIsMobile } from '../../hooks';
 
 const Nav = ({ layout }) => {
   const isMobile = useIsMobile();

client/modules/IDE/components/Header/Toolbar.unit.test.jsx

@@ -11,6 +11,7 @@ import {
 } from '../../../../test-utils';
 import { selectProjectName } from '../../selectors/project';
 import ToolbarComponent from './Toolbar';
+import { P5VersionProvider } from '../../hooks/useP5Version';
 
 const server = setupServer(
   rest.put(`/projects/id`, (req, res, ctx) => res(ctx.json(req.body)))
@@ -49,7 +50,12 @@ const renderComponent = (extraState = {}) => {
 
   return {
     ...props,
-    ...reduxRender(<ToolbarComponent {...props} />, { initialState })
+    ...reduxRender(
+      <P5VersionProvider>
+        <ToolbarComponent {...props} />
+      </P5VersionProvider>,
+      { initialState }
+    )
   };
 };
 

client/modules/IDE/components/Header/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import useIsMobile from '../../hooks/useIsMobile';
+import { useIsMobile } from '../../hooks';
 
 import Nav from './Nav';
 import Toolbar from './Toolbar';

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -3,6 +3,7 @@ import { act, fireEvent, reduxRender, screen } from '../../../../test-utils';
 import { initialState } from '../../reducers/preferences';
 import Preferences from './index';
 import * as PreferencesActions from '../../actions/preferences';
+import { P5VersionProvider } from '../../hooks/useP5Version';
 
 describe('<Preferences />', () => {
   // For backwards compatibility, spy on each action creator to see when it was dispatched.
@@ -14,14 +15,19 @@ describe('<Preferences />', () => {
   );
 
   const subject = (initialPreferences = {}) =>
-    reduxRender(<Preferences />, {
-      initialState: {
-        preferences: {
-          ...initialState,
-          ...initialPreferences
+    reduxRender(
+      <P5VersionProvider>
+        <Preferences />
+      </P5VersionProvider>,
+      {
+        initialState: {
+          preferences: {
+            ...initialState,
+            ...initialPreferences
+          }
         }
       }
-    });
+    );
 
   afterEach(() => {
     jest.clearAllMocks();

client/modules/IDE/components/Timer.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { distanceInWordsToNow } from '../../../utils/formatDate';
-import useInterval from '../hooks/useInterval';
+import { useInterval } from '../hooks/useInterval';
 import { getIsUserOwner } from '../selectors/users';
 
 const Timer = () => {

client/modules/IDE/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useSketchActions';
+export * from './useWhatPage';
+export * from './useIsMobile';
+export * from './useDidUpdate';
+export * from './useInterval';
+export * from './useHandleMessageEvent';

client/modules/IDE/hooks/useDidUpdate.ts

@@ -0,0 +1,16 @@
+import React, { useEffect, useRef } from 'react';
+
+export const useDidUpdate = (
+  callback: () => void,
+  deps: React.DependencyList = []
+) => {
+  const hasMount = useRef(false);
+
+  useEffect(() => {
+    if (hasMount.current) {
+      callback();
+    } else {
+      hasMount.current = true;
+    }
+  }, deps);
+};

client/modules/IDE/hooks/useHandleMessageEvent.js → client/modules/IDE/hooks/useHandleMessageEvent.ts

@@ -1,18 +1,25 @@
 import { useDispatch } from 'react-redux';
 import { Decode } from 'console-feed';
+import { Message } from 'console-feed/lib/definitions/Console';
 import { dispatchConsoleEvent } from '../actions/console';
 import { stopSketch, expandConsole } from '../actions/ide';
 
-export default function useHandleMessageEvent() {
+type SafeValue = string | number | boolean | null | SafeObject | SafeArray;
+interface SafeObject {
+  [key: string]: SafeValue;
+}
+interface SafeArray extends Array<SafeValue> {}
+
+export function useHandleMessageEvent() {
   const dispatch = useDispatch();
 
   const safeStringify = (
-    obj,
+    obj: unknown,
     depth = 0,
     maxDepth = 10,
-    seen = new WeakMap()
-  ) => {
-    if (typeof obj !== 'object' || obj === null) return obj;
+    seen = new WeakMap<object, boolean>()
+  ): SafeValue => {
+    if (typeof obj !== 'object' || obj === null) return obj as SafeValue;
 
     if (depth >= maxDepth) {
       if (seen.has(obj)) return '[Circular Reference]';
@@ -30,9 +37,13 @@ export default function useHandleMessageEvent() {
         );
   };
 
-  const handleMessageEvent = (data) => {
+  const handleMessageEvent = (data: Message['data']) => {
     if (!data || typeof data !== 'object') return;
-    const { source, messages } = data;
+
+    const { source, messages } = data as {
+      source?: string;
+      messages?: { log?: unknown }[];
+    };
     if (source !== 'sketch' || !Array.isArray(messages)) return;
 
     const decodedMessages = messages.map((message) => {
@@ -48,8 +59,8 @@ export default function useHandleMessageEvent() {
     // Detect infinite loop warnings
     const hasInfiniteLoop = decodedMessages.some(
       (message) =>
-        message?.data &&
-        Object.values(message.data).some(
+        (message as SafeObject)?.data &&
+        Object.values((message as SafeObject)?.data as SafeObject).some(
           (arg) =>
             typeof arg === 'string' &&
             arg.includes('Exiting potential infinite loop')

client/modules/IDE/hooks/useInterval.js → client/modules/IDE/hooks/useInterval.ts

@@ -1,26 +1,30 @@
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 import { useState, useEffect, useRef } from 'react';
 
-export default function useInterval(callback, delay) {
-  const savedCallback = useRef();
-  const [intervalId, setIntervalId] = useState();
+export function useInterval(callback: () => void, delay: number) {
+  const savedCallback = useRef<() => void>();
+  const [intervalId, setIntervalId] = useState<
+    ReturnType<typeof setInterval>
+  >();
 
   // Remember the latest callback.
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
   // Set up the interval.
+  // eslint-disable-next-line consistent-return
   useEffect(() => {
     function tick() {
-      savedCallback.current();
+      if (savedCallback.current) {
+        savedCallback.current();
+      }
     }
     if (delay !== null) {
       const id = setInterval(tick, delay);
       setIntervalId(id);
       return () => clearInterval(id);
     }
-    return null;
   }, [delay]);
   return () => clearInterval(intervalId);
 }

client/modules/IDE/hooks/useIsMobile.js → client/modules/IDE/hooks/useIsMobile.ts

@@ -1,9 +1,7 @@
 import { useMediaQuery } from 'react-responsive';
 
-const useIsMobile = (customBreakpoint) => {
+export const useIsMobile = (customBreakpoint?: number): boolean => {
   const breakPoint = customBreakpoint || 770;
   const isMobile = useMediaQuery({ maxWidth: breakPoint });
   return isMobile;
 };
-
-export default useIsMobile;