create idea

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

@@ -10,4 +10,25 @@
 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;
 }