create idea

express_backend/server.js

@@ -22,7 +22,7 @@ app.use(function(req, res, next) {
 
 app.listen(port, () => console.log(`Listening on port ${port}`));
 
-app.get('/idea/:id', (req, res) => {
+app.get('/idea/get/:id', (req, res) => {
 
     db.all(`SELECT * FROM ideas WHERE id = ${req.params.id}`, (err, rows) => {
         if (err) {
@@ -42,7 +42,7 @@ app.get('/idea/:id', (req, res) => {
 });
 
 app.get('/ideas', (req, res) => {
-    db.all(`SELECT * FROM ideas`, (err, rows) => {
+    db.all(`SELECT * FROM ideas ORDER BY id DESC`, (err, rows) => {
         if (err) {
             res.send({title: "Error", content: "Error fetching ideas"});
         }else{
@@ -95,3 +95,22 @@ app.post('/idea/update/:id', (req, res) => {
         }
     });
 });
+
+app.get('/idea/create', (req, res) => {
+    console.log("CREATE")
+    // Create new idea
+    db.run(`INSERT INTO ideas (title, content) VALUES ('New Idea', 'New Content')`, (err) => {
+        if (err) {
+            res.send({title: "Error", type:"create", message: "Error creating new idea"});
+        }else{
+            // SELECT id from last idea
+            db.all(`SELECT * FROM ideas ORDER BY id DESC LIMIT 1`, (err, rows) => {
+                if (err) {
+                    res.send({title: "Error", type:"create", message: "Error fetching new idea id"});
+                }else{
+                    res.send({title: "Success", type:"create", id:rows[0].id, message: "New idea created"});
+                }
+            });
+        }
+    });
+});

react_frontend/src/Idea.js

@@ -9,7 +9,7 @@ function Idea({ideaId, title, description, timestamp}){
 
     const fetchIdea = async () => {
         const data = await fetch(
-            'http://localhost:5000/idea/' + params.ideaId
+            'http://localhost:5000/idea/get/' + params.ideaId
         );
         
         const idea = await data.json();

react_frontend/src/IdeaContent.js

@@ -66,7 +66,7 @@ function IdeaContent(){
     const fetchIdea = async () => {
         // fetch and check for error
         const data = await fetch(
-            'http://localhost:5000/idea/' + params.ideaId
+            'http://localhost:5000/idea/get/' + params.ideaId
         );
         
         const idea = await data.json();

react_frontend/src/IdeaList.js

@@ -9,6 +9,20 @@ function IdeaList() {
     let selectedIdeaId = params.ideaId;
     let [ideas, setIdeas] = useState([]);
 
+    const createIdea = async() => {
+        console.log('createIdea');
+
+        const data = await fetch(
+            'http://localhost:5000/idea/create'
+        );
+        
+        const result = await data.json();
+        console.log(result)
+        if(result.title === "Success"){
+            window.location = '/idea/' + result.id;
+        }
+
+    }
     const fetchIdeas = async () => {
         const data = await fetch(
             'http://localhost:5000/ideas/'
@@ -32,7 +46,7 @@ function IdeaList() {
                 <img src="/" alt="" />
 
                 <div className="newIdea">
-                    <p>+</p>
+                    <p onClick={createIdea}>+</p>
                 </div>
                 
             </div>

react_frontend/src/css/App.scss

@@ -2,9 +2,10 @@
     display:block;
     background-color: rgb(32, 32, 32);
     width: 20%;
-    height: 100%;
+    height: 100vh;
     min-height: 100vh;
     float:left;
+    overflow: auto;
 }
 
 .content{

react_frontend/src/css/IdeaContent.scss

@@ -49,9 +49,10 @@
     }
 
     .textAreaContainer{
-        width: 100%;
+        width: calc(100% - 10px);
         height: 700px;
         display: block;
+        padding-left: 10px;
 
         textarea{
             outline: 0;

react_frontend/src/css/index.scss

@@ -11,3 +11,24 @@ body, html{
   background: #282727;
   min-height: 100%;
 }
+
+// SCROLLBAR
+* {
+  scrollbar-width: auto;
+  scrollbar-color: #62cba3 transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #62cba3;
+  border-radius: 10px;
+  border: 3px solid transparent;
+}