Skip to content
This repository was archived by the owner on Feb 19, 2021. It is now read-only.

Commit 166392b

Browse files
asos-jamesinnesasos-jamesinnes
committed
imp redux-rsk react-strap
1 parent 624b958 commit 166392b

File tree

12 files changed

+1253
-651
lines changed

12 files changed

+1253
-651
lines changed

‎package-lock.json‎

Lines changed: 994 additions & 634 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,26 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@types/jest": "24.0.18",
7-
"@types/node": "12.7.2",
8-
"@types/react": "16.9.2",
9-
"@types/react-dom": "16.9.0",
10-
"react": "^16.9.0",
11-
"react-dom": "^16.9.0",
12-
"react-scripts": "3.1.1",
13-
"typescript": "3.5.3"
6+
"@manaflair/redux-batch": "^1.0.0",
7+
"@types/bootstrap": "^4.3.1",
8+
"@types/jest": "24.0.16",
9+
"@types/node": "^12.6.8",
10+
"@types/react": "16.8.24",
11+
"@types/react-dom": "16.8.5",
12+
"@types/react-redux": "^7.1.2",
13+
"@types/redux": "^3.6.0",
14+
"bootstrap": "^4.3.1",
15+
"lodash": "^4.17.15",
16+
"react": "^16.8.6",
17+
"react-bootstrap": "^1.0.0-beta.11",
18+
"react-dom": "^16.8.6",
19+
"react-redux": "^7.1.0",
20+
"react-scripts": "3.0.1",
21+
"redux": "^4.0.4",
22+
"redux-logger": "^3.0.6",
23+
"redux-starter-kit": "^0.6.3",
24+
"typescript": "3.5.3",
25+
"uuid": "^3.3.2"
1426
},
1527
"scripts": {
1628
"start": "react-scripts start",
@@ -32,5 +44,9 @@
3244
"last 1 firefox version",
3345
"last 1 safari version"
3446
]
47+
},
48+
"devDependencies": {
49+
"@types/redux-logger": "^3.0.7",
50+
"@types/uuid": "^3.4.5"
3551
}
3652
}

‎public/index.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,15 @@
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>
27+
28+
<!-- Bootstrap CSS -->
29+
<link
30+
rel="stylesheet"
31+
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
32+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
33+
crossorigin="anonymous"
34+
/>
35+
<title>Todo App</title>
2836
</head>
2937
<body>
3038
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"src": "favicon.ico",
77
"sizes": "64x64 32x32 24x24 16x16",
88
"type": "image/x-icon"
9-
},
9+
}
1010
],
1111
"start_url": ".",
1212
"display": "standalone",

‎src/App.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1-
import React from 'react';
2-
import './App.css';
1+
import React from "react";
2+
import "./App.css";
3+
import { Jumbotron, Container } from "react-bootstrap";
4+
import { Provider } from "react-redux";
5+
import store from "./redux/configureStore";
6+
import TodoList from "./components/TodoList";
7+
import TodoAdd from "./components/TodoAdd";
38

49
const App: React.FC = () => {
510
return (
6-
<div className="App">
7-
8-
</div>
11+
<Provider store={store}>
12+
<div className="App">
13+
<Container className="p-3">
14+
<Jumbotron>
15+
<h1 className="header">Todo App</h1>
16+
<TodoList />
17+
<TodoAdd />
18+
</Jumbotron>
19+
</Container>
20+
</div>
21+
</Provider>
922
);
10-
}
23+
};
1124

1225
export default App;

‎src/components/TodoAdd.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React, { useState } from "react";
2+
import { Form, Button } from "react-bootstrap";
3+
import { useDispatch } from "react-redux";
4+
import { addTodo } from "../redux/todosSlice";
5+
import uuid from "uuid";
6+
7+
const TodoAdd = () => {
8+
const dispatch = useDispatch();
9+
const [name, setName] = useState("");
10+
11+
const handleSubmit = (e: any) => {
12+
e.preventDefault();
13+
if (name.trim() === "") return null;
14+
dispatch(
15+
addTodo({
16+
id: uuid(),
17+
name,
18+
complete: false
19+
})
20+
);
21+
setName("");
22+
};
23+
24+
const handleChange = (e: any) => {
25+
setName(e.target.value);
26+
};
27+
28+
return (
29+
<Form onSubmit={handleSubmit}>
30+
<Form.Control
31+
className="p-3"
32+
type="text"
33+
placeholder="Enter new Todo"
34+
value={name}
35+
onChange={handleChange}
36+
/>
37+
38+
<Button type="submit" variant="primary">
39+
Add
40+
</Button>
41+
</Form>
42+
);
43+
};
44+
45+
export default TodoAdd;

‎src/components/TodoItem.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from "react";
2+
import { Form, FormControl, Row, Col } from "react-bootstrap";
3+
import { useDispatch } from "react-redux";
4+
import { toggleTodo, updateNameTodo } from "../redux/todosSlice";
5+
6+
const TodoItem = (props: any) => {
7+
const { id, name, complete } = props.todo;
8+
const dispatch = useDispatch();
9+
10+
const handleNameChange = (e: any) => {
11+
e.preventDefault();
12+
dispatch(updateNameTodo({ id, name: e.target.value }));
13+
};
14+
15+
const handleCompleteChange = (e: any) => {
16+
dispatch(toggleTodo({ id, complete: !complete }));
17+
};
18+
19+
return (
20+
<div className="todos">
21+
<Form>
22+
<Row>
23+
<Col>
24+
<FormControl
25+
className="p-3"
26+
type="text"
27+
placeholder={"name place holder"}
28+
value={name}
29+
onChange={handleNameChange}
30+
/>
31+
</Col>
32+
<Col>
33+
<Form.Check
34+
className="p-3"
35+
id={id}
36+
type="checkbox"
37+
label="Status"
38+
checked={complete}
39+
onChange={handleCompleteChange}
40+
/>
41+
</Col>
42+
</Row>
43+
</Form>
44+
</div>
45+
);
46+
};
47+
48+
export default TodoItem;

‎src/components/TodoList.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import TodoItem from "./TodoItem";
3+
import { useSelector } from "react-redux";
4+
5+
const TodoList = () => {
6+
return (
7+
<>
8+
{useSelector((state: any) => state.todos).map((todo: any) => (
9+
<TodoItem todo={todo} key={todo.id} />
10+
))}
11+
</>
12+
);
13+
};
14+
15+
export default TodoList;

‎src/redux/configureStore.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'
2+
import logger from 'redux-logger'
3+
import { reduxBatch } from '@manaflair/redux-batch'
4+
import preloadedState from './preloadedState';
5+
import reducer from './todosSlice';
6+
7+
const store = configureStore({
8+
reducer: {
9+
todos: reducer,
10+
},
11+
middleware: [...getDefaultMiddleware(), logger],
12+
devTools: process.env.NODE_ENV !== 'production',
13+
preloadedState,
14+
enhancers: [reduxBatch]
15+
})
16+
17+
export default store;

‎src/redux/preloadedState.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import uuid from 'uuid';
2+
3+
const preloadedState = {
4+
todos: [
5+
{
6+
id: uuid(),
7+
name: 'Read a bit',
8+
complete: true
9+
},
10+
{
11+
id: uuid(),
12+
name: 'Do laundry',
13+
complete: false
14+
}
15+
]
16+
};
17+
18+
export default preloadedState;

0 commit comments

Comments
 (0)