Skip to content

Commit c6afebf

Browse files
kubkkubk
committed
Bump dependencies
1 parent b6b09e2 commit c6afebf

17 files changed

+4375
-4976
lines changed

‎.prettierrc.js

-4
This file was deleted.

‎README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
# react-mobx-starter
22

3-
This project is a boilerplate for a quickstart development React applications.
3+
This project is a boilerplate for a quickstart development React applications. [Demo](https://react-mobx-starter-rfnnfku4b.now.sh/)
44

55
### 🎁 What’s Inside?
66
- Create React App 3 + TypeScript 3.7
77
- [MobX](https://github.com/mobxjs/mobx) - Simple, scalable state management
8-
- [React Hot Loader](https://github.com/gaearon/react-hot-loader) - allows React components to be live reloaded without the loss of state
98
- [Redux DevTools](https://github.com/zalmoxisus/mobx-remotedev) - Redux DevTools extension for MobX, works only in dev mode ([screenshot](https://imgur.com/a/lSbddzD))
109
- [React Router](https://github.com/ReactTraining/react-router) - The most popular routing library for React
1110
- Prettier

‎package-lock.json

+4,264-4,881
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+27-29
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,35 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@types/classnames": "^2.2.11",
7-
"@types/history": "^4.7.8",
8-
"@types/jest": "^26.0.15",
9-
"@types/node": "^14.14.9",
10-
"@types/react": "^17.0.0",
11-
"@types/react-dom": "^17.0.0",
12-
"@types/react-router": "^5.1.8",
13-
"@types/react-router-dom": "^5.1.6",
14-
"@types/react-transition-group": "^4.4.0",
15-
"classnames": "^2.2.6",
16-
"gh-pages": "^3.1.0",
17-
"mobx": "^6.0.4",
18-
"mobx-logger": "^0.7.1",
19-
"mobx-react-lite": "^3.1.6",
6+
"@types/classnames": "^2.3.0",
7+
"@types/history": "^4.7.9",
8+
"@types/jest": "^27.0.1",
9+
"@types/node": "^16.7.13",
10+
"@types/react": "^17.0.20",
11+
"@types/react-dom": "^17.0.9",
12+
"@types/react-router": "^5.1.16",
13+
"@types/react-router-dom": "^5.1.8",
14+
"@types/react-transition-group": "^4.4.2",
15+
"classnames": "^2.3.1",
16+
"gh-pages": "^3.2.3",
17+
"mobx": "^6.3.3",
18+
"mobx-react-lite": "^3.2.1",
2019
"mobx-remotedev": "^0.3.6",
21-
"mobx-utils": "^6.0.1",
22-
"nanoid": "^3.1.18",
23-
"node-sass": "^4.14.1",
20+
"mobx-utils": "^6.0.4",
21+
"nanoid": "^3.1.25",
22+
"node-sass": "^6.0.1",
2423
"normalize.css": "^8.0.1",
25-
"npm-check-updates": "^10.2.2",
26-
"prettier": "^2.2.0",
27-
"react": "^17.0.1",
28-
"react-dom": "^17.0.1",
29-
"react-hot-loader": "^4.13.0",
30-
"react-loading-skeleton": "^2.1.1",
31-
"react-router": "^5.2.0",
32-
"react-router-dom": "^5.2.0",
33-
"react-scripts": "^4.0.0",
34-
"react-transition-group": "^4.4.1",
35-
"ts-essentials": "^7.0.1",
36-
"typescript": "^4.0.5"
24+
"npm-check-updates": "^11.8.5",
25+
"prettier": "^2.3.2",
26+
"react": "^17.0.2",
27+
"react-dom": "^17.0.2",
28+
"react-loading-skeleton": "^2.2.0",
29+
"react-router": "^5.2.1",
30+
"react-router-dom": "^5.3.0",
31+
"react-scripts": "^4.0.3",
32+
"react-transition-group": "^4.4.2",
33+
"ts-essentials": "^8.1.0",
34+
"typescript": "^4.4.2"
3735
},
3836
"scripts": {
3937
"cs": "./node_modules/.bin/prettier src/**/*.{ts,tsx,js,jsx,scss} --write --single-quote --jsx-single-quote",

‎src/api/task-api.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export interface Task {
1111
}
1212

1313
const sleep = (ms: number) => {
14-
return new Promise(resolve => setTimeout(resolve, ms));
14+
return new Promise((resolve) => setTimeout(resolve, ms));
1515
};
1616

1717
export class TaskApi {
@@ -20,7 +20,7 @@ export class TaskApi {
2020
return [
2121
{ id: '1', name: 'John Doe' },
2222
{ id: '2', name: 'Jane Snow' },
23-
{ id: '3', name: 'Richard Roe' }
23+
{ id: '3', name: 'Richard Roe' },
2424
];
2525
}
2626

@@ -31,20 +31,20 @@ export class TaskApi {
3131
id: '1',
3232
userId: '1',
3333
title: 'Create awesome application!',
34-
isDone: true
34+
isDone: true,
3535
},
3636
{
3737
id: '2',
3838
userId: '1',
3939
title: 'Read the documentation',
40-
isDone: false
40+
isDone: false,
4141
},
4242
{
4343
id: '3',
4444
userId: '2',
4545
title: 'Star MobX repository',
46-
isDone: false
47-
}
46+
isDone: false,
47+
},
4848
];
4949
}
5050
}

‎src/components/app/app.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
2-
import { hot } from 'react-hot-loader/root';
32
import { Main } from '../main/main';
43
import { BrowserRouter, Route, Switch } from 'react-router-dom';
54

6-
export const App = hot(() => {
5+
export const App = () => {
76
return (
87
<BrowserRouter>
98
<Switch>
@@ -12,4 +11,4 @@ export const App = hot(() => {
1211
</Switch>
1312
</BrowserRouter>
1413
);
15-
});
14+
};

‎src/components/assignee-selector/assignee-selector.tsx

+20-18
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,23 @@ type Props = {
88
users: User[];
99
};
1010

11-
export const AssigneeSelector = observer(({ onSelect, users, value }: Props) => {
12-
return (
13-
<select
14-
value={value}
15-
onChange={e => {
16-
const userId = e.target.value || null;
17-
onSelect(userId);
18-
}}
19-
>
20-
<option value="">No assignee</option>
21-
{users.map((user, i) => (
22-
<option key={i} value={user.id}>
23-
{user.name}
24-
</option>
25-
))}
26-
</select>
27-
);
28-
});
11+
export const AssigneeSelector = observer(
12+
({ onSelect, users, value }: Props) => {
13+
return (
14+
<select
15+
value={value}
16+
onChange={(e) => {
17+
const userId = e.target.value || null;
18+
onSelect(userId);
19+
}}
20+
>
21+
<option value=''>No assignee</option>
22+
{users.map((user, i) => (
23+
<option key={i} value={user.id}>
24+
{user.name}
25+
</option>
26+
))}
27+
</select>
28+
);
29+
}
30+
);

‎src/components/main/main.module.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@
3232
}
3333
}
3434

35-
.tasks, .users {
35+
.tasks,
36+
.users {
3637
@media (max-width: 992px) {
3738
width: 90%;
3839
}

‎src/components/tasks/tasks.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const Tasks = observer(() => {
3131

3232
{taskStore.usersLoading && (
3333
<div className={styles.tasks}>
34-
{[1, 2, 3].map(i => (
34+
{[1, 2, 3].map((i) => (
3535
<div key={i} className={styles.task}>
3636
<span className={styles.skeleton}>
3737
<Skeleton />
@@ -45,7 +45,10 @@ export const Tasks = observer(() => {
4545
<TransitionGroup className={styles.tasks}>
4646
{taskStore.tasks.map((task, i) => (
4747
<CSSTransition key={task.id} timeout={300} classNames={'item'}>
48-
<div key={i} className={cn(styles.task, { [styles.done]: task.isDone })}>
48+
<div
49+
key={i}
50+
className={cn(styles.task, { [styles.done]: task.isDone })}
51+
>
4952
<span className={styles.taskInfo}>
5053
<CheckCircle
5154
onClick={() => taskStore.toggleDone(task.id)}
@@ -56,22 +59,22 @@ export const Tasks = observer(() => {
5659
<input
5760
className={styles.input}
5861
value={task.title}
59-
ref={input => {
62+
ref={(input) => {
6063
if (i === 0) {
6164
rememberElement(input);
6265
}
6366
}}
64-
placeholder="Type in the title of the task!"
67+
placeholder='Type in the title of the task!'
6568
readOnly={task.isDone}
66-
onChange={e => {
69+
onChange={(e) => {
6770
taskStore.editTask(task.id, 'title', e.target.value);
6871
}}
6972
/>
7073
</span>
7174

7275
<AssigneeSelector
7376
value={task.userId || ''}
74-
onSelect={userId => taskStore.assign(task.id, userId)}
77+
onSelect={(userId) => taskStore.assign(task.id, userId)}
7578
users={taskStore.users}
7679
/>
7780

‎src/components/users/users.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const Users = observer(() => {
2929

3030
{taskStore.usersLoading && (
3131
<div className={styles.users}>
32-
{[1, 2, 3].map(i => (
32+
{[1, 2, 3].map((i) => (
3333
<div key={i} className={styles.user}>
3434
<span className={styles.skeleton}>
3535
<Skeleton />
@@ -42,23 +42,25 @@ export const Users = observer(() => {
4242
{!taskStore.usersLoading && (
4343
<TransitionGroup className={styles.users}>
4444
{taskStore.usersWithTasks.map((user, i) => (
45-
<CSSTransition key={user.id} timeout={300} classNames="item">
45+
<CSSTransition key={user.id} timeout={300} classNames='item'>
4646
<div className={styles.user} key={i}>
4747
<input
48-
ref={input => {
48+
ref={(input) => {
4949
if (i === 0) {
5050
rememberElement(input);
5151
}
5252
}}
5353
className={styles.input}
5454
value={user.name}
5555
placeholder="Type in user's name!"
56-
onChange={event => {
56+
onChange={(event) => {
5757
taskStore.editUser(user.id, 'name', event.target.value);
5858
}}
5959
/>
6060

61-
<p className={styles.taskCompleted}>Completed {user.taskCompleted}</p>
61+
<p className={styles.taskCompleted}>
62+
Completed {user.taskCompleted}
63+
</p>
6264
<p className={styles.taskCount}>Total {user.taskTotal}</p>
6365

6466
<img

‎src/hooks/use-focus.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@ export const useFocus = <T extends HTMLElement>() => {
1212
setTimeout(() => {
1313
ref.current?.focus();
1414
});
15-
}
15+
},
1616
};
1717
};

‎src/icons/check-circle.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React, { SVGAttributes } from 'react';
22

33
export const CheckCircle = (props: SVGAttributes<SVGElement>) => {
44
return (
5-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
6-
<path d="M11.48,23.5h0a11.5,11.5,0,0,1,0-23h0a11.38,11.38,0,0,1,4.67,1,1,1,0,0,1-.85,1.91,9.31,9.31,0,0,0-3.82-.81h0a9.41,9.41,0,0,0,0,18.82h0A9.4,9.4,0,0,0,20.87,12V11A1,1,0,1,1,23,11v1A11.49,11.49,0,0,1,11.48,23.5Z" />
7-
<path d="M11.48,15.14a1,1,0,0,1-.74-.31L7.61,11.7a1,1,0,0,1,1.48-1.48l2.39,2.4L22.22,1.86a1,1,0,0,1,1.48,1.48L12.22,14.84A1,1,0,0,1,11.48,15.14Z" />
5+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
6+
<path d='M11.48,23.5h0a11.5,11.5,0,0,1,0-23h0a11.38,11.38,0,0,1,4.67,1,1,1,0,0,1-.85,1.91,9.31,9.31,0,0,0-3.82-.81h0a9.41,9.41,0,0,0,0,18.82h0A9.4,9.4,0,0,0,20.87,12V11A1,1,0,1,1,23,11v1A11.49,11.49,0,0,1,11.48,23.5Z' />
7+
<path d='M11.48,15.14a1,1,0,0,1-.74-.31L7.61,11.7a1,1,0,0,1,1.48-1.48l2.39,2.4L22.22,1.86a1,1,0,0,1,1.48,1.48L12.22,14.84A1,1,0,0,1,11.48,15.14Z' />
88
</svg>
99
);
1010
};

‎src/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,3 @@ const render = () => (
1212
);
1313

1414
ReactDOM.render(render(), document.getElementById('root'));
15-

‎src/store/stores.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ import { TaskStore } from './task-store';
22
import { TaskApi } from '../api/task-api';
33

44
export const stores = {
5-
taskStore: new TaskStore(new TaskApi())
5+
taskStore: new TaskStore(new TaskApi()),
66
};

‎src/store/task-store.test.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,21 @@ const taskApiMock: TaskApi = {
77
return [
88
{ id: '1', name: 'John Doe' },
99
{ id: '2', name: 'Jane Snow' },
10-
{ id: '3', name: 'Richard Roe' }
10+
{ id: '3', name: 'Richard Roe' },
1111
];
1212
},
1313
async getTasks() {
1414
return [
1515
{ id: '1', userId: '1', title: 'Read the documentation', isDone: true },
16-
{ id: '2', userId: '1', title: 'Create awesome application', isDone: false },
17-
{ id: '3', userId: '2', title: 'Star MobX repository', isDone: false }
16+
{
17+
id: '2',
18+
userId: '1',
19+
title: 'Create awesome application',
20+
isDone: false,
21+
},
22+
{ id: '3', userId: '2', title: 'Star MobX repository', isDone: false },
1823
];
19-
}
24+
},
2025
};
2126

2227
describe('TaskStore', () => {

0 commit comments

Comments
 (0)