Atualizar o useEffect do react

[guilhermebhte]

Como falado neste tópico Redirecionamento no react após clicar no botão - resolvido, e conseguindo fazer o redirecionamento, não consegui fazer o seguinte:

Tela sem menu - Antes de logar

Tela com menu - Após logar

Código de login

import { Button, Card, Form, Input } from 'antd';
import React from 'react';
import './styles.css';
export default function Login({history}: any) {
    const [form] = Form.useForm();
    const formLayout = 'vertical';
    const formItemLayout = {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
    };
    const onFinish = () => {
      localStorage.setItem('logado', JSON.stringify(true));
      history.push('/calendario');
    };
    return (
      <>
        <Card title="Formulário de login" style={{ width: '100%' }}>
          <Form
            onFinish={onFinish}
            {...formItemLayout}
            layout={formLayout}
            form={form}
            initialValues={{ layout: formLayout }}
          >
          <Form.Item 
            label="Login"
            name="username"
            rules={[{ required: true, message: 'Login é obrigatório' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="Senha"
            name="password"
            rules={[{ required: true, message: 'Senha é obrigatória !' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <div>
              <Button type="primary" block htmlType="submit">Login</Button>
            </div>
          </Form.Item>
          <Form.Item>
            <div>
              <Button type="primary" block>Login with Facebook</Button>
            </div>
          </Form.Item>
          <Form.Item>
            <div>
              <Button type="primary" danger block>Login with Google +</Button>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </>
  );
}

Código do App

import { Layout } from "antd";
import React, { useState, useEffect } from "react";
import MenuSystem from "./pages/MenuSystem/MenuSystem";
import Routes from "./routes";
import HeaderSystem from "./pages/HeaderSystem";
const { Header, Content, Sider } = Layout;
export default function App({history}: any) {
  const [state, setState] = useState(false);
  const [visible, setVisible] = useState(false);
  const [usuarioLogado, setUsuarioLogado] = useState(localStorage.getItem('logado'));
  useEffect(
    () => {
      if(usuarioLogado) {
        setVisible(true)
      }
    }, [usuarioLogado]
  );
  const onCollapse = (collapsed: any) => {
    setState(collapsed);
  };
  return (
    <>
      <Layout style={{ minHeight: '100vh' }}>
        <Header><HeaderSystem /></Header>
        <Layout className="site-layout">
          <Sider collapsible={visible} collapsed={state} onCollapse={onCollapse} >
            { visible ? <MenuSystem /> : null}
          </Sider>
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <Routes />
            </div>
          </Content>
        </Layout>
      </Layout>
    </>
  );
};

No componente App, estamos utilizando o useEffect, para sempre que o localStorage.getItem(‘logado’) mudar alterar o state visible.

Após logar ele vai para a rota definida, mas o useEffect não é acionado. Se eu aperto o F5, ai sim. localStorage

O que pode ser ?

[thimor]

o useEffect voce precisa declarar uma funcao e depois chamar a funcao, essa é a recomendacao de boas praticas.

useEffect(() => {
    function showCalendario() {
        setVisible(true);
    }
    if(usuarioLogado) {
        showCalendario();
    }
},[usuarioLogado]);

mas nesse caso voce nem precisa do useEffect, basta usar o teste do usuario logado no componente.

[guilhermebhte]

@thimor
Entendi Alterei para esta forma, mas sem sucesso.

Só aparece o menu se aperto F5

App

import { Layout } from "antd";
import React, { useState } from "react";
import Auth from "./auth";
import HeaderSystem from "./pages/HeaderSystem";
import MenuSystem from "./pages/MenuSystem/MenuSystem";
import Routes from "./routes";
const { Header, Content, Sider } = Layout;
const auth = new Auth();
export default function App({history}: any) {
  const [state, setState] = useState(false);
  const onCollapse = (collapsed: any) => {
    setState(collapsed);
  };
  return (
    <>
      <Layout style={{ minHeight: '100vh' }}>
        <Header><HeaderSystem /></Header>
        <Layout className="site-layout">
          <Sider collapsible={auth.isAuthenticated()} collapsed={!auth.isAuthenticated() && state} 
            onCollapse={onCollapse} >
            { auth.isAuthenticated() ? <MenuSystem /> : null}
          </Sider>
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <Routes />
            </div>
          </Content>
        </Layout>
      </Layout>
    </>
  );
};

Auth

export default class Auth {
    login(email: string) {
        localStorage.setItem('logado', JSON.stringify(true));
        localStorage.setItem('email', JSON.stringify(email));
    }
    isAuthenticated() {
        return !!localStorage.getItem('logado')
    }
    logout({history}: any) {
        localStorage.removeItem('logado');
        history.replace('/')
    }
}