JavaScript to TypeScript Migration using Second

frontend/components/Analysis/Analysis.jsx → frontend/components/Analysis/Analysis.tsx

@@ -1,12 +1,18 @@
 import styles from "./Analysis.module.css";
-import { useState } from "react";
+import { useState, ReactNode } from "react";
 
 import FolderIcon from "@/public/static/folder.svg";
 import FilterIcon from "@/public/static/filter.svg";
 
 import { fontLight } from "@fonts";
 
-const Analysis = ({ text = "Analysis", icon = "folder", children }) => {
+type AnalysisProps = {
+  text?: string;
+  icon?: "folder" | "filter";
+  children?: ReactNode;
+};
+
+const Analysis = ({ text = "Analysis", icon = "folder", children }: AnalysisProps) => {
   const [open, setOpen] = useState(false);
   return (
     <div
@@ -45,4 +51,4 @@ const Analysis = ({ text = "Analysis", icon = "folder", children }) => {
   );
 };
 
-export default Analysis;
+export default Analysis;

frontend/components/Bar/Bar.jsx → frontend/components/Bar/Bar.tsx

@@ -8,7 +8,32 @@ import Router from "next/router";
 import * as NProgress from "nprogress";
 import * as React from "react";
 
-const NextNProgress = ({
+type NProgressOptions = {
+  minimum?: number;
+  easing?: string;
+  speed?: number;
+  trickle?: boolean;
+  trickleSpeed?: number;
+  showSpinner?: boolean;
+  barSelector?: string;
+  spinnerSelector?: string;
+  parent?: string;
+  template?: string;
+};
+
+type NextNProgressProps = {
+  color?: string;
+  displaySpinner?: boolean;
+  startPosition?: number;
+  stopDelayMs?: number;
+  height?: number;
+  showOnShallow?: boolean;
+  options?: NProgressOptions;
+  nonce?: string;
+  transformCSS?: (css: string) => JSX.Element;
+};
+
+const NextNProgress: React.FC<NextNProgressProps> = ({
   color = "var(--primary-dark)",
   displaySpinner = false,
   startPosition = 0.3,
@@ -19,7 +44,7 @@ const NextNProgress = ({
   nonce,
   transformCSS = (css) => <style nonce={nonce}>{css}</style>,
 }) => {
-  let timer = null;
+  let timer: NodeJS.Timeout | null = null;
 
   React.useEffect(() => {
     if (options) {
@@ -35,14 +60,14 @@ const NextNProgress = ({
     };
   }, []);
 
-  const routeChangeStart = (_, { shallow }) => {
+  const routeChangeStart = (_: string, { shallow }: { shallow: boolean }) => {
     if (!shallow || showOnShallow) {
       NProgress.set(startPosition);
       NProgress.start();
     }
   };
 
-  const routeChangeEnd = (_, { shallow }) => {
+  const routeChangeEnd = (_: string, { shallow }: { shallow: boolean }) => {
     if (!shallow || showOnShallow) {
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
@@ -51,7 +76,7 @@ const NextNProgress = ({
     }
   };
 
-  const routeChangeError = (_err, _url, { shallow }) => {
+  const routeChangeError = (_err: Error, _url: string, { shallow }: { shallow: boolean }) => {
     if (!shallow || showOnShallow) {
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
@@ -130,4 +155,4 @@ const NextNProgress = ({
   `);
 };
 
-export default React.memo(NextNProgress);
+export default React.memo(NextNProgress);