update: app changes

client/src/App.jsx

@@ -10,7 +10,8 @@ import Login from "./components/Login/Login";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Routes, Route } from "react-router-dom";
 import GithubCallback from "./components/GithubCallback";
-import PreviousRecommendations from "./components/PreviousRecomendations/PreviousRecommendations";
+import PreviousRecommendations from "./components/PreviousRecommendations/PreviousRecommendations";
+import AppWithoutAuth from "./AppWithouthAuth";
 
 function App() {
   const [recommendations, setRecommendations] = useState([]);
@@ -40,6 +41,7 @@ function App() {
             const data = await response.json();
             setIsAuthenticated(true);
             setUserData(data);
+            localStorage.setItem("username", data.username);
             if (location.pathname === "/") navigate("/recommender");
           } else {
             localStorage.removeItem("jwt_token");
@@ -57,9 +59,10 @@ function App() {
 
   const handleLogout = () => {
     localStorage.removeItem("jwt_token");
+    localStorage.removeItem("username");
     setIsAuthenticated(false);
     setUserData(null);
-    navigate("/login");
+    navigate("/");
   };
 
   const handleSubmit = async (inputData) => {
@@ -100,6 +103,7 @@ function App() {
         <Routes>
           <Route path="/login" element={<Login />} />
           <Route path="/auth-callback" element={<GithubCallback />} />
+          <Route path="/try-recommender" element={<AppWithoutAuth />} />
           <Route
             path="/recommender"
             element={

client/src/AppWithoutAuth.jsx

@@ -0,0 +1,50 @@
+// src/NonauthApp.jsx
+
+import React, { useState } from "react";
+import "./App.css";
+import InputWithoutAuth from "./components/InputFormWithoutAuth/InputFormWithoutAuth";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { Recommendation } from "./components/Recommendation/Recommendation";
+import Navbar from "./components/Navbar/Navbar";
+import Footer from "./components/Footer/Footer";
+
+function AppWithoutAuth() {
+  const [recommendations, setRecommendations] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (recommendationsData) => {
+    setLoading(true);
+    try {
+      setRecommendations(recommendationsData);
+    } catch (error) {
+      console.error("Error fetching recommendations:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="app-container">
+      <div className="top-row">
+        <div className="input-container">
+          <InputWithoutAuth onSubmit={handleSubmit} />
+        </div>
+      </div>
+      <div className="recommendations-container">
+        {loading ? (
+          <div className="loading-container">
+            <div className="loader"></div>
+            <p>Loading recommendations...</p>
+          </div>
+        ) : recommendations.length > 0 ? (
+          <Recommendation recommendations={recommendations} />
+        ) : null}
+      </div>
+      <Footer />
+      <ToastContainer />
+    </div>
+  );
+}
+
+export default AppWithoutAuth;