@efanworks/tasks-with-redux 1.0.1-alpha.0

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@efanworks/tasks-with-redux",
+  "version": "1.0.1-alpha.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@efanworks/tasks-api": "^1.0.1-alpha.0",
+    "@reduxjs/toolkit": "^2.12.0",
+    "react-redux": "^9.3.0"
+  },
+  "devDependencies": {
+    "@efanworks/tasks-types": "^1.0.1-alpha.1"
+  }
+}

package/src/components/AddTask/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import {useAppDispatch } from '../../store';
+import { addTask } from "../../store/tasksSlice";
+
+export const AddTask = () => {
+  const [newTaskText, setNewTaskText] = useState("");
+  const dispatch = useAppDispatch();
+
+  const handleAddTask = async () => {
+    await dispatch(addTask(newTaskText));
+    setNewTaskText("");
+  };
+
+  return (
+    <>
+      <input
+        type="text"
+        value={newTaskText}
+        onChange={(e) => setNewTaskText(e.target.value)}
+      />
+      <button onClick={handleAddTask}>add</button>
+    </>
+  );
+};

package/src/components/TaskItem/index.tsx

@@ -0,0 +1,36 @@
+import { Task } from "@efanworks/tasks-types";
+import { useState } from "react";
+import { changeTask, deleteTask } from "../../store/tasksSlice";
+import { useAppDispatch } from "../../store";
+
+export const TaskItem = ({ task }: { task: Task }) => {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(task.text);
+  const dispatch = useAppDispatch();
+
+  const handleSave = async () => {
+    await dispatch(changeTask({ id: task.id, text: value }));
+    setEditing(false);
+  };
+
+  return (
+    <li>
+      {editing ? (
+        <>
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <button onClick={handleSave}>save</button>
+        </>
+      ) : (
+        <>
+          {task.text} - {task.done ? "done" : "undo"}
+          <button onClick={() => setEditing(true)}>edit</button>
+        </>
+      )}
+      <button onClick={() => deleteTask(task.id)}>delete</button>
+    </li>
+  );
+};

package/src/components/TaskList/index.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../store";
+import { TaskItem } from "../TaskItem";
+import { fetchTasks } from "../../store/tasksSlice";
+
+export const TaskList = () => {
+  const tasks = useAppSelector((state) => state.tasks.tasks);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(fetchTasks());
+  }, []);
+
+  return (
+    <ul>
+      {tasks.map((task) => (
+        <TaskItem key={task.id} task={task} />
+      ))}
+    </ul>
+  );
+};

package/src/components/Tasks/index.tsx

@@ -0,0 +1,16 @@
+import { ErrorBoundary } from "react-error-boundary";
+import { Provider } from "react-redux";
+import { store } from "../../store";
+import { AddTask } from "../AddTask";
+import { TaskList } from "../TaskList";
+
+export const Tasks = () => {
+  return (
+    <ErrorBoundary fallbackRender={() => <div>Page Not Found</div>}>
+      <Provider store={store}>
+        <AddTask />
+        <TaskList />
+      </Provider>
+    </ErrorBoundary>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { Tasks } from "./components/Tasks";

package/src/store/index.ts

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { useDispatch, useSelector } from "react-redux";
+import tasksRuducer from "./tasksSlice";
+
+export const store = configureStore({
+  reducer: { tasks: tasksRuducer },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

package/src/store/tasksSlice.ts

@@ -0,0 +1,76 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import type { Task } from "@efanworks/tasks-types";
+import {
+  fetchTasks as fetchTasksAPI,
+  addTask as addTaskAPI,
+  changeTask as changeTaskAPI,
+  deleteTask as deleteTaskAPI,
+} from "@efanworks/tasks-api";
+
+const initialState: {
+  tasks: Task[];
+} = {
+  tasks: [],
+};
+
+export const fetchTasks = createAsyncThunk(
+  "tasks/fetchTasks",
+  async () => await fetchTasksAPI(),
+);
+
+export const addTask = createAsyncThunk(
+  "tasks/addTask",
+  async (text: string) => {
+    return await addTaskAPI(text);
+  },
+);
+
+export const changeTask = createAsyncThunk(
+  "tasks/changeTask",
+  async ({ id, done, text }: { id: string; done?: boolean; text?: string }) => {
+    const updates = Object.assign(
+      {},
+      text ? { text } : {},
+      done ? { done } : {},
+    );
+    return await changeTaskAPI(id, updates);
+  },
+);
+
+export const deleteTask = createAsyncThunk(
+  "tasks/deleteTask",
+  async (id: string) => {
+    await deleteTaskAPI(id);
+    return id;
+  },
+);
+
+const tasksSlice = createSlice({
+  name: "tasks",
+  initialState,
+  reducers: {},
+  extraReducers: (build) => {
+    build
+      .addCase(fetchTasks.fulfilled, (state, action) => {
+        state.tasks = action.payload;
+      })
+      .addCase(addTask.fulfilled, (state, action) => {
+        state.tasks.push(action.payload);
+      })
+      .addCase(changeTask.fulfilled, (state, action) => {
+        state.tasks = state.tasks.map((t) => {
+          if (t.id === action.payload.id) {
+            return {
+              ...action.payload,
+            };
+          }
+          return t;
+        });
+      })
+      .addCase(deleteTask.fulfilled, (state, action) => {
+        state.tasks = state.tasks.filter((t) => t.id !== action.payload);
+      });
+  },
+});
+
+export default tasksSlice.reducer;