ProtectedRoute

YusifHasanov

The code first defines an adapter which takes in a user's id as the selectId. It also defines a sortComparer function which will compare the user's name in the locale of the user's current device. Lastly, the adapter defines four mutations which will interact with the user's data in the firestore.

In the code, there are three functions which use the adapter: useGetUsersQuery, useAddUserMutation, and useUpdateUserMutation. Each of these functions takes in a selector which will select the relevant data from the user's firestore collection. selectAllUsers will return a selector which will select all of the data in the user's firestore collection, selectById will take in a user's id and return the data for that user, and selectUserById will take in a user's id and return the data for that user as well as their selected data from the user's firestore collection.

Library: react

import { Outlet, Navigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { isAuthenticated } from '../redux/auth'

const Protect = ({ redirect = "/login" }) => {
  const auth = useSelector(isAuthenticated)
  return (
    auth? <Outlet /> : <Navigate to={redirect} replace />
  )
}

export default Protect