User Data is Not Persistent, Save it to backend

akashe · Mar 28, 2024 · 0d53bf0 · 0d53bf0
1 parent b799e65
commit 0d53bf0
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 34 deletions.
diff --git a/frontend/react-app/package-lock.json b/frontend/react-app/package-lock.json
diff --git a/frontend/react-app/package.json b/frontend/react-app/package.json
@@ -16,14 +16,16 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/resolvers": "^3.3.4",
+    "@reduxjs/toolkit": "^2.2.2",
     "axios": "^1.6.7",
     "font-awesome": "^4.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fontawesome": "^1.7.1",
     "react-hook-form": "^7.50.1",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.2",
-    "react-toastify": "^10.0.4",
+    "react-toastify": "^10.0.5",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/frontend/react-app/src/components/Choice.jsx b/frontend/react-app/src/components/Choice.jsx
@@ -1,8 +1,8 @@
+// import { toast } from "react-toastify"
 function Choice(props) {
   const { name, isChecked, setChoiceState, onPreferenceChange } = props
   const handleChange = () => {
     setChoiceState(!isChecked) // Toggle checkbox state
-    onPreferenceChange() // Call the handlePreference function passed as a prop
   }
   return (
     <div>
@@ -18,4 +18,4 @@ function Choice(props) {
   )
 }
 
-export default Choice;
+export default Choice
diff --git a/frontend/react-app/src/components/DynamicList.jsx b/frontend/react-app/src/components/DynamicList.jsx
@@ -16,7 +16,7 @@ function Main() {
       setLoading(true) // Set loading to true before fetching data
       const { data } = await axios.get("http://127.0.0.1:8000/recommend", {
         params: {
-          query: "LLM Attention GPT",
+          query: localStorage.getItem("preferences"),
         },
         headers: {
           Accept: "application/json",

diff --git a/frontend/react-app/src/main.jsx b/frontend/react-app/src/main.jsx
@@ -1,5 +1,7 @@
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import { ToastContainer } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
 
 import App from "./App.jsx"
 import NotFoundPage from "./ui/NotFoundPage.jsx"
@@ -24,7 +26,7 @@ const router = createBrowserRouter([
   },
   {
     path: "/profile",
-    element: <UserProfile loggedIn={token ? true : false}></UserProfile>,
+    element: token ? <UserProfile loggedIn={token ? true : false}></UserProfile> : <LoginPage />,
     errorElement: <NotFoundPage />,
   },
   {
@@ -39,4 +41,9 @@ const router = createBrowserRouter([
   },
 ])
 
-ReactDOM.createRoot(document.getElementById("root")).render(<RouterProvider router={router}></RouterProvider>)
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <>
+    <RouterProvider router={router} />
+    <ToastContainer />
+  </>
+)
diff --git a/frontend/react-app/src/user/UserPreference.jsx b/frontend/react-app/src/user/UserPreference.jsx
@@ -1,18 +1,57 @@
+import { useState } from "react"
+import { toast } from "react-toastify"
+
 const UserPreference = () => {
+  const [userInput, setUserInput] = useState("")
+  const [isIconClicked, setIsIconClicked] = useState(false)
+
+  const handleInputChange = (event) => {
+    setUserInput(event.target.value)
+  }
+
+  const handleIconClick = () => {
+    setIsIconClicked(true)
+    const preferences = localStorage.getItem("preferences")
+    if (preferences) {
+      toast(`Your preferences are: ${preferences}, ${userInput}`)
+    } else {
+      toast(`Your preferences are: ${userInput}`)
+    }
+  }
+
   return (
     <div className="flex flex-col">
-      <label
+      <p className="pt-1">Your Custom preferences</p>
+      {isIconClicked && <p className="text-slate-500 line-clamp-3">{userInput}</p>}
+      {/* <label
         className="py-2 text-black text-base"
         htmlFor="username">
         Add custom preferences
-      </label>
-      <input
-        type="text"
-        id="username"
-        autoComplete="off"
-        required
-        className="px-10 bg-transparent py-2 rounded-full border-2 border-slate-500 text-gray-600 focus:outline-none "
-      />
+      </label> */}
+      <div className="relative flex items-center w-[250px]">
+        <input
+          type="text"
+          id="username"
+          autoComplete="off"
+          required
+          value={userInput}
+          onChange={handleInputChange}
+          className="px-4 my-2 w-[230px] bg-transparent py-2 rounded-full border-2 border-slate-500 text-gray-600 focus:outline-none"
+          placeholder="Add custom preferences"
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="w-6 h-6 absolute right-7 top-1/2 transform -translate-y-1/2 cursor-pointer"
+          onClick={handleIconClick}>
+          <path
+            fillRule="evenodd"
+            d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </div>
     </div>
   )
 }