Finish form

Author: tduyng

src/pages/StepForm/Confirm.tsx

@@ -1,19 +1,65 @@
+import {
+  AppBar,
+  Button,
+  Dialog,
+  List,
+  ListItem,
+  ListItemText,
+} from '@material-ui/core';
 import React from 'react';
 import { StepFormProps } from 'src/@types/stepForm';
+import { ThemeProvider } from '@material-ui/styles';
+import { theme } from './FormUserDetails';
 
 const Confirm = (props: StepFormProps) => {
-  const { step, formData } = props;
+  const { step, setStep, formData } = props;
+  const { firstName, lastName, email, occupation, city, bio } = formData;
+  const nextStep = e => {
+    e.preventDefault();
+    setStep(step + 1);
+  };
+  const prevStep = e => {
+    e.preventDefault();
+    setStep(step - 1);
+  };
+
   return (
-    <div>
-      <h2>Confirm</h2>
-      <h2>Step {step}</h2>
-      <li>FirstName: {formData.firstName}</li>
-      <li>LastName: {formData.lastName}</li>
-      <li>Email: {formData.email}</li>
-      <li>Occupation: {formData.occupation}</li>
-      <li>City: {formData.city}</li>
-      <li>Bio: {formData.bio}</li>
-    </div>
+    <ThemeProvider theme={theme}>
+      <>
+        <Dialog open fullWidth maxWidth="sm">
+          <AppBar title="Confirm User Data" />
+          <List>
+            <ListItem>
+              <ListItemText primary="First Name" secondary={firstName} />
+            </ListItem>
+            <ListItem>
+              <ListItemText primary="Last Name" secondary={lastName} />
+            </ListItem>
+            <ListItem>
+              <ListItemText primary="Email" secondary={email} />
+            </ListItem>
+            <ListItem>
+              <ListItemText primary="Occupation" secondary={occupation} />
+            </ListItem>
+            <ListItem>
+              <ListItemText primary="City" secondary={city} />
+            </ListItem>
+            <ListItem>
+              <ListItemText primary="Bio" secondary={bio} />
+            </ListItem>
+          </List>
+          <br />
+
+          <Button color="secondary" variant="contained" onClick={prevStep}>
+            Back
+          </Button>
+
+          <Button color="primary" variant="contained" onClick={nextStep}>
+            Confirm & Continue
+          </Button>
+        </Dialog>
+      </>
+    </ThemeProvider>
   );
 };
 

src/pages/StepForm/Success.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import { StepFormProps } from 'src/@types/stepForm';
+import { ThemeProvider } from '@material-ui/styles';
+import { theme } from './FormUserDetails';
+import { AppBar, Dialog } from '@material-ui/core';
 
 const Success = props => {
-  const { formData } = props;
   return (
-    <div>
-      <h2>Success</h2>
-      <li>FirstName: {formData.firstName}</li>
-      <li>LastName: {formData.lastName}</li>
-      <li>Email: {formData.email}</li>
-      <li>Occupation: {formData.occupation}</li>
-      <li>City: {formData.city}</li>
-      <li>Bio: {formData.bio}</li>
-    </div>
+    <ThemeProvider theme={theme}>
+      <>
+        <Dialog open fullWidth maxWidth="sm">
+          <AppBar title="Success" />
+          <h1>Thank You For Your Submission</h1>
+          <p>You will get an email with further instructions.</p>
+        </Dialog>
+      </>
+    </ThemeProvider>
   );
 };