initial commit

src/App.css

@@ -0,0 +1,39 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-float infinite 3s ease-in-out;
+  }
+}
+
+.App-header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-link {
+  color: rgb(112, 76, 182);
+}
+
+@keyframes App-logo-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}

src/App.test.tsx

@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react"
+import { Provider } from "react-redux"
+import { store } from "./app/store"
+import App from "./App"
+
+test("renders learn react link", () => {
+  const { getByText } = render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+  )
+
+  expect(getByText(/learn/i)).toBeInTheDocument()
+})

src/App.tsx

@@ -0,0 +1,58 @@
+import { Counter } from "./features/counter/Counter"
+import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import "./App.css"
+import { store } from "@/app/store"
+import { Provider } from "react-redux"
+import { createTheme, ThemeProvider } from "@mui/material"
+import { useAppDispatch, useAppSelector } from "@/app/hooks"
+import { useEffect } from "react"
+import { appActions } from "@/features/app/app.slice"
+
+export const Test = () => {
+  const isLoading = useAppSelector((state) => state.app.isLoading)
+  const error = useAppSelector((state) => state.app.error)
+  const dispatch = useAppDispatch()
+
+  function handleErrorButtonClicked() {
+    dispatch(appActions.setError({ error: "new error" }))
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      dispatch(appActions.setIsLoading({ isLoading: false }))
+    }, 3000)
+  }, [dispatch])
+
+  if (isLoading) return <div>loading...</div>
+  return (
+    <div>
+      <button onClick={handleErrorButtonClicked}>create error</button>
+      {!!error && <h2>{error}</h2>}
+      <Counter />
+    </div>
+  )
+}
+
+const router = createBrowserRouter([
+  {
+    element: <Test />,
+    path: "/",
+  },
+  {
+    element: <div>hello</div>,
+    path: "/hello",
+  },
+])
+
+const theme = createTheme()
+function App() {
+  return (
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </Provider>
+  )
+}
+
+export default App

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import type { RootState, AppDispatch } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/app/store.ts

@@ -0,0 +1,19 @@
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"
+import counterReducer from "../features/counter/counterSlice"
+import { appReducer } from "@/features/app/app.slice"
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+    app: appReducer,
+  },
+})
+
+export type AppDispatch = typeof store.dispatch
+export type RootState = ReturnType<typeof store.getState>
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>

src/features/app/app.slice.ts

@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+
+const slice = createSlice({
+  name: "app",
+  initialState: {
+    error: null as null | string,
+    isLoading: true,
+    isAppInitialized: false,
+  },
+  reducers: {
+    setIsLoading: (state, action: PayloadAction<{ isLoading: boolean }>) => {
+      state.isLoading = action.payload.isLoading
+    },
+    setError: (state, action: PayloadAction<{ error: string | null }>) => {
+      state.error = action.payload.error
+    },
+    setIsAppInitialized: (
+      state,
+      action: PayloadAction<{ isInitialized: boolean }>,
+    ) => {
+      state.isAppInitialized = action.payload.isInitialized
+    },
+  },
+})
+
+export const appReducer = slice.reducer
+export const appActions = slice.actions

src/features/counter/Counter.module.css

@@ -0,0 +1,79 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.row > button {
+  margin-left: 4px;
+  margin-right: 8px;
+}
+
+.row:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.value {
+  font-size: 78px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-top: 2px;
+  font-family: "Courier New", Courier, monospace;
+}
+
+.button {
+  appearance: none;
+  background: none;
+  font-size: 32px;
+  padding-left: 12px;
+  padding-right: 12px;
+  outline: none;
+  border: 2px solid transparent;
+  color: rgb(112, 76, 182);
+  padding-bottom: 4px;
+  cursor: pointer;
+  background-color: rgba(112, 76, 182, 0.1);
+  border-radius: 2px;
+  transition: all 0.15s;
+}
+
+.textbox {
+  font-size: 32px;
+  padding: 2px;
+  width: 64px;
+  text-align: center;
+  margin-right: 4px;
+}
+
+.button:hover,
+.button:focus {
+  border: 2px solid rgba(112, 76, 182, 0.4);
+}
+
+.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;
+}

src/features/counter/Counter.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react"
+
+import { useAppSelector, useAppDispatch } from "@/app/hooks"
+import {
+  decrement,
+  increment,
+  incrementByAmount,
+  incrementAsync,
+  incrementIfOdd,
+  selectCount,
+} from "./counterSlice"
+import styles from "./Counter.module.css"
+
+export function Counter() {
+  const count = useAppSelector(selectCount)
+  const dispatch = useAppDispatch()
+  const [incrementAmount, setIncrementAmount] = useState("2")
+
+  const incrementValue = Number(incrementAmount) || 0
+
+  return (
+    <div>
+      <div className={styles.row}>
+        <button
+          className={styles.button}
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          -
+        </button>
+        <span className={styles.value}>{count}</span>
+        <button
+          className={styles.button}
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          +
+        </button>
+      </div>
+      <div className={styles.row}>
+        <input
+          className={styles.textbox}
+          aria-label="Set increment amount"
+          value={incrementAmount}
+          onChange={(e) => setIncrementAmount(e.target.value)}
+        />
+        <button
+          className={styles.button}
+          onClick={() => dispatch(incrementByAmount(incrementValue))}
+        >
+          Add Amount
+        </button>
+        <button
+          className={styles.asyncButton}
+          onClick={() => dispatch(incrementAsync(incrementValue))}
+        >
+          Add Async
+        </button>
+        <button
+          className={styles.button}
+          onClick={() => dispatch(incrementIfOdd(incrementValue))}
+        >
+          Add If Odd
+        </button>
+      </div>
+    </div>
+  )
+}

src/features/counter/counterAPI.ts

@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+  return new Promise<{ data: number }>((resolve) =>
+    setTimeout(() => resolve({ data: amount }), 500),
+  )
+}

src/features/counter/counterSlice.spec.ts

@@ -0,0 +1,34 @@
+import counterReducer, {
+  CounterState,
+  increment,
+  decrement,
+  incrementByAmount,
+} from "./counterSlice"
+
+describe("counter reducer", () => {
+  const initialState: CounterState = {
+    value: 3,
+    status: "idle",
+  }
+  it("should handle initial state", () => {
+    expect(counterReducer(undefined, { type: "unknown" })).toEqual({
+      value: 0,
+      status: "idle",
+    })
+  })
+
+  it("should handle increment", () => {
+    const actual = counterReducer(initialState, increment())
+    expect(actual.value).toEqual(4)
+  })
+
+  it("should handle decrement", () => {
+    const actual = counterReducer(initialState, decrement())
+    expect(actual.value).toEqual(2)
+  })
+
+  it("should handle incrementByAmount", () => {
+    const actual = counterReducer(initialState, incrementByAmount(2))
+    expect(actual.value).toEqual(5)
+  })
+})

src/features/counter/counterSlice.ts

@@ -0,0 +1,85 @@
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { RootState, AppThunk } from "../../app/store"
+import { fetchCount } from "./counterAPI"
+
+export interface CounterState {
+  value: number
+  status: "idle" | "loading" | "failed"
+}
+
+const initialState: CounterState = {
+  value: 0,
+  status: "idle",
+}
+
+// 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. Thunks are
+// typically used to make async requests.
+
+export const incrementAsync = createAsyncThunk(
+  "counter/fetchCount",
+  async (amount: number) => {
+    const response = await fetchCount(amount)
+    // The value we return becomes the `fulfilled` action payload
+    return response.data
+  },
+)
+
+export const counterSlice = createSlice({
+  name: "counter",
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: {
+    increment: (state) => {
+      // 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) => {
+      state.value -= 1
+    },
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+  },
+  // The `extraReducers` field lets the slice handle actions defined elsewhere,
+  // including actions generated by createAsyncThunk or in other slices.
+  extraReducers: (builder) => {
+    builder
+      .addCase(incrementAsync.pending, (state) => {
+        state.status = "loading"
+      })
+      .addCase(incrementAsync.fulfilled, (state, action) => {
+        state.status = "idle"
+        state.value += action.payload
+      })
+      .addCase(incrementAsync.rejected, (state) => {
+        state.status = "failed"
+      })
+  },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// 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: RootState) => state.counter.value)`
+export const selectCount = (state: RootState) => state.counter.value
+
+// We can also write thunks by hand, which may contain both sync and async logic.
+// Here's an example of conditionally dispatching actions based on current state.
+export const incrementIfOdd =
+  (amount: number): AppThunk =>
+  (dispatch, getState) => {
+    const currentValue = selectCount(getState())
+    if (currentValue % 2 === 1) {
+      dispatch(incrementByAmount(amount))
+    }
+  }
+
+export default counterSlice.reducer

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="#764ABC"><path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/><path d="M83.2 53c-7.6-8.9-18.8-13.8-31.6-13.8H50c-.9-1.8-2.8-3-4.9-3h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 3 2.6 5.4 5.6 5.4h.2c2.2-.1 4.1-1.5 4.9-3.4H52c7.6 0 14.8 2.2 21.3 6.5 5 3.3 8.6 7.6 10.6 12.8 1.7 4.2 1.6 8.3-.2 11.8-2.8 5.3-7.5 8.2-13.7 8.2-4 0-7.8-1.2-9.8-2.1-1.1 1-3.1 2.6-4.5 3.6 4.3 2 8.7 3.1 12.9 3.1 9.6 0 16.7-5.3 19.4-10.6 2.9-5.8 2.7-15.8-4.8-24.3z"/><path d="M32.4 67.1c.1 3 2.6 5.4 5.6 5.4h.2c3.1-.1 5.5-2.7 5.4-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-.2 0-.5 0-.7.1-4.1-6.8-5.8-14.2-5.2-22.2.4-6 2.4-11.2 5.9-15.5 2.9-3.7 8.5-5.5 12.3-5.6 10.6-.2 15.1 13 15.4 18.3 1.3.3 3.5 1 5 1.5-1.2-16.2-11.2-24.6-20.8-24.6-9 0-17.3 6.5-20.6 16.1-4.6 12.8-1.6 25.1 4 34.8-.5.7-.8 1.8-.7 2.9z"/></g></svg>

src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App"
+import "./index.css"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/setupTests.ts

@@ -0,0 +1,2 @@
+/// <reference types="vitest/globals" />
+import "@testing-library/jest-dom"

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />