У меня есть приложение Jewlery Store, использующее React, и есть два типа пользователей: администратор и покупатель. Администратор имеет возможность увидеть таблицу со всеми пользователями и узнать, находится ли пользователь в сети или офлайн. Я сделал это, присвоив каждому клиенту активный атрибут, и когда кто-то успешно входит в систему, активный атрибут меняется на 1 (онлайн), в противном случае он становится 0 (офлайн). Та же идея, которую я использовал для выхода из системы.
Проблема в том, что изменение в активном столбце не загружается правильно, пока я не обновлю страницу с таблицей, она останется в последнем статусе, который у нее был, поэтому проблема в интерфейсе. и я не знаю точно, где.
Это страница входа:
import axios from "axios";
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
export default function Login() {
const navigate = useNavigate();
const [customer, setCustomer] = useState({
email: "",
password: "",
});
const [onlineusers, setOnline] = useState([]); // State to track online/offline status
useEffect(() => {
// Load online/offline status when component mounts
loadOnlineStatus();
}, []);
const { email, password } = customer;
const onInputChange = (e) => {
setCustomer({ ...customer, [e.target.name]: e.target.value });
};
const loadOnlineStatus = async () => {
// try {
const response = await axios.get("http://localhost:8080/customers");
setOnline(response.data);
// } catch (error) {
// console.error("Error loading online status:", error);
// }
};
const onSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.get(
`http://localhost:8080/customerEmail?ema ... ${password}`
);
const loggedInCustomer = response.data;
if (loggedInCustomer) {
console.log("Login successful:", loggedInCustomer);
await axios.put(`http://localhost:8080/customeron/${email}`);
loadOnlineStatus();
//stocare email
localStorage.setItem('loggedInEmail', email);
const role = await axios.get(
`http://localhost:8080/role?email=${emai ... ${password}`
);
if (role.data==="ADMIN") {
navigate("/admin");
} else {
navigate("/customer");
}
} else {
console.error("Login failed");
}
} catch (error) {
console.error("Error during login:", error);
}
};
return (
Log In
onSubmit(e)}>
E-mail
onInputChange(e)}
/>
Password
onInputChange(e)}
/>
Log In
Sign Up
);
}
Это моя страница онлайн-пользователей:
import React, { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
export default function OnlineUsers() {
const [users, setUsers] = useState([]);
useEffect(() => {
loadUsers();
}, []);
const loadUsers = async () => {
const result = await axios.get("http://localhost:8080/customers");
setUsers(result.data);
};
return (
ID
Name
Username
Email
Online Activity
{users.map((user, index) => (
{index + 1}
{user.name}
{user.username}
{user.email}
{user.activ===0 ? "Offline" : "Online"}
))}
Back
);
}
Это функция контроллера, которая получает всех клиентов:
@GetMapping("/customers")
List getAllCustomers() {
return customerService.findAll();
}
Подробнее здесь: https://stackoverflow.com/questions/784 ... -i-refresh
