init

enlightApp/app/features/counter/Counter.css

@@ -0,0 +1,37 @@
+.backButton {
+  position: absolute;
+}
+
+.counter {
+  position: absolute;
+  top: 30%;
+  left: 45%;
+  font-size: 10rem;
+  font-weight: bold;
+  letter-spacing: -0.025em;
+}
+
+.btnGroup {
+  position: relative;
+  top: 500px;
+  width: 480px;
+  margin: 0 auto;
+}
+
+.btn {
+  font-size: 1.6rem;
+  font-weight: bold;
+  background-color: #fff;
+  border-radius: 50%;
+  margin: 10px;
+  width: 100px;
+  height: 100px;
+  opacity: 0.7;
+  cursor: pointer;
+  font-family: Arial, Helvetica, Helvetica Neue, sans-serif;
+}
+
+.btn:hover {
+  color: white;
+  background-color: rgba(0, 0, 0, 0.5);
+}

enlightApp/app/features/counter/Counter.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
+import styles from './Counter.css';
+import routes from '../../constants/routes.json';
+import {
+  increment,
+  decrement,
+  incrementIfOdd,
+  incrementAsync,
+  selectCount,
+} from './counterSlice';
+
+export default function Counter() {
+  const dispatch = useDispatch();
+  const value = useSelector(selectCount);
+  return (
+    <div>
+      <div className={styles.backButton} data-tid="backButton">
+        <Link to={routes.HOME}>
+          <i className="fa fa-arrow-left fa-3x" />
+        </Link>
+      </div>
+      <div className={`counter ${styles.counter}`} data-tid="counter">
+        {value}
+      </div>
+      <div className={styles.btnGroup}>
+        <button
+          className={styles.btn}
+          onClick={() => {
+            dispatch(increment());
+          }}
+          data-tclass="btn"
+          type="button"
+        >
+          <i className="fa fa-plus" />
+        </button>
+        <button
+          className={styles.btn}
+          onClick={() => {
+            dispatch(decrement());
+          }}
+          data-tclass="btn"
+          type="button"
+        >
+          <i className="fa fa-minus" />
+        </button>
+        <button
+          className={styles.btn}
+          onClick={() => {
+            dispatch(incrementIfOdd());
+          }}
+          data-tclass="btn"
+          type="button"
+        >
+          odd
+        </button>
+        <button
+          className={styles.btn}
+          onClick={() => {
+            dispatch(incrementAsync());
+          }}
+          data-tclass="btn"
+          type="button"
+        >
+          async
+        </button>
+      </div>
+    </div>
+  );
+}

enlightApp/app/features/counter/counterSlice.ts

@@ -0,0 +1,38 @@
+import { createSlice } from '@reduxjs/toolkit';
+// eslint-disable-next-line import/no-cycle
+import { AppThunk, RootState } from '../../store';
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState: { value: 0 },
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+  },
+});
+
+export const { increment, decrement } = counterSlice.actions;
+
+export const incrementIfOdd = (): AppThunk => {
+  return (dispatch, getState) => {
+    const state = getState();
+    if (state.counter.value % 2 === 0) {
+      return;
+    }
+    dispatch(increment());
+  };
+};
+
+export const incrementAsync = (delay = 1000): AppThunk => (dispatch) => {
+  setTimeout(() => {
+    dispatch(increment());
+  }, delay);
+};
+
+export default counterSlice.reducer;
+
+export const selectCount = (state: RootState) => state.counter.value;