Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 19, 2021. It is now read-only.

Commit 166392b

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /