Add search effect

frontend/public/history.json

@@ -0,0 +1,77 @@
+[
+    {
+        "conversation_id": 1,
+        "title": "Introduction to React",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 2,
+        "title": "Grundlagen von JavaScript",
+        "language": "DE"
+    },
+    {
+        "conversation_id": 3,
+        "title": "Getting Started with Python",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 4,
+        "title": "Fortgeschrittene CSS-Techniken",
+        "language": "DE"
+    },
+    {
+        "conversation_id": 5,
+        "title": "Machine Learning Basics",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 6,
+        "title": "Einführung in die Datenbanken",
+        "language": "DE"
+    },
+    {
+        "conversation_id": 7,
+        "title": "Web Development with Node.js",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 8,
+        "title": "Responsive Design Principles",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 9,
+        "title": "Webdesign und Benutzerfreundlichkeit",
+        "language": "DE"
+    },
+    {
+        "conversation_id": 10,
+        "title": "Data Science for Beginners",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 11,
+        "title": "Moderne Frontend-Frameworks",
+        "language": "DE"
+    },
+    {
+        "conversation_id": 12,
+        "title": "Exploring AI and Machine Learning",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 13,
+        "title": "Backend-Entwicklung mit Java",
+        "language": "DE"
+    },
+    {
+        "conversation_id": 14,
+        "title": "Building Mobile Apps with React Native",
+        "language": "EN"
+    },
+    {
+        "conversation_id": 15,
+        "title": "Die Welt der Kryptowährungen",
+        "language": "DE"
+    }
+]

frontend/src/components/default-layout/default-layout.component.jsx

@@ -13,13 +13,20 @@ export default function DefaultLayout() {
 
     const [chats, setChats] = useState([])
 
+    // useEffect(() => {
+    //     console.log('settings chats')
+    //     fetch('https://jsonplaceholder.typicode.com/albums')
+    //         .then(res => res.json())
+    //         .then(data => setChats(data))
+    // }, []);
 
     useEffect(() => {
         console.log('settings chats')
-        fetch('https://jsonplaceholder.typicode.com/albums')
-            .then(res => res.json())
+        fetch('/history.json') 
+            .then(response => response.json())
             .then(data => setChats(data))
-    }, []);
+            .catch(error => console.error('Error fetching data:', error));
+        }, []);
 
 
     if (!user) {
@@ -33,7 +40,7 @@ export default function DefaultLayout() {
         e.preventDefault();
         dispatch(logoutUser());
         navigate('/login')
-    };
+    };  
 
     return (
         <div id={"defaultLayout"} style={{ display: 'flex' }}>

frontend/src/pages/dashboard/dashboard.component.jsx

@@ -1,25 +1,38 @@
 import {useSelector} from "react-redux";
 import {selectCurrentUser} from "../../store/user/user.selector";
 import {Navigate} from "react-router-dom";
-import {useRef, useState} from "react";
+import {useRef, useState, useEffect} from "react";
 import keyboardImage from '../../assets/keyboard.png'
 import WriteLikeChatGPT from 'write-like-chat-gpt'
 
 export function Dashboard() {
     const currentUser = useSelector(selectCurrentUser)
     const searchRef = useRef(null)
-    const [docs, setDocs] = useState([])
+    const [docs, setDocs] = useState(null)
+    const [inputValue, setInputValue] = useState('');
+
+    // useEffect(() => {
+    //     fetch('/history.json') 
+    //       .then(response => response.json())
+    //       .then(data => setDocs(data))
+    //       .catch(error => console.error('Error fetching data:', error));
+    //   }, []);
 
     const handleSubmit = (e) => {
         e.preventDefault()
         console.log('Requesting for keyword...', searchRef.current.value)
 
-        fetch('https://jsonplaceholder.typicode.com/posts')
+        fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
+        // fetch('/history.json')
             .then(res => res.json())
             .then(data => setDocs(data))
-    }
 
 
+         // Clear the input field by resetting its value to an empty string
+        searchRef.current.value = '';
+        console.log('ref', searchRef);
+    }
+
     if (!currentUser) {
         return <Navigate to={'/login'}/>
     }
@@ -29,28 +42,27 @@ export function Dashboard() {
             <form onSubmit={handleSubmit} style={{position: 'sticky'}}>
                 <input ref={searchRef} placeholder={"Search"} id="search-bar"/>
             </form>
-            {!searchRef.current?.value && (
-                <>
-                <div style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: 'calc(50vh)',
-                    color: 'grey'
-                }}>
-                    <img src={keyboardImage} alt={'keyboard'} height={70} width={'auto'} color={'grey'}
-                    style={{margin: '20px'}}/>
-                    <h2>Start searching and find the data you are looking for...</h2>
-                </div>
-                </>
-            )}
-            {searchRef.current?.value && (
+            {docs ? (
                 <div className={'docs-container'}
                      style={{marginTop: '10px', padding: '20px', height: '100vh', overflowY: 'auto'}}>
-                    {docs.map(doc => (<div className="doc" key={doc.id}><WriteLikeChatGPT text={doc.title} /></div>))}
+                    {docs.map(doc => (<div className="doc" key={doc.id}><WriteLikeChatGPT text={doc.body} /></div>))}
                 </div>
-            )}
+            ) : 
+            <>
+            <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: 'calc(50vh)',
+                color: 'grey'
+            }}>
+                <img src={keyboardImage} alt={'keyboard'} height={80} width={'auto'} color={'grey'}
+                style={{margin: '20px', opacity: '0.7'}}/>
+                <h2>Start searching and find the data you are looking for...</h2>
+            </div>
+            </>
+        }
         </div>
 
     )