Merge pull request #1 from 8lad/app-with-toolkit

refactoring redux to toolkit and fixing types

.eslintrc.json

@@ -23,6 +23,13 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["react", "@typescript-eslint", "prettier"],
   "rules": {
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsFor": ["state"]
+      }
+    ],
     "no-case-declarations": "off",
     "no-unused-expressions": "off",
     "@typescript-eslint/no-unused-expressions": ["off"],

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,16 @@
+asset-manifest.json,1657636504486,a05624c967f6588f04d6c08205675bb4e9fbe11ab89f8268a8b895292b315898
+index.html,1657636504486,44a8b96f5bd1d64a6286ff62cf262ec30cb7804c8f7f421976e3d1922d2b2219
+manifest.json,1654021710624,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+robots.txt,1654021710624,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+static/css/main.188eb75b.css,1657636504510,d776931170e67126d632de3df0a34cb02a396548c06bc092027050a9c2dfa04b
+static/css/main.188eb75b.css.map,1657636504510,028dcd5345769a1bb46f88cbef33b1ff7f50959ee5e8c25d529ec2217dd3a2f6
+static/js/main.1f67f04e.js.LICENSE.txt,1657636504509,c1f0069ec7584f9aa66510a0a471c98b0eaea791d01219c5d0b08ac7bd1c8abe
+logo192.png,1654021710624,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+logo512.png,1654021710624,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+static/media/courgette-v13-latin-regular.46a1b45e95cd7514f432.woff,1657636504509,f3a7b1231e01325d5387a6bf42110aed2544670415984f847c7750c31cce9f6e
+static/media/courgette-v13-latin-regular.674d6ec8cdf5d20b8cb2.eot,1657636504509,1f0c8074fc35bb13a8774a23d2bee448fd1469479d0fefda7ad3cf6e0af9f3c3
+static/media/courgette-v13-latin-regular.7b11daad8d51cf268e8d.ttf,1657636504510,64f6dea784378b78dedd73d12d7114d541c1864dff4b941a50f569dd599c8c24
+static/media/courgette-v13-latin-regular.11f48a7bda315f0d4c1d.svg,1657636504510,5c93d11957cd2ed44596458bb09748597a22cd42ceed1d73fcf92323019a58d3
+favicon.ico,1655239293597,066c4317bd0f08e3362bebe44c701be05a1c992fd29abcdeae523e05df0968a5
+static/js/main.1f67f04e.js,1657636504510,f685dd492a653e00ed67ebc6fa31bd3be877b4ac9d4646c248a71d51b2c623fa
+static/js/main.1f67f04e.js.map,1657636504512,ddf3ed11029d96227427f0865e9c37380b85628d1ac867eeedf54e8ea4c3f521

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "counter-io-12072022"
+  }
+}

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/components/Form/Form.tsx

@@ -6,22 +6,30 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import TextField from "@mui/material/TextField";
-import { addSingleTaskWithDB } from "../../redux/actions";
+import { Dispatch } from "redux";
+import { fetchAddSingleTask } from "../../redux/tasksSlice";
 import "./Form.scss";
 import { addingHashTag } from "../../helpers/helpers";
+import { StateType } from "../../redux/rootReducer";
 
 export function Form(): JSX.Element {
   const [textValue, setTextValue] = useState<string>("");
   const [singleTaskText, setSingleTaskText] = useState<string>("");
   const [tagText, setTagText] = useState<string>("");
   const [inputError, setInputError] = useState<boolean>(false);
   const [inputErrorText, setInputErrorText] = useState<string>("");
-  const dispatch = useDispatch<any>();
-  const { tasks } = useSelector((state: any) => state.tasksReducer);
+  const dispatch = useDispatch<Dispatch<any>>();
+  const { tasks } = useSelector((state: StateType) => state.tasksReducer);
 
   const saveSingleTask = (): void => {
     if (tagText && singleTaskText) {
-      dispatch(addSingleTaskWithDB({ id: nanoid(), tags: tagText, text: singleTaskText, isPinned: false }, tasks));
+      dispatch(
+        fetchAddSingleTask({
+          option: { id: nanoid(), tags: tagText, text: singleTaskText, isPinned: false },
+          payload: tasks,
+        }),
+      );
+
       setSingleTaskText("");
       setTagText("");
       setTextValue("");

src/components/Header/Header.tsx

@@ -10,7 +10,7 @@ import InputBase from "@mui/material/InputBase";
 import SearchIcon from "@mui/icons-material/Search";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { setSearchRule, setIsFiltered } from "../../redux/actions";
+import { setIsFiltered, setSearchRule } from "../../redux/tasksSlice";
 import "./Header.scss";
 
 const Search = styled("div")(({ theme }) => ({

src/components/SingleListItem/SingleListItem.tsx

@@ -14,13 +14,12 @@ import "./SingleListItem.scss";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import {
-  deleteSingleTaskWithDB,
-  updateSingleTaskWithDB,
-  setPinTaskWithDB,
-  disablePinTaskWithDB,
-} from "../../redux/actions";
+  fetchUpdateSingleTask,
+  fetchDeleteSingleTask,
+  fetchDisablePinTask,
+  fetchSetPinTask,
+} from "../../redux/tasksSlice";
 import { addingHashTag } from "../../helpers/helpers";
-import { StateType } from "../../redux/rootReducer";
 
 interface SingleListItemProps {
   text: string;
@@ -36,20 +35,14 @@ export function SingleListItem({ text, tags, id, isPinned }: SingleListItemProps
   const [editedTags, setEditedTags] = useState<string>("");
   const [editedTextError, setEditedTextError] = useState<boolean>(false);
   const [editedTagsError, setEditedTagsError] = useState<boolean>(false);
-  const { tasks } = useSelector((state: StateType) => state.tasksReducer);
+  const { tasks } = useSelector((state: any) => state.tasksReducer);
   const dispatch = useDispatch<any>();
 
-  // const lostFocuseSaving = (e: FocusEvent): void => {
-  //   const target = e.target as HTMLInputElement;
-  //   if (target.value.length) {
-  //     setEditedText(target.value);
-  //     setDisabledText(true);
-  //   }
-  // };
-
   const setPin = (): void => {
     setPinnedTask((state) => !state);
-    !pinnedTask ? dispatch(setPinTaskWithDB(id, tasks)) : dispatch(disablePinTaskWithDB(id, tasks));
+    !pinnedTask
+      ? dispatch(fetchSetPinTask({ option: id, payload: tasks }))
+      : dispatch(fetchDisablePinTask({ option: id, payload: tasks }));
   };
 
   const saveTask = (): void => {
@@ -63,15 +56,15 @@ export function SingleListItem({ text, tags, id, isPinned }: SingleListItemProps
     }
     setDisabledText(true);
     dispatch(
-      updateSingleTaskWithDB(
-        {
+      fetchUpdateSingleTask({
+        option: {
           id,
           text: editedText,
           tags: editedTags,
           isPinned: pinnedTask,
         },
-        tasks,
-      ),
+        payload: tasks,
+      }),
     );
     setEditedTextError(false);
     setEditedTagsError(false);
@@ -104,7 +97,7 @@ export function SingleListItem({ text, tags, id, isPinned }: SingleListItemProps
           </IconButton>
           <IconButton
             aria-label="delete"
-            onClick={() => dispatch(deleteSingleTaskWithDB(id, tasks))}
+            onClick={() => dispatch(fetchDeleteSingleTask({ option: id, payload: tasks }))}
             disabled={pinnedTask}>
             <DeleteIcon />
           </IconButton>

src/components/TaskList/TaskList.tsx

@@ -5,24 +5,25 @@ import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import { SpinnerDotted } from "spinners-react";
 import { useSelector, useDispatch } from "react-redux";
+import { Dispatch } from "redux";
 import { SingleListItem } from "../SingleListItem/SingleListItem";
-import { setSearchRule, loadAllTasks } from "../../redux/actions";
+import { fetchAllTasks, setSearchRule } from "../../redux/tasksSlice";
 import { filterTasks } from "../../helpers/helpers";
 import "./TaskList.scss";
-import { SingleTask } from "../../redux/tasksReducer";
+import { SingleTask } from "../../types";
 import { StateType } from "../../redux/rootReducer";
 
 export function TaskList(): JSX.Element {
   const { tasks, searchField, isTagFiltered, errorMessage, isLoading } = useSelector(
     (state: StateType) => state.tasksReducer,
   );
-  const [taskList, setTaskList] = useState<[] | SingleTask[]>([]);
-  const dispatch = useDispatch<any>();
+  const [taskList, setTaskList] = useState<SingleTask[]>([]);
+  const dispatch = useDispatch<Dispatch<any>>();
   const isHasTasks = !taskList.length && !errorMessage && !searchField && !isLoading;
   const isEmptySearch = !taskList.length && searchField;
 
   useEffect(() => {
-    dispatch(loadAllTasks());
+    dispatch(fetchAllTasks());
   }, [dispatch]);
 
   useEffect(() => {
@@ -48,7 +49,7 @@ export function TaskList(): JSX.Element {
           </Box>
         )}
         <List>
-          {taskList &&
+          {Array.isArray(taskList) &&
             taskList.map((item: SingleTask) => (
               <SingleListItem key={item.id} text={item.text} tags={item.tags} id={item.id} isPinned={item.isPinned} />
             ))}

src/helpers/helpers.ts

@@ -1,5 +1,5 @@
 import { ref, set, child, get } from "firebase/database";
-import { SingleTask } from "../redux/tasksReducer";
+import { SingleTask } from "../types";
 import { database } from "../firebase";
 
 export const addingHashTag = (str: string): string => {
@@ -12,7 +12,7 @@ export const addingHashTag = (str: string): string => {
   );
 };
 
-export const filterTasks = (str: string, arr: SingleTask[], tagFilter: boolean): SingleTask[] | [] => {
+export const filterTasks = (str: string, arr: SingleTask[], tagFilter: boolean): SingleTask[] => {
   return tagFilter
     ? arr.filter((item) => item.tags.toLowerCase().includes(str.toLowerCase()))
     : arr.filter((item) => item.text.toLowerCase().includes(str.toLowerCase()));
@@ -33,3 +33,16 @@ export const getData = () => {
     })
     .catch((error) => error);
 };
+
+export const getAllData = async () => {
+  const dbRef = ref(database);
+  const response = await get(child(dbRef, "baseData"));
+  const allTasks = await response.val();
+  const allTasksList = allTasks ?? [];
+  return allTasksList;
+};
+
+export const returnErrorText = (e: Error) => {
+  const error = e;
+  return error.message;
+};

src/index.tsx

@@ -1,9 +1,9 @@
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
-import { store } from "./redux/store";
 import App from "./App";
 import "./index.scss";
 import "./fonts/courgette-v13-latin/courgette-v13-latin-regular.ttf";
+import { store } from "./redux/store";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(

src/redux/rootReducer.ts

@@ -1,5 +1,5 @@
-import { combineReducers } from "redux";
-import { tasksReducer } from "./tasksReducer";
+import { combineReducers } from "@reduxjs/toolkit";
+import { tasksReducer } from "./tasksSlice";
 
 export const rootReducer = combineReducers({
   tasksReducer,