Question about using classes on React

Hi everyone, I’m used to Ionic + Angular and I’m trying to understand React. My problem is:

I am developing a simple application that stores the username that logged in. If there is a name stored, app navigates to options page directly. That works, the problem is that i have an User Class with an array of users where users are stored and, when I navigate between pages that infoirmation is lost.

Home.tsx (Page)

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
import Login from '../../components/Login/Login';
import './Home.css';

const Home: React.FC = () => {

  const myItems = [{ name: 'anm', id: 1 }, { name: 'smm', id: 2 }, { name: 'hvb', id: 3 }];
  
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Inicio</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank</IonTitle>
          </IonToolbar>
        </IonHeader>
        <Login items={myItems}/>
      </IonContent>
    </IonPage>
  );
};

export default Home;

Login.tsx (Component)

import React, { useState, useEffect } from 'react';
import { IonList, IonItem, IonLabel } from '@ionic/react';
import { User } from '../../classes/User';
import './Login.css';
import { Plugins } from '@capacitor/core';

const { Storage } = Plugins;

interface Item {
    name: string;
    id: number;
}

interface ChildComponentProps {
    items: Item[]
}

const Login: React.FC<ChildComponentProps> = (props) => {

    // Declara una nueva variable de estado, que llamaremos "count".
    const [savedUser, setSavedUser] = useState('');

    useEffect(() => {
        async function checkLog() {
            const ret: any = await Storage.get({ key: 'user' });
            let stored = JSON.parse(ret.value);

            if (stored.name !== '') {
                console.log(stored.name);
                let user = new User(stored.name);
                User.users.splice(0);
                User.users.push(user);
                window.location.href = "/options";
            }
        }
        checkLog();
    }, [savedUser]);

    const userSelecction = async (name: string, id: number) => {

        await Storage.set({
            key: 'user',
            value: JSON.stringify({
                id: id,
                name: name
            })
        });

        setSavedUser(name);
    }

    return (
        <IonList>
            {
                props.items.map((item: any) => (
                    <IonItem onClick={() => userSelecction(item.name, item.id)} key={item.id}>
                        <IonLabel>{item.name}</IonLabel>
                    </IonItem>
                )
                )
            }
        </IonList>
    );
};

export default Login;

Options.tsx (Page)

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React, { useEffect, useState } from 'react';
import './Options.css';
import { User } from '../../classes/User';

const Options: React.FC = () => {
  const [loggedUser, setLoggedUser] = useState('User.users[0].getName()');

  useEffect(() => {
    async function checkIfUserIsLoggedIn() {
      console.log(User.users);
      if(User.users.length > 0){
        setLoggedUser(User.users[0].getName());
      }
    }
    checkIfUserIsLoggedIn();
  }, [loggedUser]);
  
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>{loggedUser}</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank</IonTitle>
          </IonToolbar>
        </IonHeader>
      </IonContent>
    </IonPage>
  );
};

export default Options;

Log on Options.tsx result

1 post - 1 participant

Read full topic