Skip to content

Commit 2da60f9

Browse files
ryota-murakamiryota-murakami
committed
tmp
1 parent 85c5de6 commit 2da60f9

File tree

9 files changed

+107
-151
lines changed

9 files changed

+107
-151
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
<body>
1313
<noscript>You need to enable JavaScript to run this app.</noscript>
1414
<div id="root"></div>
15-
<script type="module" src="/src/index.tsx"></script>
15+
<script type="module" src="/src/main.tsx"></script>
1616
</body>
1717
</html>

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
]
1515
},
1616
"dependencies": {
17-
"@reach/router": "^1.3.4",
1817
"react": "^18.2.0",
1918
"react-dom": "^18.2.0",
19+
"react-router-dom": "^6.3.0",
2020
"recoil": "^0.7.4",
2121
"styled-components": "^5.3.5"
2222
},
@@ -31,7 +31,6 @@
3131
"@testing-library/user-event": "^14.2.1",
3232
"@types/jest": "^28.1.3",
3333
"@types/node": "^18.0.0",
34-
"@types/reach__router": "^1.3.10",
3534
"@types/react": "^18.0.14",
3635
"@types/react-dom": "^18.0.5",
3736
"@types/styled-components": "^5.1.25",

‎src/App/TodoList/index.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import type { ReactElement } from 'react'
22
import React from 'react'
3+
import { useLocation } from 'react-router-dom'
34
import { useRecoilState } from 'recoil'
45

5-
import type { AppState, Routes, Todo } from '../../dataStructure'
6+
import type { AppState, Todo } from '../../dataStructure'
67
import { recoilState } from '../../dataStructure'
78

89
import Item from './Item'
910
import { Layout } from './style'
1011

11-
interface Props {
12-
path: Routes
13-
}
14-
15-
const TodoList: React.FC<Props> = ({ path }) => {
12+
const TodoList: React.FC = () => {
13+
const { pathname } = useLocation()
1614
const [appState, setAppState] = useRecoilState<AppState>(recoilState)
1715

1816
function toggleAllCheckbox(e: React.ChangeEvent<HTMLInputElement>): void { /* eslint-disable-line prettier/prettier */
@@ -35,7 +33,7 @@ const TodoList: React.FC<Props> = ({ path }) => {
3533
<ul className="todo-list" data-testid="todo-list">
3634
{appState.todoList
3735
.filter((t: Todo): boolean => {
38-
switch (path) {
36+
switch (pathname) {
3937
case '/':
4038
return true
4139
case '/active':

‎src/App/TodoMVC.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useEffect } from 'react'
2+
import { useRecoilValue } from 'recoil'
3+
4+
import type { AppState } from '../dataStructure'
5+
import { recoilState, LocalStorageKey } from '../dataStructure'
6+
7+
import Copyright from './Copyright'
8+
import NewTodoInput from './NewTodoInput'
9+
import { Layout } from './style'
10+
import TodoList from './TodoList'
11+
import UnderBar from './UnderBar'
12+
import { BrowserRouter, Routes, Route } from 'react-router-dom'
13+
import { RecoilRoot } from 'recoil'
14+
import { NotFound } from '../NotFound'
15+
16+
17+
const TodoMVC: React.FC = () => {
18+
const appState = useRecoilValue<AppState>(recoilState)
19+
20+
// if appState has changes, save it LocalStorage.
21+
useEffect((): void => {
22+
window.localStorage.setItem(
23+
LocalStorageKey.APP_STATE,
24+
JSON.stringify(appState) // convert JavaScript Object to string
25+
)
26+
}, [appState])
27+
28+
return (
29+
<Layout>
30+
<section className="todoapp">
31+
<NewTodoInput />
32+
{appState.todoList.length ? (
33+
<>
34+
<TodoList />
35+
<UnderBar />
36+
</>
37+
) : null}
38+
</section>
39+
<Copyright />
40+
</Layout>
41+
)
42+
}
43+
44+
export default TodoMVC

‎src/App/UnderBar/FilterLink/index.tsx

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
1-
import { Link } from '@reach/router'
21
import React from 'react'
2+
import { Link, useLocation } from 'react-router-dom'
33

4-
import type { Routes } from '../../../dataStructure'
5-
6-
interface Props {
7-
path: Routes
8-
}
9-
10-
const FilterLink: React.FC<Props> = ({ path }) => {
4+
const FilterLink: React.FC = () => {
5+
const { pathname } = useLocation()
116
return (
127
<ul className="filters">
138
<li>
149
<Link
1510
data-cy="all-filter"
16-
className={path === '/' ? 'selected' : ''}
11+
className={pathname === '/' ? 'selected' : ''}
1712
to="/"
1813
>
1914
All
@@ -22,7 +17,7 @@ const FilterLink: React.FC<Props> = ({ path }) => {
2217
<li>
2318
<Link
2419
data-cy="active-filter"
25-
className={path === '/active' ? 'selected' : ''}
20+
className={pathname === '/active' ? 'selected' : ''}
2621
to="/active"
2722
>
2823
Active
@@ -31,7 +26,7 @@ const FilterLink: React.FC<Props> = ({ path }) => {
3126
<li>
3227
<Link
3328
data-cy="completed-filter"
34-
className={path === '/completed' ? 'selected' : ''}
29+
className={pathname === '/completed' ? 'selected' : ''}
3530
to="/completed"
3631
>
3732
Completed

‎src/App/UnderBar/index.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
import React from 'react'
22
import { useRecoilState } from 'recoil'
33

4-
import type { AppState, Routes, Todo } from '../../dataStructure'
4+
import type { AppState, Todo } from '../../dataStructure'
55
import { recoilState } from '../../dataStructure'
66

77
import FilterLink from './FilterLink'
88
import { Layout } from './style'
99

10-
interface Props {
11-
path: Routes
12-
}
13-
14-
const UnderBar: React.FC<Props> = ({ path }) => {
10+
const UnderBar: React.FC = () => {
1511
const [appState, setAppState] = useRecoilState<AppState>(recoilState)
16-
const doneCount: number = appState.todoList.filter(t => t.completed === true).length /* eslint-disable-line prettier/prettier */
17-
const yetCount: number = appState.todoList.filter(t => t.completed === false).length /* eslint-disable-line prettier/prettier */
12+
const completed: number = appState.todoList.filter(t => t.completed === true).length /* eslint-disable-line prettier/prettier */
13+
const backlog: number = appState.todoList.filter(t => t.completed === false).length /* eslint-disable-line prettier/prettier */
1814

1915
function clearCompleted(): void {
2016
setAppState({
@@ -26,12 +22,12 @@ const UnderBar: React.FC<Props> = ({ path }) => {
2622
<Layout>
2723
<footer className="footer">
2824
<span className="todo-count">
29-
<strong data-cy="remaining-uncompleted-todo-count">{yetCount}</strong>{' '}
25+
<strong data-cy="remaining-uncompleted-todo-count">{backlog}</strong>{' '}
3026
item left
3127
</span>
32-
<FilterLink path={path} />
28+
<FilterLink />
3329

34-
{doneCount > 0 && (
30+
{completed > 0 && (
3531
<button
3632
onClick={clearCompleted}
3733
className="clear-completed"

‎src/App/index.tsx

Lines changed: 15 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,19 @@
1-
import type { RouteComponentProps } from '@reach/router'
2-
import React, { useEffect } from 'react'
3-
import { useRecoilValue } from 'recoil'
1+
import ErrorBoundary from '../ErrorBoundary'
2+
import { RecoilRoot } from 'recoil'
3+
import { BrowserRouter, Routes, Route } from 'react-router-dom'
4+
import TodoMVC from './TodoMVC'
5+
import { NotFound } from '../NotFound'
46

5-
import type { AppState, Routes } from '../dataStructure'
6-
import { recoilState, LocalStorageKey } from '../dataStructure'
7+
const App: React.FC = () => (<ErrorBoundary>
8+
<BrowserRouter>
9+
<RecoilRoot>
10+
<Routes>
11+
<Route path="/" element={<TodoMVC />} />
12+
<Route path="*" element={<NotFound />} />
13+
</Routes>
14+
</RecoilRoot>
15+
</BrowserRouter>
16+
</ErrorBoundary>)
717

8-
import Copyright from './Copyright'
9-
import NewTodoInput from './NewTodoInput'
10-
import { Layout } from './style'
11-
import TodoList from './TodoList'
12-
import UnderBar from './UnderBar'
13-
14-
interface Props {
15-
path: Routes
16-
}
17-
18-
const App: React.FC<Props & RouteComponentProps> = ({ path }) => {
19-
const appState = useRecoilValue<AppState>(recoilState)
20-
21-
// if appState has changes, save it LocalStorage.
22-
useEffect((): void => {
23-
window.localStorage.setItem(
24-
LocalStorageKey.APP_STATE,
25-
JSON.stringify(appState) // convert JavaScript Object to string
26-
)
27-
}, [appState])
28-
29-
return (
30-
<Layout>
31-
<section className="todoapp">
32-
<NewTodoInput />
33-
{appState.todoList.length ? (
34-
<>
35-
<TodoList path={path} />
36-
<UnderBar path={path} />
37-
</>
38-
) : null}
39-
</section>
40-
<Copyright />
41-
</Layout>
42-
)
43-
}
4418

4519
export default App

‎src/index.tsx renamed to ‎src/main.tsx

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Router } from '@reach/router'
1+
22
import React from 'react'
33
import ReactDOM from 'react-dom/client'
44
import { RecoilRoot } from 'recoil'
@@ -9,15 +9,6 @@ import ErrorBoundary from './ErrorBoundary'
99
import { NotFound } from './NotFound'
1010

1111
const root = ReactDOM.createRoot(document.getElementById('root')!)
12-
root.render(
13-
<ErrorBoundary>
14-
<RecoilRoot>
15-
<Router>
16-
<App path="/" />
17-
<App path="/active" />
18-
<App path="/completed" />
19-
<NotFound default />
20-
</Router>
21-
</RecoilRoot>
22-
</ErrorBoundary>
23-
)
12+
13+
root.render(<App />)
14+

0 commit comments

Comments
 (0)