Feat:Added logic to redirect the user to login page if user is not logged in
This commit is contained in:
@@ -1,31 +1,52 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import Sidebar from "../../components/Sidebar";
|
import Sidebar from "../../components/Sidebar";
|
||||||
import FileList from "../../components/FileList";
|
import FileList from "../../components/FileList";
|
||||||
import FileUploadModal from "../../components/FileUploadModal"; // renamed the import accordingly
|
import FileUploadModal from "../../components/FileUploadModal";
|
||||||
|
|
||||||
import { FiPlus } from "react-icons/fi";
|
import { FiPlus } from "react-icons/fi";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const [files, setFiles] = useState([]);
|
const [files, setFiles] = useState([]);
|
||||||
// State to manage upload modal visibility
|
|
||||||
const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
|
const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL;
|
||||||
|
const isUserLoggedIn = () => {
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const username = localStorage.getItem("username");
|
||||||
|
const expiresIn = localStorage.getItem("expiresIn");
|
||||||
|
|
||||||
|
if (!token || !username || !expiresIn) return false;
|
||||||
|
|
||||||
|
const expiryTime = new Date(expiresIn).getTime();
|
||||||
|
const now = new Date().getTime();
|
||||||
|
|
||||||
|
if (now > expiryTime) {
|
||||||
|
localStorage.clear();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
const fetchFiles = async () => {
|
const fetchFiles = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(`${API_URL}/api/hdfs/listFiles?hdfsPath=/`);
|
||||||
"http://192.168.29.61:8080/api/hdfs/listFiles?hdfsPath=/"
|
|
||||||
);
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
setFiles(data);
|
setFiles(data);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to fetch files:", error);
|
console.error("Failed to fetch files:", error);
|
||||||
|
setError("Failed to load files. Please try again later.");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchFiles();
|
if (!isUserLoggedIn()) {
|
||||||
// downloadFile("/sonali/cc.pptx", "kalas");
|
navigate("/login");
|
||||||
}, []);
|
} else {
|
||||||
|
fetchFiles();
|
||||||
|
}
|
||||||
|
}, [navigate]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -34,7 +55,6 @@ const Dashboard = () => {
|
|||||||
<div className="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
|
<div className="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
|
||||||
<div className="w-full flex justify-between items-center">
|
<div className="w-full flex justify-between items-center">
|
||||||
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
|
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
|
||||||
{/* Use onClick to toggle the modal */}
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsUploadModalOpen(true)}
|
onClick={() => setIsUploadModalOpen(true)}
|
||||||
className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center"
|
className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center"
|
||||||
@@ -43,17 +63,19 @@ const Dashboard = () => {
|
|||||||
<FiPlus className="text-2xl" />
|
<FiPlus className="text-2xl" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<FileList files={files} />
|
{error ? (
|
||||||
|
<p className="text-red-500">{error}</p>
|
||||||
|
) : (
|
||||||
|
<FileList files={files} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Render the FileUploadModal with proper props */}
|
|
||||||
<FileUploadModal
|
<FileUploadModal
|
||||||
show={isUploadModalOpen}
|
show={isUploadModalOpen}
|
||||||
onClose={() => setIsUploadModalOpen(false)}
|
onClose={() => setIsUploadModalOpen(false)}
|
||||||
onUploadSuccess={() => {
|
onUploadSuccess={() => {
|
||||||
fetchFiles();
|
fetchFiles();
|
||||||
// Optionally close the modal after upload success
|
|
||||||
setIsUploadModalOpen(false);
|
setIsUploadModalOpen(false);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user