From 09feecf53c9ff19decab49dfce650148030e82e6 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sat, 17 Aug 2024 20:29:39 +0200
Subject: [PATCH] chore: refactor auth reducer to export selectors

---
 src/app/App.tsx                              | 7 ++-----
 src/features/Login/Login.tsx                 | 7 ++-----
 src/features/Login/auth-reducer.ts           | 5 ++++-
 src/features/TodolistsList/TodolistsList.tsx | 5 ++---
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 61639a8..3359719 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -3,7 +3,6 @@ import './App.css'
 import { TodolistsList } from 'features/TodolistsList/TodolistsList'
 import { ErrorSnackbar } from 'components/ErrorSnackbar/ErrorSnackbar'
 import { useDispatch, useSelector } from 'react-redux'
-import { AppRootState } from './store'
 import {
   initializeAppTC,
   selectAppInitialized,
@@ -11,7 +10,7 @@ import {
 } from './app-reducer'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { Login } from 'features/Login/Login'
-import { logoutTC } from 'features/Login/auth-reducer'
+import { logoutTC, selectIsLoggedIn } from 'features/Login/auth-reducer'
 import {
   AppBar,
   Button,
@@ -31,9 +30,7 @@ type Props = {
 function App({ demo = false }: Props) {
   const status = useSelector(selectAppStatus)
   const isInitialized = useSelector(selectAppInitialized)
-  const isLoggedIn = useSelector<AppRootState, boolean>(
-    (state) => state.auth.isLoggedIn
-  )
+  const isLoggedIn = useSelector(selectIsLoggedIn)
   const dispatch = useDispatch<any>()
 
   useEffect(() => {
diff --git a/src/features/Login/Login.tsx b/src/features/Login/Login.tsx
index 990fab2..d2b082a 100644
--- a/src/features/Login/Login.tsx
+++ b/src/features/Login/Login.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { useFormik } from 'formik'
 import { useSelector } from 'react-redux'
-import { loginTC } from './auth-reducer'
-import { AppRootState } from 'app/store'
+import { loginTC, selectIsLoggedIn } from './auth-reducer'
 import { Navigate } from 'react-router-dom'
 import { useAppDispatch } from 'hooks/useAppDispatch'
 import {
@@ -19,9 +18,7 @@ import {
 export const Login = () => {
   const dispatch = useAppDispatch()
 
-  const isLoggedIn = useSelector<AppRootState, boolean>(
-    (state) => state.auth.isLoggedIn
-  )
+  const isLoggedIn = useSelector(selectIsLoggedIn)
 
   const formik = useFormik({
     validate: (values) => {
diff --git a/src/features/Login/auth-reducer.ts b/src/features/Login/auth-reducer.ts
index 828dbe5..ab33899 100644
--- a/src/features/Login/auth-reducer.ts
+++ b/src/features/Login/auth-reducer.ts
@@ -23,10 +23,13 @@ export const authSlice = createSlice({
       state.isLoggedIn = action.payload
     },
   },
+  selectors: {
+    selectIsLoggedIn: (state) => state.isLoggedIn,
+  },
 })
 
 export const { setIsLoggedIn } = authSlice.actions
-
+export const { selectIsLoggedIn } = authSlice.selectors
 // thunks
 export const loginTC =
   (data: LoginParams): AppThunk =>
diff --git a/src/features/TodolistsList/TodolistsList.tsx b/src/features/TodolistsList/TodolistsList.tsx
index f6f2f0d..bb2d07e 100644
--- a/src/features/TodolistsList/TodolistsList.tsx
+++ b/src/features/TodolistsList/TodolistsList.tsx
@@ -22,6 +22,7 @@ import { AddItemForm } from 'components/AddItemForm/AddItemForm'
 import { Todolist } from './Todolist/Todolist'
 import { Navigate } from 'react-router-dom'
 import { useAppDispatch } from 'hooks/useAppDispatch'
+import { selectIsLoggedIn } from 'features/Login/auth-reducer'
 
 type Props = {
   demo?: boolean
@@ -32,9 +33,7 @@ export const TodolistsList: React.FC<Props> = ({ demo = false }) => {
     (state) => state.todolists
   )
   const tasks = useSelector<AppRootState, TasksState>((state) => state.tasks)
-  const isLoggedIn = useSelector<AppRootState, boolean>(
-    (state) => state.auth.isLoggedIn
-  )
+  const isLoggedIn = useSelector(selectIsLoggedIn)
 
   const dispatch = useAppDispatch()