chore: add prettier and run it on all files

src/features/TodolistsList/TodolistsList.tsx

@@ -2,112 +2,148 @@ import React, { useCallback, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { AppRootStateType } from '../../app/store'
 import {
-	addTodolistTC,
-	changeTodolistFilterAC,
-	changeTodolistTitleTC,
-	fetchTodolistsTC,
-	FilterValuesType,
-	removeTodolistTC,
-	TodolistDomainType
+  addTodolistTC,
+  changeTodolistFilterAC,
+  changeTodolistTitleTC,
+  fetchTodolistsTC,
+  FilterValuesType,
+  removeTodolistTC,
+  TodolistDomainType,
 } from './todolists-reducer'
-import { addTaskTC, removeTaskTC, TasksStateType, updateTaskTC } from './tasks-reducer'
+import {
+  addTaskTC,
+  removeTaskTC,
+  TasksStateType,
+  updateTaskTC,
+} from './tasks-reducer'
 import { TaskStatuses } from '../../api/todolists-api'
 import { Grid, Paper } from '@mui/material'
 import { AddItemForm } from '../../components/AddItemForm/AddItemForm'
 import { Todolist } from './Todolist/Todolist'
 import { Navigate } from 'react-router-dom'
-import { useAppDispatch } from '../../hooks/useAppDispatch';
+import { useAppDispatch } from '../../hooks/useAppDispatch'
 
 type PropsType = {
-    demo?: boolean
+  demo?: boolean
 }
 
-export const TodolistsList: React.FC<PropsType> = ({demo = false}) => {
-    const todolists = useSelector<AppRootStateType, Array<TodolistDomainType>>(state => state.todolists)
-    const tasks = useSelector<AppRootStateType, TasksStateType>(state => state.tasks)
-    const isLoggedIn = useSelector<AppRootStateType, boolean>(state => state.auth.isLoggedIn)
+export const TodolistsList: React.FC<PropsType> = ({ demo = false }) => {
+  const todolists = useSelector<AppRootStateType, Array<TodolistDomainType>>(
+    (state) => state.todolists
+  )
+  const tasks = useSelector<AppRootStateType, TasksStateType>(
+    (state) => state.tasks
+  )
+  const isLoggedIn = useSelector<AppRootStateType, boolean>(
+    (state) => state.auth.isLoggedIn
+  )
 
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch()
 
-    useEffect(() => {
-        if (demo || !isLoggedIn) {
-            return;
-        }
-        const thunk = fetchTodolistsTC()
-			dispatch(thunk)
-    }, [])
-
-    const removeTask = useCallback(function (id: string, todolistId: string) {
-        const thunk = removeTaskTC(id, todolistId)
-        dispatch(thunk)
-    }, [])
-
-    const addTask = useCallback(function (title: string, todolistId: string) {
-        const thunk = addTaskTC(title, todolistId)
-        dispatch(thunk)
-    }, [])
-
-    const changeStatus = useCallback(function (id: string, status: TaskStatuses, todolistId: string) {
-        const thunk = updateTaskTC(id, {status}, todolistId)
-        dispatch(thunk)
-    }, [])
-
-    const changeTaskTitle = useCallback(function (id: string, newTitle: string, todolistId: string) {
-        const thunk = updateTaskTC(id, {title: newTitle}, todolistId)
-        dispatch(thunk)
-    }, [])
-
-    const changeFilter = useCallback(function (value: FilterValuesType, todolistId: string) {
-        const action = changeTodolistFilterAC(todolistId, value)
-        dispatch(action)
-    }, [])
-
-    const removeTodolist = useCallback(function (id: string) {
-        const thunk = removeTodolistTC(id)
-        dispatch(thunk)
-    }, [])
-
-    const changeTodolistTitle = useCallback(function (id: string, title: string) {
-        const thunk = changeTodolistTitleTC(id, title)
-        dispatch(thunk)
-    }, [])
-
-    const addTodolist = useCallback((title: string) => {
-        const thunk = addTodolistTC(title)
-        dispatch(thunk)
-    }, [dispatch])
-
-    if (!isLoggedIn) {
-        return <Navigate to={"/login"} />
+  useEffect(() => {
+    if (demo || !isLoggedIn) {
+      return
     }
+    const thunk = fetchTodolistsTC()
+    dispatch(thunk)
+  }, [])
 
-    return <>
-        <Grid container style={{padding: '20px'}}>
-            <AddItemForm addItem={addTodolist}/>
-        </Grid>
-        <Grid container spacing={3}>
-            {
-                todolists.map(tl => {
-                    let allTodolistTasks = tasks[tl.id]
+  const removeTask = useCallback(function (id: string, todolistId: string) {
+    const thunk = removeTaskTC(id, todolistId)
+    dispatch(thunk)
+  }, [])
 
-                    return <Grid item key={tl.id}>
-                        <Paper style={{padding: '10px'}}>
-                            <Todolist
-                                todolist={tl}
-                                tasks={allTodolistTasks}
-                                removeTask={removeTask}
-                                changeFilter={changeFilter}
-                                addTask={addTask}
-                                changeTaskStatus={changeStatus}
-                                removeTodolist={removeTodolist}
-                                changeTaskTitle={changeTaskTitle}
-                                changeTodolistTitle={changeTodolistTitle}
-                                demo={demo}
-                            />
-                        </Paper>
-                    </Grid>
-                })
-            }
-        </Grid>
+  const addTask = useCallback(function (title: string, todolistId: string) {
+    const thunk = addTaskTC(title, todolistId)
+    dispatch(thunk)
+  }, [])
+
+  const changeStatus = useCallback(function (
+    id: string,
+    status: TaskStatuses,
+    todolistId: string
+  ) {
+    const thunk = updateTaskTC(id, { status }, todolistId)
+    dispatch(thunk)
+  }, [])
+
+  const changeTaskTitle = useCallback(function (
+    id: string,
+    newTitle: string,
+    todolistId: string
+  ) {
+    const thunk = updateTaskTC(id, { title: newTitle }, todolistId)
+    dispatch(thunk)
+  }, [])
+
+  const changeFilter = useCallback(function (
+    value: FilterValuesType,
+    todolistId: string
+  ) {
+    const action = changeTodolistFilterAC(todolistId, value)
+    dispatch(action)
+  }, [])
+
+  const removeTodolist = useCallback(function (id: string) {
+    const thunk = removeTodolistTC(id)
+    dispatch(thunk)
+  }, [])
+
+  const changeTodolistTitle = useCallback(function (id: string, title: string) {
+    const thunk = changeTodolistTitleTC(id, title)
+    dispatch(thunk)
+  }, [])
+
+  const addTodolist = useCallback(
+    (title: string) => {
+      const thunk = addTodolistTC(title)
+      dispatch(thunk)
+    },
+    [dispatch]
+  )
+
+  if (!isLoggedIn) {
+    return <Navigate to={'/login'} />
+  }
+
+  return (
+    <>
+      <Grid
+        container
+        style={{ padding: '20px' }}
+      >
+        <AddItemForm addItem={addTodolist} />
+      </Grid>
+      <Grid
+        container
+        spacing={3}
+      >
+        {todolists.map((tl) => {
+          let allTodolistTasks = tasks[tl.id]
+
+          return (
+            <Grid
+              item
+              key={tl.id}
+            >
+              <Paper style={{ padding: '10px' }}>
+                <Todolist
+                  todolist={tl}
+                  tasks={allTodolistTasks}
+                  removeTask={removeTask}
+                  changeFilter={changeFilter}
+                  addTask={addTask}
+                  changeTaskStatus={changeStatus}
+                  removeTodolist={removeTodolist}
+                  changeTaskTitle={changeTaskTitle}
+                  changeTodolistTitle={changeTodolistTitle}
+                  demo={demo}
+                />
+              </Paper>
+            </Grid>
+          )
+        })}
+      </Grid>
     </>
+  )
 }