From 9fb2cb5b8c27814963e719588132689f87acfc56 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 3 Mar 2020 23:57:12 -0500 Subject: [PATCH 1/6] Add post-launch tweaks --- template/src/App.test.js | 2 +- template/src/{ => app}/store.js | 2 +- template/src/features/counter/Counter.js | 11 +++++++- .../src/features/counter/Counter.module.css | 26 ++++++++++++++++++- template/src/features/counter/counterSlice.js | 18 ++++++++++--- template/src/index.js | 2 +- 6 files changed, 52 insertions(+), 9 deletions(-) rename template/src/{ => app}/store.js (68%) diff --git a/template/src/App.test.js b/template/src/App.test.js index aa97126..7916a0b 100644 --- a/template/src/App.test.js +++ b/template/src/App.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { Provider } from 'react-redux'; -import store from './store'; +import store from './app/store'; import App from './App'; test('renders learn react link', () => { diff --git a/template/src/store.js b/template/src/app/store.js similarity index 68% rename from template/src/store.js rename to template/src/app/store.js index 5c53cd3..5e2834d 100644 --- a/template/src/store.js +++ b/template/src/app/store.js @@ -1,5 +1,5 @@ import { configureStore } from '@reduxjs/toolkit'; -import counterReducer from './features/counter/counterSlice'; +import counterReducer from '../features/counter/counterSlice'; export default configureStore({ reducer: { diff --git a/template/src/features/counter/Counter.js b/template/src/features/counter/Counter.js index 7657659..93bb150 100644 --- a/template/src/features/counter/Counter.js +++ b/template/src/features/counter/Counter.js @@ -5,13 +5,14 @@ import { increment, incrementByAmount, selectCount, + incrementAsync, } from './counterSlice'; import styles from './Counter.module.css'; export function Counter() { const count = useSelector(selectCount); const dispatch = useDispatch(); - const [incrementAmount, setIncrementAmount] = useState(2); + const [incrementAmount, setIncrementAmount] = useState('2'); return (
@@ -50,6 +51,14 @@ export function Counter() { Add Amount
+
+ +
); } diff --git a/template/src/features/counter/Counter.module.css b/template/src/features/counter/Counter.module.css index 6d50e9c..a365b50 100644 --- a/template/src/features/counter/Counter.module.css +++ b/template/src/features/counter/Counter.module.css @@ -4,7 +4,7 @@ justify-content: center; } -.row:first-child { +.row:not(:last-child) { margin-bottom: 16px; } @@ -48,3 +48,27 @@ .button:active { background-color: rgba(112, 76, 182, 0.2); } + +.asyncButton { + composes: button; + position: relative; +} + +.asyncButton:after { + content: ""; + background-color: rgba(112, 76, 182, 0.15); + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + opacity: 0; + transition: width 1s linear, opacity 0.5s ease 1s; +} + +.asyncButton:active:after { + width: 0%; + opacity: 1; + transition: 0s +} diff --git a/template/src/features/counter/counterSlice.js b/template/src/features/counter/counterSlice.js index bed9e5c..7efbcef 100644 --- a/template/src/features/counter/counterSlice.js +++ b/template/src/features/counter/counterSlice.js @@ -7,10 +7,10 @@ export const slice = createSlice({ }, reducers: { increment: state => { - // Redux Toolkit allows us to 'mutate' the state. It doesn't actually - // mutate the state because it uses the immer library, which detects - // changes to a "draft state" and produces a brand new immutable state - // based off those changes + // Redux Toolkit allows us to write "mutating" logic in reducers. It + // doesn't actually mutate the state because it uses the immer library, + // which detects changes to a "draft state" and produces a brand new + // immutable state based off those changes state.value += 1; }, decrement: state => { @@ -22,7 +22,17 @@ export const slice = createSlice({ }, }); +// The function below is called a selector and allows us to select a value from +// the state. Selectors can also be defined inline where they're used instead of +// in the slice file. For example: `useSelector((state) => state.counter.value)` export const selectCount = state => state.counter.value; + export const { increment, decrement, incrementByAmount } = slice.actions; +export const incrementAsync = () => (dispatch) => { + setTimeout(() => { + dispatch(increment()); + }, 1000); +}; + export default slice.reducer; diff --git a/template/src/index.js b/template/src/index.js index b48dace..309b06a 100644 --- a/template/src/index.js +++ b/template/src/index.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import store from './store'; +import store from './app/store'; import { Provider } from 'react-redux'; import * as serviceWorker from './serviceWorker'; From 1cef4852247ad2541b889f81c51bddf97e9e4ffc Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 4 Mar 2020 00:07:56 -0500 Subject: [PATCH 2/6] Run prettier --- template/src/features/counter/counterSlice.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/template/src/features/counter/counterSlice.js b/template/src/features/counter/counterSlice.js index 7efbcef..b698449 100644 --- a/template/src/features/counter/counterSlice.js +++ b/template/src/features/counter/counterSlice.js @@ -29,7 +29,7 @@ export const selectCount = state => state.counter.value; export const { increment, decrement, incrementByAmount } = slice.actions; -export const incrementAsync = () => (dispatch) => { +export const incrementAsync = () => dispatch => { setTimeout(() => { dispatch(increment()); }, 1000); From 3c1dc45f448c5b8cb65d3174d7fc1288c82898c6 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 4 Mar 2020 00:13:28 -0500 Subject: [PATCH 3/6] Re-arrange import --- template/src/features/counter/Counter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/template/src/features/counter/Counter.js b/template/src/features/counter/Counter.js index 93bb150..61cb3d1 100644 --- a/template/src/features/counter/Counter.js +++ b/template/src/features/counter/Counter.js @@ -4,8 +4,8 @@ import { decrement, increment, incrementByAmount, - selectCount, incrementAsync, + selectCount, } from './counterSlice'; import styles from './Counter.module.css'; From 19bc3cadbf837d3e9cc2ef2a9146a3b1016857ad Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 4 Mar 2020 00:35:55 -0500 Subject: [PATCH 4/6] Remove wrapper object --- template/src/features/counter/Counter.js | 2 +- template/src/features/counter/counterSlice.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/template/src/features/counter/Counter.js b/template/src/features/counter/Counter.js index 61cb3d1..990d7c1 100644 --- a/template/src/features/counter/Counter.js +++ b/template/src/features/counter/Counter.js @@ -44,7 +44,7 @@ export function Counter() { className={styles.button} onClick={() => dispatch( - incrementByAmount({ amount: Number(incrementAmount) || 0 }) + incrementByAmount(Number(incrementAmount) || 0) ) } > diff --git a/template/src/features/counter/counterSlice.js b/template/src/features/counter/counterSlice.js index b698449..ca8d48c 100644 --- a/template/src/features/counter/counterSlice.js +++ b/template/src/features/counter/counterSlice.js @@ -17,7 +17,7 @@ export const slice = createSlice({ state.value -= 1; }, incrementByAmount: (state, action) => { - state.value += action.payload.amount; + state.value += action.payload; }, }, }); From d71bc4d5332ee045e298e4cbc15e38b41b02dd24 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 4 Mar 2020 00:39:11 -0500 Subject: [PATCH 5/6] Run prettier --- template/src/features/counter/Counter.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/template/src/features/counter/Counter.js b/template/src/features/counter/Counter.js index 990d7c1..3642eff 100644 --- a/template/src/features/counter/Counter.js +++ b/template/src/features/counter/Counter.js @@ -43,9 +43,7 @@ export function Counter() { - -
diff --git a/template/src/features/counter/Counter.module.css b/template/src/features/counter/Counter.module.css index a365b50..e9127bd 100644 --- a/template/src/features/counter/Counter.module.css +++ b/template/src/features/counter/Counter.module.css @@ -52,6 +52,7 @@ .asyncButton { composes: button; position: relative; + margin-left: 8px; } .asyncButton:after { diff --git a/template/src/features/counter/counterSlice.js b/template/src/features/counter/counterSlice.js index ca8d48c..f2aa267 100644 --- a/template/src/features/counter/counterSlice.js +++ b/template/src/features/counter/counterSlice.js @@ -22,17 +22,21 @@ export const slice = createSlice({ }, }); -// The function below is called a selector and allows us to select a value from -// the state. Selectors can also be defined inline where they're used instead of -// in the slice file. For example: `useSelector((state) => state.counter.value)` -export const selectCount = state => state.counter.value; - export const { increment, decrement, incrementByAmount } = slice.actions; -export const incrementAsync = () => dispatch => { +// The function below is called a thunk and allows us to perform async logic. It +// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This +// will call the thunk with the `dispatch` function as the first argument. Async +// code can then be executed and other actions can be dispatched +export const incrementAsync = amount => dispatch => { setTimeout(() => { - dispatch(increment()); + dispatch(incrementByAmount(amount)); }, 1000); }; +// The function below is called a selector and allows us to select a value from +// the state. Selectors can also be defined inline where they're used instead of +// in the slice file. For example: `useSelector((state) => state.counter.value)` +export const selectCount = state => state.counter.value; + export default slice.reducer;