saving

react_frontend/src/Idea.js

@@ -1,14 +1,40 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 import { Link, useParams} from 'react-router-dom'
 
 function Idea({ideaId, title, description, timestamp}){
     
     let params = useParams();
+    let [t, setT] = useState(title);
+    let [d, setD] = useState(description);
+
+    const fetchIdea = async () => {
+        const data = await fetch(
+            'http://localhost:5000/idea/' + params.ideaId
+        );
+        
+        const idea = await data.json();
+        
+        setT(idea.title);
+        setD(idea.content);
+    }
+
+    
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if(parseInt(params.ideaId) === ideaId){
+                fetchIdea();
+            }
+        }, 3000);
+
+        return () => clearInterval(interval);
+      }, []);
+
     return(
         <Link to={`/idea/${ideaId}`}>
             <div className={`idea ${parseInt(params.ideaId) === ideaId ? "current" : ""}`}>
-                <p className="title">{title}</p>
-                <p className="description">{description}</p>
+                <p className="title">{t}</p>
+                <p className="description">{d}</p>
                 <p className="timestamp">{timestamp}</p>
             </div>
         </Link>

react_frontend/src/IdeaContent.js

@@ -6,10 +6,51 @@ function IdeaContent(){
     let params = useParams();
     let [title, setTitle] = useState("");
     let [content, setContent] = useState("")
+    let [saved , setSaved] = useState(false);
+    let [seconds, setSeconds] = useState(0);
 
+    let secondsSaveInterval = 3;
+
+    // TIMER
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setSeconds(seconds => seconds + 1);
+
+            if(seconds > secondsSaveInterval){ // save every > secondsSaveInterval seconds
+                saveData();
+                setSeconds(0);
+            }
+
+            }, 1000);
+
+        return () => clearInterval(interval);
+    });
     
+    const saveData = async () => {
+        let ideaData = {
+            title: title,
+            content: content
+        }
 
+        let data = await fetch('http://localhost:5000/idea/update/' + params.ideaId, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(ideaData)
+        });
+
+        let res = await data.json();
+
+        if(res.title === "Success"){
+            setSaved(true);
+        } else {
+            setSaved(false);
+        }
+    }
+        
     const fetchIdea = async () => {
+        // fetch and check for error
         const data = await fetch(
             'http://localhost:5000/idea/' + params.ideaId
         );
@@ -30,11 +71,12 @@ function IdeaContent(){
             <div className="head">
                 <input type="text" name="title"
                  value={title}
-                 onChange={(e) => { setTitle(e.target.value) }}
+                 onChange={(e) => { setTitle(e.target.value); setSaved(false) }}
                  placeholder="Insert a title"/>
+                 <small>{saved ? "Saved!": "Saving..."}</small>
             </div>
             <div className="textAreaContainer">
-                <textarea value={content} onChange={(e) => { setContent(e.target.value) }}></textarea>
+                <textarea value={content} onChange={(e) => { setContent(e.target.value); setSaved(false)}}></textarea>
             </div>
         </div>
     )

react_frontend/src/IdeaList.js

@@ -22,7 +22,7 @@ function IdeaList() {
     useEffect(() => {
         fetchIdeas();
     }, []);
-
+    
     return (
         <div className='ideaList'>
             <div className='head'>