Skip to content

Commit 0b246c9

Browse files
tduyngtduyng
committed
Update stepform routes
1 parent 16c03c8 commit 0b246c9

File tree

10 files changed

+291
-107
lines changed

10 files changed

+291
-107
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"bootstrap": "5.0.0-alpha1",
6+
"@material-ui/core": "^4.11.0",
77
"immer": "^7.0.14",
88
"react": "^17.0.1",
99
"react-dom": "^17.0.1",
@@ -58,4 +58,4 @@
5858
"last 1 safari version"
5959
]
6060
}
61-
}
61+
}

‎public/index.html‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
7+
8+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
<meta name="theme-color" content="#000000" />
11+
<meta name="description" content="Web site created using create-react-app" />
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
1919
Notice the use of %PUBLIC_URL% in the tags above.
2020
It will be replaced with the URL of the `public` folder during the build.
2121
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,13 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
27+
<title>React App</title>
28+
</head>
29+
30+
<body>
31+
<noscript>You need to enable JavaScript to run this app.</noscript>
32+
<div id="root"></div>
33+
<!--
3334
This HTML file is a template.
3435
If you open it directly in the browser, you will see an empty page.
3536
@@ -39,5 +40,6 @@
3940
To begin the development, run `npm start` or `yarn start`.
4041
To create a production bundle, use `npm run build` or `yarn build`.
4142
-->
42-
</body>
43-
</html>
43+
</body>
44+
45+
</html>

‎src/@types/stepForm.d.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { SetStateAction } from 'react';
2+
3+
interface StepFormType {
4+
firstName: string;
5+
lastName: string;
6+
email: string;
7+
occupation?: string;
8+
city?: string;
9+
bio?: string;
10+
}
11+
12+
interface StepFormProps {
13+
step?: number;
14+
setStep?: React.Dispatch<SetStateAction<number>>;
15+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
16+
formData?: StepForm;
17+
}

‎src/assets/scss/index.scss‎

Lines changed: 3 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,6 @@
1-
@import "node_modules/bootstrap/scss/functions";
2-
@import "node_modules/bootstrap/scss/variables";
3-
@import "node_modules/bootstrap/scss/mixins";
4-
@import "node_modules/bootstrap/scss/reboot";
5-
@import "node_modules/bootstrap/scss/containers";
6-
@import "node_modules/bootstrap/scss/grid";
7-
@import "node_modules/bootstrap/scss/utilities";
8-
@import "node_modules/bootstrap/scss/utilities/api";
9-
@import "node_modules/bootstrap/scss/forms";
10-
@import "node_modules/bootstrap/scss/buttons";
11-
@import "node_modules/bootstrap/scss/tables";
12-
13-
@font-face {
14-
font-family: "Open Sans";
15-
src: url(../fonts/OpenSans-Light.ttf);
16-
font-weight: 300;
17-
}
18-
@font-face {
19-
font-family: "Open Sans";
20-
src: url(../fonts/OpenSans-LightItalic.ttf);
21-
font-weight: 300;
22-
font-style: italic;
23-
}
24-
@font-face {
25-
font-family: "Open Sans";
26-
src: url(../fonts/OpenSans-Regular.ttf);
27-
font-weight: 400;
28-
}
29-
@font-face {
30-
font-family: "Open Sans";
31-
src: url(../fonts/OpenSans-Italic.ttf);
32-
font-weight: 400;
33-
font-style: italic;
34-
}
35-
@font-face {
36-
font-family: "Open Sans";
37-
src: url(../fonts/OpenSans-SemiBold.ttf);
38-
font-weight: 600;
39-
}
40-
@font-face {
41-
font-family: "Open Sans";
42-
src: url(../fonts/OpenSans-SemiBoldItalic.ttf);
43-
font-weight: 600;
44-
font-style: italic;
45-
}
46-
@font-face {
47-
font-family: "Open Sans";
48-
src: url(../fonts/OpenSans-Bold.ttf);
49-
font-weight: 700;
50-
}
51-
@font-face {
52-
font-family: "Open Sans";
53-
src: url(../fonts/OpenSans-BoldItalic.ttf);
54-
font-weight: 700;
55-
font-style: italic;
56-
}
57-
@font-face {
58-
font-family: "Open Sans";
59-
src: url(../fonts/OpenSans-ExtraBold.ttf);
60-
font-weight: 800;
61-
}
62-
@font-face {
63-
font-family: "Open Sans";
64-
src: url(../fonts/OpenSans-ExtraBoldItalic.ttf);
65-
font-weight: 800;
66-
font-style: italic;
67-
}
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
682

693
body {
70-
font-family: "Open Sans", sans-serif;
71-
font-weight: 400;
4+
font-family: 'Roboto', sans-serif;
5+
font-weight: 300;
726
}

src/components/Loading/Loading.tsx renamed to src/components/Loading/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { Spinner } from './Loading.styles';
33

4-
export default function Loading() {
4+
export const Loading = () => {
55
return (
66
<div>
77
<Spinner />
88
</div>
99
);
10-
}
10+
};

‎src/contstants/paths.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const PATH = {
2+
HOME: '/',
3+
PRODUCT: '/product',
4+
LOGIN: '/login',
5+
STEP_FORM: '/step-form',
6+
};

‎src/routes/HomeRoutes.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { lazy, Suspense } from 'react';
22
import { Switch } from 'react-router-dom';
3-
import Loading from 'src/components/Loading/Loading';
4-
const Home = lazy(() => import('src/pages/Home/Home'));
3+
import { Loading } from 'src/components/Loading';
4+
const Home = lazy(() => import('src/pages/Home'));
55

66
const HomeRoutes = () => {
77
return (
@@ -13,4 +13,4 @@ const HomeRoutes = () => {
1313
);
1414
};
1515

16-
export default HomeRoutes;
16+
export { HomeRoutes };

‎src/routes/StepFormRoutes.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { lazy, Suspense } from 'react';
2+
import { Route, Switch } from 'react-router-dom';
3+
import { PATH } from 'src/contstants/paths';
4+
import { Loading } from 'src/components/Loading';
5+
6+
const StepForm = lazy(() => import('src/pages/StepForm'));
7+
8+
const StepFormRoutes = () => {
9+
return (
10+
<Switch>
11+
<Route
12+
path={PATH.STEP_FORM}
13+
component={() => (
14+
<Suspense fallback={<Loading />}>
15+
<StepForm></StepForm>
16+
</Suspense>
17+
)}
18+
/>
19+
</Switch>
20+
);
21+
};
22+
23+
export { StepFormRoutes };

‎src/routes/routes.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react';
22
import { BrowserRouter } from 'react-router-dom';
3-
import HomeRoutes from './HomeRoutes';
3+
import { HomeRoutes } from './HomeRoutes';
4+
import { StepFormRoutes } from './StepFormRoutes';
45

56
const Routes = () => {
67
return (
78
<BrowserRouter>
89
<HomeRoutes></HomeRoutes>
10+
<StepFormRoutes />
911
</BrowserRouter>
1012
);
1113
};

0 commit comments

Comments
 (0)