feat: api slice (#3)

package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.1.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -43,7 +44,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.1",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
     "@testing-library/react": "^14.2.1",

src/App.test.js

@@ -1,13 +1,18 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import TodoList from './features/todos/TodoList';
+import React from 'react';
+import { store } from './app/store';
+import { Provider } from 'react-redux';
+
 
 test('renders todo list', () => {
-  render(<TodoList />);
+  render(
+    <Provider store={store}>
+      <TodoList />
+    </Provider>
+  );
 
-  render(<TodoList />);
-
-  const headingElement = screen.getAllByRole('heading', { name: /todo list/i })[0];
+  const headingElement = screen.getByRole('heading', { name: /todo list/i });
   expect(headingElement).toBeInTheDocument();
 
   const inputElement = screen.getByLabelText(/Add to list/i);
@@ -18,11 +23,15 @@ test('renders todo list', () => {
   expect(submitButton).toBeInTheDocument();
 });
 
-
 test('allows user to type in a new todo', () => {
-  render(<TodoList />);
+  render(
+    <Provider store={store}>
+      <TodoList />
+    </Provider>);
 
   const inputElement = screen.getByLabelText(/Add to list/i);
-  fireEvent.change(inputElement, { target: { value: 'New Todo Item' } });
+  act(() => {
+    fireEvent.change(inputElement, { target: { value: 'New Todo Item' } });
+  });
   expect(inputElement.value).toBe('New Todo Item');
-});
+});

src/app/api/apiSlice.js

@@ -0,0 +1,15 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const apiSlice = createApi({
+    reducerPath: 'api',
+    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080' }),
+    endpoints: (builder) => ({
+        getTodos: builder.query({
+            query: () => '/todos'
+        })
+    })
+})
+
+export const {
+    useGetTodosQuery
+} = apiSlice

src/app/store.js

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { apiSlice } from "./api/apiSlice";
+import { setupListeners } from "@reduxjs/toolkit/query";
+
+export const store = configureStore({
+    reducer: {
+        [apiSlice.reducerPath]: apiSlice.reducer,
+    },
+    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(apiSlice.middleware),
+    devTools: false
+})
+
+setupListeners(store.dispatch);

src/features/todos/TodoList.js

@@ -2,10 +2,19 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash, faUpload } from '@fortawesome/free-solid-svg-icons'
 import { useState } from 'react'
+import { useGetTodosQuery } from '../../app/api/apiSlice'
 
 const TodoList = () => {
     const [ newTodo, setNewTodo ] = useState('')
 
+    const {
+        data: todos,
+        isLoading,
+        isSuccess,
+        isError,
+        error
+    } = useGetTodosQuery()
+
     const handleSubmit = (e)=> {
         e.preventDefault()
         //addTodo
@@ -30,6 +39,13 @@ const TodoList = () => {
     </form>
 
     let content;
+    if (isLoading) {
+        content = <p>Loading ...</p>
+    } else if (isSuccess){
+        content = JSON.stringify(todos)
+    } else if (isError) {
+        content = <p>{error.message || 'Error fetching todos'}</p>
+    }
 
   return (
     <main>

src/index.js

@@ -1,11 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
+import { Provider } from 'react-redux';
+import { store } from './app/store';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}> 
+      <App />
+    </Provider>
   </React.StrictMode>
 );

src/setupTests.js

@@ -1,5 +1 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';