Update stepform routes

Author: tduyng

src/pages/Home/Home.tsx src/pages/Home/index.tsxsrc/pages/Home/Home.tsx renamed to src/pages/Home/index.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-
 const Home = () => {
   return <h1>Hi there!</h1>;
 };
-
 export default Home;

src/pages/StepForm/Confirm.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StepFormProps } from 'src/@types/stepForm';
+
+const Confirm = (props: StepFormProps) => {
+  return <h1>Form confirm</h1>;
+};
+
+export { Confirm };

src/pages/StepForm/FormPersonalDetails.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StepFormProps } from 'src/@types/stepForm';
+
+const FormPersonalDetails = (props: StepFormProps) => {
+  return <h1>Form personal details</h1>;
+};
+
+export { FormPersonalDetails };

src/pages/StepForm/FormUserDetails.tsx

@@ -0,0 +1,8 @@
+import React, { SetStateAction } from 'react';
+import { StepFormProps } from 'src/@types/stepForm';
+
+const FormUserDetails = (props: StepFormProps) => {
+  return <h1>Form user details</h1>;
+};
+
+export { FormUserDetails };

src/pages/StepForm/Success.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StepFormProps } from 'src/@types/stepForm';
+
+const Success = (props: StepFormProps) => {
+  return <h1>Form user details</h1>;
+};
+
+export { Success };

src/pages/StepForm/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { FormUserDetails } from './FormUserDetails';
+import { FormPersonalDetails } from './FormPersonalDetails';
+import { Confirm } from './Confirm';
+import { Success } from './Success';
+import { StepFormType } from 'src/@types/stepForm';
+
+const initialUserState: StepFormType = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  occupation: '',
+  city: '',
+  bio: '',
+};
+
+const StepForm = () => {
+  const [formData, setFormData] = useState(initialUserState);
+  const [step, setStep] = useState(0);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  switch (step) {
+    case 0:
+      return (
+        <FormUserDetails
+          step={step}
+          setStep={setStep}
+          onChange={onChange}
+          formData={formData}
+        />
+      );
+    case 1:
+      return (
+        <FormPersonalDetails
+          step={step}
+          setStep={setStep}
+          onChange={onChange}
+          formData={formData}
+        />
+      );
+    case 3:
+      return <Confirm step={step} setStep={setStep} formData={formData} />;
+    case 4:
+      return <Success />;
+
+    default:
+      return <div>StepForm Error</div>;
+  }
+};
+
+export default StepForm;