Skip to content

Commit 3085048

Browse files
timdorrtimdorr
committed
Format the examples
1 parent 6b77f13 commit 3085048

File tree

122 files changed

+1138
-1065
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

122 files changed

+1138
-1065
lines changed

‎examples/async/public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<title>Redux Async Example</title>
77
</head>
88
<body>

‎examples/async/src/components/Picker.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,18 @@ import PropTypes from 'prop-types'
44
const Picker = ({ value, onChange, options }) => (
55
<span>
66
<h1>{value}</h1>
7-
<select onChange={e => onChange(e.target.value)}
8-
value={value}>
9-
{options.map(option =>
7+
<select onChange={e => onChange(e.target.value)} value={value}>
8+
{options.map(option => (
109
<option value={option} key={option}>
1110
{option}
12-
</option>)
13-
}
11+
</option>
12+
))}
1413
</select>
1514
</span>
1615
)
1716

1817
Picker.propTypes = {
19-
options: PropTypes.arrayOf(
20-
PropTypes.string.isRequired
21-
).isRequired,
18+
options: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
2219
value: PropTypes.string.isRequired,
2320
onChange: PropTypes.func.isRequired
2421
}

‎examples/async/src/components/Posts.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33

4-
const Posts = ({posts}) => (
4+
const Posts = ({ posts }) => (
55
<ul>
6-
{posts.map((post, i) =>
6+
{posts.map((post, i) => (
77
<li key={i}>{post.title}</li>
8-
)}
8+
))}
99
</ul>
1010
)
1111

‎examples/async/src/containers/App.js

+27-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import React, { Component } from 'react'
22
import PropTypes from 'prop-types'
33
import { connect } from 'react-redux'
4-
import { selectSubreddit, fetchPostsIfNeeded, invalidateSubreddit } from '../actions'
4+
import {
5+
selectSubreddit,
6+
fetchPostsIfNeeded,
7+
invalidateSubreddit
8+
} from '../actions'
59
import Picker from '../components/Picker'
610
import Posts from '../components/Posts'
711

@@ -43,28 +47,32 @@ class App extends Component {
4347
const isEmpty = posts.length === 0
4448
return (
4549
<div>
46-
<Picker value={selectedSubreddit}
47-
onChange={this.handleChange}
48-
options={[ 'reactjs', 'frontend' ]} />
50+
<Picker
51+
value={selectedSubreddit}
52+
onChange={this.handleChange}
53+
options={['reactjs', 'frontend']}
54+
/>
4955
<p>
50-
{lastUpdated &&
56+
{lastUpdated && (
5157
<span>
52-
Last updated at {new Date(lastUpdated).toLocaleTimeString()}.
53-
{' '}
58+
Last updated at {new Date(lastUpdated).toLocaleTimeString()}.{' '}
5459
</span>
55-
}
56-
{!isFetching &&
57-
<button onClick={this.handleRefreshClick}>
58-
Refresh
59-
</button>
60-
}
60+
)}
61+
{!isFetching && (
62+
<button onClick={this.handleRefreshClick}>Refresh</button>
63+
)}
6164
</p>
62-
{isEmpty
63-
? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
64-
: <div style={{ opacity: isFetching ? 0.5 : 1 }}>
65-
<Posts posts={posts} />
66-
</div>
67-
}
65+
{isEmpty ? (
66+
isFetching ? (
67+
<h2>Loading...</h2>
68+
) : (
69+
<h2>Empty.</h2>
70+
)
71+
) : (
72+
<div style={{ opacity: isFetching ? 0.5 : 1 }}>
73+
<Posts posts={posts} />
74+
</div>
75+
)}
6876
</div>
6977
)
7078
}

‎examples/async/src/index.js

+2-5
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,12 @@ import { createLogger } from 'redux-logger'
77
import reducer from './reducers'
88
import App from './containers/App'
99

10-
const middleware = [ thunk ]
10+
const middleware = [thunk]
1111
if (process.env.NODE_ENV !== 'production') {
1212
middleware.push(createLogger())
1313
}
1414

15-
const store = createStore(
16-
reducer,
17-
applyMiddleware(...middleware)
18-
)
15+
const store = createStore(reducer, applyMiddleware(...middleware))
1916

2017
render(
2118
<Provider store={store}>

‎examples/async/src/reducers/index.js

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { combineReducers } from 'redux'
22
import {
3-
SELECT_SUBREDDIT, INVALIDATE_SUBREDDIT,
4-
REQUEST_POSTS, RECEIVE_POSTS
3+
SELECT_SUBREDDIT,
4+
INVALIDATE_SUBREDDIT,
5+
REQUEST_POSTS,
6+
RECEIVE_POSTS
57
} from '../actions'
68

79
const selectedSubreddit = (state = 'reactjs', action) => {
@@ -13,11 +15,14 @@ const selectedSubreddit = (state = 'reactjs', action) => {
1315
}
1416
}
1517

16-
const posts = (state = {
17-
isFetching: false,
18-
didInvalidate: false,
19-
items: []
20-
}, action) => {
18+
const posts = (
19+
state = {
20+
isFetching: false,
21+
didInvalidate: false,
22+
items: []
23+
},
24+
action
25+
) => {
2126
switch (action.type) {
2227
case INVALIDATE_SUBREDDIT:
2328
return {
@@ -43,7 +48,7 @@ const posts = (state = {
4348
}
4449
}
4550

46-
const postsBySubreddit = (state = { }, action) => {
51+
const postsBySubreddit = (state = {}, action) => {
4752
switch (action.type) {
4853
case INVALIDATE_SUBREDDIT:
4954
case RECEIVE_POSTS:

‎examples/counter-ts/public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />

‎examples/counter-ts/src/App.test.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React from 'react';
2-
import { render } from '@testing-library/react';
3-
import { Provider } from 'react-redux';
4-
import { store } from './app/store';
5-
import App from './App';
1+
import React from 'react'
2+
import { render } from '@testing-library/react'
3+
import { Provider } from 'react-redux'
4+
import { store } from './app/store'
5+
import App from './App'
66

77
test('renders learn react link', () => {
88
const { getByText } = render(
99
<Provider store={store}>
1010
<App />
1111
</Provider>
12-
);
12+
)
1313

14-
expect(getByText(/learn/i)).toBeInTheDocument();
15-
});
14+
expect(getByText(/learn/i)).toBeInTheDocument()
15+
})

‎examples/counter-ts/src/app/hooks.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ import type { AppDispatch, RootState } from './store'
33

44
// Use throughout your app instead of plain `useDispatch` and `useSelector`
55
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
6-
export const useAppSelector = useSelector.withTypes<RootState>()
6+
export const useAppSelector = useSelector.withTypes<RootState>()

‎examples/counter-ts/src/app/store.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
2-
import counterReducer from '../features/counter/counterSlice';
1+
import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'
2+
import counterReducer from '../features/counter/counterSlice'
33

44
export const store = configureStore({
55
reducer: {
6-
counter: counterReducer,
7-
},
8-
});
6+
counter: counterReducer
7+
}
8+
})
99

10-
export type AppDispatch = typeof store.dispatch;
11-
export type RootState = ReturnType<typeof store.getState>;
10+
export type AppDispatch = typeof store.dispatch
11+
export type RootState = ReturnType<typeof store.getState>
1212
export type AppThunk<ReturnType = void> = ThunkAction<
1313
ReturnType,
1414
RootState,
1515
unknown,
1616
Action<string>
17-
>;
17+
>

‎examples/counter-ts/src/features/counter/Counter.module.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,9 @@
6969
left: 0;
7070
top: 0;
7171
opacity: 0;
72-
transition: width 1s linear, opacity 0.5s ease 1s;
72+
transition:
73+
width 1s linear,
74+
opacity 0.5s ease 1s;
7375
}
7476

7577
.asyncButton:active:after {

‎examples/counter-ts/src/features/counter/Counter.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import React, { useState } from 'react';
1+
import React, { useState } from 'react'
22

3-
import { useAppSelector, useAppDispatch } from '../../app/hooks';
3+
import { useAppSelector, useAppDispatch } from '../../app/hooks'
44
import {
55
decrement,
66
increment,
77
incrementByAmount,
88
incrementAsync,
99
incrementIfOdd,
10-
selectCount,
11-
} from './counterSlice';
12-
import styles from './Counter.module.css';
10+
selectCount
11+
} from './counterSlice'
12+
import styles from './Counter.module.css'
1313

1414
export function Counter() {
15-
const count = useAppSelector(selectCount);
16-
const dispatch = useAppDispatch();
17-
const [incrementAmount, setIncrementAmount] = useState('2');
15+
const count = useAppSelector(selectCount)
16+
const dispatch = useAppDispatch()
17+
const [incrementAmount, setIncrementAmount] = useState('2')
1818

19-
const incrementValue = Number(incrementAmount) || 0;
19+
const incrementValue = Number(incrementAmount) || 0
2020

2121
return (
2222
<div>
@@ -42,7 +42,7 @@ export function Counter() {
4242
className={styles.textbox}
4343
aria-label="Set increment amount"
4444
value={incrementAmount}
45-
onChange={(e) => setIncrementAmount(e.target.value)}
45+
onChange={e => setIncrementAmount(e.target.value)}
4646
/>
4747
<button
4848
className={styles.button}
@@ -64,5 +64,5 @@ export function Counter() {
6464
</button>
6565
</div>
6666
</div>
67-
);
67+
)
6868
}

‎examples/counter-ts/src/features/counter/counterAPI.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// A mock function to mimic making an async request for data
22
export function fetchCount(amount = 1) {
3-
return new Promise<{ data: number }>((resolve) =>
3+
return new Promise<{ data: number }>(resolve =>
44
setTimeout(() => resolve({ data: amount }), 500)
5-
);
5+
)
66
}

‎examples/counter-ts/src/features/counter/counterSlice.spec.ts

+17-17
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,33 @@ import counterReducer, {
22
CounterState,
33
increment,
44
decrement,
5-
incrementByAmount,
6-
} from './counterSlice';
5+
incrementByAmount
6+
} from './counterSlice'
77

88
describe('counter reducer', () => {
99
const initialState: CounterState = {
1010
value: 3,
11-
status: 'idle',
12-
};
11+
status: 'idle'
12+
}
1313
it('should handle initial state', () => {
1414
expect(counterReducer(undefined, { type: 'unknown' })).toEqual({
1515
value: 0,
16-
status: 'idle',
17-
});
18-
});
16+
status: 'idle'
17+
})
18+
})
1919

2020
it('should handle increment', () => {
21-
const actual = counterReducer(initialState, increment());
22-
expect(actual.value).toEqual(4);
23-
});
21+
const actual = counterReducer(initialState, increment())
22+
expect(actual.value).toEqual(4)
23+
})
2424

2525
it('should handle decrement', () => {
26-
const actual = counterReducer(initialState, decrement());
27-
expect(actual.value).toEqual(2);
28-
});
26+
const actual = counterReducer(initialState, decrement())
27+
expect(actual.value).toEqual(2)
28+
})
2929

3030
it('should handle incrementByAmount', () => {
31-
const actual = counterReducer(initialState, incrementByAmount(2));
32-
expect(actual.value).toEqual(5);
33-
});
34-
});
31+
const actual = counterReducer(initialState, incrementByAmount(2))
32+
expect(actual.value).toEqual(5)
33+
})
34+
})

0 commit comments

Comments
 (0)