refactor: add typescript support to project

src/routes/onboarding/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import { Helmet } from "react-helmet";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
@@ -11,9 +11,14 @@ import DonePage from "./steps/donePage";
 import useServerSetup, { steps } from "./useServerSetup";
 import StyledOnboardingPage from "./styled";
 
-function Navigator({ step, setStep }) {
+interface Props {
+  step: string;
+  setStep: (step: string) => void;
+}
+
+const Navigator: FC<Props> = ({ step, setStep }) => {
   const index = steps.map((value) => value.name).indexOf(step);
-  const canJumpTo = steps.find((value) => value.name === step).canJumpTo || [];
+  const canJumpTo = steps.find((value) => value.name === step)?.canJumpTo || [];
 
   return (
     <div className="navigator">
@@ -41,7 +46,7 @@ function Navigator({ step, setStep }) {
       })}
     </div>
   );
-}
+};
 
 export default function OnboardingPage() {
   const serverSetup = useServerSetup();

src/routes/onboarding/useServerSetup.ts

@@ -1,7 +1,14 @@
 import { useCallback, useState } from "react";
+import { Swiper } from "swiper/types";
 
 // `name` for in-code usage, `label` for display
-const steps = [
+export interface Step {
+  name: string;
+  label: string;
+  canJumpTo?: string[];
+}
+
+const steps: Step[] = [
   {
     name: "welcomePage",
     label: "Welcome Page"
@@ -31,12 +38,12 @@ const steps = [
 ];
 
 export default function useServerSetup() {
-  const [swiper, setSwiper] = useState(null);
+  const [swiper, setSwiper] = useState<Swiper | null>(null);
 
-  const [index, setIndex] = useState(0);
+  const [index, setIndex] = useState<number>(0);
   const step = steps[index].name;
   const setStep = useCallback(
-    (name) => {
+    (name: string) => {
       const newIndex = steps.map((step) => step.name).indexOf(name);
       setIndex(newIndex);
       if (swiper !== null) {