Frontend/styling

README.md

@@ -23,7 +23,7 @@ We will need to set up and start these three components in the order above for e
 ### Prerequisites
 - Install `docker` and `docker-compose`.
 - Install `Nodejs`.
-- Install a proper IDE/Text editor fo Java and Javascript. IntelliJ community edition is recommended for Java development but doesn't work very well with JavaScript. It's therefore recommended to use VS Code or any other JavaScript-friendly IDE when working with frontend code.
+- Install a proper IDE/Text editor for Java and Javascript. IntelliJ community edition is recommended for Java development but doesn't work very well with JavaScript. It's therefore recommended to use VS Code or any other JavaScript-friendly IDE when working with frontend code.
 
 ### Starting the database
 To start the database open the terminal and `cd` your way in to the project root folder. You can just simply run

frontend/public/index.html

@@ -39,5 +39,10 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script
+            src="https://code.jquery.com/jquery-3.4.1.min.js"
+            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+            crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
 </html>

frontend/src/App.css

@@ -1,6 +1,7 @@
 body {
   min-height: 100vh;
-  background: linear-gradient(to right, #2c3e50, #3498db);
+  background-image: url("/blueswirly.png");
+  background-size: 100%;
 }
 
 .App {
@@ -25,3 +26,31 @@ body {
 .App-link {
   color: #09d3ac;
 }
+
+#ournavbar {
+    background: linear-gradient(to right, #009090, black, #004848);
+}
+
+#ournavlogo {
+    border-radius: 17px;
+}
+
+#content {
+border-radius:  20px;
+}
+#contentchat{
+border-radius:  20px;
+height: 1160px;
+}
+.slogan{
+font-family: emoji;
+font-size: 30px;
+line-height: 12pt;
+left: 10px;
+}
+#contentCommentForm{
+border-radius:  15px;
+}
+#contentPostForm{
+border-radius:  15px;
+}

frontend/src/api/CommentApi.js

@@ -0,0 +1,25 @@
+import Api from "./Api";
+
+class CommentsApi {
+    getAllComments() {
+        return Api.get('/comments');
+    }
+
+    getCommentByPostId(id) {
+        return Api.get('/comments?postId='+id);
+    }
+
+    createComment(comment) {
+        return Api.post('/comments', comment);
+    }
+
+    updateComment(comment) {
+        return Api.put('/comments', comment);
+    }
+
+    deleteComment(id) {
+        return Api.delete('/comments/'+id);
+    }
+}
+
+export default new CommentsApi();

frontend/src/components/auth/LoginPage.js

@@ -14,20 +14,26 @@ class LoginPage extends Component {
     async register(registrationData) {
         const registerSuccess = await Auth.register(registrationData);
         if (!registerSuccess) {
-            alert("Couldn't register check credentials and try again");
+            alert("Couldn't register.  Please check credentials and try again");
         }
     }
 
     render() {
         return (
+
             <div className="wrapper">
                 <div className="container">
                     <div className="row mt-4">
                         <div className="col-md-6 " style={{color: "white"}}>
-                            <h1>SDA 6</h1>
-                            <p>Starter template</p>
+                            <img class="authLogo" alt="No2ProLogo" src="logo192.png" />
+                            <h1>From Nogrammer to Programmer</h1>
+                            <h2>A Forum for Those Learning to Code</h2>
+                            <p>
+                                Welcome to No-2-Pro, a safe space where you can vent
+                                the pains and gains of your personal journey into the
+                                world of programming.
+                             </p>
                         </div>
-
                         <div className="col-md-6">
                             <div className="row">
                                 <div className="col-12  strong-shadow">

frontend/src/components/chat/ChatPage.js

@@ -4,8 +4,71 @@ import React, { Component } from "react";
 class ChatPage extends Component {
     render() {
         return (
-            <div>
+            <div id="contentchat" className="card">
+                <div className="card-body">
+                    <h3 className="card-title"> How to Become a Programmer!</h3>
+                    <p>This guide does not promise to give a magically way to becoming a programmer,
+                       but you will get a general outline.</p>
+                    <ol>
+                        <li>
+                        <h4> Why do you want to learn programming? </h4>
+                        <p> The first and one of the most important steps on how to become a programmer is identifying your reasons for starting.
+                            Do you want to turn it into a career? Do you have a project or concept that you want to turn into a reality on your own?
+                            Or do you simply want to learn how to be a programmer because it’s something that’s ‘cool’ at the moment?
+                            Answer honestly, because the language that you choose to learn will depend on your answer to this question. </p>
+                        </li>
 
+                        <li>
+                        <h4> Decide What Field You Want To Go Into </h4>
+                        <p> There are a variety of different types of programming. When you are figuring out how to learn programming,
+                            you need to think very carefully about what field you are planning on looking for work in.
+                            Some of the most popular types of programmers include: Web developers, Software programmers, Data scientists,
+                            Database Administrator, Mobile app development. </p>
+                        </li>
+                        <li>
+                        <h4> Learn A Programming Language </h4>
+                        <p> Once you have settled on a programming field, you need to learn the languages that are relevant to that field.
+                            For example, you will need SQL to become a database administrator, CSS, and JavaScript to become a front-end web developer,
+                            and something like Java or Swift if you want to start building mobile apps. </p>
+                        </li>
+                        <li>
+                        <h4> Practice, Practice & Practice Some More </h4>
+                        <p> So you want to know how to become a programmer right? Well, here’s a little secret for you:
+                            You have to practice. You have to practice a lot! </p>
+                        </li>
+                        <li>
+                        <h4> Start Building A Portfolio Of Work </h4>
+                        <p> While you are practicing, you need to start building a portfolio.
+                            Want to know how to become a computer programmer?
+                            Well, one of the keys is having a decent portfolio that you can show to prospective employers.
+                            When you go to apply for a job as an entry-level programmer,
+                            remember that there are probably at least a few other people who are applying for the same job.
+                            You need to do something that makes you stand out above and ahead of the crowd.
+                            A portfolio is a great way to do this. </p>
+                        </li>
+                        <li>
+                        <h4> Apply For Jobs </h4>
+                        <p> By now you’re well on the way to learning how to be a good programmer.
+                            You have picked a programming field, you have started to learn the skills and programming languages that you will need,
+                            and you have started practicing writing your code. You have put together a portfolio that showcases all of your work,
+                            and you have (hopefully) crafted a new resume.
+                        </p>
+                        </li>
+                        <li>
+                        <h4> Never Stop Learning! </h4>
+                        <p> As you can imagine, programming is a rapidly developing field.
+                            Learning how to become a programmer today won’t necessarily give you the skills that you need to remain
+                            a good programmer for the next few decades. You need to keep learning new skills and new languages.
+                        </p>
+                        </li>
+                    </ol>
+                    <ul>
+                        <li><a href="https://www.bitdegree.org/tutorials/how-to-become-a-programmer/">
+                            how-to-become-a-programmer</a></li>
+                        <li><a href="https://www.wikihow.com/Become-a-Programmer">
+                            Become-a-Programmer</a></li>
+                    </ul>
+                </div>
             </div>
         );
     }

frontend/src/components/comments/CommentCard.js

@@ -0,0 +1,41 @@
+import React from "react";
+import CommentForm from "./CommentForm"
+
+function CommentCard({post, onCommentClick}){
+        const [isCommentDisplayed, setIsCommentDisplayed] = React.useState(false);
+
+        const [commentBody, setCommentBody] = React.useState("");
+
+        const handleComment = () => {
+                // Invoke the passed in event callback
+                onCommentClick({commentBody: commentBody});
+
+                // Clear the input field
+                setCommentBody("");
+         };
+
+
+    return (
+        <div className="card mt-3">
+            <div className="card-body">
+
+                { isCommentDisplayed ?
+                    <div className="form-group">
+                    <CommentForm></CommentForm>
+                    </div>
+
+                    : ""
+                }
+                <button
+                   className="btn btn-primary"
+                   onClick={() => setIsCommentDisplayed(true)}>Comment
+                </button>
+            </div>
+
+
+
+        </div>
+    );
+}
+
+export default CommentCard;

frontend/src/components/comments/CommentForm.js

@@ -0,0 +1,39 @@
+import React from "react";
+import CommentsApi from "../../api/CommentApi";
+
+
+class CommentForm extends React.Component {
+	state = {
+		body: "",
+	}
+
+	async handleComment() {
+
+		const commentData = {
+			body: this.state.body,
+		}
+
+		const commentResponse = await CommentsApi.createComment(commentData);
+		const comment = commentResponse.data;
+
+	}
+
+	render() {
+		return (
+			<div className="form-group">
+                                     <textarea
+                                         className="form-control"
+                                         value={this.state.body}
+										 onChange={e => this.setState({body:e.target.value})}/>
+										 <br/><br/>
+                                     <div className="form-group">
+                                         <button className="btn btn-primary"
+                                             onClick={()=>this.handleComment()}>Save Comment
+                                         </button>
+                                     </div>
+            </div>
+		)
+	}
+}
+
+export default CommentForm;

frontend/src/components/comments/CommentList.js

@@ -0,0 +1,16 @@
+import React from "react",
+import CommentsApi from "./../api/CommentApi";
+
+
+class CommentsList extends React.Component{
+
+	render() {
+		return (
+			<h5>Comments</h5>
+			{
+				this.props.comments.map(
+					comments => comment.name + ",")
+			}
+		)
+	}
+}

frontend/src/components/comments/CommentPage.js

@@ -0,0 +1,43 @@
+import CommentForm from "./../../../../CommentForm.js";
+import CommentList from "./../../../../CommentList.js";
+import CommentsApi from "./../api/CommentApi";
+
+class PostPage extends React.Component {
+	state = {
+		comments: [],
+	}
+
+	refreshComments() {
+		CommentApi.get("comments")
+			.then((response) => {
+				const comments = response.data;
+
+				this.setState({comments})
+
+			})
+
+	}
+	componentDidMount() {
+		console.log(newTask.name)
+		this.refreshTasks();
+
+	}
+
+	handleNewComment(newComment) {
+		this.refreshTasks();
+	}
+
+	render() {
+		return(
+			<div>
+				<h1>TaskPage</h1>
+
+					<PostCard/>
+					<CommentList tasks={this.state.comments}/>
+					<CommentForm onNewCommentCreated={(comment) => this.handleNewComment(comment)}/>
+			</div>
+		);
+
+	}
+
+}

frontend/src/components/home/HomePage.js

@@ -3,21 +3,21 @@ import React, { Component } from "react";
 class HomePage extends Component {
     render() {
         return (
-            <div className="card">
-                <div className="card-body">
-                    <h4 className="card-title">SDA 6 starter template</h4>
-                    <p>This starter template is based on Spring, PostgreSQL, React, React router and Axios. Check the following links for documentation and guides:</p>
-                    <ul>
-                        <li><a href="https://spring.io/projects/spring-boot">Spring</a></li>
-                        <li><a href="https://www.postgresql.org">PostgreSQL</a></li>
-                        <li><a href="https://reactjs.org">React</a></li>
-                        <li><a href="https://reacttraining.com/react-router/web/guides/quick-start">React Router</a></li>
-                        <li><a href="https://github.com/axios/axios">Axios</a></li>
-                    </ul>
-                </div>
-            </div>
+                    <div className="card" id= "content">
+                        <div className="card-body" >
+                            <h4 className="card-title">Welcome to Nogrammer to Programmer!</h4>
+                            <p>We are a group of students in Stockholm fighting off the winter cold by learning how to program. We built this site with Spring, PostgreSQL, React, React router, Axios, and other goodies. Check the following links for documentation and guides:</p>
+                            <ul>
+                                <li><a href="https://spring.io/projects/spring-boot" target="_blank">Spring</a></li>
+                                <li><a href="https://www.postgresql.org" target="_blank">PostgreSQL</a></li>
+                                <li><a href="https://reactjs.org" target="_blank">React</a></li>
+                                <li><a href="https://reacttraining.com/react-router/web/guides/quick-start" target="_blank">React Router</a></li>
+                                <li><a href="https://github.com/axios/axios" target="_blank">Axios</a></li>
+                            </ul>
+                        </div>
+                    </div>
         );
     }
 }
 
-export default HomePage;
+export default HomePage;