How to monitor the state of a boolean on reboot?

K

kirillleogky2020-08-07 18:48:56

JavaScript

kirillleogky, 2020-08-07 18:48:56

isAuth is a boolean that tells if the user is logged in
dispatch(actions.setIsAuth(true)) - sets it to true
firebase's authorization tracking function:

auth.onAuthStateChanged((user) => {
    if (user && !isAuth) {
      dispatch(actions.setIsAuth(true));
    }
  });

Next in the code, I look at isAuth and decide what to render:

<main>
          {isAuth ? (
            <Main
              onAddTodo={addTodo}
              onDragEnd={(result) =>
                onDragEnd(result, filterTodos, state, dispatch)
              }
              onDeleteTodo={deleteTodo}
              onDoneTodo={doneTodo}
              todos={filterTodos}
            />
          ) : (
            <Auth />
          )}
        </main>

Tell me how can I do it so that when the page is reloaded, the Main component is immediately rendered?
How right?
Without such a frieze: https://youtu.be/5vxYhGFqx0s

The code itself:

import React, { Fragment } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";
import actions from "./actions";
import "./App.scss";
import Head from "./components/head";
import Main from "./components/main";
import Auth from "./components/main/auth";
import onDragEnd from "./utils/onDragEnd";
import onFilterTodos from "./utils/filterTodos";
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

export default function App() {
  const state = useSelector((state) => state);
  const isShowTips = useSelector((state) => state.isShowTips.data);
  const todoList = useSelector((state) => state.todoList.data);
  const inputActiveClass = useSelector((state) => state.inputActiveClass.data);
  const isAuth = useSelector((state) => state.isAuth.data);
  const dispatch = useDispatch();

  // Initial Firebase
  const firebaseConfig = {
    apiKey: "????",
    authDomain: "?????",
    databaseURL: "https://to-do-list-c0409.firebaseio.com",
    projectId: "to-do-list-c0409",
    storageBucket: "to-do-list-c0409.appspot.com",
    messagingSenderId: "219696490030",
    appId: "?????",
  };
  !firebase.apps.length
    ? firebase.initializeApp(firebaseConfig)
    : firebase.app();

  // Make Auth And Firestore References
  const auth = firebase.auth();
  const db = firebase.firestore();

  // Create Current User Id
  let currentUser;

  auth.onAuthStateChanged((user) => {
    if (user && !isAuth) {
      dispatch(actions.setIsAuth(true));
    }
    if (user) {
      currentUser = user.uid;
    }
  });

  return (
    <Fragment>
      <div
        id={`${isShowTips ? "focus_on_tips" : ""}`}
        className="todo_block"
        onClick={checkInput}
      >
        <header>
          <Head />
        </header>
        <main>
          {isAuth ? (
            <Main
              onAddTodo={addTodo}
              onDragEnd={(result) =>
                onDragEnd(result, filterTodos, state, dispatch)
              }
              onDeleteTodo={deleteTodo}
              onDoneTodo={doneTodo}
              todos={filterTodos}
            />
          ) : (
            <Auth />
          )}
        </main>
      </div>
    </Fragment>
  );
}

App.propTypes = {
  isShowTips: PropTypes.bool,
  todoList: PropTypes.array,
  inputActiveClass: PropTypes.string,
};

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey Suntsev, 2020-08-07
@GreyCrew

firebase is a server data store, so you must store some information on the client.
For example, put apiKey in cookies, if it exists, then isAuth will be true.
But with each request to the server, check if apiKey is valid, if apiKey is not valid, then isAuth is false.
Also, when logging out, delete the apiKey, and then the user will see Auth