diff --git a/README.md b/README.md index 2e07c3c..fdc8785 100644 --- a/README.md +++ b/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 diff --git a/frontend/public/blueswirly.png b/frontend/public/blueswirly.png new file mode 100644 index 0000000..549bb96 Binary files /dev/null and b/frontend/public/blueswirly.png differ diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index c2c86b8..8a7d17a 100644 Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ diff --git a/frontend/public/index.html b/frontend/public/index.html index 79aed2b..07ff2bb 100644 --- a/frontend/public/index.html +++ b/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`. --> + + diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png index fa313ab..5803790 100644 Binary files a/frontend/public/logo192.png and b/frontend/public/logo192.png differ diff --git a/frontend/src/App.css b/frontend/src/App.css index e5652f0..b5f2ea2 100644 --- a/frontend/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/frontend/src/api/CommentApi.js b/frontend/src/api/CommentApi.js new file mode 100644 index 0000000..c574208 --- /dev/null +++ b/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(); diff --git a/frontend/src/components/auth/LoginPage.js b/frontend/src/components/auth/LoginPage.js index b28aef1..6a423c9 100644 --- a/frontend/src/components/auth/LoginPage.js +++ b/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 ( +
-

SDA 6

-

Starter template

+ +

From Nogrammer to Programmer

+

A Forum for Those Learning to Code

+

+ 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. +

-
diff --git a/frontend/src/components/chat/ChatPage.js b/frontend/src/components/chat/ChatPage.js index 90a07fd..1867fd5 100644 --- a/frontend/src/components/chat/ChatPage.js +++ b/frontend/src/components/chat/ChatPage.js @@ -4,8 +4,71 @@ import React, { Component } from "react"; class ChatPage extends Component { render() { return ( -
+
+
+

How to Become a Programmer!

+

This guide does not promise to give a magically way to becoming a programmer, + but you will get a general outline.

+
    +
  1. +

    Why do you want to learn programming?

    +

    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.

    +
    2. +
  2. +

    Decide What Field You Want To Go Into

    +

    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.

    +
    3. +
  3. +

    Learn A Programming Language

    +

    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.

    +
    4. +
  4. +

    Practice, Practice & Practice Some More

    +

    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!

    +
    5. +
  5. +

    Start Building A Portfolio Of Work

    +

    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.

    +
    6. +
  6. +

    Apply For Jobs

    +

    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. +

    +
    7. +
  7. +

    Never Stop Learning!

    +

    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. +

    +
    8. +
+ +
); } diff --git a/frontend/src/components/comments/CommentCard.js b/frontend/src/components/comments/CommentCard.js new file mode 100644 index 0000000..9091240 --- /dev/null +++ b/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 ( +
+
+ + { isCommentDisplayed ? +
+ +
+ + : "" + } + +
+ + + +
+ ); +} + +export default CommentCard; \ No newline at end of file diff --git a/frontend/src/components/comments/CommentForm.js b/frontend/src/components/comments/CommentForm.js new file mode 100644 index 0000000..0c0ceda --- /dev/null +++ b/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 ( +
+